Bedankt voor alle hulp !!
Ik stel het op prijs!
Ik heb geprobeerd het toe te passen maar ik geraak niet meer aan mijn css en html meer aan uit.
Ik moet ergens een fout gemaakt hebben.
Hier zijn de CSS en HTML voor ik dit heb toegepast, want wat ik toepas is correct maar heel mijn layout is anders, omdat ik waarschijnlijk hier en daar verkeerde tags heb gebruikt bij andere
CSS:
/* Dit is het stijlblad voor de "homepage.html" pagina */
/* Deze pagina is gemaakt door: Kevin */
html{
background-image: url(bgpattern.gif);
}
#container {
background-image: url(gentbg.jpg);
background-position: top;
background-attachment: fixed;
background-repeat: no-repeat;
}
#inner {
width: 960px;
margin:0px auto;
font-family: Helvetica;
color:#000;
font-size:14px ;
line-height: 23px;
}
.header ul {
list-style: none;
float:right;
}
.header li {
float: left;
font-size: 18px;
text-indent: 15px;
}
.active{
text-decoration: none;
color: #F80;
font-weight: bold;
}
a{
text-decoration: none;
}
.none-active {
color: #000;
border-bottom: 1px solid #aaa;
}
.page{
background-color: white;
color: #DED8D2;
font-family: Georgia;
font-size: 30px;
font-style: italic;
line-height: 40px;
text-align: center;
padding: 30px 50px 30px 50px
}
.content ul{
list-style: none;
}
.content{
padding: 10px 20px 20px 20px;
background-color: #ECECEC;
}
.content li {
float: left;
font-size: 14px;
text-indent: 15px;
}
.image{
postion: relative;
float: left
}
.image .info{
position:absolute;
top: 0px;
left:10px;
}
.specifications {
background-color: white;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 10px;
}
.info {
background-color: #00B4FF;
color: white;
font-weight: bold;
position: right;
padding: 10px;
margin: 10px;
width: 400px;
}
strong{
text-decoration: underline;
}
h1 {
font-size: 22px;
}
h2 {
font-size: 16px;
border-bottom: 1px solid #CCC;
}
.colomn2{
font-size: 14px;
line-height: 23px;
text-align: center-right;
margin-left: 20px;
margin-right: 20px;
}
.links1 ul {
list-style: none;}
.links2 ul{
list-style: none;
}
.Gent{
color: #0077FF;
border-bottom: 1px solid #AFC9F6;
}
.information {
background-color: #333;
padding: 10px 0px 10px 0px;
color: white;
text-align:30px;
}
.under {
color: #B2B2B2
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welkom bij 't Hof van Artevelde - Kevin</title>
<link href="homepage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="inner"><!-- Veel succes -->
<div class="header">
<img src="logo.png" alt="Logo"/>
<ul>
<li> <a class="active" href="home">Home</a> </li>
<li> <a class= "none-active" href="hotel"> Hotel</a> </li>
<li> <a class= "none-active" href="restaurant"> Restaurant</a> </li>
<li> <a class="none-active" href= "to do"> To do</a> </li>
<li> <a class="none-active" href= "info & reservatie"> Info & Reservatie </a> </li>
<li> <a class="none-active" href="aboutme.html"> Over de auteur </a> </li>
</ul>
</div>
<div class= "page">
<p> Beleef Gent in een van zijn mooiste hotels, gelegen aan de Coupure. Geniet van een ideale mix an Geschiedenis, Cultuur, Rust en Design</p>
</div>
<div class= "content">
<p>
<img src="kamers.jpg">
<img src= "restaurant.jpg">
<img src= "stadsplan.jpg">
<img src= "reservaties.jpg">
<ul>
<li> <a href="Onze kamers">Onze kamers</a> </li>
<li> <a href="Het restaurant"> Het restaurant</a> </li>
<li> <a href="Stadsplan Gent"> Stadsplan Gent</a> </li>
<li> <a href="Reservaties"> Reservaties</a> </li>
</ul>
</p>
</div>
<div class="specifications">
<h1> Winterpromo</h1>
<p>
<img class="image" src=" winterpromo.jpg ">
</p>
<p class="info">
Bij een verblijf van kerstavond tot nieuwjaarsdag ontvang je een cadeaumand en geniet je<em> 15% korting</em> op uw verblijf. <strong>Reserveer uw eindejaarsverblijf! </strong></p>
<div class="colomn2">
<h1> Activiteitenkalender Gent </h1>
<h2> December 2012</h2>
<div class="links1">
<p>
<ul>
<li>2/12 tot 2/01 -
<a class="Gent" href="activiteitenkalender"> Winterdroom </a> </li>
<li> 17/12 tot 23/12 -
<a class="Gent" href="Shopping"> Shopping Gent</a> </li>
<li>24/12 -
<a class="Gent" href="kerstzang">Kerstzang op de pleinen </a> </li>
<li>25/12 -
<a class="Gent" href="kerstontbijt"> Kerstontbijt OCMW Gent</a> </li>
<li>31/12 -
<a class="Gent" href="pleinen"> Oudejaarsvieringen op de pleinen</a> </li>
</ul>
</p>
</div>
<h2> Januari 2013</h2>
<div class="links2">
<p>
<ul>
<li> 1/01 -
<a class="Gent" href="stad Gent"> Nieuwjaarsreceptie Stad Gent</a> </li>
<li> 5/01 -
<a class="Gent" href="gentse middenstand">Nieuwjaarsreceptie Gentse Middenstand</a> </li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Dankuwel allemaal echt waar
