Welcome to WebmasterWorld Guest from 107.23.176.162

Forum Moderators: not2easy

Message Too Old, No Replies

horizontal navigation menu, rollover images, how to center?

     
12:47 pm on Jul 19, 2005 (gmt 0)

New User

10+ Year Member

joined:July 19, 2005
posts:25
votes: 0


Hello,

I realise that there are a lot of resources on this available, but I still haven't been able to figure it out and would really appreciate some help.

I am trying to make a horizontal navigation menu, with each link being a separate image, and each image having a rollover effect to another separate image. It all works fine, except I can't center the menu horizontally on the page. I started off with a horizontally centered menu from listmania, but when I swapped the text menu items for my images it didn't work anymore.

Any ideas?

Here is my code (don't be alarmed by the *.bmps, I just don't have my final images yet!) some of it might be rubbish I've chopped and changed so much in so many attempts to make it work, I'm going mad!:

CSS:
span {
display: none;
}

#center
{text-align: center;}

#navcontainer
{
margin: 0 auto; width: 100%; text-align:left;
}

#navcontainer ul
{
list-style-type: none;
text-align: center;
padding-left: 25%;
}

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

#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active {
margin: 0;
width: 101px;
height: 162px;
display: block;
background: url(orange2.bmp) no-repeat;
}

#navcontainer li#about a:link, #navcontainer li#about a:visited, #navcontainer li#about a:active {
margin: 0;
width: 101px;
height: 162px;
display: block;
background: url(blue2.bmp) no-repeat;
}

#navcontainer li#calendar a:link, #navcontainer li#calendar a:visited, #navcontainer li#calendar a:active {
margin: 0;
width: 101px;
height: 162px;
display: block;
background: url(pink2.bmp) no-repeat;
}

#navcontainer li#links a:link, #navcontainer li#links a:visited, #navcontainer li#link a:active {
margin: 0;
width: 101px;
height: 162px;
display: block;
background: url(green2.bmp) no-repeat;
}

#navcontainer li#home a:hover {
background: url(orange1.bmp) no-repeat;
}

#navcontainer li#about a:hover {
background: url(blue1.bmp) no-repeat;
}

#navcontainer li#calendar a:hover {
background: url(pink1.bmp) no-repeat;
}

#navcontainer li#links a:hover {
background: url(green1.bmp) no-repeat;
}

HTML:

<div id="center">
<div id="navcontainer">

<li id="home"><a href="home.html" title="Home"><span>Home</span></a></li>
<li id="about"><a href="about.html" title="About"><span>About</span></a></li>
<li id="calendar"><a href="calendar.html" title="calendar"><span>calendar</span></a></li>
<li id="links"><a href="links.html" title="links"><span>links</span></a></li>
</ul>
</div>
</div>

1:24 pm on July 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


Hi djkaytee
try the following code:
#navcontainer 
{
margin: 0 auto;
width: 100%;
text-align:center;
display:inline;
}

If you are creating a horizontal menu, it should be set to display inline.

also, remove display block from the rest of your styles. This should center the layout for you. ;)

Here [moronicbajebus.com] is an excellent tutorial for horizontal menus. I have this one printed out and well worn from using it all the time.

A google search for you [google.com] With horizontal css menus.

btw Welcome to WebmasterWorld!

1:35 pm on July 19, 2005 (gmt 0)

New User

10+ Year Member

joined:July 19, 2005
posts:25
votes: 0


Thank you SO MUCH 4css, it works.

I am very grateful as I have been playing with this for hours, days!

I am still trying to get my head around CSS and find the logic of it too complex at times. Will have a look at the tutorial you linked to.

Thanks once again & best wishes
djkaytee

2:50 pm on July 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


:)
No problem djkaytee
Very happy to have been able to supply a correct answer ;)

Good luck with your page that you are working on!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members