Beste leden,
Hierbij mijn layout en slice. Ik heb de layout samen met iemand gemaakt.
De slicing heb ik compleet zelf gedaan..
Het is mijn eerste keer dus commentaar of eventuele verbeteringen zijn welkom.
Ook heb ik alleen ene probleem als je beeldscherm groter is dan 1024 * 768 Wie kan mij daarbij helpen?
( Is nog niet helemaal klaar.. is nog in opbouw, zoals het topmenu moeten de margins nog van veranderd worden etc. )
Link voor de klikkers: http://militaire-in-uruzgan.nl/sliced/
Style.css
PHP
body{
background-color: #333333;
}
div#header{
width: 100%;
height: 131px;
background-image:url('../images/header1.jpg');
background-repeat:no-repeat;
background-position:center top;
}
div#menu{
width: 100%;
height: 58px;
background-image:url('../images/menu.jpg');
background-repeat:no-repeat;
background-position:center top;
text-align: center;
}
#menu{
margin: 0;
padding: 0;
}
#menu li{
list-style-type: none;
float: left;
width:130px;
height:37px;
margin-left:23px;
padding: 0;
}
#menu li a{
display: block;
width: 100%;
height: 100%;
margin-left:100px;
margin-top: 13px;
}
#menu li a:hover{
background:url(../images/hoover.jpg) no-repeat;
}
div#content{
width: 791px;
height: auto;
border: 1px solid #000;
margin-left: 95px;
background-image:url('../images/content.jpg');
background-repeat:no-repeat;
background-position:center top;
text-align: center;
}
#titel{
margin-top:20px;
text-align: center;
}
#contenttext{
margin-top:40px;
text-align: center;
}
div#footer{
width: 791px;
height: 137px;
background-image:url('../images/footer.jpg');
background-repeat:no-repeat;
background-position:center top;
text-align: center;
margin-left: 95px;
border: 1px solid #000;
}
#footer1{
margin: 0;
padding: 0;
}
#footer1 li{
list-style-type: none;
float: left;
width:130px;
height:17px;
margin-left:23px;
margin-top: 20px;
padding: 0;
}
#footer1 li a{
display: block;
width: 100%;
height: 100%;
margin-left:100px;
margin-top: 13px;
}
Toon Meer
Index.html ( sliced
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Militaire-in-uruzgan.nl - Adminpaneel</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul id="menu">
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
<li><a href="#">Pagina 5</a></li>
</ul>
</div>
<br>
<div id="content">
<div id="titel"><b>Welkom op de website van Militaire-in-uruzgan.nl</b></div>
<div id="contenttext">
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.<br><br>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
<br><br>
</div>
</div>
<br>
<div id="footer">
<ul id="footer1">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul id="footer1">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</body>
</html>
Toon Meer