I'm new to web technologies and I'm trying to build a navbar basically copying https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black as a learning tool. This worked fine, until I wanted to have an image with one of the buttons, as in the image at (https://imgur.com/lTbVsVD)
The image seems to cause the text to wordwrap. No image but a ton of text and the field just expands... As soon as there's an image there... it wraps. I've tried a whole bunch of different display styles on various elements... I tried putting the image and the text in the same span, which seemed to make sense to me... But I can't seem to figure out what part of css I'm not getting.
edit: the html part
<ul>
<li>
<a href="#">
<img src="img/account_image.svg" /> Bob Smith
</a>
</li>
<li>
<a href="#">
Home
</a>
</li>
Thanks.
Here is the fiddle updated with proper solution.
https://jsfiddle.net/t10jqmr7/1/
Added width to the <img> tag
Also I added clear-fixing the floating elements.
Related
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
Are either of these valid to make a container with a hover effect become a link? I have six of these on my homepage, addition to a few text links a the top of the page?
I thought wrapping the whole div would work, then thought maybe I just wrap the hover state. Neither worked.
<a href="/organdonor.html">
<img src="/images/console/organdonor.jpg" />
<div class="mask">
<h2>Organdonor.gov</h2>
<p>GOVERNMENT</p>
</div>
</a>
</div>
<a href="/coach.html">
<div id="console_coach" class="view">
<img src="/images/console/coach.jpg" />
<div class="mask">
<h2>Coach</h2>
<p>FASHION</p>
</div>
</div>
</a>
These are both valid according to HTML5. However, please do notice older versions of HTML did not consider non-inline elements as valid child elements of an anchor tag.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
I'm working on an image caption rollover effect for my site and it's pretty much done. I'm using a combination of CSS and jQuery.
It looks something like this...
It works well. The caption appears to the left of the image whenever you mouseover the image.
However, I'm getting a warning in Visual Studio that an h2 tag cannot be placed inside of a label according to XHTML 1.0 Transitional.
Here's the markup I'm working with...
<ul>
<li>
<a href="/controls/27/saturation-rollover-effect">
<label class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</label>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</a>
</li>
</ul>
I've also tried a span in place of the label, and I get the same message. I've also tried a div, but div's are not supposed to be inside of the a tag.
I'd prefer to keep all of this inside of the link like I have it to get the SEO benefit from the text. But I'd also like to be XHTML Transitional compliant, and semantic/meaningful at the same time. Any ideas?
A label is for form elements--not images.
An h2 is acceptable, though you'd typically want to use that for larger blocks of content usually.
HTML5 has introduced figure and figcaption which might be appropriate in this situation:
http://html5doctor.com/the-figure-figcaption-elements/
As for wrapping it in an a tag, that probably doesn't make sense unless the href resolves to a valid URI sans JavaScript. Since it's a roll-over effect, clicking a link woudldn't be applicable.
After a little rethink I came up with something that works and makes sense, I think...
<ul>
<li>
<div class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</div>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</li>
</ul>
I had to break the caption away from the link around the image. Then I added a link around the title of the product (which is probably more useful for SEO anyway). And this is valid XHTML. Thanks to David Thomas and BoltClock for the comments.
UPDATE:
This is live on my site now. It's functional in IE8, but not quite as pretty as it is in IE9, Chrome, or Firefox. And then I might make the thumbnails grayscale for a cleaner look. Overall it seems to work pretty well though... http://www.silverlightxap.com/
I just realised that hiding text is a bad attempt from a thread I just made,
As a sidenote, Google does not like
hidden text, and if you have a lot of
it, it will consider it deceptive
coding. One is probably fine, but
you'd be better off using the alt
attribute on the image tag.
But I sometimes need to use images for navigation link list such as the one below, so I use css image background on <a> tags and hide the actual text in the html using <span>,
<div id="header" class="align-center">
<ul id="menu-header">
<li id="menu-header-home"><span>Home</span></li>
<li id="menu-header-portfolio"><span>Portfolio</span></li>
<li id="menu-header-profile"><span>Profile</span></li>
<li id="menu-header-newsletter"><span>Newsletter</span></li>
<li id="menu-header-blog"><span>Blog</span></li>
<li id="menu-header-shop"><span>Shop</span></li>
</ul>
</div>
is it seriously lack of semantic and 'it will consider it deceptive coding.' as I have used many many hiding text due to replacing text with images?
what should I do instead if I have to use an image for a button and images for navigation link list?
thanks.
Hiding the text also means it'll be missed by some screen readers.
A better way to do this would be either to use text-indent to position the text way off screen, use absolute positioning on the spans to also position them way off-screen, or simply make them visibility: hidden.