harvekst
12 May 2008, 03:31 AM
I have a school project to make a web site in html and css using notepad as a tool. Well, I stumbled across a big problem today, and I have to deliver it to morrow so i need an answer quick.
well, the background is suposed to be a frame around the actual site, but on the top and on the left i disepears. I can see it on the bottom and to the right.
Heres a picture of the site (http://www.diskusjon.no/index.php?act=attach&type=post&id=227932)
And where the drawing is there should be white splatter.
The css code, alitle messy.
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;
}
div.storsak
{
background:#cccccc;
width: 770px;
Height: 620px;
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;
}
and the index html site.
<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>
This is my first page in css so be kind.
well, the background is suposed to be a frame around the actual site, but on the top and on the left i disepears. I can see it on the bottom and to the right.
Heres a picture of the site (http://www.diskusjon.no/index.php?act=attach&type=post&id=227932)
And where the drawing is there should be white splatter.
The css code, alitle messy.
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;
}
div.storsak
{
background:#cccccc;
width: 770px;
Height: 620px;
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;
}
and the index html site.
<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>
This is my first page in css so be kind.