med en Head First bog.
Dog er jeg løbet ind i et problem jeg umiddelbart ikke kan se mig ud af.
Jeg prøver i øjeblikket at strukturer hvordan siden skal se ud. Men kan ikke få navigations div'en til at sidde under min logo div.
Svaret er sikkert åbenlyst, men det har indtil videre undgået mig ,)
Da siden er forholdvis simpel har jeg placeret hele HTML samt CSS koden her.
Hvis der er nogle kommentar på åbenlyst ting, så sig endelig frem.
HTML
Kode: Vælg alt
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome til min side</title>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<div class="mainContainer">
<div class="topContainer">
<div class="logoContainer">
<img src="images/logo.jpg" alt="Billedet kan ikke vises" height="100%" width="100%"/>
</div>
<div class="headerContainer">
<h1>Welcome to my site</h1>
</div>
</div>
<div class="centerContainer">
<div class="contentContainerOne">
<p>Velkommen til min side <br />
Denne side er til test formål og indenholder ikke rigtig noget.
<!--Test for at se om nye linjer skubbede navigations diven under denne div-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
</div>
</div>
<div class="navigationContainer">
<ul class="navigationOverview">
<li>Home1</li>
<li>Something1</li>
<li>Something2</li>
<li>Something3</li>
</ul>
</div>
</div>
</body>
</html>
Kode: Vælg alt
root {
display: block;
}
/*This is a reset function*/
/** {
padding: 0px;
margin: 0px
}*/
/*Properties for my body.*/
body {
background-color: aqua;
}
/*Style properties for the different container divs*/
.mainContainer {
background-color: black;
margin-left: 25%;
margin-right: 25%;
border-width: 2px;
border-style: dashed;
overflow: hidden;
}
.topContainer {
}
.logoContainer {
background-color: brown;
float: left;
width: 160px;
height: 211px;
}
.headerContainer {
background-color: white;
margin: auto;
}
.centerContainer {
background-color: red;
border-width: 2px;
border-style: dashed;
overflow: hidden;
}
.contentContainerOne {
background-color: aquamarine;
height: 100%;
width: 100%;
}
.navigationContainer {
background-color: blueviolet;
width: 160px;
float: left;
}
/*Style properties for other HTML elements*/
h1 {
padding: 0px;
margin: 0px;
}
p {
padding: 0px;
margin: 0px;
}