I am confused by what you mean mby multiple divs? Actually I am just confuse that you need so many unsemantic elements. BTW , unless you are using HTML5 you cant wrap an A tag around a DIV ( tho that isnt the cause your problem). Still you shouldn’t change those inner DIVs to SPANs. Inline CSS is probably conflicting there too ( also not good practice, even if it isnt the cause of your problem) . Also you cant give position:absolute to something that has display:table-cell. (not that all rules in your inline style will be honored, since you have ‘#’ in front of several of them). You also forgot to close the UL of your sub-menu.
So, multiple dives because you have too many elements on your markup. As far as getting perfectly round circles,
I hate to say it but at this point I would scrap the whole thing.
Yes, lots o unnecessary divs and things there. You could just do a normal dropdown setup, with the <a> in the lop level LIs set to display: block and rounded corners on them.
I seriously suspected my code wasn’t so efficient, but I had no idea just how terribly horrendous it was! My code (if you want to call it that) was light years away from yours. By the looks of how terrible my code was, you would think I got dropped here from another planet where CSS doesn’t exist! I didn’t even get the CSS commenting right! What an insult to CSS!
Thanks so much dresden! I have been analyzing your code over and over again, trying to learn as much from it as possible. I’m still quite befuddled as to the reason for my coding CSS/HTML so incorrectly. I never learned CSS or HTML for that matter, in a structured manner, but rather learn the relevant methods for whatever it is that I am trying to do–perhaps this is the issue? Do you, or anyone else, have some tips for me as to how I can seriously, seriously improve–maybe not quite as good as your level, but at least half your level?
Again, thanks so much! You have made me see the CSS/HTML light–now I just have to figure out how to shine that light instead of just looking at it.
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
Explaining what I did:
Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width… so unless you measured the text exactly(another thing you SHOULDN’T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text… but since everything was one or two words… that was unlikely to happen.
Since we eliminated the extra tags, the problem with the dual borders on hover was automatically solved.
but rather learn the relevant methods for whatever it is that I am trying to do–perhaps this is the issue?
it could be. You will come to realize that is a really bad idea to write CSS piecemeal. What ever you do to one thing affects all things in the cascade , so a method that may solve your immediate issue may cause something else down the line. Thus the most effective frame of mind is to keep things simple and to think of the WHOLE code rather than one problem at a time.
Hope that sheds a little light on the subject , for you.
How about if the text in the circle does wrap? Would the best way to do this be to omit line-height and then use span for non-wrapped lines and a div for wrapped lines like the following?
Sorry, just one correction to my above post (too late to edit my previous post): one span for non-wrapped lines and a separate span for wrapped lines like the following?
Getting rid of the line height is not the solution tho, that only worked because of the mathematics of this specific case. That’s CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you’d end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that’s not good.
so here is the trick: #menu a>span { line-height: 1;display: inline-block;vertical-align: middle} #menu a:after { content: “”; display: inline-block; height:106px;vertical-align: middle}
and the explanation:
a>span ( is so we dont have to use a class name, as it automatically targets any span that is a DIRECT child of the anchor link.)
{#menu a>span { line-height: 1;display: inline-block;} set the lineheight back to normal within the span, and gives that element a display of inline-block…which acts just like it sounds… this means we can align it vertically with another inline element.
where do we get that extra element? We use a:after{content:“”} to create it.
we give it a display of inline-block; and a height that’s the same as the height of your circle… and that gives us the effect we wanted; the text will automatically align vertically to any # of lines or font size.
I hope that sheds more light on the subject.
The semi-colon is a separator, not a terminator, so strictly speaking it’s unnecessary after the final declaration. I always include it, because I might want to add another rule later and, knowing me, will probably forget to put the semi-colon in first.
So it looks like in regards to the semi-colon, CSS isn’t too much different than the English language.
oooh I like that!
But yeah, I was kinda busy… so I was being lazy, since it is allowed on CSS. It is good practice to end all your declarations with “;” IF ONLY because that way you can add more declarations to your rules later w/o having to worry about starting from a “;”
That’s CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you’d end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that’s not good.