Hallo,
Graag zou ik advies willen over het volgende:
Onlangs ben ik begonnen met het herbouwen van deze site, http://www.ghsv-gideon.nl/index.html.
Omdat het opgebouwd is met tabellen en het een zootje is in de html, ben ik begonnen met css.
Omdat ik een beginner ben met css vraag ik mij af of het een beetje klopt wat ik heb gemaakt tot nu toe.
Een test versie van de site is te vinden op: http://www.ghsv-gideon.nl/test/index.html.
Ook heb ik nog wat vragen wat betreft het positioneren, indelen en invullen van div's.
Graag jullie mening en advies.
Hieronder de betreffende code.
Graag zou ik advies willen over het volgende:
Onlangs ben ik begonnen met het herbouwen van deze site, http://www.ghsv-gideon.nl/index.html.
Omdat het opgebouwd is met tabellen en het een zootje is in de html, ben ik begonnen met css.
Omdat ik een beginner ben met css vraag ik mij af of het een beetje klopt wat ik heb gemaakt tot nu toe.
Een test versie van de site is te vinden op: http://www.ghsv-gideon.nl/test/index.html.
Ook heb ik nog wat vragen wat betreft het positioneren, indelen en invullen van div's.
Graag jullie mening en advies.
Hieronder de betreffende code.
Code:
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>GHSV Gideon Groningen</title>
<link href="css/gideon-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="banner-left"></div>
<div class="banner-right"></div>
<div class="logo-gideon"></div>
<div class="navi">
<ul>
<li><a href="/home/" title="Home">Home</a></li>
<li><a href="/bestuur/" title="Bestuur">Bestuur</a></li>
<li><a href="/leden/" title="Leden">Leden</a></li>
<li><a href="/agenda/" title="Agenda">Agenda</a></li>
<li><a href="/uitslagen/" title="Uitslagen">Uitslagen</a></li>
<li><a href="/contact/" title="Contact">Contact</a></li>
<li><a href="/gastenboek/" title="Gastenboek">Gastenboek</a></li>
<li><a href="/links/" title="Links">Links</a></li>
<li><a href="/nieuws/" title="Nieuws">Nieuws</a></li>
<li><a href="/fotogalerij/" title="Fotogalerij">Fotogalerij</a></li>
<li><a href="/archief/" title="Archief">Archief</a></li>
</ul>
</div>
<div class="content">
<!-- begin bewerkbaar gebied -->
<p>Hier komt de inhoud van de site.</p>
<!-- einde bewerkbaar gebied -->
</div>
<div class="footer">
<div class="footer-left"><script type="text/javascript" src="js/onestat.js"></script></div>
<div class="footer-center"><script type="text/javascript" src="js/last-update.js"></script></div>
<div class="footer-right"><script type="text/javascript" src="js/copyright.js"></script></div>
</div>
</body>
</html>
Code:
body {
background-attachment: fixed;
background-image: url(../images/layout/backgr.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0 0 0 0;
}
.logo-gideon {
background-image: url(../images/layout/banner-gideon.gif);
height: 120px;
width: 1000px;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: relative;
}
.banner-left {
background-image: url(../images/layout/banner-links.gif);
height: 120px;
width: 50%;
float: left;
}
.banner-right {
background-image: url(../images/layout/banner-rechts.gif);
height: 120px;
width: 50%;
float: right;
}
.navi{
width: 1000px;
height: 16px;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid white;
}
.navi ul {
list-style-type: none;
padding-left: 0px;
padding-right: 0px;
margin: 0;
word-spacing: 41px;
}
.navi ul li {
display: inline;
margin: 0 0px;
}
.navi ul li a {
color: #000;
text-decoration: none;
font-size: 14px;
}
.navi ul li a:hover {
color:#FFF;
}
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 655px;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
overflow-x: auto;
}
.footer {
width: 1000px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
.footer-left {
height: 20px;
width: 200px;
font-size: 12px;
text-align: left;
float: left;
}
.footer-center {
height: 20px;
width: 600px;
font-size: 12px;
text-align: center;
float: left;
margin-left: auto;
margin-right: auto;
}
.footer-right {
height: 20px;
width: 200px;
font-size: 12px;
text-align: right;
float: left;
}
en alvast bedankt.
