Bakgrunn forsvinner der det er margin.

[Haarvekst]

Jeg lager en web sidet som en skole oppgave. Vi har bare lov til å bruke notepad som redigerings program, og vi bruker html og css. Det har gått helt fint helt til jeg nå støtte på et merkelig problem. Bakgrunnen jeg har forsvinner der det er margin på hoved siden min. Bakgrunnen er på en måte en ramme på siden min da.

 

 

der den svarte tusjen er skal det egentlig være hvit spraymaling sånn som til høyre og i bunnen.

 

CSS koden. (hele koden)

 

body

{
background:#b1b0b0;
color:white;
margin-left: 70px;
margin-top: 30px;
font-family:"verdana";
 font-size:13px;
 vertical-align:center; 
 }



h3

 {
  font-family: "Garamond";
 font-size:35px;
 margin:0 0 200 130;
 position:absolute;left:170px;top:10px;
 }



h2

 {
 font-family: "Calibris";
 font-size: 15px;
 position:absolute;left:180px;top:50px;
 }

h2.lang

 {
 font-family: "Calibris";
 font-size: 15px;
 position:absolute;left:300px;top:80px;
 }


h2.nine

 {
 font-family: "Calibris";
 font-size: 15px;
 position:absolute;left:180px;top:65px;
 }

h1

 {

 font-family: "Garamond";
 font-size:30px;
 margin:0 0 200 0;
 position:absolute;left:180px;top:10px;
 }

div.ramme
{

width:1500px;
height:1500px;
background:url(ramme.jpg);
background-repeat: no-repeat;
background-position: -448px -150px;


}



div.hele
 {
 background:black;
 width:850px;
 height:100;
 padding: 15px;
 border: Solid white 4px;




 }

div.innhold
 {
 background:#b1b0b0;
 width:850px;
 height:625px;
 padding: 15px;
 border: Solid white 4px;
 border-top: solid black 0px;
 vertical-align:center; }

div.inni

 {
 Width:600px; 
 height:30;
 Background:#bfbfbf;
 border: solid white 3px;
 text-align: center;
 font: Black;
 float:right;
 margin: 82 60 0 0;
 border-bottom: solid black 0px;

 }

div.liten
 {
 background:#cccccc;
 color:black;
 width: 370px;
 Height: 180px;
 border: solid white 1px;
 margin: 300 0 0 25;
 position:absolute;left:100px;top:125px;
 }




div.liten2

{ 
 background:#cccccc;
 width: 370px;
 Height: 180px;
 color: black;
 border: solid white 1px;
 margin: 300 200 200 425;
 position:absolute;left:100px;top:125px;
} 

div.liten3
 {
 background:#cccccc;
 color:black;
 width: 370px;
 Height: 180px;
 border: solid white 1px;
 margin: 495 0 0 25;
 position:absolute;left:100px;top:125px;
 }


div.liten4

{ 
 background:#cccccc;
 width: 370px;
 Height: 180px;
 color: black;
 border: solid white 1px;
 margin: 495 200 200 425;
 position:absolute;left:100px;top:125px;
} 

div.lang

{ 
 background:#cccccc;
 width: 770px;
 Height: 225px;
 color: black;
 border: solid white 1px;
 margin: 60 100 200 25;
 position:absolute;left:100px;top:125px;
} 





img.lesher
 {
  position:absolute;right:20px;bottom:10px;
  }
img.nylesher
 {
  position:absolute;right:20px;bottom:10px;
  }
img.nylesher2
 {
  position:absolute;right:20px;bottom:10px;
     }

img.lesherlang
 {
  position:absolute;right:20px;bottom:10px;
  }
img.stuff
 {
 margin:0 0 50 20;
 }

img.iron
 {
 margin:10 10 10 10;
 }

img.fighter
 {
 margin:10 10 10 10;
 }

img.batman
 {
 margin:10 10 10 10;
 }

img.meny
 {
 margin:5 10 10 10;
 }

a.lesher
 {
 color:#cccccc;
 font-size:20px;
 }

a.lesherlang
 {
 color:#cccccc;
 font-size:20px;
 }

a:hover.overskrift
 {
 color:black;
 Text-decoration:none;
 }


a:hover.lesher  

 {
 color:#cccccc; 
 text-decoration:none;
 }  

a.meny
 {
 color:#bfbfbf;
 text-decoration:none;
 }
a:hover.meny
 {
 img:filmhvit.gif;

 }

a

 {
 color:black;
 font-size:20px;
 }


a:hover
 {
 color:white;
 text-decoration:none;
 }



div.nyhet1
 {
   background:#cccccc;
 width: 770px;
 Height: 180px;
 color: black;
 border: solid white 1px;
 margin: 70 100 200 25;
 position:absolute;left:100px;top:125px;
 }

div.nyhet2
 {
   background:#cccccc;
 width: 770px;
 Height: 180px;
 color: black;
 border: solid white 1px;
 margin: 270 100 200 25;
 position:absolute;left:100px;top:125px;
 }


div.nyhet3
 {
   background:#cccccc;
 width: 770px;
 Height: 180px;
 color: black;
 border: solid white 1px;
 margin: 470 100 200 25;
 position:absolute;left:100px;top:125px;
 }

 

 

 

 

index html koden.

<html>
<head>
<title>
Ukultur! Det meste innen Film og Musikk
</title>
<link rel="stylesheet" type="text/css" href="film.css"/>

</style>
</head>
<body>

<div class="ramme">
<div class="hele">
<div class="inni">
<TD><a href="nyheter.htm" class="meny"

onmouseover="document.bi.src='nyheterhvit.gif'" 

onmouseout="document.bi.src='nyheter.gif'"/>

<img src="nyheter.gif" class="meny" border="0" name="bi"/></a>



<TD><a href="film.htm" class="meny"

onmouseover="document.bi2.src='filmhvit.gif'" 

onmouseout="document.bi2.src='film.gif'"/>

<img src="film.gif" class="meny" border="0" name="bi2"/></a>



<TD><a href="musikk.htm" class="meny"

onmouseover="document.bi3.src='musikkhvit.gif'" 

onmouseout="document.bi3.src='musikk.gif'"/>

<img src="musikk.gif" class="meny" border="0" name="bi3"/></a>

<TD><a href="nettsider.htm" class="meny"

onmouseover="document.bi4.src='nettsiderhvit.gif'" 

onmouseout="document.bi4.src='nettsider.gif'"/>

<img src="nettsider.gif" class="meny" border="0" name="bi4"/></a>


</a>
</div>




<a href="index.htm" class="overskrift">
<img src="overskrift.gif" class="stuff">
</a>
</div>
<div class="innhold">





<br>
<div class="liten">
<a href="ironman.htm">
<img src="ironman.gif" class="iron"></a>
<h1>
Iron Man
</h1>
<h2>
Annmeldelse av årets første superhelt film!
</h2>
<TD><a href="ironman.htm" class="lesher"

onmouseover="document.lesher2.src='lesherhvit.gif'" 

onmouseout="document.lesher2.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher2"/></a>

</a>
</div>







<div class="liten2">
<a href="Blacklips.htm" class="iron">
<img src="blacklips.gif" class="iron">
</a>
<h1>
Black lips
</h1>
<h2>
Hove aktuelle Black lips anmeldelse, tull eller ball?
</h2>

<TD><a href="blacklips.htm" class="lesher"

onmouseover="document.lesher3.src='lesherhvit.gif'" 

onmouseout="document.lesher3.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher3"/></a>

</a>
</div>

<div class="liten3">
<a href="nine.htm" class="iron">
<img src="nine.gif" class="iron">
</a>
<h1>
Nine Inch Nails!
</h1>
<h2 class="nine">
Nine Inch Nails følger trenden og gir vekk cden sin gratis!
</h2>

<TD><a href="fighter.htm" class="lesher"

onmouseover="document.lesher4.src='lesherhvit.gif'" 

onmouseout="document.lesher4.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher4"/></a>

</a>
</div>





<div class="liten4">
<a href="spirit.htm" class="iron">
<img src="spirit.gif" class="iron">
</a>
<h1>
The Spirit
</h1>
<h2>
Ny kunstnerisk film av Frank Miller i vente.
</h2>

<TD><a href="spirit.htm" class="lesher"

onmouseover="document.lesher5.src='lesherhvit.gif'" 

onmouseout="document.lesher5.src='lesher.gif'"/>

<img src="lesher.gif" class="lesher" border="0" name="lesher5"/></a>

</a>
</div>






<div class="lang">
<a href="batman.htm">
<img src="batman.gif" class="iron"></a>
<h3> Vi teller ned til the Dark knight! </h3>
<h2 class="lang">
I sommer er det premiere på den nye batman filmen, jeg sover mindre og mindre jo mindre tid det er til premieren.
Les om den her!
</h2>

<TD><a href="batman.htm" class="lesherlang"

onmouseover="document.lesher6.src='lesherhvit.gif'" 

onmouseout="document.lesher6.src='lesher.gif'"/>

<img src="lesher.gif" class="lesherlang" border="0" name="lesher6"/></a>

</div>



</div>




Ukultur.no
Kontakt oss
</div>
</body>
</html>

 

Litt lange og rotete koder, men håper noen kan hjelpe meg!

Trenger det virkelig. Vedder på at det er noe som er rett foran nesa på meg!

takker hjertelig for svar!

Endret 11. mai 2008 av Haarvekst

[Haraldson]

Det er ikke akkurat normalt å sette margin på body. Sett bakgrunnen din på body, og bruk en container-div for å plassere hele siden.

 

Se for så vidt dokumentasjon på boksmodellen - bakgrunner vil aldri vises 'på' en margin.

[Haarvekst]

Tusen takk.

Første gang jeg lager en side med css og den andre skikkelig internett side jeg har laget så.

men funker som heia nå!