Gå til innhold

DIV trøbbel... ny side

g0mpen

Av g0mpen
i Programmering og webutvikling

Anbefalte innlegg

g0mpen

g0mpen

Skrevet
Skrevet

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.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
g0mpen

g0mpen

Skrevet
  • Forfatter
Skrevet (endret)

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 av g0mpen
Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet

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.

Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet (endret) 

<!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 av PoleCat
Lenke til kommentar
g0mpen

g0mpen

Skrevet
  • Forfatter
Skrevet (endret)

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 av g0mpen
Lenke til kommentar
g0mpen

g0mpen

Skrevet
  • Forfatter
Skrevet

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.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...