Hej folkens! Jeg er ved at opdatere min hjemmeside til udelukkende at bruge css (divs) istedet for tables:
http://www.psylicium.dk/divs.htm
Jeg har dog et stort problem, som jeg har brugt evigheder på at opklare, desværre uden held :( Jeg bruger 3 <div>'s - en "#parent", "#header", "#navigation" og "#content". Jeg har "nested" header, navigation og content i parent-div'en, og jeg vil gerne ha' parent-div'en til at have en fast højde, f.eks. 500px, men samtidig blive højere i takt med at der kommer fyld i "content"-div'en. Jeg har prøvet stort set alt: overflow, min-height: 100%, height: 100% og meget andet. Jeg ved ikke om det jeg har skrevet giver mening, men siden skulle gerne komme til at se således ud:
http://www.psylicium.dk/layout.gif
Som det ses, skal parent-div'en have samme bundlinie som content-div'en hvis content er højere end parent, men som det er nu "overlapper" div'erne parent-div'en istedet for at være indeni den...
Min CSS:
html, body
{
text-align: center;
margin: 0px;
padding: 0px;
min-height: 100%;
background-color: #ff0000;
}
A:link
{
font-family: "Verdana", Arial, sans-serif;
font-size: 10px;
text-decoration: none;
color: #c0c0c0;
}
A:visited
{
font-family: "Verdana", Arial, sans-serif;
font-size: 10px;
text-decoration: none;
color: #808080;
}
A:hover
{
font-family: "Verdana", Arial, sans-serif;
font-size: 10px;
text-decoration: none;
color: #ffffff;
}
A:active
{
font-family: "Verdana", Arial, sans-serif;
font-size: 10px;
text-decoration: none;
color: #ffffff;
}
p
{
font-family: "Verdana", Arial, sans-serif;
margin-top: 0;
font-size: 10px;
text-decoration: none;
color: #c0c0c0;
margin-left: 1em;
margin-right: 1em;
margin-top: 1em;
}
.nomargin
{
font-family: "Verdana", Arial, sans-serif;
margin-top: 0;
font-size: 10px;
text-decoration: none;
color: #c0c0c0;
margin-left: 0em;
margin-right: 0em;
margin-top: 0em;
}
#parent {
position:relative;
top: 0px;
bottom: 0px;
width: 700px;
height: auto;
text-align: left;
z-index: 1;
background-color: #00ff00;
border: 1px solid #ffffff;
}
#header {
position:absolute;
top: 0px;
width: 700px;
height: 135px;
text-align: left;
z-index: 2;
border: 1px solid #ffffff;
}
#navigation {
position:absolute;
top: 135px;
width: 170px;
height: 200px;
text-align: left;
background-color: #000000;
border: 0px solid #ffffff;
}
#affiliates {
position:absolute;
top: 336px;
width: 170px;
height: 200px;
text-align: left;
background-color: #000000;
border: 0px solid #ffffff;
}
#content {
position:absolute;
top: 135px;
right: 0px;
width: 529px;
text-align: left;
background-color: #000000;
border: 0px solid #ffffff;
}
- og min html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel='stylesheet' href='styles.css' type='text/css' />
</head>
<body>
<div id="leftbox"></div>
<div id="parent">
<div id="header">
<p>Header
</div>
<div id="navigation">
<p>Navigation
</div>
<div id="affiliates">
<p>Affiliates
</div>
<div id="content">
<p>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>ContentContent<br>Content<br>Content<br>Content
</div>
</div>
</body>
</html>
Er der nogen der har et forslag til, hvordan jeg kan opnå den ønskede effekt?
På forhånd tak
Henrik