arjandevries
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 7
Hoi mensen,
Ik post hier voor het eerst! Ik ben een website aan het maken en die moet er als volgt uit zien:
header
footer, aan de onderzijde van het beeldscherm
linker menu
rechts de content.
Header, footer en menu lukken. Staan goed. Ik heb het gemaakt met DIV.
Wat ik nu wil is de content zo maken dat hij mee rekt met de breedte van het scherm. Ik wil een template maken dus in de content moet een editable region komen. Die editable region moet een schuifbalk krijgen als hij langer wordt dan het beeldscherm hoog is.
Ik krijg de div voor de content niet goed.
Hier is broncode van de HTML:
<body id="body">
<div id="container">
<div id="header"><img src="../images/logo/logo.gif" /></div>
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="javascript:;">» link1</a></li>
<li><a href="javascript:;">» link2</a></li>
<li><a href="javascript:;">» link3</a></li>
<li><a href="javascript:;">» Home</a></li>
</ul>
</div></div>
<div id="content">
</div>
</div>
<div id="footer">© 2008</div>
</body>
Hier is de CSS
html body {width:100%}
#body {
margin-top:0px;
margin-left:0px;
margin-right:0px;
min-height:100%;
}
#header {
float:left;
position:relative;
margin-left:0px;
margin-top:0px;
margin-right:0px;
height:150px;
width:100%;
background-image: url(../images/kopachtergrond2.jpg);
clear:both;
z-index:2;
border-bottom:1px solid #000000;
}
#menucontainer {
z-index:1;
position:absolute; top:0px; left:0px;
background-image:url(../images/wall-cleanedup-soft.jpg);
float:left;
width:240px;
min-height:100%;
border-right: 1px solid #000000;
margin-bottom:0px;
}
#menu {
float:left;
position: relative; top:170px; left:10px;
width: 220px;
height: 220px;
background-color:transparant;
margin-left:0px;
}
.menutitel {
margin-left:10px;
margin-top:0px;
color:#000000;
font-weight:500;
font-size:18px;
}
/*menuhyperlinks*/
#menu ul {
list-style:none;
color:#ffffff;
font-family: "Trebuchet MS";
padding-top:5px;
font-size:13px;
}
#menu li a{
display:block;
height:25px;
color:#ffffff;
background-color:#61870E;
text-decoration:none;
border:1px solid #2D4507;
border-style
utset;
margin-bottom:0px;
margin-left:-30px;
margin-right:10px;
padding-top:3px;
padding-left:15px;}
#menu li a:hover{
background-color:#2D4507;
color:#ffffff;
}
#content {
min-height:100%;
position:absoluut;
float:left;
width:100%;
background-color:#FF6600;
margin-left:0px;
}
#footer {
z-index:2;
position: fixed;
bottom:0;
left:0;
background-color:#2D4507;
width:100%;
height:20px;
color:#FFFFCC;
padding-right:10px;
padding-top:10px;
text-align:right;
}
gr,
Arjan
Ik post hier voor het eerst! Ik ben een website aan het maken en die moet er als volgt uit zien:
header
footer, aan de onderzijde van het beeldscherm
linker menu
rechts de content.
Header, footer en menu lukken. Staan goed. Ik heb het gemaakt met DIV.
Wat ik nu wil is de content zo maken dat hij mee rekt met de breedte van het scherm. Ik wil een template maken dus in de content moet een editable region komen. Die editable region moet een schuifbalk krijgen als hij langer wordt dan het beeldscherm hoog is.
Ik krijg de div voor de content niet goed.
Hier is broncode van de HTML:
<body id="body">
<div id="container">
<div id="header"><img src="../images/logo/logo.gif" /></div>
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="javascript:;">» link1</a></li>
<li><a href="javascript:;">» link2</a></li>
<li><a href="javascript:;">» link3</a></li>
<li><a href="javascript:;">» Home</a></li>
</ul>
</div></div>
<div id="content">
</div>
</div>
<div id="footer">© 2008</div>
</body>
Hier is de CSS
html body {width:100%}
#body {
margin-top:0px;
margin-left:0px;
margin-right:0px;
min-height:100%;
}
#header {
float:left;
position:relative;
margin-left:0px;
margin-top:0px;
margin-right:0px;
height:150px;
width:100%;
background-image: url(../images/kopachtergrond2.jpg);
clear:both;
z-index:2;
border-bottom:1px solid #000000;
}
#menucontainer {
z-index:1;
position:absolute; top:0px; left:0px;
background-image:url(../images/wall-cleanedup-soft.jpg);
float:left;
width:240px;
min-height:100%;
border-right: 1px solid #000000;
margin-bottom:0px;
}
#menu {
float:left;
position: relative; top:170px; left:10px;
width: 220px;
height: 220px;
background-color:transparant;
margin-left:0px;
}
.menutitel {
margin-left:10px;
margin-top:0px;
color:#000000;
font-weight:500;
font-size:18px;
}
/*menuhyperlinks*/
#menu ul {
list-style:none;
color:#ffffff;
font-family: "Trebuchet MS";
padding-top:5px;
font-size:13px;
}
#menu li a{
display:block;
height:25px;
color:#ffffff;
background-color:#61870E;
text-decoration:none;
border:1px solid #2D4507;
border-style
utset; margin-bottom:0px;
margin-left:-30px;
margin-right:10px;
padding-top:3px;
padding-left:15px;}
#menu li a:hover{
background-color:#2D4507;
color:#ffffff;
}
#content {
min-height:100%;
position:absoluut;
float:left;
width:100%;
background-color:#FF6600;
margin-left:0px;
}
#footer {
z-index:2;
position: fixed;
bottom:0;
left:0;
background-color:#2D4507;
width:100%;
height:20px;
color:#FFFFCC;
padding-right:10px;
padding-top:10px;
text-align:right;
}
gr,
Arjan
.
.
