Omgjøring av tabel til div&css

Amundo · 17. juni 2004

Heisann jeg har lite problem med å gjøre om denne kodesnutten til noe vetig utenom å bruke tabel Så jeg lurte på om noen kunne hjelpe meg og konvertere snutten til css, div koding og lignende. Og gjerne forklare generelt hvordan den fungerer

Da blir jeg kjempe glad

Koden:

<tr>

<td valign="top" align="left">hfdhgdfhg</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="forfatter" height="12" align="left">Forfatter: Amundo</td>

</tr>

<tr>

</tr>

</table>

Bildet som det ser ut:

TorS · 17. juni 2004

<div id="container">

<div id="header"><strong>15.06.04</strong>gfhdghdg
</div>

<div id="innhold"><a href="index?art=1104"><img class="nyhetsbilde" src="bilder/nyheter/Skilt.jpg" alt=""></a>hfdhgdfhg
</div>

<div id="footer">
Forfatter: Amundo
</div>

</div>

Du må legge til <link href="stil.css" rel="stylesheet" type="text/css"> i <head> seksjonen på sida di, og lagre følgende kode i stil.css.

div#container {
  width: 100%;
  border: 2px solid #4444CC;
  padding: 0;
}

div#header {
  background-color: #4444CC;
  color: #fff;
  font-weight: bold;
}

div#innhold {
  background-color: #fff;
  color: #000;
}

div#footer {
  background-color: #4444CC;
  color: #fff;
  font-size: 10px;
  clear: both;
  margin-bottom: 10px;
}

img.nyhetsbilde {
  float: right;
  border: 0;
}

Her har jeg erstattet tabellen med forskjellige div-emelenter. Jeg har container som er rundt alle andre, definerer bredden, og den blå ramma rundt. Jeg har definert header som inneholder den øverste blå ruta, og som gjør all skrift inne i den fet, et innholdsfelt med hvit bakgrunn og svart tekst, og en footer som kommer underst, som også er hvit tekst på blå bakgrunn. Der har jeg satt skriftstørrelsen til å være noe mindre enn ellers.

Bildet har jeg laget som vanlig, bare at jeg har brukt float på det, så det flyter så langt til høyre i elementet det er en del av som mulig.

Jeg har ikke tatt meg nok flid med å finne den blåfargen som du brukte i eksempelet ditt. Jeg tok bare en annen blåfarge, men den kan du lett endre ved å erstatte #4444CC i koden min.

Amundo · 17. juni 2004

Tusen takk for meget bra reply TorS Fikk til det på siden.

Håper bare resten av siden går litt bedre å omgjøre :ermm:

TorS · 17. juni 2004

Det er bare hyggelig å hjelpe Håper dette gav deg litt større innsikt i "magien" rundt divs/css...

Hvis det er noe mer du lurer på er det jo bare å spørre... Både når det gjelder hva jeg gjorde ovenfor eller noe annet på siden din.

Logg inn

Omgjøring av tabel til div&css

Anbefalte innlegg

Amundo

Lenke til kommentar

Videoannonse

TorS

Lenke til kommentar

Amundo

Lenke til kommentar

TorS

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer