Jump to content
Sign in to follow this  
Format71

CSS: Kombinere class og ID?

Recommended Posts

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

Share this post


Link to post

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:

Edited by Unglar

Share this post


Link to post

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.

Share this post


Link to post
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å :dontgetit: Testet å bruke flere klasser på den måten. Fungerer faktisk i IE5.01 og 5.5 også :thumbs:

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post

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.

Share this post


Link to post
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).

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...