Gå til innhold

Omgjøring av tabel til div&css

Amundo

Anbefalte innlegg

Amundo

Amundo

Skrevet
Skrevet

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

 

Koden:

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

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

<td width="150" height="100" valign="top"><a href="index?art=1104"><img name="nyhetsbilde" src="bilder/nyheter/Skilt.jpg" width="150" height="100" alt=""></a></td>

</tr>

</table>

</td>

</tr>

<tr>

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

</tr>

<tr>

<td width="100%" height="10"></td>

</tr>

</table>

 

Bildet som det ser ut:

 

tabel.JPG

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
TorS

TorS

Skrevet
Skrevet 

<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.

Lenke til kommentar
TorS

TorS

Skrevet
Skrevet

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.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...