[SOLVED] css menu width issue

[danny322]

Hi everyone.

Could somebody have a look at my menu that i have done in css....

http://www.design365.co.uk/sef/home.htm

The image im using for the rollovers is 115 pixels wide but i dont understand why its not displaying the whole image. Any help would be appreciated.

Thanks

[karinne]

add a display: block;

also ... instead of using 2 images, use only one and change it with the background-position property ... see this tutorial from the Creative Coding newsletter

CSS Hover Effects

[danny322]

Hi Karinne, thanks for the tutorial its working ok.....

http://www.design365.co.uk/sef/home.htm theres just 2 things...

1. How do i position the text alongside the red square?

2. How do i push the whole menu left so its more centralised?

Thankyou

[Nortus]

Use this CSS code

#banner_middle {
width:746px;
margin:auto;
}

to align the banner to the middle of the screen so it flows with the container below.

Aligning the text to be at the right of the square is a little more complicated.
You need to look into 'line height' to vertically align the text and add some left padding to the 'li' to push it across.

[danny322]

Hi Nortus, thanks for the advice but i want the banner to go all across. I just need to put the text in the right place in the buttons and move them all across.

[karinne]

Link doesn't work anymore.

[danny322]

Hi karrine.

Sorry new link....

http://www.design365.co.uk/sef/home.html

How do i position the text? Nothing seems to be working for me lol

[danny322]

is anybody able to help? ive tried padding, margin, text align etc but the text isnt moving

[karinne]

Make these changes

Code: Select all

ul#nav li a {

color: #ffffff;

font-size: x-small;

font-weight: bold;

font-family: arial;

width:95px;

height:23px;

padding 8px 0 0 25px;

display:block;

text-decoration:none;

background: url(images/button.gif) no-repeat 0 0;

}

[danny322]

Thanks Karinne your a life saver, yet again!