CSS: Kombinere class og ID?

[Format71]

Har følgende css:

#button01 {
  position: absolute;
  left: 370px;
  top: 55px;
  height: 100px;
  width: 61px;
  overflow:hidden;
}

div#button01 a {
  display:block;
  width:61px;
  height: 90px;
  margin: 0em 0; 
  padding: 0px 0px 0px 90px;
  font: 10px/1 sans-serif;
  color:#000;
  background: url("../images/btnLogin.gif") top left no-repeat;
  text-decoration: none;
}

div#button01 a:hover {
  background-position: -61px 0px;
  color:red;
}

Dette er for knapp nr. 1, men så skal jeg ha 4 knapper til, og ønsker ikke å duplisere så mye kode. Derfor ser jeg etter en måte å trekke ut felleselementene i egne selectorer. Hvordan bør jeg gjøre dette?

 

Lurte på om det gikk an å lage en class="button" med alt felles og en id for hver knapp med det som er forskjellig (posisjon og bilde)

<div id="button01"><a href="index.html">Album</a></div>

kunne da blitt

<div class="button" id="01"><a id="01" href="index.html">Album</a></div>

Er dette mulig? Er det riktig fremgangsmåte?

 

(Man kan si hva man vill om css vs tables, men å komme og si at css forenkler ting må være en smule overdrevet... )

 

-Vegar

[Unglar]

Kan du ikke lage en div som du plasserer alle knappene inni, og så gi alle knappene en id hver? Så kan du sette css-koden som skal være felles for alle knappene til den ytterste diven.

 

<div id=knapper>
 <a href="index.html" id="knapp1">1</a>
 <a href="index.html" id="knapp2">2</a>
 <a href="index.html" id="knapp3">3</a>
 <a href="index.html" id="knapp4">4</a>
</div

 

EDIT:

(Man kan si hva man vill om css vs tables, men å komme og si at css forenkler ting må være en smule overdrevet... )

 

Css forenkler egentlig veldig mye hvis du lærer deg å bruke det skikkelig, og der det bør brukes

Endret 22. februar 2004 av Unglar

[epsil]

Du kan også spesifisere flere klassenavn for samme element, slik:

 

<a class="knapper knapp1" href="index.html">1</a>

Dette adresserer du så slik i stilsettet:

 

.knapper {
    /* Stildeklarasjoner for alle knapper */
}
.knapp1 {
    /* Stildeklarasjoner for den første knappen */
}

Dette fungerer selv i stusslige Internet Explorer 6.0 (men i dette tilfellet er Unglars løsning helt klart å foretrekke).

 

Selv bruker jeg id-attributtet kun til å sette inn målankre, altså spesifikke steder i dokumentet jeg kan lenke direkte til. (Det blir litt teit for meg at folk kan lenke til knapper i et HTML-dokument.)

 

For øvrig: Dersom disse «knappene» dine er ment å utgjøre en meny, foreslår jeg at du tar en tur innom css.maxdesign.com.au og lærer å sette dem opp som en liste.

[FuLu]

Du kan også spesifisere flere klassenavn for samme element, slik:

 

<a class="knapper knapp1" href="index.html">1</a>

Hmm, dette hadde jeg faktisk ikke tenkt på Testet å bruke flere klasser på den måten. Fungerer faktisk i IE5.01 og 5.5 også

[epsil]

Hmm, dette hadde jeg faktisk ikke tenkt på Testet å bruke flere klasser på den måten. Fungerer faktisk i IE5.01 og 5.5 også

Takk for informasjonen. Nei, av en eller annen grunn er dette vanligvis ikke nevnt i de mange «CSS-tutorials» som florerer på Web, til tross for at det er rimelig greit forklart i HTML 4.01-spesifikasjonen:

 

class = cdata-list [CS]

• This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
  

[Format71]

For øvrig: Dersom disse «knappene» dine er ment å utgjøre en meny, foreslår jeg at du tar en tur innom css.maxdesign.com.au og lærer å sette dem opp som en liste.

Huff, nei. Nå har jeg bruk over en uke på å få disse knappene ca der jeg vil ha dem, så nå går jeg for den ene løsningen jeg har fått til å fungere... ;-)

 

Har sett mye på det å bruke liste-tags samt masse flotte teknikker, men har ikke klart å anvende det. Når alt er på plass kan jeg selvfølgelig begynne å se på alternativer, men først vil jeg ha det opp og kjøre.

 

Skal se om jeg klarer å slå sammen alle div'ene til en, men forrige gang jeg gjorde det slet jeg bl.a. en smule med å få mellomrom mellom knappene.

 

Uansett - takk for tips og råd. Her er siden så langt. Målet er at det skal se noe slik ut

 

-Vegar

[funkweb]

Lurte på noe, kan man også gjøre på denne måten ? :

 

#button, button2, button3, button4

{

bla bla

}

 

Slik at man slipper å skrive så mange kode når de er egentlig det sammen.

[epsil]

Lurte på noe, kan man også gjøre på denne måten ? :

 

#button, button2, button3, button4

    {

    bla bla

    }

 

Slik at man slipper å skrive så mange kode når de er egentlig det sammen.

Ja. Men løsningen med flere klassenavn tar jo litt mindre plass (greit, det spiller egentlig ikke noen rolle).