dresden_phoenix:
OK I didnt want to overwhelm, but here is the process behind my ADDITIONAL improvements, as well some extra suggestions.
in order to be able to use text-indent the element must be BLOCK LEVEL. By default anchor tags (A) are inline. When you floated the A you were able to use text-indent ( because floated elements BECOME block-level). Of course you dont need to float something JUST so that it becomes block level… you can declare it directly using display:block. this has a couple of added advantages I’ll get to next.
a block level element is, by default, the width of it’s parent. So with A as a block you don’t need to declare it width concurrently with its container anymore.
Speaking of which, UNLESS otherwise declared, containers will expand to… well… contain their descendant elements(padding… and in most cases margins, tho one has to be careful with margin collapse) so by declaring the height in of the anchor tag ( we can do that when the A tag is displayed as a block and not floated) the container div (.stripes) will expand to match)
ASIDE: When you DO float an element it is taken out of the normal flow… so the parent element thinks its not even there. So you end up having to do something to clear or contain it some how ( Such as, floating the parent also, or declaring a height… but that seem convoluted compared to the THOUGHT process I am outlining)
4) now that everything is naturally matching, we really needed the two images ( which is why I got rid of the other background declaration) the rest of the process becomes… ahem… transparent. UGH… sorry couldn’t resist.
In short, you could have achieved what you asked by simply incorporating “hiding then appearing” into your code, the rest is just streamlining your style. “Less is more”, as they say.
Thanks Ray! I had no idea that CSS was that intricate. I had been using declarations loosely without realizing the potential for such repercussions. I was just adding blocks, floats, etc. to IDs and classes simply with the way it looks in mind–exactly like you noticed in a previous thread of mine:
The first mistake you made was common , so no worries, and that is to code TRYING to make it LOOK some way rather than using semantics. The CSS part is just experience, that will come soon enough
And now I am seeing more and more why this method I have been using only forms a very shaky, un-solid foundation.
But I suppose my knowledge of the ins and outs of using different declarations will get better with experience? Do you reckon that my taking the time to study each individual declaration variable would help me more quickly advance my knowledge in this?
Thanks!