Hello,
I wrote a vertical list in html who’s first <li> contains an image and I was wondering how to align that <li> and the other <li>'s so that the the bottom of the image is in-line with where would be if the other elements in the vertical list, which are just text, were written on a line.
So I want the bottoms of each of the items inside the anchors to be aligned. What i mean above by if the text were written on a line was like so. “g”, “p”, “y”, etc have tails or parts of the letter that are underneath the line that letter like “o”, “a”, “G”, "P, “Y”, “e”, etc are just on top of.
I am trying to align the bottom on the image in the first <li> with that line that the letters in the other <li>'s are written on. And I was wondering if someone could help me accomplish this with css.
I think a great example of this is the directory / forums-navigation below on this page or any page in the sitepoint-forums— disregarding the arrows, is essentially exactly what i am trying to accomplish.
How the bottom of the home-icon and the line, the text would be on, are inline.
I hope someone can help me with this or at least some ideas on how to approach this.
If I understand correctly then you wouldn’t really need to do anything as the image will be placed on the baseline by default.
img{vertical-align:baseline;display:inline}
It does of course depend on what else is going on in that line and assumes that the image is an inline element. If the image or parent or the image is floated then the alignment won’t be automatic and you would need to use another method (such as relative positioning to push it up or down a few pixels without changing the flow).
also not sure why you’d want them bottom aligned, as auto-centering them vertically tends to look better; which is why I’d NOT put them in as images and instead attach them with CSS… since to be honest they’re presentational elements that have no business in the markup in the first place!
Pad the anchor on the left, attach them as background:url(image.png) center left; – if you REALLY want them aligned bottom, do ‘bottom left’… with classes to say which icon to use. The MOST I’d consider adding to the markup for tags is a empty sandbag span so you could use CSS sprites so you only have one image file instead of many.
Hmm well if this is just a small image. About the size of the home icon. Does it matter if its a background image or <img />. Are there ant big drawbacks or benefits for an image of that size in those cases?
Also right now since it was a <img /> tag, I used relative positioning and too to put it in place.
But I do have an SVG version of the image as I originally drew it in Illustrator. So I can see one benefit for using css backgrounds I could use svg for maximum and original quality and then imement a php script I made already running on the page to serve other formats if necessary.
The reason I would use SVG and content negotiation for css background d ans not as The <img />tag tag’s source is because caniuse
com says there is more full support for svg in css backgrounds than full support foe svg in <img />.
Do either of you two have reason why not to do the above or reasons why I should do and <img />tag and not a css background or vice versa?
Using background images with CSS sprites means you could have one file instead of many small files for each element (since your demo pic has arrows next to the rest of them) – this means less handshakes to the server and faster load times independent of the file SIZES. It also means putting presentation in your external stylesheet so it can be cached across pages instead of transmitting that big fat IMG tag with every page load. class=“home” is going to be less bandwidth across multiple pages than IMG – much less what would you give it for alt text – good rule of thumb, if you were going to give it empty alt text or alt text identical to the plaintext next to it, and the page is still meaningful without that image, the image is presentational and doesn’t belong in a IMG tag.
That’s semantic markup 101 – presentational images are NOT content, and as such have ZERO business in your HTML if you’re bothering with semantic markup, separation of presentation from content, and leveraging the full advantages of why CSS even exists.
As to SVG on a page – just don’t… compatibility is a joke, it’s not implemented anywhere near the same cross browser, it’s a fat bloated spec that’s going to give you an 11k file for what should be a quarter k .gif. Browser sniffing server side with php over file formats ranks high amongst all the other miserable failures at web development out there… (like browser sniffing with javascript, bloating out pages with jquery for nothing, crapping together pages with css ‘frameworks’, declaring all the text in px metric fonts inside useless/broken fixed width layouts, trying to call Dreamweaver a professional grade tool…)