Gå til innhold

CSS: Kombinere class og ID?


Anbefalte innlegg

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... :cry:)

 

-Vegar

Lenke til kommentar
Annonse

[1] Random productId 12270296 from forum_276

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 :thumbup:

Endret av Unglar
Lenke til kommentar

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.

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

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.

Lenke til kommentar
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

Lenke til kommentar
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).

Lenke til kommentar

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

Laster...
×
×
  • Opprett ny...