DIVs problem, oppsett

hockey500 · 15. januar 2005

hvordan midtstiller jeg en side som skal ha en header på 700px, under den skal en innholdsboks være 550px og en meny til høyre for denne som er 140px?

laget en tegning av den...

siden skal være midtstilt...

klarer å midtstille ett element, men når det er 2 ved siden av hverandre blir det verre. De legger seg bare på hver sin linje...

og hvis jeg skal definere størrelsen til en DIV med % kan jeg kun definere enten bredde eller høyde i prosent. Virker bare ikke med begge samtidig...

noen som vet hvordan noe slikt skal lages?

magh · 15. januar 2005

HTML:

(..) innhold (..)

</div>

CSS:

body

{

text-align: center;

}

#container

{

width: 700px;

margin: 0 auto;

text-align: left;

}

PoleCat · 15. januar 2005

magh: Jeg trodde det var det han sa at han faktisk fikk til. :blush:

-----------------

For å få de to div'ene på siden av hverandre bruker du float: left på begge to.

hockey500 · 15. januar 2005

kanskje det blir lettere å finne feilen hvis jeg kommer med koden:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>testside</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="wrap">
<div id="header">
</div>
<div id="innhold">
</div>
<div id="meny">
</div>
<div id="footer">
</div>
</div>



</body>
</html>

CSS

 	
#wrap {
 	text-align:left;
 	margin:0 auto;
 	width:700px;
 	}
 	
#header {
   width:700px;
   height:190px;
   border:1px solid;
   margin:0 auto;
   }
   
#innhold {
    width:500px;
    height:400px;
    border:1px solid;
    }
 
#meny {
 	width:190px;
 	height:400px;
 	border:1px solid;
 	}
 	
#footer {
   margin:0 auto;
   border:1px solid;
   width:700px;
   height:50px;
   }

da blir alle elementene plassert på en linje for seg. og DIVene er dobbelt så store i IE som i opera????

PoleCat · 15. januar 2005

body {
 text-align: center;
}

#wrap {
 text-align:left;
 margin:0 auto;
 width:700px;
 }

#header {
  height:190px;
  border:1px solid #000;
  }
  
#innhold {
   width:500px;
   height:400px;
   border:1px solid #000;
   float: left;
   }

#meny {
 width:190px;
 height:400px;
 border:1px solid #000;
 float: left;
 }

#footer {
  border:1px solid #000;
  height:50px;
  clear: left;
  }

^^ Fungerer den? (fjernet også litt unødvendige verdier, og la til farge på border)

Endret 15. januar 2005 av PoleCat

hockey500 · 15. januar 2005

nærmeste jeg har kommet det jeg vil ha:

#wrap {

text-align:left;

margin:0 auto;

width:700px;

}

#header {

width:698px;

height:190px;

border:1px solid;

margin:0 auto;

}

#innhold {

width:500px;

height:400px;

border:1px solid;

float:left;

}

#meny {

width:190px;

height:400px;

border:1px solid;

float:right;

}

#footer {

margin:0 auto;

border:1px solid;

width:698px;

height:50px;

}

men i opera ligger nå footer rett under headeren og dekker toppen av meny og innhold.

PoleCat · 15. januar 2005

La til en clear på #footer i koden min over. Glemte den. :blush:

hockey500 · 15. januar 2005

Fungerer den? (fjernet også litt unødvendige verdier, og la til farge på border)

ja den virker i IE, men ikke i opera.

Endret 18. januar 2005 av hockey500

hockey500 · 15. januar 2005

la ikke merke til at du hadde lagt til Clear:both... da virker det! takk!

men: siden er dobbelt så stor i IE som i opera...

fant nå ut at dette gjelder kun Opera 8b.

den er normal i opera 7, IE, Avant og FF. kun testet i disse 5.

men hvorfor er den så liten i Opera 8b? kanskje fordi det foreløpig bare er en beta?

Endret 15. januar 2005 av hockey500

hockey500 · 15. januar 2005

og jeg kunne godt brukt float:left; på begge elementene PoleCat, men da la innhold og menyen seg helt oppi hverandre. med float:left på innhold og float:right; på meny og Clear:both; på footer virker alt som det skal..

Steinmann · 15. januar 2005

jeg ser ingen forskjell mellom Opera(8b1) og IE(6)

prøvd å teste den i andre versjoner av Opera, og/eller en annen maskin?

hockey500 · 15. januar 2005

den er testa i opera 7 og 8b. hos meg er den knøttliten i 8b. dette gjelder teksten også

hockey500 · 15. januar 2005

oppdaterer linken litt: http://home.no/hakwik/index.html

det er satt inn litt padding i innhold og meny, økt line-height, font-family og finjustert DIVene

Dunestar · 16. januar 2005

Jeg ser at PoleCat allerede har postet et forslag som sikkert fungerer utmerket,

men vil gjerne tipse deg om layout-o-matic. Forenkler arbeidet mye.

hockey500 · 17. januar 2005

nytt problem:

midtstille 2 elementer:

</div>

</div>

er ikke det riktig? ligger ikke da innhold og meny innenfor wrap? jeg trodde at hvis jeg da setter hight til auto i wrap vil den bli like høy som den lengste av innhold eller meny? eller?

Steinmann · 17. januar 2005

jeg har erfart personlig at hvis man setter

display: table i wrap så funker det!

sikkert ikke semantisk korrekt da.. :S

Simon Zimmermann · 18. januar 2005

Hei, jeg er ikke helt sikker på om jeg skjønner det siste problemet ditt hockey500, så om du har lyst til å formulere en gang til så ville det hvert kjempefint.

Et annet sted hvor jeg la merke til at du gjør litt feil er HTML-en. Her kan jeg anbefale deg å lese Arves; Markering er Viktig og om Paragrafer og Overskrifter

Forresten, de referanselinkene var kanskje ikke så bra, så her er en til: W3schools.com/HTML 4.1 - strict

Endret 18. januar 2005 av Waldmeister

Logg inn

DIVs problem, oppsett

Anbefalte innlegg

hockey500

Videoannonse

magh

PoleCat

hockey500

PoleCat

hockey500

PoleCat

hockey500

hockey500

hockey500

Steinmann

hockey500

hockey500

Dunestar

hockey500

Steinmann

Simon Zimmermann

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer