Weet iemand wat hier mis gaat? In Chrome en FF is er geen probleem maar in IE wel. Deze code is door een collega van mij gemaakt .. Ik probeerde hem de basis van HTML te laten zien en CSS.
Alleen ben ik momenteel niet zeker wat er precies mis gaat. ( Voor mij al weer een lange tijd geleden dit )
bg1.jpg is 360x927 en bg.jpg 927x180
topbalk 28x46
topbalk center 847x30
topbalk lager 138x30
Alleen ben ik momenteel niet zeker wat er precies mis gaat. ( Voor mij al weer een lange tijd geleden dit )
bg1.jpg is 360x927 en bg.jpg 927x180
topbalk 28x46
topbalk center 847x30
topbalk lager 138x30
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Hout</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="topbalk">
<br/>
<br/>
<br/>
</div>
<div id="logo">
**RUIMTE VOOR AFBEELDING**
</div>
<div id="nav">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
<br/><br/>
<p class="menu"> hout <br/>
-Tafels <br/>
-Stoelen <br/>
-Wand decoratie <br/>
En meer <br/>
</p>
<br />
<div id="content">
<div id="sidemenu">
<img src="topbalklarge.png" class="menutitle" />
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
</div>
<br />
<div id="sidemenu2">
<img src="topbalklarge.png" class="menutitle" />
</div>
<br />
<div id="centercontent">
<img src="topbalkcenter.png" class="centertitle" /> <br />
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen.<br />
Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, <br />
toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. <br />
Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. <br />
Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met <br />
Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="centershowlist">
<img src="topbalkcenter.png" class="centertitle" /> <br />
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen.<br />
Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, <br />
toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. <br />
Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. <br />
Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met <br />
Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div class="footer">
<div class="footer-left">
<p><strong>Contact informatie:</strong></p>
<p> </p>
<p>Telefoon nummer: 06 12 34 57 89 <br />
Email: email@something</p>
</div>
<div class="footer-right">
<p>© Copyright 2014 - Alle rechten voorbehouden <br />
Design door <a class="footer-link" target="_blank" href="http://www.pagina.com/">Pagina naam</a>
</p>
</div>
</div>
</body></html>
Code:
body {
background-color: black;
background-image:url('background1.jpg');
color: yellow;
}
#topbalk{
background-image:url('topbalk.png');
background-repeat: repeat-x;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: black;
}
#logo{
border: 1px solid grey;
width: 620px;
height: 200px;
float: left;
background: grey;
}
.menu {
text-align: right;
width: 800px;
}
#nav {
}
#nav li {
float: right;
display: inline;
width: 55px;
margin-right: 15px;
list-style-type: none;
}
#nav li:hover {
}
a:link {color: white; }
#sidemenu{
border: 1px solid grey;
width: 140px;
height: 250px;
background: grey;
}
#sidemenu2{
border: 1px solid grey;
width: 140px;
height: 430px;
background: grey;
}
#centercontent{
border: 1px solid grey;
float: right;
margin-top: -724px;
background: grey;
}
#centershowlist{
border: 1px solid grey;
float: right;
margin-top: -357px;
background-color: grey;
}
.footer {
margin: 166px;
margin-top: 10px;
background: grey;
width: 960px;
height: 111px;
float: left;
padding: 0px 20px;
}
.footer-left {
background: grey;
font-size: 11px;
color: #FFFFFF;
width: 200px;
float: left;
}
.footer-right {
background: grey;
float: right;
padding-top: 29px;
}
.footer-link {
color: yellow;
}
br.clear {
clear: both;
}
Laatst bewerkt:
