I need some help with this button styling ,
see link (clikc on edit code)
enter link description here
as you can see is the add to cart text out of line ... and does the 'imput' command fill up my button.
how can i center the text back into the button?
width: 100%;
}
please advice
thanks,
There are a lot of errors and bad tag formatting in your code. Tags should also not overlap (first open, last closed), like in the following part of your code:
</div>
</button></h2>
</div></div></body></form></button>
This not valid formatting.
Each tag has a specific use, for example:
<h2> tags are used to define second HTML headings of a page.
They should not contain anything else than the title of the section they define.
The closing body tag </body> can't be followed be any by anything except </html> tag.
You should probably rewrite the whole thing.
I would like to remove the automatic text that appears when the cursor hovers over the jumplink. The text is usually the name of the post title that its directing to. However I would like to remove it. I've tried removing certain parts of the following code for the jumplink but to no avail. The coding is as follows:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Any help will be appreciated. The URL to the blog is as follows: http://www.blankesque.com
The browser will show what is inside your title attribute automatically.
There is a good reason for that.
Sometimes you have an image on you web site and for any reason will not display or your site is loading to slowly.
In place of your image you than can see the value of the title attribute (or the alt attribute in very old browsers), so the user will not see a complete empty space
So if you can miss the title attribute just deleted or set his value to ="".
There are also other solutions for this, but seen you don't know much about attributes, seems to me not appropriate.
Remove the expr:title='data:post.title' part from the <a> tag in the code.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
I know you haven't got javascript tagged but I tried css and couldn't get a solution and the only way I found was JS, I'll keep trying though
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++){links[i].title="";}
this won't show the title<br><br>
This won't show the title
I am a newbie to html and css so sorry if this sounds dumb.
How do I create a clickable area that contains two images, text, and whitespace that when clicked, opens ANOTHER html file within the page?
So far I got an html file to appear inside an html file like this:
<object data=EXAMPLE.html width=100% height=100% /> Error </object>
But the problem with that is that you must scroll within the content box to view it, and I would prefer if it expanded the content box indefinitely downward based on how big the html file was.
As #Jarred Farrish pointed out: Regular frames do what you describe. You don't need object elements.
I believe this question becomes a duplicate of this question.
You can make a "button" by creating a div, placing the other elements within the div, and setting an onclick handler on the div itself. You are free to have as much "empty" space, because the emptiness is really the div.
<div class=my_button onclick=my_button_press();>
<img src="..."></img>
<img src="..."></img>
<span class=my_text>My text here</span>
</div>
<iframe id=my_frame></iframe>
<script>
function my_button_press() {
document.getElementById('my_iframe').src = "...";
}
</script>
Check this example http://jsfiddle.net/b6sdunqj/1/.
You'd want to combine the instruction in the question referenced above with my_button_press() to complete everything.
I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:
<div>
<p>Contents</p>
<ul>
<li>Map</li>
<li>Timing</li>
<li>Timing Details</li>
</ul>
</div>
And they should be linking to:
<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>
Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.
Any idea why this isn't working?
Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,
Map
<a name="map">[content]</a>
An enclosing div is not necessary, if not used for other purposes.
Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:
1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:
Go to Map <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->
Demo: http://jsbin.com/feqeh/3/edit
2.Only use <a> tags with the name attribute as anchors.
This will allow the on-page links to work in all browsers.
what happened with me is that the href does not work second time and that because I should Remove hash value first,,
take look how I resolved it
go to Content 1
function resetHref() {
location.hash = '';
}
Just resurrecting this post because I had a similar problem and the reason was something else.
In my case it was because we had:
<base href="http://mywebsite.com/">
defined on the .
Obviously, don't just remove it, because you need it if you are using relative paths.
Read more here:
https://www.w3schools.com/tags/tag_base.asp
Content 1
Content 2
Content 3
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3
When clicking on "Content 1" it will take directly to "Text here for Content 1.
Guaranteed!
Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.
Same requirement: links that go to a section of the page.
It worked on my desktop's Chrome and Firefox, but not on my client's and neither on my Android's Chrome.
After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:
a container with an id, and
an anchor with a name property,
The most important part is that the anchor tag with a name, must have content inside of it.
So, you have your links
Go to section
<!-- more links -->
And you have the sections you want your links to go to
<div id="page-section">
<a name="page-section" class="collapse"> placeholder-content (important) </a>
<!-- your section content -->
</div>
Since you MUST have content inside the anchor with the name, you can then hide it in several ways.
My approach was to just set it's height to 0.
In order for the height to be effective, the anchor tag's display property should be set to block or inline-block for example.
.collapse {
height: 0px;
overflow: hidden;
display: block;
}
Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web...), and all the people who answer questions like this and share their knowledge.
This might help
JS:
function goto($hashtag){
document.location = "index.html#" + $hashtag;
}
HTML :
<li><a onclick="goto('aboutus')">ABOUT</a></li>
In my case The input tag was the problem. I implemented my tabs by input (radio buttons) which was preventing the anchor tag's behaviour.
It was like this at first (not working):
<a href="#name">
<li>
<label></label>
<input></input>
</li>
</a>
Then I removed the input tag and it worked:
<a href="#name">
<li>
<label></label>
// <input></input> <!-- removed it -->
</li>
</a>
Make sure you're not using preventDefault in javascript
Here is something that I finally got to work in IE, Chrome and Firefox.
Around any text create an anchor tag like this:
<a class="anchor" id="X" name="X">text</a>
Set "X" to whatever you want.
You must enclose something in the anchor tags such as text or an image. It will NOT work without these.
For the link, use this:
text
As for getting rid of the CSS for links using our anchor tag use something like this:
a.anchor {
color:#000;
text-decoration:none;
}
This seems to work well.
I'm looking to customise the CSS of a site I regularly use.
My question relates to a title tag of an element (below).
<span title="42%" class="progress"><span style="width: 42%;" class="indicator">
</span></span>
I'd like to take this title tag (42% in this case, but changing dynamically) and display it as text using CSS.
The tricky part obviously comes from the fact that this unit changes dynamically.
Is there a way to say 'display the unit inside the title " " as text' using CSS.
Thanks in advance, all help appreciated.
Tom Perkins
If you mean displaying the title attribute along with your existing text/elements instead of as a custom-designed tooltip, some browsers support the CSS attr() function:
.progress:after {
content: attr(title);
}
See this jsFiddle example.
As said here:
http://groups.google.com/group/css-design/browse_thread/thread/3c3194dd0a3c7898
"The presentation of the title as a tooltip is a function of the
browser and is not controlled by HTML or CCS. "
You can follow the links there to see some fixes for that