CSS Navigation (Setting Margins)

DJMK4 · 3 Apr 2007 at 13:42

See the screenshot below:

Here is my css

Code:

/* CSS Document */




/*Layout Objects*/
body {
		margin: 70px auto;
		padding: 0;
		background-color: #FFF;
}

#container {
		margin: 0 auto;
		width: 70%;
		min-height: 600px;
		height: 600px;
		background-color:#FFF;
		border:1px solid #000;
}

#banner {
		margin: 2px;
		height: 15%;
		background-color: #FFF;
		border:1px solid #000;
}

#menu {
		margin: 2px;
		height:5%;
		background-color: #FFF;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 74%;
		background-color: #FFF;
		border:1px solid #000;
		overflow: auto;
}

#footer {
		margin: 2px;
		height:3%;
		background-color: #FFF;
		border:1px solid #000;
}
/*End of Layout Objects*/






/*Start Of Navigation*/
#nav ul{
   		padding : 0;
		padding : 5px;
		margin : 0;
		white-space : nowrap;
		background-color: #0000FF;
   
}

#nav ul li{
   		display : inline;
}


#nav ul li a{
   		background-color : #0066CC;
   		color : White;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
}

#nav ul li a:hover{
		background-color : #99CCFF;
		color : #000066;
}
/*End Of Navigation*/

and here is my html

Code:

<body>

<div id="container">
	<div id="banner"></div>
	<div id="menu">
		<div id="nav">
			<ul>
      			<li><a href="">Home</a></li>
				<li><a href="">About Me</a></li>
				<li><a href="">Professional Career</a></li>
				<li><a href="">Contact Me</a></li>
			</ul>
   		</div>
	</div>
	<div id="body"></div>
	<div id="footer"></div>
</div>


</body>

What i want to achive is on the nav div, i want a margin to the very left and very right. How would i accomplish this?

unwashed potato! · 3 Apr 2007 at 14:04

do you want it so that the navigation is centered? or so that each has an even amount of margin between them so that they take up all the space rather then just centered in whatever space is there?

For the first, make a div that simply just contains the nav buttons, and havea margin: 0 auto;

this should "auto"matically add a margin to both right and left so that they are the same size no matter what page size.

DJMK4 · 3 Apr 2007 at 14:21

"or so that each has an even amount of margin between them so that they take up all the space rather then just centered in whatever space is there?"

Thats ideally what i would like.

DJMK4 · 3 Apr 2007 at 17:29

anyone?

RandomTom · 3 Apr 2007 at 17:43

Does this do it? I thought It'd be better to set the background color to the menu div as apposed to the UL. You don't really need the div 'nav' you could just have the <ul id="nav"> but it doesn't really matter.

Try this:

Code:

/* CSS Document */




/*Layout Objects*/
body {
		margin: 70px auto;
		padding: 0;
		background-color: #FFF;
}

#container {
		margin: 0 auto;
		width: 70%;
		min-height: 600px;
		height: 600px;
		background-color:#FFF;
		border:1px solid #000;
}

#banner {
		margin: 2px;
		height: 15%;
		background-color: #FFF;
		border:1px solid #000;
}

#menu {
		margin: 2px;
		height:5%;
		background-color: #00F;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 74%;
		background-color: #FFF;
		border:1px solid #000;
		overflow: auto;
}

#footer {
		margin: 2px;
		height:3%;
		background-color: #FFF;
		border:1px solid #000;
}
/*End of Layout Objects*/






/*Start Of Navigation*/

#nav ul{
		padding : 5px 0;
		margin : 0;
		text-align: center;
		width: 100%;
		
}

#nav li{
   		display : inline;
		list-style-type: none;
}


#nav ul li a{
		background-color : #06C;
   		color : White;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
}

#nav ul li a:hover{
		background-color : #99CCFF;
		color : #000066;
}
/*End Of Navigation*/

any luck??

DJMK4 · 3 Apr 2007 at 18:03

Much Better, thanks