I have no idea why this isn't working

[phil88]

I'm trying to create a simple horizontal navigation menu where it has a left image, the middle bit (with the links in it) and a right image, like;

 

Where the light blue, green and yellow represent the navigation bar parts.

 

Here's the code I have at the moment;

 

#navigation {
margin: 0 auto;
}
#nav-left{
background-image: url('images/nav-bg-left.gif');
width: 11px;
height: 24px;
}
#nav-mid{
background-image: url('images/nav-bg-mid.gif');
height: 24px;
width: 140px;
}
#nav-right{
background-image: url('images/nav-bg-right.gif');
width: 11px;
height: 24px;
}

 

And the HTML

<div id='navigation'>
	<div id='nav-left'></div>
	<div id='nav-mid'>
		<a href='#'>Links</a> | <a href='#'>will</a> | <a href='#'>go Here</a>
                </div>
	<div id='nav-right'></div>
</div>

 

Currently it just displays each of the 3 parts below each other, and it doesn't center it either despite having margin: 0 auto; in the #navigation CSS.

 

What am I doing wrong?

[ag3nt42]

well for one thing.. margin:0 auto; means "adsfadfasdjfa;lkjsdf" to CSS

 

you want EITHER margin:0 OR margin:auto; your calling two very different things here..

 

also for margin:auto; to even work for centering elements.. you must give those elements a width..

 

meaning #navigation should have  a width..

 

 

and if you are doing this

 

<div>WILL</div>
<div>Always</div>
<div>Stack</div>
<div>Atop</div>
<div>TheOther</div>

 

 

Your best bet might be like this

 

<div id='navigation'>
<ul class='menu'>

<li>CAP1</li>

<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>

<li>CAP2</li>
</ul>
</div>

 

then for css say this:

 

.menu {
margin:auto;
text-align:center;
display:block;
padding:0;
margin:0;
float:right;
list-style-type:none;
}
.link1 a:hover {
background-image:url('imgs/button1Over.png');	
width:130px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;

}
.link1 {
background-image:url('imgs/button1.png');
background-position:bottom center;	
width:130px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;

}
.link2 a:hover {
background-image:url('imgs/button2Over.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link2 {
background-image:url('imgs/button2.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link3 a:hover {
background-image:url('imgs/button2Over.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link3 {
background-image:url('imgs/button2.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}

[phil88]

Thanks for the help, I thought margin: 0 auto; meant that you want 0 margin on the top and bottom, but the left and right to be auto? I set a width in #navigation like you said, and you're right, it did center it.

 

As for the divs stacking on top of each other like that, why doesn't display: inline fix that? Or is that used for something else?

 

I'm not sure how your CSS would work as nothing in the HTML uses the classes link1, link2 etc. Are each of those meant to be for each individual link? They're only text links so would it be better if they were just using one class?

 

Also, where you say CAP1 and CAP2, are they meant to be the images for each side of the navigation (the light blue and the yellow in my picture)?

[phil88]

I managed to get it working;

<div id='nav-left'></div>
<div id='nav-right'></div>**
<div id='nav-mid'><a href='#'>Links here</a></div>**

 

and;

 

#nav-left{
float: left;
background-image: url('images/nav-bg-left.gif');
min-width: 11px;
height: 24px;
}
#nav-mid{
margin: 0 11px;
background-image: url('images/nav-bg-mid.gif');
height: 24px;
line-height: 24px;
}
#nav-right{
float: right;
background-image: url('images/nav-bg-right.gif');
width: 11px;
height: 24px;
}

 

** If I swap these 2 lines around (to a more logical order), the right-hand div drops down a line, which is bizzare, but having them that way ^^ around fixed it for some weird reason :\

[TheFilmGod]

well for one thing.. margin:0 auto; means "adsfadfasdjfa;lkjsdf" to CSS

 

you want EITHER margin:0 OR margin:auto; your calling two very different things here..

 

also for margin:auto; to even work for centering elements.. you must give those elements a width..

 

meaning #navigation should have  a width..

 

 

and if you are doing this

 

<div>WILL</div>
<div>Always</div>
<div>Stack</div>
<div>Atop</div>
<div>TheOther</div>

 

 

Your best bet might be like this

 

<div id='navigation'>
<ul class='menu'>

<li>CAP1</li>

<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>

<li>CAP2</li>
</ul>
</div>

 

then for css say this:

 

.menu {
margin:auto;
text-align:center;
display:block;
padding:0;
margin:0;
float:right;
list-style-type:none;
}
.link1 a:hover {
background-image:url('imgs/button1Over.png');	
width:130px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;

}
.link1 {
background-image:url('imgs/button1.png');
background-position:bottom center;	
width:130px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;

}
.link2 a:hover {
background-image:url('imgs/button2Over.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link2 {
background-image:url('imgs/button2.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link3 a:hover {
background-image:url('imgs/button2Over.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}
.link3 {
background-image:url('imgs/button2.png');
width:120px;
height:45px;
cursor:hand;
float:left;
list-style-type:none;
}

 

Please ignore everything this person has said. He clearly does not understand basic principles of css. Margin: 0 auto; means 0px margin for the top and bottom and an auto margin for the left and right - making it center.

 

<div>WILL</div>
<div>Always</div>
<div>Stack</div>
<div>Atop</div>
<div>TheOther</div>

 

WILL ALWAYS STACK ON TOP OF EACH OTHER. There is a huge difference between making code semantic (like making those a list) and just changing the code because you have no clue what the hell is going on.

[phil88]

Ok, I've got a new problem now, which I can't seem to figure out. Firefox 3, Safari and Opera all display it fine (right of screenshot), but internet explorer (left of screenshot) doesn't.

 

 

Here's the CSS for the footer bit;

#footer-container{
width: 75%;
margin: 0 auto;
}
#footer-left{
float:left;
width: 9px;
height: 20px;
background-image: url('images/footer-left.gif');	
}
#footer-right{
float:right;
width: 9px;
height: 20px;
background-image: url('images/footer-right.gif');
}
#footer-middle{
width: 100%;
background-image: url('images/footer-mid.gif');
height: 20px;
}

 

And here's the HTML;

<div id='footer-container'>
<div id='footer-left'></div>
<div id='footer-right'></div>
<div id='footer-middle'></div>
</div>

 

 

Any ideas what is causing that? The CSS is pretty much the same as I used for the navigation bar, and that works fine in IE.

 

Thanks!