Problem med css kode til design.
Hej EksperterJeg er i gang med at forsøge mig med et design til en hjemmeside.
Jeg kan bare ikke rigtig få min CSS kode til at passe så mine div's bliver placeret rigtigt, så jeg håber, at I kan hjælpe mig med den mest hensigtsmæssige kode, og evt. forklare mig hvorledes fremgangsmåden er.
Min index.htm ser således ud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test side</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="center">
<div id="banner">
<div id="bannertop"></div>
<div id="bannercontent">Banner</div>
<div id="bannerbund"></div>
</div>
<div id="menu">
<div id="menutop"></div>
<div id="menucontent">
<ul>
<a href="index.html">Test 1</a>
<a href="index.html">Test 2</a>
<a href="index.html">Test 3</a>
</ul>
</div>
<div id="menubund"></div>
</div>
<div id="content">
<div id="contenttop"></div>
<div id="contentmidt">
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br><br>
Indhold<br>
Indhold<br><br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br><br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br><br>
Indhold<br>
Indhold<br>
Indhold<br>
</div>
</div>
<div id="contentbund"></div>
</div>
</body>
</html>
Min hensigt er, at jeg gerne skulle have et fast billede i:
#bannertop
#bannerbund
#menutop
#menubund
#contenttop
#contentbund
og et løbende/gentagende billede i:
#bannercontent
#menucontent
#contentmidt
Derudover kan jeg ikke lave et "mellemrum" under #contentmidt hvis indholdet bliver for langt.
mine .css filer ser således ud:
style.css:
@charset "UTF-8";
@import "default/basic.css";
@import "default/banner.css";
@import "default/menu.css";
@import "default/content.css";
@import "default/center.css";
basic.css:
body {
font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif;
font-size: 13px;
background-color: grey;
color: black;
}
banner.css:
#banner {
position: absolute;
left: 0px;
top: 0px;
height: 150px;
width: 100%;
margin: 0px;
background-color: red;
color: black;
background-image: url("test.jpg");
background-repeat: no-repeat;
}
menu.css
#menu {
position: absolute;
top: 170px;
left: 0px;
background-color: yellow;
color: black;
width: 120px;
}
#menucontent ul {
margin: 0px;
padding: 0px;
width: 120px;
}
#menucontent a {
text-decoration: none;
color: black;
background-color: transparent;
width: 120px;
display: block;
}
#menucontent a:hover {
color: black;
background-color: green;
width: 120px;
}
content.css
#content {
position: absolute;
top: 170px;
left: 130px;
right: 5px;
height: auto;
width: 770px;
overflow: auto;
border: 0px;
padding: 0px;
background-color: blue;
}
center.css
#center
{
margin-left: -450px;
position:absolute;
top: 10px;
border: 0px;
left: 50%;
width: 900px;
visibility: visible;
background-color:black;
}
Jeg håber I kan hjælpe mig!
- XuZeM
