CSS efficiency question

[imstillatwork]

I have 2 classes: one for the current menu item, one for the rest.

.menublue {
background-color:#336699;
color:#ffffff;
font-weight:bold;
font-size:.7em;
text-align:center;
width:110px;
height:20px;
border-top:1px solid #000000;
border-right:1px solid #000000;
}

.menugrey {
background-color:#bbbbbb;
color:#ffffff;
font-weight:bold;
font-size:.7em;
text-align:center;
width:110px;
height:20px;
border-top:1px solid #000000;
border-right:1px solid #000000;
}

The only difference is the background color. Is there a better way to do this and not repeat so much info?

thanks!

 

[cLFlaVA]

What about this:

<style type="text/css">
.menu {
    background-color:#336699;
    color:#ffffff;
    font-weight:bold;
    font-size:.7em;
    text-align:center;
    width:110px;
    height:20px;
    border-top:1px solid #000000;
    border-right:1px solid #000000;
}

.menu .gray {
    background-color: #bbbbbb;
}
</style>

<div class="menu">Item 1</div>
<div class="menu">Item 2</div>
<div class="menu gray">Item 3</div>
<div class="menu">Item 4</div>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[cLFlaVA]

Sorry, it should be:

.gray {
    background-color: #bbbbbb;
}

Not

.menu .gray {
    background-color: #bbbbbb;
}

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[imstillatwork]

huh... that simple. been doing this long enough to have known that!

thanks!!!

Kevin

 

[manarth]

A few things: you could save yourself a few bytes of code by stripping out the menu divs:

<div class="menu">
 <a href="#">Item 1</a>
 <a href="#">Item 2</a>
 Item 3
 <a href="#">Item 4</a>
<div>

Most good menus are coded using <li> tags. This makes the menu very readable on text-browsers.

<div class="menu">
  <ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li>Item 3</li>
   <li><a href="#">Item 4</a></li>
  </ul>
<div>

<marc>

 

[Olavxxx]

manarth:
You have a good point here, but I want to add a comment on your quote:

Most good menus are coded using <li> tags. This makes the menu very readable on text-browsers.

I have read (on w3c.org) that if you make the menus in <li>, google and others, find it easier to crawl your menu, and therefore it is good for you and your website accessability for robots crawling the site.

It is, as you say, also better for non-gui users.
The <li> can then also be styled, with images, or whatever, instead of the "boring" black "button".

I've played around with definition-lists too, as an alternative to paragraphs, but I turned back into styling the paragraph..

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[manarth]

The <li> can then also be styled, with images, or whatever, instead of the "boring" black "button".

Indeed, as the menu atNumber 10 shows.

The menu at the top is made up of nested lists - not a table. All styling is through CSS - and it's cross browser compatible.

<marc>