Byttet fra tabellbruk, trenger hjelp!

[Ildflue]

Lager nå min første side uten tabeller, prøver endelig å bli kvitt gamle vaner, men nå støter jeg på problemer.

 

Klikk for å se/fjerne innholdet nedenfor

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="div.css" rel="stylesheet" type="text/css">
<div id="ramme">
<div id="overlogo"></div>
<div id="menu">
   	<div id="menutop"></div>
       <div id="mmenu"></div>
       <div id="menubot"></div>
   </div>
       <div id="sponsor">
   	<div id="spontop"></div>
       <div id="spon"></div>
       <div id="sponbot"></div>
   </div>
   <div id="page">Test</div>
   <div id="pagebot"></div>
</div>

 

Klikk for å se/fjerne innholdet nedenfor

/* CSS Document */
* { margin:0; padding:0; }
body {
margin-top:0px;
background-color:#d9e8ff;
background-image:url('img/bg.jpg');
background-repeat: repeat;
font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}

#ramme {
width: 1200px;
padding-top:40px;
padding-left:50px;
padding-bottom:40px;
display:
}

#overlogo {
width: 994px;
height:119px;
background-image:url('img/logo.jpg');
background-repeat:no-repeat;
background-position: inherit;
font-size:0px;
}
#menu {
margin-left:50px;
float:left;
}
#mmenu {
width: 212px;
height:80px;
background-image:url('img/menu.jpg');
background-repeat: repeat-y;
background-position: inherit;
}
#menutop {
width: 212px;
height:151px;
background-image:url('img/menutop.jpg');
background-repeat:no-repeat;
background-position: inherit;
}
#menubot {
width: 212px;
height:304px;
background-image:url('img/menubot.jpg');
background-repeat: no-repeat;
background-position: inherit;
}
#page {
margin-left: 181px;
width: 813px;
height:700px;
background-image:url('img/page.jpg');
background-repeat:repeat-y;
background-position:left;
}
#pagebot {
margin-left: 181px;
width: 813px;
height:108px;
background-image:url('img/pagebot.jpg');
background-repeat:no-repeat;
background-position:left;
}
#sponsor {
float:right;
padding-right: 20px;
}
#spontop {
width: 177px;
height:37px;
background-image:url('img/spontop.jpg');
background-repeat:no-repeat;
background-position:inherit;
}
#spon {
width: 177px;
height:250px;
background-image:url('img/spon.jpg');
background-repeat:repeat-y;
background-position:inherit;
}
#sponbot {
width: 177px;
height:70px;
background-image:url('img/sponbot.jpg');
background-repeat:no-repeat;
background-position:inherit;
}

 

I Internet explorer så vil feltet "page" bli satt under alt det andre, mens i Firefox fungerer det akkurat som det skal.

 

Noen som kan hjelpe til/evt. gi noen andre gode tips?

 

 

Se her for å se problemet!

Endret 6. september 2007 av thomas_c24

[Haraldson]

Noen som kan hjelpe til/evt. gi noen andre gode tips?

Ja. Jeg får vondt i hodet av alle div-ene dine. Den koden der er ikke noe bedre enn tabell-basert layout.

 

Bruk hN til overskrifter, p, ul og andre elementer til tekst osv.

 

Rett og slett; Lær deg hva HTML går ut på. http://htmldog.com/

[Ildflue]

Jeg kan umulig se hvordan færre DIV's kan gi et likt eller bedre resultat. Når jeg har 3 forskjellige bakgrunner per område på 3 områder så er det vel ikke bare bare?

[Haraldson]

Nei, det er jo umulig å style annet enn div-elementet med CSS. Virker som dette er en vanlig tolkning, i hvert fall.

 

Overlogo -> Tittel 1, h1

Meny -> Liste.

Spontop -> Tittel

Spon -> Vanlige tekstelementer, du trenger ikke flere wrappere nå.

 

 

Og ja, du løser alt ved å sette bakgrunner på de nye elementene, istedenfor på diver som før. Og ikke lag tomme titler, skjul teksten med negativ text-indent.

[Arve Systad]

Ikkje tenk på same måten som du gjorde med tabellar, når du treng ei rute i tabellen til absolutt alt du skal ha. Tenk veldig generelle innhaldsområder - vanligvis på ein enkel tokolonners layout treng du ikkje meir enn to-tre div-element, at max.

[Ildflue]

Takker for gode tips på veien, men har fortsatt problemer med at siden ser helt feil ut i opera og IE