CSS menu help

NeVeR · 30-01-2008 8:27pm #1

Hey,,

I've been messing around with CSS and i'm getting pretty good at it,, but i'm stuck on 1 part

I'm trying to make a rollover button for my navi bar

here's the code i'm using.

#toplinks{
background-image:url(linkbg.jpg);
background-repeat:repeat-x;
padding-left:20px;
height:35px;
text-align:center;}

#toplinks a{
background-image:url(link1.jpg);
width:130px;}

#toplinks a:hover{background-image:url(link2.jpg);
width:130px;}

but it's not working,, Here's the site it's one.. just a tester page i'm practicing on http://www.davidstokes.com/9

Goodshape · 30-01-2008 9:42pm

It'll probably need some additional re-working, but I think this is the sort of thing you're looking for ?

#toplinks a{
display : block;
line-height : 35px;
float : right;
background-image:url(link1.jpg);
width:130px;
}

(replace you current #toplinks a css code with the above.

NeVeR · 30-01-2008 9:46pm

i got it looking like this so far

http://www.davidstokes.com/9/index1.html

As you can see it's not lined up right.. i got this using Padding.

I'll try your way now and see how i get on.

NeVeR · 30-01-2008 9:48pm

This is what your code looks like on the page

http://www.davidstokes.com/9/index2.html

i'll try some changes and see how i get on.

Goodshape · 30-01-2008 9:50pm

I'm not really sure what the problem is. Hovering is working alright, but not the way you want?

How do you want it to look?

also.. I see no difference in the three pages you linked. All the Navigation menus look the same.

NeVeR · 30-01-2008 9:54pm

sorry.. i only uploaded the pages... not the CSS code. lol...

So they will look the same. I'll fix it so the links look different

NeVeR · 30-01-2008 9:57pm

ok they look different now. what i want is a mouse-over Like this http://www.davidstokes.com/9/index3.html

only in CSS and also with text on it. this is just a mouseover image made in dreamweaver, (not CSS)

Goodshape · 30-01-2008 10:03pm

Right, I've had a look at you CSS file.... you've got a bit to learn yet tbh

If you're actually interested in learning, then have a look at this, compare it to your own and feel free to ask any specific questions.

@charset "utf-8";
/* CSS Document */


#toplinks{
background-image:url(linkbg.jpg);
background-repeat:repeat-x;
padding-left:20px;
height:35px;

}
#toplinks a{
display : block;
line-height : 35px;
float : left;
background-image:url(link1.jpg);
background-position : top left;
width:130px;
text-align : center;


}
#toplinks a:hover{
background-image:url(link2.jpg);
}



a {
color:#ffffff;
text-decoration:none;
}
a:hover{
color:#66CC33;
text-decoration:none;
}



body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;}

#wrapper {
width:800px;
margin: 0 auto;
text-align:left;
background-color:#d5d5d5;

}

#top{
font-size:xx-small;
text-align:center;}

#logo{
padding-left:30px;}



#leftmenu{
width:180px;
float:left;
padding-left:10px;
padding-top:10px;
font-size:10px;}

#main{
width:600px;
float:right;}

#footer{
clear:both;}



h1{
font-size:10px;
}
h2{}

Replace your entire CSS file with that.

And I've actually taken out more than I've put in.

NeVeR · 30-01-2008 10:07pm

i'll try it..

i wasnt finished making the code.. just stuck on this,, I'm only learning

thanks i'll try it

Goodshape · 30-01-2008 10:09pm

Btw, I think your biggest mistake here was not knowing the difference between inline html elements and block html elements.

<a> is inline by default and therefor doesn't handle things like height or line-height very well. With css 'display' property the element can be changed to block.

Consult Google or the W3C for more on the topic. It's fairly important when working with CSS.

Gordon · 30-01-2008 10:09pm

How about this?

[HTML]<html>
<head>
<style type="text/css">
.menu a:link {
display: block;
background-image: url('http://www.davidstokes.com/9/link1.jpg');
width: 130px;
height: 35px;
float: left;
color: white;
line-height: 35px;
text-align: center;
}
.menu a:hover {
background-image: url('http://www.davidstokes.com/9/link2.jpg');
color: green;
}
</style>
</head>
<body>

<div class="menu">
<a href="#">Home</a>
<a href="#">Blah</a>
</div>

</body>[/HTML]
Ah, I think Goodshape got there before me!

Bear in mind that you will get a slight delay when rolling over your menu rollover image so may want to preload it somehow. A good method (as stated on this forum by a number of people) is to use the same background image at twice the height and position the background image at the top and bottom:
http://www.w3schools.com/css/pr_background-position.asp

Another good thing to do to keep down your kilobytes is to use the minimum amount of imagery possible. Therefore you could slice those two background images into 1px wide images and simply repeat on the y axis.

NeVeR · 30-01-2008 10:14pm

thanks it worked goodshape.

ya i've got a bit to learn.. thanks

Goodshape · 30-01-2008 10:19pm

NeVeR wrote: »

thanks it worked goodshape.

ya i've got a bit to learn.. thanks

No worries... Happy to help if you're happy to learn

...Gordon's tips are great too, and a nice bit of cleaned up CSS there also.

CSS menu help

Comments