0

Hello, I'm making a website for a friend of mine, located at http://www.theconsolelounge.co.uk/catherine But as you might of noticed, the navigation bar is not doing what it is supposed to be doing, I'm trying to make it fit all onto one line on 800x600, It should do this anyway, but for some reason it won't! It just refuses

here's the #buttons code

#buttons
{
width: 800px;
margin: 0 auto;
padding: 0%;
margin-left: -16%;
4
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by MidiMagic
1

Hello, I'm making a website for a friend of mine, located at http://www.theconsolelounge.co.uk/catherine But as you might of noticed, the navigation bar is not doing what it is supposed to be doing, I'm trying to make it fit all onto one line on 800x600, It should do this anyway, but for some reason it won't! It just refuses

here's the #buttons code

#buttons
{
width: 800px;
margin: 0 auto;
padding: 0%;
margin-left: -16%;

Well I'm not 100% of this but you might try adding floating property to your CSS.

More information:
http://www.yourhtmlsource.com/stylesheets/csslayout.html

Votes + Comments
Helped
1

Best thing would be to purge floats completely but that seems not to be possible because (inexplicably) you lose control of height and width of the li/a elements, at least in IE6 and hence lose some of the visual effect.

Try this:

#menu {
	background:url("images/menubg.gif") repeat-x top;
	height: 163px;
	margin-bottom: 8px;
}

#buttons {
	width: 100%;
	margin: 0 auto;
	padding: 0%;
	position: relative;
	left: 50%;
	margin-left: -325px;
}

#buttons ul {
	padding-top: 126px;
	list-style-type: none;
}

#buttons li {
	display: inline;
	text-align: center;
}

#buttons a {
	display: block;
	float: left;
	width: 126px;
	height: 27px;
	background: url(images/menu.gif) no-repeat;
	text-align: center;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 0 0 0;
	margin-left: 4px;
}

#buttons a:hover {
	background: #FFFFFF url(images/menu_hover.gif) no-repeat;
}

I have only tested in IE6 so recommend testing in other browsers.

I'm sure there must be a simpler solution but can't spot it.

Airshow

Votes + Comments
Useful, informative and tested himself.
0

If you have a border, margin, or padding, it goes OUTSIDE the size attribute. This makes the total width greater than 800px.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.