[SOLVED] css menu width issue

danny322 · November 19th, 2007, 10:22 AM

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 · November 19th, 2007, 10:35 AM

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 · November 20th, 2007, 05:53 AM

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 · November 20th, 2007, 06:13 AM

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 · November 20th, 2007, 06:40 AM

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 · November 21st, 2007, 10:26 AM

Link doesn't work anymore.

danny322 · November 22nd, 2007, 08:10 AM

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 · November 22nd, 2007, 09:49 AM

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

karinne · November 22nd, 2007, 10:03 AM

Make these changes

Code:

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 · November 22nd, 2007, 10:13 AM

Thanks Karinne your a life saver, yet again!