webForumDet fria alternativet

Tabeller och CSS..

5 svar · 676 visningar · startad av Kalle M

Kalle MMedlem sedan mars 20041 936 inlägg
#1

Har 2 funderingar kring tabeller och CSS:

1. Jag har en sida med tabell där text och bild finns och det jag skulle vilja är att styra utseendet på tabellen ifrån en cssmall. Exempelvis bredden,höjden,positionen på tabellen.

2. Om jag nu tänkt köra vidare med denna laout på fler sidor så vore det ju bra kunna styra utseende i css-mallen och det slår igenom på fler sidor osv.
Ska jag då skapa ett unik ID för varje tabell eller ska jag skapa classer?

3. Bör jag skapa något ID eller liknande om jag vill koppla bilden till CSS-mallen?

Tacksam för tips

Se bifogad bild med exempel på tabell med text och bild.

bild.gif
itpastornMedlem sedan feb. 2007278 inlägg
#2

1. Du bör ta bort tabellen helt. Detta är inte tabulär data, utan layout.

2. Id är för något som är unikt per sida, klasser för något som kan förekomma flera gånger på en sida. Själv brukar jag sätta en id på body-starttaggen och använda avkomlingsselektorer i största möjliga mån för att hantera skillnaden mellan mina olika slag av sidor.

3. Om bilden endast är dekorativ skall den hanteras med CSS.

Eftersom jag inte vet vad du tänker ha på din sida utöver denna tabell, så är detta svar högst preliminärt. Men ungefär så här skulle jag gått till väga.

<body id="foo">
  <!-- diverse -->
  <div class="content">
  <!-- gjord som klass så att den kan användas fler gånger -->
    <h1>Rubrik</h1>
    <p>Stycke med text...</p>
    <p>Stycke med text...</p>
  </div>
  <!-- diverse -->
</body>
#foo div.content {
     padding-right: 110px; /* Bilden tänks vara 100px bred och hög*/
     background: white url(path/to/img.jpg) no-repeat top right;
     min-height: 100px; /* Få plats med bilden */
}
#bar div.content {
     padding-right: 120px;
     /* en annan - lite större - bild */
     background: white url(path/to/alternate_img.jpg) no-repeat top right;
     min-height: 110px; /* Få plats med bilden */
}
/* MSIE 6 */
*  html #foo div.content {
     height: 100px;
}
*  html #bar div.content {
     height: 110px;
}
Kalle MMedlem sedan mars 20041 936 inlägg
#3

Ok!

Men låt säga nu denna gången att jag har tabeller som på bifogad bild. Jag vill kunna ändra bredd och höjd,position på tabellen i cSSmallen. Låt säga att jag har 3 stycken sidor där tabellen ska se likadan ut.

Ska jag skapa 3 st tabellID och lägga i CSSmallen? eller ska jag skapa 3 classer? Blir det inte fler klasser eftersom jag har 2 kolumner i tabellen som ska ha en size också?

Tacksam om nån visar hur det skulle kunna se ut i min css.

Mvh

Danne VMedlem sedan aug. 20068 090 inlägg
#4

Kalle M skrev:

Ok!

Men låt säga nu denna gången att jag har tabeller som på bifogad bild. Jag vill kunna ändra bredd och höjd,position på tabellen i cSSmallen. Låt säga att jag har 3 stycken sidor där tabellen ska se likadan ut.

Ska jag skapa 3 st tabellID och lägga i CSSmallen? eller ska jag skapa 3 classer? Blir det inte fler klasser eftersom jag har 2 kolumner i tabellen som ska ha en size också?

Tacksam om nån visar hur det skulle kunna se ut i min css.

Mvh

itpastorn skriver ju i punkt 2 vad som gäller: Om det är EN tabell på varje sida, så ska/kan du använda ett ID, t.ex. "minTabell". I stilmallen kan du sen ha t.ex.

minTabell td: formaterar alla celler i tabellen
minTabell tr: formaterar raderna

Som han också föreslår så kan du ge olika ID till sidornas body, t.ex. "sida1", "sida2" och "sida3". Om du sen har en generell still för "minTabell" men vill göra en liten justering på en eller flera av sidorna, så kan du använda t.ex:

#sida1 #minTabell td {background:#ccc;} eller vad det nu kan vara som du vill ändra jämfört med den generella stilen.

Men framför allt: T.o.m. jag som normalt är en pragmatisk herre som gärna använder tabeller när det jävlas med CSS måste ju säga att du är inne på helt fel väg när du använder en tabell i det här fallet. Det är nästan straffbart att inte använda divvar och CSS och du gör dig själv en gigantisk björntjänst som inte redan på detta stadie börjar bekanta dig med CSS utan tar den "enkla" utvägen och använder en tabell.

Kalle MMedlem sedan mars 20041 936 inlägg
#5

Hör mkt om divar och css och det är väl det som gäller. Men vad är det för fel på tabeller? Dreamweaver har en hel del tabellfunktioner för att layouta sidor.

Är det främst för att det blir så mkt kod på sidorna?

Danne VMedlem sedan aug. 20068 090 inlägg
#6

Sök på bl.a. "semantisk mark-up" eller "css och semantik" eller liknande.

129 ms totalt · 3 externa anrop · v20260731065814-full.b943c234
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)