Avatar billede phliplip Nybegynder
23. april 2007 - 16:04 Der er 6 kommentarer og
1 løsning

CSS: Classes og arv

Hej Exp'er!

Sad lige og rodede lidt med nogen CSS, og kan nogen forklare mig om min CSS er forkert eller om det er meningen at følgende er helt efter bogen.

Jf.: http://www.onindo.com/philip/

Så arbejder jeg lidt med at lave en "boks" struktur. Selve HTML'en er et 9x9 table, og <table> har fx en class der hedder 'g_cbox' (gray_contentbox).

alle <td> har så class r1_c1 (row 1, cell 1)

Min CSS hedder så fx.:
.g_cbox .r1_c1 { background-image: url('/images/g_top_left.gif'); }
.g_cbox .r1_c2 { background-image: url('/images/g_top.gif'); }
.g_cbox .r1_c3 { background-image: url('/images/g_top_right.gif'); }


Det virker som sådan også godt nok (se kildekode på ovenstående link).

Men hvis jeg prøver at bruge en box, i en box og eller 3 box'e i hinanden, så opstår der problemer.

Hvis i kigger på linket så skulle første sæt boxe gerne være;
grå-hvid-grå men er grå-hvid-hvid

Og anden sæt boxe;
hvid-grå-grå hvid-hvid-hvid

..
Avatar billede phliplip Nybegynder
23. april 2007 - 16:06 #1
Min tanke er at jeg let og hurtigt kan skifte box type bare ved at skifte class'en på <table> og ikke også skal ændre alle celler hvis jeg fx. havde lavet CSS'en således;

g_cbox_r1_c1

som jeg havde til at starte med
Avatar billede olebole Juniormester
24. april 2007 - 14:56 #2
<ole>

Jeg sidder ikke ved min egen maskine og den fladskærm, jeg sidder ved, kan næsten ikke skelne dine farver - så den del holder jeg mig ude af.

Til gengæld skal jeg på det kraftigste fraråde at skifte CSS-klasser! Det er ekstremt dårligt performende og det kan ved lidt mere komplekse koder tage op til flere sekunder at gennemføre en sådan handling. Det er langt mere effektivt at ændre de enkelte cellers style-properties  ;o)

Læs evt. denne artikel:
    http://www.eksperten.dk/artikler/227

- der slutter med et eksempel på en måde at ændre flere/mange style-properties på én gang

/mvh
</bole>
Avatar billede mclemens Nybegynder
24. april 2007 - 17:42 #3
For at denne css:
.w_cbox .r2_c2 { background: #F7F7F7; vertical-align: top; }
Kan override denne css:
.g_cbox .r2_c2 { background: #F7F7F7; vertical-align: top; }
Skal der !important til eller flere css selectors som:
.g_cbox .w_cbox .r2_c2 { background: #F7F7F7; vertical-align: top; }
... Men de vil ikke override hinanden på kryds på den måde
som du ønsker, medmindre du definerer flere lag af selectors.

Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
table {border-collapse:collapse;}
td {padding:5px;}
.tablen td,.tablen td td td  {background:#f7f700;}
.tablen td td,.tablen td td td td {background:#0ff;}

.tablen2 td,.tablen2 td td td  {background:#0ff;}
.tablen2 td td,.tablen2 td td td td {background:#f7f700;}
</style>

</head><body>
<table class="tablen"><tbody><tr><td>Hej</td></tr>
<tr><td>
  <table><tbody><tr><td>Hej</td></tr>
  <tr><td>
    <table><tbody><tr><td>Hej</td></tr>
    <tr><td>
      <table><tbody><tr><td>Hej</td></tr></table>
    </td></tr></table>
  </td></tr></table>
</td></tr></table>
<br><br>
<table class="tablen2"><tbody><tr><td>Hej</td></tr>
<tr><td>
  <table><tbody><tr><td>Hej</td></tr>
  <tr><td>
    <table><tbody><tr><td>Hej</td></tr>
    <tr><td>
      <table><tbody><tr><td>Hej</td></tr></table>
    </td></tr></table>
  </td></tr></table>
</td></tr></table>
</body></html>

... Der kan selvfølgelig tilføjes flere selectors css
lag, men spørgsmålet er om det ikke er bedre at øge med en
css class mere og så køre .graa {background... .hvid {background...
- Når du alligevel bør skifte enkelte styles istedet for klasser
er der ikke en besparelse ved de nestede css regler / selectors.
Avatar billede phliplip Nybegynder
27. april 2007 - 13:52 #4
Tak for input!

olebole: For eksemplets skyld skulle jeg nok have valgt nogen farver med mere kontrast ;)

Jeg ændrede css-setup'et til alá .g_cbox_r1_c1 i stedet for .g_cbox .r1_c1

Hvis i vil have points så læg et svar :)
Avatar billede mclemens Nybegynder
27. april 2007 - 15:40 #5
:o)
Avatar billede phliplip Nybegynder
30. april 2007 - 10:29 #6
Ole?
Avatar billede mclemens Nybegynder
15. maj 2007 - 12:01 #7
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester