Problem angående design
Hej.Jeg er ved at forsøge at lave en skabelon til en hjemmeside vha. HTML og CSS, Det nuværende giver ingen visningsfejl:
index.html:
<? session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<?
$pageid = $_GET['pageid'];
?>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="icon.ico">
</head>
<body>
<div id="main">
<div id="maincontent">
<div id="maincontentt">
<div id="center">
<div id="top">
<div id="logo">
</div>
<div id="banner">
Banner
</div>
</div>
<div id="content">
<br>
<div class="contentcontent">
<div class="contentt">
</div>
<div class="contentc">
</div>
<div class="contentb">
</div>
</div>
</div>
<div id="leftmenu">
<br>
<div class="menucontent">
<div class="menucontentt">
Navigation
</div>
<div class="menucontentc">
<?
include "menu.php";
?>
</div>
<div class="menucontentb">
</div>
</div>
<br>
<div class="menucontent">
<div class="menucontentt">
Reklame
</div>
<div class="menucontentc">
indhold
</div>
<div class="menucontentb">
</div>
</div>
<br>
</div>
</div>
</div>
</div>
<div id="maincontentb">
</div>
</div>
</body>
</html>
style.css:
body {
margin :0 px;
background-color:white;
border: 1px solid black;
}
#center
{
margin-left: -375px;
position:absolute;
top: 2%;
height:96%;
border: 1px solid black;
left: 50%;
width: 750px;
visibility: visible;
background-color:white;
}
#top {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 150px;
background-color:;
}
#logo {
position:absolute;
width:150px;
height:150px;
top:10px;
left:10px;
background-image:url(layout/logo.jpg);
background-position: 50% 50%;
Background-repeat: no-repeat;
background-color:purple;
}
#banner {
position:absolute;
top: 41px;
right: 91px;
background-color:silver;
width:468px;
height:68px;
}
#content {
position:absolute;
top: 150px;
margin-left:170px;
margin-right:10px;
width:570px;
background-color:red;
}
.contentcontent {
position:absolute;
margin-left:0px;
margin:0px auto;
width:570px;
background-image: url(layout/content/contentc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
background-color:yellow;
}
.contentt {
text-align:center;
position:absolute;
background-image: url(layout/content/contentt.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:570px;
height:38px;
left:0px;
background-color:brown;
}
.contentc {
padding-top:50px;
margin-left:5px;
margin-right:5px;
background-color:black;
}
.contentb {
position: absolute;
background-image: url(layout/content/contentb.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:570px;
height:9px;
background-color:white;
}
#leftmenu {
position:absolute;
left:10px;
top:150px;
width:150px;
background-color:silver;
}
.menucontent {
margin:0px auto;
width:150px;
left:0px;
background-image: url(layout/menu/menuc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
text-align:left;
}
.menucontentt {
text-align:center;
position:absolute;
background-image: url(layout/menu/menut.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:38px;
left: 1px;
}
.menucontentc {
padding-top:50px;
margin-left:5px;
margin-right:5px;
background-color:yellow;
}
.menucontentb {
position: absolute;
background-image: url(layout/menu/menub.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:9px;
}
Det jeg ikke kan finde en løsning på er at inkludere:
<div id="main">
<div id="maincontent">
<div id="maincontentt">
<div id="center">
<div id="maincontentb">
efter samme princip som ved henholdsvis menuen og indholdsfeltet hvor der er et fast billede i toppen og bunden og et løbende billede i midten af deltet.
(Jeg vil gerne have rammet selve siden ind)
Jeg har forsøgt mig med følgende i style.css:
body {
margin :0 px;
background-color:white;
border: 1px solid black;
}
#main {
margin-left: -380px;
position:absolute;
top: 2%;
height:96%;
border: 1px solid black;
left: 50%;
width: 760px;
visibility: visible;
background-color:white;
}
#maincontent {
position:absolute;
margin-left:0px;
margin:0px auto;
width:760px;
background-image: url(layout/content/maincontentc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
background-color:yellow;
}
#maincontentt {
text-align:center;
position:absolute;
background-image: url(layout/content/maincontentt.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:760px;
height:38px;
left:0px;
background-color:brown;
}
#center
{
margin-left: -375px;
position:absolute;
top: 2%;
height:96%;
border: 1px solid black;
left: 50%;
width: 750px;
visibility: visible;
background-color:yellow;
}
#maincontentb {
position: absolute;
background-image: url(layout/content/maincontentb.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:760px;
height:9px;
background-color:red;
}
#top {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 150px;
background-color:;
}
#logo {
position:absolute;
width:150px;
height:150px;
top:10px;
left:10px;
background-image:url(layout/logo.jpg);
background-position: 50% 50%;
Background-repeat: no-repeat;
background-color:purple;
}
#banner {
position:absolute;
top: 41px;
right: 91px;
background-color:silver;
width:468px;
height:68px;
}
#content {
position:absolute;
top: 150px;
margin-left:170px;
margin-right:10px;
width:570px;
background-color:red;
}
.contentcontent {
position:absolute;
margin-left:0px;
margin:0px auto;
width:570px;
background-image: url(layout/content/contentc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
background-color:yellow;
}
.contentt {
text-align:center;
position:absolute;
background-image: url(layout/content/contentt.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:570px;
height:38px;
left:0px;
background-color:brown;
}
.contentc {
padding-top:50px;
margin-left:5px;
margin-right:5px;
background-color:black;
}
.contentb {
position: absolute;
background-image: url(layout/content/contentb.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:570px;
height:9px;
background-color:white;
}
#leftmenu {
position:absolute;
left:10px;
top:150px;
width:150px;
background-color:silver;
}
.menucontent {
margin:0px auto;
width:150px;
left:0px;
background-image: url(layout/menu/menuc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
text-align:left;
}
.menucontentt {
text-align:center;
position:absolute;
background-image: url(layout/menu/menut.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:38px;
left: 1px;
}
.menucontentc {
padding-top:50px;
margin-left:5px;
margin-right:5px;
background-color:yellow;
}
.menucontentb {
position: absolute;
background-image: url(layout/menu/menub.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:9px;
}
Ved at skrive dette "klumper" felterne sammen i toppen af siden, og dermed kan jeg ikke opnå den ønskede effekt.
Jeg håber I kan hjælpe mig med at løse dette problem.
Hilsen
Frederik
