Hi
I just want to make sure I am doing the right thing here.
I am using bootstrap with a site, and as my logo is an img, I did this to keep it accessible:
.logo H1{
text-indent: -999em;
}
It worked fine. I found in the bootstrap less file , the new trick :
.hide-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
And it worked too.
However, with both techniques, the H1 was still part of my document ‘flow’ , and interrupting a nav element I was trying to place in the site. I could not figure it out, until I saw that the reason my nav item started half way up the page was thanks to this H1 I had shoot halfway up the road. It was still appearing in the flow and bumping things along.
So I remembered from my study that setting position to absolute takes an element out of the document flow, and it worked.
.logo H1{
text-indent: -999em;
position:absolute;
}
Question is, do I have anything to worry about here, or is it ok. What did I miss, surely this issue has something to do with my markup? It might have been the Jango in the background I don;t know. sorry, I can;t show you my site as it’s hosted on an unbuntu server on my machine and I could not show you if I wanted to as it’s not in prod. Cheers (I read over it hope I am making sense).