Hey guys,

 

I'm trying to make the navigation on my portfolio a bit more interesting, and I've got a CSS one that I like, but I'm having a few problems with it, and was wondering if you could help. I didn't make/write the code for this, I got it from a website, but changed a few things to fit my portfolio.

 

If you want to have a look at it, my site is MibaDesigns. At the moment, the CSS nav in only on the index page, all the other pages have the old style one.

 

The problems I'm having with it are;

1. At the moment, the text is aligned to the left, but I want it to be centred, like my old style nav. I've tried using "text-align:left;" in the css, but it doesn't seem to work.
   
2. In IE, when you resize the window, the nav doesn't move, until you hover over it...any ideas why? Is there a fix or is this IE being awkward as always?
   

The CSS is;

 

ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:35px;
font-size:11px;
background:url(../images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
margin: 0;
padding:0;
}

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#ffffff;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#ffffff;
background:url(../images/bg.png) repeat-x top left;
}

ul.menu .current a {
color:#444444;
}


ul.menu.orange{
background-color:#444444;
}
ul.menu.orange li a:hover, .menu.orange li.current {
background-color:#ffffff;
}

 

and the HTML is;

 

<ul class='menu orange'>
<li class='current'><a href='index.html'>Home</a></li>
<li><a href='aboutme.html'>About Me</a></li>
<li><a href='graphics.html'>Graphics</a></li>
<li><a href='websites.html'>Websites</a></li>
<li><a href='services.html'>Services</a></li>
<li><a href='testimonials.html'>Testimonials</a></li>
<li><a href='links.html'>Links</a></li>
<li><a href='contact.html'>Contact Me</a></li>
</ul>

 

Thanks guys,

Michael

On my personal opinion I would say your nav is fine as it is

 

My guess would be that's its to do with the float:left; tags.

Cheers mate! I quite liked my old nav, but a few people had said it was too simple. and I can see what they mean. If I can't get this css working, then I'll go back to the old style.

 

I'll keep messing with the float:left; tag and see if i can sort it...anyone else have any ideas?

I would say the problem is with "float:left". If you take that out and add "text-align:center" to the entire div (not just the list items) does that help?

 

As for IE, I stay far, far away so sorry I can't help you there.

Thanks for the reply expat. I tried what you said, and it centered the text, but it became a vertical list, rather than a horizontal one, and it lost the rollover effect.

 

I messed around with the padding, and managed to get it evenly spaced so it took up the whole width, which looked better but still not brilliant. On top of that, having IE being awkward, I've decided just to go back to the old style until I can find another one.

 

Thanks gor trying guys

try this

 

<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="1">link1</a></li>
<li><a href="2">ink2</a></li>
<li><a href="3">ink3</a></li>
<li><a href="4">ink4</a></li>

</ul>
</div>

 

/*---Navigation---*/

#navbar {
margin-top:0px;
width:100%;
background:#101040;
float:left;
}

#navbar ul {
width:650px;
margin:0 auto;
height:50px;
background:#101040;
list-style:none;
}

#navbar ul li {
float:left;
}

#navbar ul a {
display:block;
margin-top:10px;
padding:0 1em;
line-height:2.1em;
font:Arial, Helvetica, sans-serif;
font-size:22px;
color:#fff;
text-decoration:none;
}

#navbar ul a:hover {
text-decoration:underline;
}

 

adjust as necessary

Hi, i tried to rectify your nav. but your url not opening http://www.mibadesigns.co.uk/

 

 

 

 

Regads,

www.cssdog.com

 

 

 

try this

 

<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="1">link1</a></li>
<li><a href="2">ink2</a></li>
<li><a href="3">ink3</a></li>
<li><a href="4">ink4</a></li>

</ul>
</div>

 

/*---Navigation---*/

#navbar {
margin-top:0px;
width:100%;
background:#101040;
float:left;
}

#navbar ul {
width:650px;
margin:0 auto;
height:50px;
background:#101040;
list-style:none;
}

#navbar ul li {
float:left;
}

#navbar ul a {
display:block;
margin-top:10px;
padding:0 1em;
line-height:2.1em;
font:Arial, Helvetica, sans-serif;
font-size:22px;
color:#fff;
text-decoration:none;
}

#navbar ul a:hover {
text-decoration:underline;
}

 

adjust as necessary

pardon?

pardon?

 

He said he tried to "rectify your nav"!