- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
So I am working on my portfolio site, and have ran across this problem a few times in the past. If I do not use css to have the image as a background, and have the image in the HTML so I can make it scale with the rest of the site, text-indent shifts the image as well.
Jason Penezich Logo
.logo {
float:right;
text-indent: -9999px;
height:133px;
}
So I guess the question is, what is the best way to have an image be scaling while keeping text in a heading for screen readers/good practice? The simple way I am seeing is simply move the image outside of the heading, but I thought I read somewhere that it is best used inside heading tags, as that is where it belongs.
Actually, just solved it myself. I added:
.logo img {
float:right;
max-width:100%;
}
This makes the image leave the flow, while still forcing the heading text to exit the page. However if there is a better way to do this, please feel free to explain.
You might want to look at this: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
and this: http://nicolasgallagher.com/another-css-image-replacement-technique/