Horizontal and Vertical spacing for a Menu

[ScKaSx]

Hi All,

I have a menu made of an Unordered List that has 5 items equally spaced across my page.

|__Logo__|___1___|___2___|___3___|___4___|

This is done by specifying that #menu li {width:20%}.

Problem 1
However, I would like one of the items to have a different spacing. More specifically I would like the logo to have a smaller spacing, something like:


|Logo|___1___|___2___|___3___|___4___|

Since I still want the other items to have the same spacing, how do I only alter the spacing of the logo in a liquid design? I suppose I could create a class but I haven't done that before.

Problem 2
Furthermore, I would like to change the vertically alignment of the logo as well. I would like it to be centered vertically in the menu.

This is the current CSS for my ul and li:
18 #menu ul {
19 margin: 0px;
20 // padding: 0px 0px 0px 21px;
21 list-style-type: none;
22 }
23 #menu li{
24 // margin: 0px;
25 // padding: 0px;
26 width: 20%;
27 float: left;
28 }
29 #menu li a:link, #menu li a:active, #menu li a:visited {
30 display: block;
31 line-height: 90px;
32 font-weight: bold;
33 color: #1a1a1a;
34 text-decoration: none;
35 font-family: Arial, Helvetica, sans-serif;
36 text-align: center;
37 font-size: 110%;
38 }
39 #menu li a:focus, #menu li a:hover{
40 text-decoration : none;
41 // -moz-outline:0;
42 color: #675ace;


Thanks,
ScKaSx

[David Harrison]

Odd that you don't know how to use a class, but IDs are apparently no problem and virtually identical.

Personally I wouldn't even use an <li> for the logo, I'd just set it as a background to the <ul> (or <ol>) and give it some left padding to keep the other <li>s away.

However, if you wish to simply modify the existing code, just put an ID on the logo list item, then use that to set a smaller width, and set the widths for the other <li>s to be wider to compensate.

[god0fgod]

Well classes become really useful, trust me. You may have elements of the same type (eg. div) but you want different styles. You can't use #id div any more. You'd have to use a class, or do everything individually which is not a good idea.

But for this a class isn't required. And yes, you can just give the logo an id and then apply new styling to that, right?