Jeg sidder og er i gang med at lave en lille simpel hjemmeside, den skal ikke rigtig kunne noget andet end nogle meget få ting.
Da jeg så sidder i dag og er ved at lave en menu ligesom den i har jeres CSS kursus 8. Dog skal den passe ind i det layout i har brugt i jeres HTML kursus 10 og CSS kursus 5. Jeg vil gerne have menuen i venstre kolonne som i de videoer, men når jeg så laver det sådan og laver lidt om på det så det ikke står vandret men lodret, men når jeg gør det får jeg følgende resultat.
Her er koderne jeg har brugt til det resultat.
HTML dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Forside</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="Styles.css" type="text/css"/>
</head>
<body>
<div id="hoved">
<div id="top"></div>
<div id="menu">
<ul id="ulnav">
<li id="linav"><a href="#" class="nav">Navn1</a></li>
<li id="linav"><a href="#" class="nav">Navn2</a></li>
<li id="linav"><a href="#" class="nav">Navn3</a></li>
<li id="linav"><a href="#" class="nav">Navn4</a></li>
</ul>
</div>
<div id="indhold"></div>
</div>
</body>
</html>
CSS dokument:
#hoved {
width: 700px;
height: 1000px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thin;
}
#top {
width: 600px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thin;
text-align: center;
background-image: url(Server-logo.gif);
}
#menu {
width: 100px;
height: 600px;
border-style: solid;
border-width: thin;
margin-left: 50px;
float: left;
background-color: #03a9d6;
}
#indhold {
width: 470px;
height: 600px;
border-style: solid;
border-width: thin;
margin-right: 50px;
float: right;
background-color: #00b5e6;
}
#ulnav {
list-style-type: none;
}
a.nav:LINK {
display: block;
width: 100px;
font-weight: bold;
color: #FFF;
background-color: #999;
}
Jeg håber i kan hjælpe mig videre herfra.
Mange venlige hilsner Daniel.
