Css nav text problem

HTML & CSS
1

To convert the above nav to css from psd, I have written the following 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!

2

You need to post your HTML too. :slight_smile:

3

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.

4

This is pretty standard.


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

5 
#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

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

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.

7

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.

8

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.

9

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.

10

that one actually was dresden_phoenix’s code.

11

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.

12

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

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

13

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

14

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.