Css nav text problem

**ameerulislam** · Sep 6, 2012 07:07

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..

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!

**ralph.m** · Sep 6, 2012 07:13

You need to post your HTML too.

**COBOLdinosaur** · Sep 6, 2012 10:52

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.

**dresden_phoenix** · Sep 6, 2012 11:17

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.

**ameerulislam** · Sep 6, 2012 21:42

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>
    <!--end of top Div-->

**jylan** · Sep 6, 2012 21:55

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.

**ameerulislam** · Sep 6, 2012 22:12

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.

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.

**ameerulislam** · Sep 6, 2012 22:28

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.

**ralph.m** · Sep 7, 2012 04:00

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.

**ameerulislam** · Sep 7, 2012 06:41

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.

**ameerulislam** · Sep 7, 2012 06:42

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.

**ralph.m** · Sep 7, 2012 06:43

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:

D_P.png

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

**ameerulislam** · Sep 7, 2012 07:01

Originally Posted by ralph.m

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

D_P.png

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

**ralph.m** · Sep 7, 2012 07:08

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.

User Tag List

Thread: Css nav text problem

Thread Tools

Display

Css nav text problem

Bookmarks

Bookmarks

Posting Permissions