simple css question!

[qqg3]

On my webpage I want a simple navigation bar in the top right corner, all on one line. So in the html it is defined like this

<div id="nav">
<ul>
<li>
<h1>menu link 1</h1>
</li>
<li>
<h1>menu link 2</h1>
</li>
</ul>
</div>

And the nav in the stylesheet looks like this

#nav {
background:#a31e39;
width:20%;
margin: 20px 0 0 800px;
}

Now, from what I can tell, I need to force <li> to be inline as oppose to block. So I've found this can be done using

li {
display:inline;
}

But where the hell do I put that? so that it effects the list items as in the html segment. All the examples I have found use this code in a <style></style> section put at the top of a html page. I don't want that, I want to do this through the stylesheet.

Its basic stuff I know but your help is appreciated!

 

[mr.sly]

You just need to put the code in the same stylesheet as the #nav code.

I don't think you can create an inline menu using a percentage, so you'll have to change it to a pixel measurement.

Something like this would work...

#nav {
width:500px;
margin: 20px;
}
#nav li {
float: left;
display: inline;
}

And instead of using margin:20px 0 0 800px to push the content off to the right, you should either float it...

#nav {
float: right;
width:500px;
margin: 20px;
}
#nav li {
float: left;
display: inline;
}

or use absolute positioning...

#nav {
position: absolute;
top:0;
right:0;
width:500px;
margin: 20px;
}
#nav li {
float: left;
display: inline;
}

Hope that helps.

 

[CaptainComedy]

as above tried and tested

 

[davestar_delux]

as above tried and tested

I think one is used for classes and another for IDs.

 

[qqg3]

Thanks mr.sly, that worked for me. Thanks also for the tip about placement, will use absolute positioning because of the way the web page is set up (with other floated elements) it gets angry if I float the #nav.