Nav bar problem

Get Started
1

After what seems like an eternity I have managed to cobble together my navigation bar as near to how I want it as I can get it. I have pieced it together using help from here (Thanks Donboe) and from other places on the t’internet together with trial and error. However there is a problem that I can’t work out what is causing it, please help.

This is my nav bar below, each time you click on a tab the same nav bar is there but the coloured lines undeneath change in relation to the colour of the tab.

It works on the first three but when you click on Contact Me the following happens

If you then click the contact me tab again it then goes back in line. Is there an easy explanation as to why this happened.

Thanks for any help you can give me :slight_smile:

2

:lol: You don’t have to give me any credit. I just pointed you to something. That’s why we’re all here isn’t it. To help and to be helped. If I can help I do it and if I need help I ask for it. :slight_smile:

3

That makes sense, I will have look at some topics about positioning once I have finished the nav bar.

I will definitely stick the site up when done (it’s gonna take quite a while though) as I would like to some input into it. I 'll be adding a link to here and I’ll add a credit to you Donboe if that is ok.

4

Here is the code, I have pretty much butchered what you gave me so sorry about that :blush:

.header {
width: 100%; height: 67px; border-bottom: 10px solid;
}

.header .menu {
width: 1000px; margin: 0 auto; position: relative;
}

.header .menu ul {
list-style-type: none;
}

.header .menu li a {
margin: 27px 0 0 0; float: left; display: block; text-indent: -9999px;
}

.header .menu li a.home {
height: 38px; width: 110px; background: url(images/home.gif) 0 0 no-repeat;
}

.header .menu li a.about {
height: 38px; width: 110px; background: url(images/about.gif) 0 0 no-repeat;
}

.header .menu li a.services {
height: 38px; width: 110px; background: url(images/services.gif) 0 0 no-repeat;
}

.header .menu li a.contact {
height: 38px; width: 110px; background: url(images/contact.gif) 0 0 no-repeat;
}

.header .menu li a.testimonials {
height: 38px; width: 110px; background: url(images/testimonials.gif) 0 0 no-repeat;
}
.header .menu li a.gallery {
height: 38px; width: 110px; background: url(images/gallery.gif) 0 0 no-repeat;
}
.header .menu li a.faq {
height: 38px; width: 110px; background: url(images/faq.gif) 0 0 no-repeat;
}
.header .menu li a.articles {
height: 38px; width: 110px; background: url(images/articles.gif) 0 0 no-repeat;
}

.pink {
border-bottom-color: #FDC2C2; background-position: bottom; background-image:url(images/bordersmall.gif);
background-repeat: repeat-x;

}

.blue {
border-bottom-color: #D4DEF9; background-position: bottom; background-image:url(images/bordersmallblue.gif);
background-repeat: repeat-x;
}

.yellow {
border-bottom-color:#F7F9A5; background-position: bottom; background-image:url(images/bordersmallyellow.gif);
background-repeat: repeat-x;
}

.green {
border-bottom-color:#CFF9A9; background-position: bottom; background-image:url(images/bordersmallgreen.gif);
background-repeat: repeat-x;
}
.header .menu li a.current{
height: 40px;

5

Can you show the CSS you have for the navigation?

6 
position: relative;

This way you place the li’s relative to each other. I remember having this in the initial code as well ;). Try to do some reading about positioning.

Glad that you have the menu the way you wanted it. Show us the site some day after it is finished

For the other problem. It should work, I didn’t test it, but will have a look later

7

Whoop Whoop thanks ever so much that works like a dream, really appreciate it.

Is there an easy way to explain what the problem was and how your code fixed it or do you have a link to an article that covers the relevant topic?

I tried the other suggestion you gave (I do intend when I have done to try and establish where my code can be improved) as it makes some sense however when I changed it the nav bar was then broken with the end tab dropping down and a gap being created after the services tab. Have you any idea why that was?

Again thanks for your help you are a star.:slight_smile:

8

Try to add this


.header .menu li {
position: relative; float: left; display: block;
}

and see what happens.

Another thing I noticed is that all your menu items the same width and height have. You could change your css a bit further. Add the width and height to the general a tag and remove it from all the page related ones

.header .menu li a {
width: 110px; height: 38px; margin: 27px 0 0 0; float: left; display: block; text-indent: -9999px; 
}
.header .menu li a.home {
background: url(images/home.gif) 0 0 no-repeat;
}

That way you keep your css clean and you win a few bytes