DIV trøbbel... ny side

g0mpen · 27. august 2004

Ja, jeg jobber altså med min første CSS/DIV side...Se her.

Bruker en container div rundt det hele, en for header, en for meny, og en for innhold. Problemet er at innholdet flyter helt inntil menyen, slik at borderen til menyen blir skjult av innholds div'en...

Hvordan kan jeg skape litt mellomrom mellom de to div'ene, har prøvd både margin og padding, men ingenting ser ut til å funke. I IE ser siden mye verre ut, der er den ikke midtstilt, og det kommer rare små mellomrom frem mellom div'ene noen steder... Prikkene i lista ser litt malplasserte ut og...

Anyway, kode:

<body bgcolor="32536B">
<div id="container">
 
<div id="header">
<img src="http://home.no.net/oyvkjar/test/header2.jpg" width="700" height="100">
</div>

<div id="meny">
   <ul>
     <li>Hjem</li>
     <li>Crew</li>
     <li>Film</li>
     <li>Bilder</li>
     <li>Anmeldelser</li>
     <li>Matprat</li>
     <li>Forum</li>
     <li>Ka du trur?</li>
   </ul>
</div>

<div id="innhold">
Lalala
</div>
<hr style="visibility:hidden;clear:both">
</div>
</body>

CSS:

div#container {
background: url("http://home.no.net/oyvkjar/test/bg.gif");
border: 1px solid #000;
padding: 0px;
width: 700px;
margin: 0 auto;
}
div#header {
background: #fff;
border: 0;
padding: 0px;
width: 700px;
}
div#meny {
background: #f3f3f3;
border: 0;
padding: 0px;
width: 140px;
float: left;
}
div#innhold {
background: #fff;
border: 0;
margin: 0;
padding: 0px;
width: 550px;
}
ul{
list-style: disc url(dot.gif) inside;
margin: 0;
padding:0;
}

li {
margin: 0;
padding: 0;
}
html {
  body: 100%;
}

Hva er galt med koden min? Hva kan endres for å få siden til å se lik ut i Firefox og IE?

Takk.

PoleCat · 27. august 2004

Du må floate #innhold også.

g0mpen · 27. august 2004

Ja, men når jeg floater den til høyre, kommer den på "neste linje", det vil si under menyen... men da til høyre selvsagt :ermm:

Haraldson · 27. august 2004

Det må være plass i bredden for begge divene, men det har du fiksa?

g0mpen · 27. august 2004

:blush: Hm...

Edit: Der ja! Takk

Nå må jeg bare fikse IE buggene... :roll:

Endret 27. august 2004 av g0mpen

PoleCat · 27. august 2004

Du kan liksågodt floate den til venste.

g0mpen · 27. august 2004

Blir det mellomrom da? Jeg bruker bakgrunnsbilde til å "lage" menyen, så dersom innholdet går helt oppi menyen, vises ikke bakgrunnsbildet i container, og dermed heller ikke meny borderen osv.

I IE er det en liten marg mellom header og resten av siden, hva skyldes det? Hvorfor ser prikkene i liste-elementene så malplasserte ut? Hvorfor er den ikke midtstilt?

Endret 27. august 2004 av g0mpen

PoleCat · 27. august 2004

Kan jeg spørre hvorfor du har brukt

background: rgb(243, 243, 243) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy:

for å definere en enkel bakgrunn?

Dersom du floater uten å definere margins, blir det ikke avstand nei. Men denne kan du selvsagt definere selv om det er ønskelig.

g0mpen · 27. august 2004

Hvor har du det ifra? Finner ikke det i min kode... tror jeg hadde noe slikt en stund, prøvde noe jeg fant her på forumet i en gammel tråd...

g0mpen · 27. august 2004

Virker som om sidene blir litt sent oppdatert eller noe... jeg er 100% sikker på at jeg ikke har det i koden min nå :dontgetit:

PoleCat · 27. august 2004

Sorry, "min" feil. Web-developer toolbar som skaper seg. :blush:

g0mpen · 28. august 2004

Hva kan jeg gjøre med at IE bugger seg da?

PoleCat · 28. august 2004

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ziggazagg</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #32536B;
}
div#container {
background: url("http://home.no.net/oyvkjar/test/bg.gif");
border: 1px solid #000;
width: 700px;
margin: 0 auto;
}
h1 {
display: block;
overflow: hidden;
padding: 99px 0 0 0;
height: 0 !important;
height /**/: 99px;
background: url("http://home.no.net/oyvkjar/test/header2.jpg") no-repeat;
border-bottom: 1px solid #000;
}
div#meny {
background: #f3f3f3;
width: 140px;
float: left;
}
div#innhold {
background: #fff;
width: 550px;
float: right;
}
ul{
list-style: disc;
}
li {
margin: 0;
padding: 0;
}
</style>
</head>

<body>

<div id="container">

 <h1>gompen</h1>

 <div id="meny">
   <ul>
     <li>Hjem</li>
     <li>Crew</li>
     <li>Film</li>
     <li>Bilder</li>
     <li>Anmeldelser</li>

     <li>Matprat</li>
     <li>Forum</li>
     <li>Ka du trur?</li>
   </ul>
 </div>

 <div id="innhold">
   <p>Lalala</p>
 </div>

</div>

</body>
</html>

Funker her iallefall. :thumbup:

Endret 28. august 2004 av PoleCat

g0mpen · 28. august 2004

Tusen takk, ser mye bedre ut. Men siden er fortsatt ikke midtstilt i IE...?

Har forresten byttet plassering, så den kommer ikke til å virke på den gamle lenger...

Endret 28. august 2004 av g0mpen

PoleCat · 28. august 2004

Den er det her.

2 sec så skal jeg laste opp min versjon.

Her.

Endret 28. august 2004 av PoleCat

g0mpen · 28. august 2004

Skjønner ikke hvorfor det ikke virker med min, jeg kopierte jo det du postet tidligere... Din er midtstilt også i IE, men i firefox kommre jo liste elementene delvis utenfor menyen... prikkene altså... :dontgetit:

Edit: I din versjon kommer innholdet inn på menyen, under listen...

Endret 28. august 2004 av g0mpen

PoleCat · 28. august 2004

Gah, lastet opp feil versjon. :blush:

Denne skal funke.

EDIT; Koden jeg postet tidligere, innehold også småfeil, denne skal være riktig.

Endret 28. august 2004 av PoleCat

g0mpen · 28. august 2004

Virker ikke, nå ble bare menyen delvis ødelagt :ermm:

Finnes det ikke en enkel hack som midtstiller siden? Det er egentlig det eneste jeg trenger nå.

Endret 28. august 2004 av g0mpen

PoleCat · 28. august 2004

Er det noen andre som kan bekrefte at det ikke funker? Det fungerer nemlig smertefritt her, IE6, Opera 7.23 og FF0.9.

g0mpen · 28. august 2004

Din fungerer, men når jeg kopierer de bitene av koden som du forandret, så virker det ikke... vil ikke kopiere hele koden, fordi jeg har forandret den litt, konvertert til php, og laget ekstern stilsett...

Istedet gikk jeg igjennom hele koden din, og brukte klippe og lime for å reparere det som var "galt" med min. Da virket det ikke, derfor skiftet jeg det delvis tilbake.

Alt fungerer egentlig som det skal, jeg trenger bare en IE hack som gjør siden midtstilt.

Logg inn

DIV trøbbel... ny side

Anbefalte innlegg

g0mpen

Videoannonse

PoleCat

g0mpen

Haraldson

g0mpen

PoleCat

g0mpen

PoleCat

g0mpen

g0mpen

PoleCat

g0mpen

PoleCat

g0mpen

PoleCat

g0mpen

PoleCat

g0mpen

PoleCat

g0mpen

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer