2 Replies - 2955 Views - Last Post: 15 January 2011 - 06:46 AM

#1 Guest_Rasmus Söderström*


Reputation:

CSS navigation bar center issue

Posted 15 January 2011 - 04:13 AM

Hello, So I want to center the Buttons of my navigation bar. Thing is, it wont, at least not the way I want it to. Me and my teachers have gone through the code but we cannot make any sense out of it, so I'm turning to you guys.

This is my HTML
div class="navbar" align="center" >
        <div class="Menu-items" align="center"> 
<ul> 
        
 <li><a href="#">Hem</a> </li>
 <li><a href="#">Årskurs 1</a> </li>
 <li><a href="#">Årskurs 2</a> </li>
 <li><a href="#">Årskurs 3</a> </li>
 </ul>
 
        </div>
</div> 


And this is the CSS to control it.

 
.navbar{     
background-image:url('navbg.png');
background-repeat:repeat-x;
width:101%;
height:30px;
position:absolute;
top:185px;
padding:-5px;
left: -1px;
text-align:center;

    }
	
.Menu-items{
text-align:center;
text-decoration:none;
font-family:Verdana;
}


.Menu-items ul {
list-style:none;
padding:0;
margin:0;
}


.Menu-items li {
float:left; 
margin: 0 0.15em; 

}


.Menu-items li a {
background:url('navbg.png');
height:30px;
line-height:2em;
float:left;
width:9em;
display:block; 
border:none;
text-decoration:none;
text-align:center;
font-family:verdana;
}



And this is the result:
Posted Image

Now the thing is, I want that to center. But I just can't. And neither could my teachers, so I've spent my morning trying to find what is making them align to the left.
My answer,

When commenting these lines of code, yes these. Removing just one or two still keeps them on the left.
.Menu-items li {
/*float:left; */
margin: 0 0.15em; 

}


.Menu-items li a {
background:url('navbg.png');
height:30px;
line-height:2em;
/*float:left;*/
width:9em;
/*display:block; */
border:none;
text-decoration:none;
text-align:center;
font-family:verdana;
}



It then gives me this:
Posted Image

First off, why on earth do these behave like this?
and secondly: Are there any work-a-rounds?

Thank you so much for helping me!

Is This A Good Question/Topic? 0

Replies To: CSS navigation bar center issue

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: CSS navigation bar center issue

Posted 15 January 2011 - 05:51 AM

Well, from what I see is that you have text-align: center; on three selectors in your CSS. Choose one and be happy. You do know that if you set your width to 101% (which I didn't know that you could go above 100%) and don't set a width for your navigation items then they will look very different in different resolutions. If you're doing this for a school project I would set the width to 800 or 900 (That's about the width of some websites) And if you have 4 navigation items then make their widths 200. The reason you need float: left; is so that the the navigation items are inside your navigation bar considering that yours isn't vertical. You could also use use display: inline;. If you need any other help just ask. :)
Was This Post Helpful? 0
  • +
  • -

#3 Guest_Rasmus Söderström*


Reputation:

Re: CSS navigation bar center issue

Posted 15 January 2011 - 06:46 AM

View PostEnvXOwner, on 15 January 2011 - 05:51 AM, said:

Well, from what I see is that you have text-align: center; on three selectors in your CSS. Choose one and be happy. You do know that if you set your width to 101% (which I didn't know that you could go above 100%) and don't set a width for your navigation items then they will look very different in different resolutions. If you're doing this for a school project I would set the width to 800 or 900 (That's about the width of some websites) And if you have 4 navigation items then make their widths 200. The reason you need float: left; is so that the the navigation items are inside your navigation bar considering that yours isn't vertical. You could also use use display: inline;. If you need any other help just ask. :)


Thank you for your reply :)!
Reason for the 101% is to trick the browser into extending the navbar to the full width of the browser, thus leaving no "ugly" white stripe next to it. Even thus I have tested it across at least 3 resolutions had no issues with it, I have taken your advice specified a width for the elements :). I've also removed the overuse of text-align:center;, but I'm still stuck with the same issue. The reason for the float is already to my knowledge, my only doubt is, why does it only center once I've removed the Display:block; and the 2 x float:left;. And how would I go about centering those menu items? I mean, it is possible, I know it. But I might need another technique for it.

Once again though,
thank you for your swift reply :)!
Was This Post Helpful? 0

Page 1 of 1