Centralising the navigation bar

Forum Moderators: not2easy

Message Too Old, No Replies

Centralising the navigation bar

Jamier101

2:30 pm on Oct 9, 2010 (gmt 0)

I don't seem to be able to get the navigation to centralise, it looks like it is when its in Dreamweaver but when I open it in a browser it floats left like its set to, is there anyway I can get it to start from the centre and float either way equally?

Stylesheet


#navigation {
width:auto;
height:auto;
background-color:#999999;
}

#navigation ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#navigation li {
float:left;
}

#navigation a:link,a:visited {
display:block;
width:127px;
font-weight:bold;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:2px;
text-decoration:none;
text-transform:uppercase;
}

#navigation a:hover,a:active {
background-color:#333333;
}

enigma1

3:37 pm on Oct 9, 2010 (gmt 0)

You need a fixed width for your container somewhere to center it.
eg:

<body>
<div style="width: 100%;">
<div style="width:100px; margin: 0 auto;">
<div>Center</div>
</div>
</div>
</body>

So the outer takes the full screen then the inner specifies 100px its children and the margin 0 auto centers it. That's for block elements. for inline use:
text-align: center;

Best to use a plain text editor to setup html for testing.

Major_Payne

2:13 am on Oct 11, 2010 (gmt 0)

You can not center anything when your container is set to a 100% width. To center anything within an element, you must set a width less than 100% and use only floats where absolutely necessary as they remove that element form the document flow.

Example:


body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

"body" can be any selector name used with a div: #wrap

Ron

Major_Payne

2:14 am on Oct 11, 2010 (gmt 0)


body {
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

"body" can be any selector name used with a div: #wrap

Ron