Annys
Gebruiker
- Lid geworden
- 28 okt 2008
- Berichten
- 52
Hallo allemaal,
Ik ben begonnen met het maken van mijn eerste echte website.
Nu had ik hem vrijwel af, maar ik maakte gebruik van tabellen.
Toen las ik ergens dat tabellen maken eigenlijk niet de beste optie is dus nu ben ik de site opnieuw aan het maken.
Ik kom er alleen niet uit!
De indeling hoort als volgt te zijn:
een header bovenaan, daaronder links het menu en daarNAAST de content, onder de content de footer.
Het lukt alleen voor geen meter om de content NAAST het menu te plaatsen!
Hier mijn html:
En hier mijn CSS:
Kan iemand mij helpen?
Ik ben begonnen met het maken van mijn eerste echte website.
Nu had ik hem vrijwel af, maar ik maakte gebruik van tabellen.
Toen las ik ergens dat tabellen maken eigenlijk niet de beste optie is dus nu ben ik de site opnieuw aan het maken.
Ik kom er alleen niet uit!
De indeling hoort als volgt te zijn:
een header bovenaan, daaronder links het menu en daarNAAST de content, onder de content de footer.
Het lukt alleen voor geen meter om de content NAAST het menu te plaatsen!
Hier mijn html:
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>Index</title>
<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="header" onclick="location.href='http://www.jonker.nl'" style="cursor:pointer"></div>
<div class="zoekbalk"></div>
<div class="menu">
<ul id="nav">
<li id="nav"><a href="#">Home</a></li>
<li><a href="#">Over tClick</a></li>
<li><a href="#">Pakketten</a>
<ul>
<li><a href="#">Lab</a></li>
<li><a href="#">Offerte</a></li>
<li><a href="#">Facturatie</a></li>
<li><a href="#">Limiet</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Truckmonitor</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Productie</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">bladiebladiebladiebla</div>
<div class="footer">bladiebladiebladiebla</div>
</div>
</body>
</html>En hier mijn CSS:
PHP:
@charset "UTF-8";
/* CSS Document */
body{
background-image:url(CSSIMAGES/BG.png);
background-repeat:repeat-x;
background-color:#000000;
font-family:"Century Gothic", "arial";
font-style: normal;
font-size: 10px;
color: #FFFFFF;
}
a {
font-size: 10px;
color: #CCCCCC;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
}
#container{
width: 852px;
height: 782px;
margin: 0px auto;
}
.header{
background-image: url(CSSIMAGES/header_tClick.png);
background-repeat:no-repeat;
height: 142px;
width: 852px;
}
.zoekbalk{
height: 10px;
width: 852px;
}
.menu{
padding-top: 5px;
padding-right: 5px;
width: 98px;
height: 525px;
}
.content{
padding-top: 5px;
padding-bottom: 5px;
width: 749px;
height: 500px;
left: 115px;
top: 175px;
}
.footer{
width: 743px;
height: 14px;
background-color: #B6B6B6;
border: solid 3px;
border-color: #FFDEAD;
left: 205px;
top: 692px;
}
.style1 {font-size: 10px;
font-family:"Century Gothic"
}
#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
}
#nav{
width: 98px;
}
#nav li{
width: 98px;
}
#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}
* html #nav ul{
margin: -23px 0 0 98px;
}
#nav li li{
width: 100px;
}
#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}
* html #nav ul ul{
margin: -23px 0 0 100px;
}
#nav li li li{
width: 140px;
}
#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}
#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}
#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}
#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}
#nav a:link, #nav a:visited{
background-image:url(CSSIMAGES/welkom01.png);
font-family: "Century Gothic";
color:#FFFFFF;
}
#nav a:hover, #nav a:active{
background-image:url(CSSIMAGES/Welkom02.png);
font-family: "Century Gothic";
color:#FFFFFF;
font-weight:bold;
}Kan iemand mij helpen?
Laatst bewerkt:
