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 people, this is my first post on this forum, looks like im in the right place though. My question is pretty straight forward. I want to create the same navigation as the one at http://www.cnn.com/ - here is what i got so far: http://www.crazy-ass.com/test.html
what other css do i need to use to make an exact replica of that navigation? thanks in advance for all your help!
-Alex -
Here you go, help yourself...
http://www.thexman.net.nz/test/
It is just one of many ways to tackle what you want, my preference is to use an unordered list. -
thanks so much man! how do i edit the height of the boxes? i tried changing it a few times with no luck.
Alex -
Well, in that example of mine, you would first need to change the 'ul' height attribute, then both the 'li a' height and line-height (keep them both the same if you want the text to remain vertically centered), and in this particular instance, they will need to remain 4px smaller than whatever 'ul' height you specify, in order to retain the grey and white borders.
You might also want to change the 'li a' padding to keep the text evenly placed within it's boxes.
Hopefully that makes sense? -
i firgured it out, now the only thing i can't do is make the navigation bar spam the width of 874px. check the page it's updated with my css/html. thakns again xman!
-
Um... I'm not with you, there, sorry- I still get the original page you had last night with your link.
However, at a guess, you might want to try adding width: 874px; to the 'ul' in the css and see how you get on. -
Aha :o)
Ok, a simple wee tweak you've missed there from my original- the "Login" box needs to have a class of it's own and a float: right; attribute. If you change your html to this:
<li class="login"><a href="#" title="Login">Login</a></li>
and add this to your css:
li.login {
float: right;
}
... you should be all good. -
dude you are the man! thanks for all your help. i'll hit u up in a couple weeks when i put this navigation on a website.
Alex -
No sweat, mate :o)
I'll be around...
1 to 10 of 10