Fra <table> til <div>

ZoRaC · 9. mai 2006

Ønsker å konvertere nyhets-siden min fra tabell til CSS.

Har drevet og lest masse tutorials og eksempler, men skjønner ikke hvordan det funker.

Noen som kan hjelpe meg med denne?

<table border="1">
<tr><td valign="top">
<b>Tittel 1</b><br>
Dette er selv teksten, den kan bestå av mange linjer, eller bare noen få.<br>
Likevel skal boksene stå ved siden av hverandre, likt.<br>
</td>

<td valign="top">
<b>Tittel 2</b><br>
Dette er selv teksten, den kan bestå av mange linjer, eller bare noen få.<br>
Likevel skal boksene stå ved siden av hverandre, likt.<br>
<br><br><br><br><br><br><br><br>
Dette skal også påvirke celle 1.
</td>
</tr>

<tr>
<td>Publisert: 09.06.05 15:00</td>
<td>Publisert: 09.06.05 15:00</td>
</tr>

</table>

Får ikke <div>'ene til å stå ved siden av hverandre og får heller ikke inn tidspunktet nederst som jeg vil...

Trenger sårt litt "starthjelp"!

Steinmann · 9. mai 2006

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/default.css" media="all">
</head>
<body>
<h1>Min hjemmeside</h1>
<div class="post">
 <h2>Min lille nyhet</h2>
 <p>Teksten i min lille nyhet</p>
</div>
<div class="post">
 <h2>Min andre nyhet</h2>
 <p>Også med litt tekst</p>
 <p>Og litt til!</p>
</div>
</body>
</html>

SÅ må du bruke css for å få alt på plass.

setter du en bredde på et element og sier float: left; vil neste element legge seg til høyre for det, dersom det er plass.

Hvorfor vil du liste nyheter vanrett? Er det så lurt?

edit: syntax-error

Endret 9. mai 2006 av orsus

ZoRaC · 9. mai 2006

Har nå kommet et stykke på vei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>CSS</title>

<style type="text/css">
body {
margin:10px 10px 0px 10px;
padding:0px;
font-family:verdana, arial;
}


#main_news {

left:10px;
top:50px;
padding:5px;
width:430px;
height:200px;
background:#fff;
border:1px solid #000;
}

#main_ingress {

left:10px;
top:50px;
padding:5px;
width:200px;
height:200px;
background:#fff;
border:0px solid #000;
}

#bunn_ingress {
position: absolute;
bottom; 0px;
left:0px;
top:5px;
padding:0px;
width:200px;
background:#fff;
border:0px solid #000;
font-size:12px;
}


</style>
</head>

<body>

<div id="main_news">

<div id="main_ingress" style="float:left;">
<b>Tittel</b><br>
Her er ingressen, den kan være lang og med mange linjer med tekst.<br>
Alle ingresser skal være sidestilt likt, uten at noen får mer plass enn andre.<br>

<div id="bunn_ingress">
Les mer 09.05.06 12:00
</div>
</div>

<div id="main_ingress" style="float:right;">
<b>Tittel</b><br>
Her er ingressen, den kan være lang og med mange linjer med tekst.<br>
Alle ingresser skal være sidestilt likt, uten at noen får mer plass enn andre.<br>

<div id="bunn_ingress">
Les mer 09.05.06 12:00
</div>
</div>

</div></body></html>

Eneste som ikke funker er at "les mer" og dato/tid ikke kommer i bunnen.

Noen som vet hvordan jeg løser det?

orsus:

Skal ikke ha nyhetene vannrett, skal ha det 2x5, så dette er de 2 øverste, resten skal komme under... Og det tror jeg jeg skal få til... kanskje...

Steinmann · 9. mai 2006

Det er veldig vanskelig å starte på den måten, og vil derfor ikke ambefale deg å starte med noe så avansert design med en gang

Du burde se litt på semantikk, hvordan de forskjellige elementene skal brukes osv

<b> er utdatert. I ditt tilfelle markerer du en overskrift: altså en <h*>

--

Edit: hold deg unna position: absolute; det vil bare skape krøll!

Bruk heller float, marginer og pading til å plassere elementer der du vil

Endret 9. mai 2006 av orsus

ZoRaC · 9. mai 2006

Hmm... så jeg bør egentlig holde meg til table til akkurat dette?

Steinmann · 9. mai 2006

Nei, er jo klønete det også, for ikke å si feil

Regner med du skal ha det ganske dynamisk, og da må du jo frem med å sette egene klasser på de 2 første nyhetene for å få de mindre osv.

Regner med du bruker et cms system?

Endret 9. mai 2006 av orsus

ZoRaC · 9. mai 2006

Ja, hentet ut nyhetene fra MySQL med en PHP-loop.

Hvorfor vil jeg ha de 2 første mindre?

Steinmann · 9. mai 2006

Hvis du skal ha 2 nyheter ved siden av hverandre må de jo være smalere for å få plass...

ZoRaC · 9. mai 2006

400 px må da være greit nok?

Dessuten var det bare for å illustrere da, bredden kan jeg jo tilpasse etterhvert.

Logg inn

Fra <table> til <div>

Anbefalte innlegg

ZoRaC

Videoannonse

Steinmann

ZoRaC

Steinmann

ZoRaC

Steinmann

ZoRaC

Steinmann

ZoRaC

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer