Elizabeth F
Gebruiker
- Lid geworden
- 31 jul 2007
- Berichten
- 55
Hallo,
Ik ben bezig met een site in divs en ik wil liquid design toepassen. Ik begrijp dat ik met % moet werken maar als ik de hoogte van een div in percentages opgeef zie ik hem niet in de browser. Verder worden ook de linker en rechter rand van de site niet weergegeven. Ik heb met relatieve divs gewerkt en float;left;.
Hier de code:
CSS:
@charset "utf-8";
/* CSS Document */
body{
background-color: #CCCCCC;
}
#container{
position:relative;
margin:auto;
width:100%;
height:100%;
}
#kop{
position:relative;
width:100%;
height:100px;
float:left;
background-color: #fcfbe5;
text-align:center;
padding-top:10px;
}
#menu{
position:relative;
width:100%;
height:45px;
float:left;
background-color:#45a9e2;
text-align:center;
}
#linkerrand{
position:relative;
width:10%;
height:50%;
float:left;
background-color:#58c3e6;
}
#content{
position:relative;
width:80%;
height:50%;
float:left;
background-color:#fcfbe5;
}
#rechterrand{
position:relative;
width:10%;
height:50%;
float:left;
background-color:#58c3e6;
}
#onderrand{
position:relative;
width:100%;
height:25px;
float:left;
background-color:#45a9e2;
}
#copyright{
position:absolute;
left:80%;
top:0px;
width:197px;
height:25px;
}
td{
text-align:left;
padding-left:10px;
}
.copyright{
color: #CCFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ict-service4all</title>
<link href="ben.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="copyright"> </p>
<div id="container">
<div id="kop"><img src="images/logo.gif" alt="logo" width="500" height="86" /></div>
<div id="menu"></div>
<div id="linkerrand"></div>
<div id="content">nnnnn</div>
<div id="rechterrand"></div>
<div id="onderrand">
<div id="copyright"><img src="images/copyright.gif" alt="copyright" width="197" height="25" /></div>
</div>
</div>
</body>
</html>
Misschien kan iemand mij helpen.
Ik ben bezig met een site in divs en ik wil liquid design toepassen. Ik begrijp dat ik met % moet werken maar als ik de hoogte van een div in percentages opgeef zie ik hem niet in de browser. Verder worden ook de linker en rechter rand van de site niet weergegeven. Ik heb met relatieve divs gewerkt en float;left;.
Hier de code:
CSS:
@charset "utf-8";
/* CSS Document */
body{
background-color: #CCCCCC;
}
#container{
position:relative;
margin:auto;
width:100%;
height:100%;
}
#kop{
position:relative;
width:100%;
height:100px;
float:left;
background-color: #fcfbe5;
text-align:center;
padding-top:10px;
}
#menu{
position:relative;
width:100%;
height:45px;
float:left;
background-color:#45a9e2;
text-align:center;
}
#linkerrand{
position:relative;
width:10%;
height:50%;
float:left;
background-color:#58c3e6;
}
#content{
position:relative;
width:80%;
height:50%;
float:left;
background-color:#fcfbe5;
}
#rechterrand{
position:relative;
width:10%;
height:50%;
float:left;
background-color:#58c3e6;
}
#onderrand{
position:relative;
width:100%;
height:25px;
float:left;
background-color:#45a9e2;
}
#copyright{
position:absolute;
left:80%;
top:0px;
width:197px;
height:25px;
}
td{
text-align:left;
padding-left:10px;
}
.copyright{
color: #CCFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ict-service4all</title>
<link href="ben.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="copyright"> </p>
<div id="container">
<div id="kop"><img src="images/logo.gif" alt="logo" width="500" height="86" /></div>
<div id="menu"></div>
<div id="linkerrand"></div>
<div id="content">nnnnn</div>
<div id="rechterrand"></div>
<div id="onderrand">
<div id="copyright"><img src="images/copyright.gif" alt="copyright" width="197" height="25" /></div>
</div>
</div>
</body>
</html>
Misschien kan iemand mij helpen.
