Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hello as you can see here i have a in line li navigation with | in between each word/button however, these are not css i just typed them in.
So when i do a validation it doesnt like them and when you look at them in IE they butt right up against the word they come after.
So how can i do them in css? So they wont butt up against the word and will validate because they will be css? I tried with border left sided etc but this does not work as they go down to the bottom of the grey when i just want them as they are now just slightly bigger than the font.
Anyone help me out?
Cheers -
Maybe I am just having a slow day -- but this does seem a bit difficult. It would be easy except for that bottom border on the hover effect. You would obviously have to play with your margins/padding on the LI or LI A to get this to work and the bottom red bar has to be applied on the LI A:HOVER (for IE) -- so anything applied to the LI or LI A will be pushed down just as far as the hover border (which is flush with the bottom of the grey box) -- loosing the gap on top and bottom of the "|" (pipes) that you desire.
You could easily put your text in a SPAN (ex: <li><a href="#"><span>whatever</span></a></li> and give the LI A SPAN a border for your pipes. Just set the margin of the top/bottom to the size of the gap you desire.
Am I over-thinking this? I feel as though I am ... someone jump in with a 5 second solution that I obviously over looked? -
Why not just this:
<ul>
<li><a href="#">Link 1</a></li>
<li>|</li>
<li><a href="#">Link 2</a></li>
<li>|</li>
<li><a href="#">Link 3</a></li>
</ul> -
Personally I find that worse than using an extra <span>. The "|" isnt content, so it shouldnt be listed in a list of content. You would ideally have the pipes in the CSS to fully seperate presentation from mark-up.
You could always absolutly postion the LI A relative to the LI -- that way the border applied to the LI wouldnt be effected by the LI A margin/padding. Again, that seems like more work than what is/should be necessary. -
- CommentAuthorseth.aldridge
- CommentTimeJul 5th 2006
http://www.dynamicdrive.com/style/csslibrary/item/vertical-divider-menu/
That is a tutorial on what you're looking for. -
I dont think this really helps with this particular situation.
Well it does but it is sort of cheating. Notice that their background image is a set height -- the only way they could mimic the padding on the top and bottom was to simply center a small image vertically and not have it repeat. I would call this less than ideal.
1 to 6 of 6