Css nav text problem

Printable View

Sep 6, 2012, 07:07
ameerulislam

Css nav text problem

http://img209.imageshack.us/img209/8959/navgdg.png

To convert the above nav to css from psd, I have written the following code

Code:

#container #header #top #top_nav { height: 99px; width: 750px; float: right; text-transform: uppercase; font-size: 16px; font-style: normal; font-weight: normal; color: #e1e6e9; } #container #header #top #top_nav ul { list-style-type: none; } #container #header #top #top_nav ul li { display: inline; }

This is what I got..
http://img7.imageshack.us/img7/357/currentnav.png

I'm not sure how to do the lower part "start here" "who I am"

they are in lower case and how can I do 2 types of <ul><li> in one div or should I make 2 divs?

And what about the borders between them, how do I create them?

Thanks!
Sep 6, 2012, 07:13
ralph.m

You need to post your HTML too. :)
Sep 6, 2012, 10:52
COBOLdinosaur

You should not need the text-transform the text in the HTML should be done in upper case. There is no border because you have not specified one, and there is no mouse over effect because you have not specified a hover rule. From the look of it I would say the structure in the HTML is not correct, but we need to see the HTML to know what the problem is.
Sep 6, 2012, 11:17
dresden_phoenix

This is pretty standard.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> .nav {margin:0; padding:0} /* part of your reset*/ .nav {float:right; background: pink; list-style:none;} .nav li{ float:left;} .nav li+li{border-left:1px dashed #FF0} .nav li a{ padding:.6em; color:#fff; text-decoration: none; display: block;} .nav li a span{ display:block; padding-bottom: .125em; text-transform: uppercase; } .nav li a:hover{background: orange} </style> </head> <body> <ul class="nav"> <li><a href="#"><span>Home</span> start here</a></li> <li><a href="#"><span>About</span> who I am</a></li> <li><a href="#"><span>Sevices</span> What I can do</a></li> <li><a href="#"><span>Blog</span> Design Articles</a></li> </ul> </body> </html>

hope that helps.
Sep 6, 2012, 21:42
ameerulislam

Code:

#container #header #top #top_nav { height: 99px; width: 750px; float: right; text-transform: uppercase; font-size: 16px; font-style: normal; font-weight: normal; color: #e1e6e9; } #container #header #top #top_nav ul { list-style-type: none; } #container #header #top #top_nav ul li { display: inline; }

sorry guys, this is the html

HTML Code:

<div id="top_nav"> <ul> <li>Home </li> <li>About </li> <li>Services </li> <li>Portfolio </li> <li>Blog </li> <li>Contact</li> </ul> <ul> <li>start here</li> <li>who I am</li> <li>what I can do</li> <li>previous works</li> <li>previous works</li> <li>design articles</li> <li>get in touch</li> </ul> </div> </div>
Sep 6, 2012, 21:55
jylan

dresden_phoenix has the solution just above your post.

The subtitles (start here, who I am, etc) shouldn't be in a separate list. Instead, each subtitle should be in the same li as the main link.
Sep 6, 2012, 22:12
ameerulislam

ok tx, let me try to figure out dresden_phoenix 's code, I'm in this that's why I couldn't understand his code that much.

Quote:

Originally Posted by jylan

dresden_phoenix has the solution just above your post.

The subtitles (start here, who I am, etc) shouldn't be in a separate list. Instead, each subtitle should be in the same li as the main link.
Sep 6, 2012, 22:28
ameerulislam

Home and the subtitle start here are coming in online. I did set the box display as inline before. So how to solve it keeping it inline? or I can't keep it inline anymore? This is why I made separate list earlier.

http://img809.imageshack.us/img809/9386/navpink.png
Sep 7, 2012, 04:00
ralph.m

Quote:

Originally Posted by ameerulislam

Home and the subtitle start here are coming in online. I did set the box display as inline before. So how to solve it keeping it inline? or I can't keep it inline anymore?

Keep us up to date with the code you are using. Do you have a live link to this? If not, at least post the code you are currently using.
Sep 7, 2012, 06:41
ameerulislam

Quote:

Originally Posted by ralph.m

Keep us up to date with the code you are using. Do you have a live link to this? If not, at least post the code you are currently using.

that one actually was dresden_phoenix's code.
Sep 7, 2012, 06:42
ameerulislam

Quote:

Originally Posted by ameerulislam

that one actually was dresden_phoenix's code.

Why can't I upload images here? Its a pain to upload in a third party image hosting site then linking to that from here.
Sep 7, 2012, 06:43
ralph.m

1 Attachment(s)

Quote:

Originally Posted by ameerulislam

that one actually was dresden_phoenix's code.

If you put his code into a .html file, this is what you should see:

Attachment 60614

Have you changed the code at all? What browser are you using?
Sep 7, 2012, 07:01
ameerulislam

Quote:

Originally Posted by ralph.m

If you put his code into a .html file, this is what you should see:

Attachment 60614

Have you changed the code at all? What browser are you using?

I guess it must have overlapped with some other codes in my document. May be if I had tried in a separate document it would the above result would have appeared. I think I should try it separately.

Thanks

p.s. using chrome
Sep 7, 2012, 07:08
ralph.m

Quote:

Originally Posted by ameerulislam

I guess it must have overlapped with some other codes in my document.

Yes, that's likely. Start with just this and add bits in gradually, to see what puts it off ... or use right click > Inspect Element to see what rules are overriding the ones D_P gave you.

I'm using Chrome too.