CSS, DIV og problemer

[hockey500]

Hvis jeg har 4 DIVs, f. eks. en header, en footer, en meny og en "innhold".

Da header har en bredde på 800px og footer har det samme. innhold har en bredde på 620px og meny har en bredde på 180px. hvordan får jeg da midtstilt dete hele sånn at header står for seg, og under header står innhold og meny ved siden av hverandre? det går fint med bare en DIV, men når jeg får 2 ved siden av hverandre er jeg usikker på hvordan jeg skal få de til å ligge ved siden av hverandre.

 

jeg kan jo bare si at f. eks. header har en margin-left på da 250px og stille inn "innhold" slik at den blir stående rett under, men det blir vel ikke stående sånn hvis noen andre har en annen oppløsning eller lignende?

[haugsand]

Legg alle div-ene i et annet div-element som har margin: 0 auto;

 

Mer utfyllende informasjon.

[hockey500]

men det vil vel ikke sentrere i IE?

[hockey500]

det gikk ikke. det ble ikke sentrert av det... jeg må ha margin:0 auto; i alle divene, men jeg mista da menyen...

Endret 23. desember 2004 av hockey500

[phanti]

mulig at dette er en IE 3 px feil. Du får ikke filen i opera eller firefox ikke sant?

Kan uansett se om du blir noe klokere her.

 

Det vil kort og godt si at du setter height: 1% på elementet som innholdet er forskøvet. Tror jeg surrer nå, og at det er en double margin feil. Søk på forumet hvis det er den typen feil.

[hockey500]

jeg klarer det ikke... siden blir midtstilt i IE, men ikke i Opera eller FF. Og menyen kommer ikke frem i noen av browserne

Endret 23. desember 2004 av hockey500

[Steinmann]

margin: 0 auto må/bør være i en wrapper da!

kansje komme med en link?

[PoleCat]

*finne frem t-skjeen* (som forøvrig blir mye brukt på dette forumet)

 

body {
 text-align: center;
}
#wrap {
 margin: 0 auto;
 text-align: left;
 width: 800px;
}
h1 {
 overflow: hidden;
 padding: 100px 0 0 0;
 height: 0 !important;
 height /**/ : 100px;
 background: url("header.png");
}
ul#meny {
 float: left;
 width: 180px;
}
div#innhold {
 float: left;
 width: 620px;
}
p#footer {
 text-align: center;
 clear: both;
}

 

<div id="wrap">
 <h1>Sidetittel</h1>

 <ul id="meny">
  <li><a href="#">Meny01</a></li>
  <li><a href="#">Meny02</a></li>
  <li><a href="#">Meny03</a></li>
  <li><a href="#">Meny04</a></li>
  <li><a href="#">Meny05</a></li>
 </ul>

 <div id="innhold">
  <p>I (heart) Firefox! Hvis jeg har 4 DIVs, f. eks. en header, en footer,
   en meny og en "innhold". Da header har en bredde på 800px og footer
   har det samme. innhold har en bredde på 620px og meny har en bredde
   på 180px. hvordan får jeg da midtstilt dete hele sånn at header står for
   seg, og under header står innhold og meny ved siden av hverandre? det
   går fint med bare en DIV, men når jeg får 2 ved siden av hverandre er
   jeg usikker på hvordan jeg skal få de til å ligge ved siden av hverandre. </p>
  </div>

  <p id="footer"><small>Denne siden er mekket av hockey500.</small></p>
</div>

Endret 24. desember 2004 av PoleCat

[Steinmann]

må jo ha riktig html!

lukker ikke wrap, og lukker ikke <small>

[PoleCat]

må jo ha riktig html!

lukker ikke wrap, og lukker ikke <small>

Blablabla.

 

Fikset nå.

[hockey500]

da ser siden forskjellig ut i IE og opera.. menyen er for langt ned i Opera.

 

 

uansett så ble nå ikke siden midtstilt i opera. I opera er "Denne siden er mekket av hockey500." det eneste som står i midten.

 

poenget var at avstanden fra venstresiden av menyen og ut til kanten av skjermen skulle være like stor som avstanden fra høyresiden av "innhold" og ut til kanten av skjermen.

 

Jeg fikk det til selv i IE, men ikke i Opera. og når jeg satt inn tekst i "innhold" ble hele greie satt 2px lenger ned. så det ble en hvit strek (som bare kommer til syne når jeg har bakgrunnsbilde.

 

dette er det nærmeste jeg har kommet: link

 

da er det 2 problemer:

 

1:siden vises ikke i Opera 8.00 beta og FF

2: jeg får ikke hevet menyen så den ligger rett under header.

 

dette er kun et eksempel så ikke klag på fargene

Endret 24. desember 2004 av hockey500

[PoleCat]

Glemte selvsagt å sette bredde på #wrap.

 

Det må du gjøre.

 

EDIT: Oppdaterte posten min med koden.

Endret 24. desember 2004 av PoleCat

[hockey500]

hvis jeg setter bredde på #wrap midtstilles den ikke i IE lenger

[Steinmann]

også veit jeg ikke hvor lurt det er å bruke display: inline

på noe som skal være block?

så du hadde det på det eksempele ditt!

[hockey500]

hvis jeg ikke har det, kommer meny under "innhold"

[PoleCat]

Hvilken doctype bruker du?

[Steinmann]

Da kan man si med sikkerhet at noe er galt!

Og du har ikke brukt float i den koden din...!