Hello,
Apprès chargement de mes pages et images sur le serveur je n'ai rien que du texte et des liens. je ne suis pas sur de mon css et de ma page index html je joins les deux car il doit y avoir des erreur, les pages sont en construction car parfois dans les codes il y a des vides. Je suis débutant soyez indulgent. Merci pour votre aide.
cordialement.
pintje
-page css.
* {
padding: 0;
margin:0;
font-family:Arial,Sans serif;
}
p {
margin: 0.7em 0;
line-height:1.8em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
img
{
padding:5px;
background-color:#3f3f3f;
margin:5px;
border:#000 1px solid;
}
img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}
a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(../img/shadow.gif") no-repeat right bottom);
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
.clear {
clear:both;
height:20px;
}
fieldset
{
border:0;
}
body
{
background: #171717 url(../img/orange/bg.gif);
margin: 10px;
font: 76%/1.6em arial, sans-serif;
color: #fff;
text-align: center;
}
a
{
text-decoration:none;
}
a.interne:link, a.interne:visited {
color: #000000;
text-decoration:none;
}
a.externe:link, a.externe:visited {
color: #D98621;
text-decoration:none;
}
a.center:link, a.center:visited {
color: #3399CC;
text-decoration:none;
}
a.interne:hover, a.interne:active {
text-decoration:none;
color:#fff;
}
a.externe:hover, a.externe:active {
text-decoration:none;
color:#fff;
}
h1, h2, h3, h4, h5, h6
{
font-family: Arial, Sans Serif;
color:#FF0099;
}
#container {
margin: 0 auto;
padding:0;
width:990px;
position: relative;
text-align: left;
border:1px solid #000;
background:#313131;
}
#navigation {
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin: 0 auto;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0px;
list-style-type: none;
}
#navigation ul li a {
border-right:1px solid #1e1e1e;
border-bottom:none;
padding: 9px 15px 9px 15px;
display: block;
font-weight:bold;
color:#000000;
text-decoration: none;
background:#eeeeee;
font-size:13px;
letter-spacing:0px;
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li.current_page_item a
{
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
color: #fff;
border-right:1px solid #1e1e1e;
border-bottom:none;
font-size:12px;
text-decoration:none;
}
#drop-shadow{
background-image:url(../img/orange/drop-shadow.gif);
background-repeat:repeat-x;
background-position:center;
margin: 0px;
width:202px;
padding-top:2px;
padding-bottom:3px;
}
#header {
clear: both;
margin: 0 auto;
width:990px;
position: relative;
text-align:left;
padding:15px 0px 15px 0px;
color:#FFFFFF;
}
#header h1
{
font-size:35px;
margin:10px 0 0 0px;
font-variant:small-caps;
letter-spacing:0px;
color:#F99B25;
}
#header h1 a {
text-decoration:none;
border:0;
color:#FFFFFF;
}
#header h2
{
margin:5px 0 0 0px;
font-size:1em;
font-weight:normal;
font-family: Arial, Sans Serif;
letter-spacing:0px;
}
#content {
width:980px;
margin:0 auto;
position:relative;
padding-bottom:10px;
}
html #content {
}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:0 1em;
padding:0 1em;
list-style-image:url(../img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#000 1px solid;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding-left:2em;
}
#content-main {
float: left;
width: 560px;
}
html #section-index #content-main {
margin-right: 0px;
}
#content .post
{
padding-left:10px;
}
#content h2,
#content h3
{
font-size: 1.5em;
margin: 1em 0 0;
font-weight:normal;
line-height:1.4em;
letter-spacing:0px;
color: #FF3333;
}
#content .entry
{
}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#66CCFF ;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#D98621 1px solid;
}
#content .entry li
{
margin:0 0 0.3em 0;
padding:0;
line-height:1.6em;
}
.footer-area{
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
margin: 0 auto;
padding:0px 0 9px 0;
font-size:12px;
font-weight:bold;
color:#c49400;
text-decoration:none;
}
.footer-area a{
font-size:12px;
font-weight:bold;
border:0px;
color:#c49400;
text-decoration:none;
}
#nav{
width: 200px;
margin-top:15px;
margin-left:2px;
margin-right:5px;
margin-bottom:10px;
overflow:hidden;
float:left;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
font-weight:bold;
}
#nav LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#D98621;
}
#nav LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
#nav-right{
width: 200px;
margin-top:15px;
margin-left:5px;
margin-right:2px;
margin-bottom:10px;
overflow:hidden;
float:right;
position:relative;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav-right img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav-right UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
}
#nav-right LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav-right LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#292929;
}
#nav-right LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
.cat{
width:200px;
margin: 0px;
padding:4px;
overflow:hidden;
border-bottom: 1px solid #000000;
text-align: left;
color:#fff;
font-weight:bold;
background-image:url(../img/orange/cat-box-rep.png);
background-position:top;
background-repeat:repeat-x;
}
#style-switch-theme{
position:absolute;
visibility:visible;
z-index:95;
top:30px;
right:5px;
}
#style-switch{
position:absolute;
visibility:visible;
z-index:99;
top:30px;
right:0px;
display:inline;
}
#style-switch img{
border: 1px solid #000;
padding:1px;
background-color:#ffffff;
background-image:none;
}
#style-switch img:hover{
border: 1px solid #ffffff;
padding:1px;
background-color:#000;
background-image:none;
}
#style-switch a,
style-switch a:active,
style-switch a:visited,
style-switch a:link
style-switch a:hover,{
border-bottom:0px;
margin-right: 0px;
background-image:none;
}
#back-to-top{
position:absolute;
visibility:visible;
z-index:82;
right:15px;
top:7px;
}
#main-image.imgindex{
background:url(../img/orange/titregeneral.jpg) no-repeat center;
width:990px;height:220px;border:1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgvilles{
background:url(../img/orange/titrevilles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgalkmaar{
background:url(../img/orange/titrealkmaar.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgwijk{
background:url(../img/orange/titrewijkbijduurstede.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgamsterdam{
background:url(../img/orange/titreamsterdam.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesportsetiles{
background:url(../img/orange/titrelesportsetiles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgenkhuizen{
background:url(../img/orange/titreenkhuizen.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgterschelling{
background:url(../img/orange/titreterschelling.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghoorn{
background:url(../img/orange/titrehoorn.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgeau{
background:url(../img/orange/titreeau.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgleplandelta{
background:url(../img/orange/titreleplandelta.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesmoulins{
background:url(../img/orange/titrelesmoulins.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglespolders{
background:url(../img/orange/titrelespolders.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgactualites{
background:url(../img/orange/titreactualites.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghistoire{
background:url(../img/orange/titrehistoire.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgartdevivre{
background:url(../img/orange/titreartdevivre.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgclimat{
background:url(../img/orange/titreclimat.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imggeographie{
background:url(../img/orange/titregeographie.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image IMG{
border: 0px;
padding:0px;
margin:0 auto;
}
-Page 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" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Your Site Title -->
<title>LES PAYS BAS</title>
<!-- END TITLE -->
<!-- CSS Style Sheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" href="style.css" media="screen" />
<!-- END CSS Style Sheet -->
</head>
<body id="section-index">
<div id="header">
<!-- Your Site Name -->
<h1></h1>
<!-- END Site Name -->
<!-- Your Site Slogan -->
<h2></h2>
<!-- END Site Slogan -->
</div>
<!-- Top Links -->
<div id="navigation" style="margin-bottom:5px;">
<ul>
<li><a href="index.html">GENERAL</a></li>
<li><a href="pageeau.html" >LA MA�TRISE DE L'EAU</a></li>
<li><a href="pagevilles.html" >LES VILLES</a></li>
<li><a href="pageports.html" >LES PORTS ET �LES</a></li>
<li><a href="pageartdevivre.html" >ART DE VIVRE</a></li>
<li><a href="pageactualites.html" >ACTUALITES</a></li>
</ul>
</div>
<!-- END Top Links -->
<!-- Change the banner by replacing the image in: img/orange/orange-banner.jpg -->
<div id="main-image"class="imgindex" style="margin-bottom:5px;"></div>
<!-- END Banner -->
<div id="container">
<div id="content">
<!-- Left Side Menu -->
<div id="nav">
<ul>
<li class="cat" style="border-top: 1px solid #000;">GENERAL</li>
<li><a href="pagegeographie.html"class="interne" >GEOGRAPHIE</a></li>
<li><a href="pageclimat.html"class="interne" >CLIMAT</a></li>
<li><a href="pagehistoire.html"class="interne" >HISTOIRE</a></li>
</ul>
</div>
<!-- END Left Side Menu -->
<!-- Content -->
<div id="content-main">
<!-- Homepage Article -->
<div class="post">
<div class="posttitle">
<h2>Welcome to Your Website</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit.</p>
<br />
<br />
<span style="text-align:right;"><a href="index.html"class="center">Read More �</a></span>
</div>
</div>
<!-- END Homepage Article -->
<!-- Homepage Second Article -->
<div class="post">
<div class="posttitle">
<h2>Second Homepage Article</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper
laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam.
Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at,
ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet,
lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse
cursus velit vel ligula. Mauris elit.</p>
</div>
</div>
<!-- End Homepage Second Article -->
</div>
<!-- END Content -->
<!-- Right Side Menu -->
<div id="nav-right" style="margin-bottom:5px;">
<ul>
<li class="cat" style="border-top: 1px solid #000;">LES PAYS-BAS</li>
<li style="text-align:center"><img src="img/profile.jpg" alt="About Us" />
<br />
Here you can describe what your website is about</li>
<li class="cat" style="border-top: 1px solid #333;">LIENS</li>
<li><a href="index.html"class="externe">Link 1</a></li>
<li><a href="index.html"class="externe">Link 2</a></li>
<li><a href="index.html"class="externe">Link 3</a></li>
<li><a href="index.html"class="externe">Link 4</a></li>
<li><a href="index.html"class="externe">Link 5</a></li>
</ul>
</div>
<!-- END Right Side Menu -->
<!-- Footer -->
</div>
</div>
<div class="footer-area" style="margin-top:5px;"><b><a href="" title="" target="_blank">LES PAYS BAS</a></b>
<div id="back-to-top"><a href="#header">Back to Top</a></div></div>
Copyright � 2010 - Tous droits r�serv�s -::- Ingrid van Oosterom et Christian Roigt - 81290 Labrugui�re
<!-- END Footer -->
</body>
</html>
Apprès chargement de mes pages et images sur le serveur je n'ai rien que du texte et des liens. je ne suis pas sur de mon css et de ma page index html je joins les deux car il doit y avoir des erreur, les pages sont en construction car parfois dans les codes il y a des vides. Je suis débutant soyez indulgent. Merci pour votre aide.
cordialement.
pintje
-page css.
* {
padding: 0;
margin:0;
font-family:Arial,Sans serif;
}
p {
margin: 0.7em 0;
line-height:1.8em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
img
{
padding:5px;
background-color:#3f3f3f;
margin:5px;
border:#000 1px solid;
}
img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}
a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(../img/shadow.gif") no-repeat right bottom);
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
.clear {
clear:both;
height:20px;
}
fieldset
{
border:0;
}
body
{
background: #171717 url(../img/orange/bg.gif);
margin: 10px;
font: 76%/1.6em arial, sans-serif;
color: #fff;
text-align: center;
}
a
{
text-decoration:none;
}
a.interne:link, a.interne:visited {
color: #000000;
text-decoration:none;
}
a.externe:link, a.externe:visited {
color: #D98621;
text-decoration:none;
}
a.center:link, a.center:visited {
color: #3399CC;
text-decoration:none;
}
a.interne:hover, a.interne:active {
text-decoration:none;
color:#fff;
}
a.externe:hover, a.externe:active {
text-decoration:none;
color:#fff;
}
h1, h2, h3, h4, h5, h6
{
font-family: Arial, Sans Serif;
color:#FF0099;
}
#container {
margin: 0 auto;
padding:0;
width:990px;
position: relative;
text-align: left;
border:1px solid #000;
background:#313131;
}
#navigation {
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin: 0 auto;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0px;
list-style-type: none;
}
#navigation ul li a {
border-right:1px solid #1e1e1e;
border-bottom:none;
padding: 9px 15px 9px 15px;
display: block;
font-weight:bold;
color:#000000;
text-decoration: none;
background:#eeeeee;
font-size:13px;
letter-spacing:0px;
background-image:url(../img/orange/orange-li.gif);
background-repeat:repeat-x;
background-position:center;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li.current_page_item a
{
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
color: #fff;
border-right:1px solid #1e1e1e;
border-bottom:none;
font-size:12px;
text-decoration:none;
}
#drop-shadow{
background-image:url(../img/orange/drop-shadow.gif);
background-repeat:repeat-x;
background-position:center;
margin: 0px;
width:202px;
padding-top:2px;
padding-bottom:3px;
}
#header {
clear: both;
margin: 0 auto;
width:990px;
position: relative;
text-align:left;
padding:15px 0px 15px 0px;
color:#FFFFFF;
}
#header h1
{
font-size:35px;
margin:10px 0 0 0px;
font-variant:small-caps;
letter-spacing:0px;
color:#F99B25;
}
#header h1 a {
text-decoration:none;
border:0;
color:#FFFFFF;
}
#header h2
{
margin:5px 0 0 0px;
font-size:1em;
font-weight:normal;
font-family: Arial, Sans Serif;
letter-spacing:0px;
}
#content {
width:980px;
margin:0 auto;
position:relative;
padding-bottom:10px;
}
html #content {
}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:0 1em;
padding:0 1em;
list-style-image:url(../img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#000 1px solid;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding-left:2em;
}
#content-main {
float: left;
width: 560px;
}
html #section-index #content-main {
margin-right: 0px;
}
#content .post
{
padding-left:10px;
}
#content h2,
#content h3
{
font-size: 1.5em;
margin: 1em 0 0;
font-weight:normal;
line-height:1.4em;
letter-spacing:0px;
color: #FF3333;
}
#content .entry
{
}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#66CCFF ;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#D98621 1px solid;
}
#content .entry li
{
margin:0 0 0.3em 0;
padding:0;
line-height:1.6em;
}
.footer-area{
overflow: hidden;
width:990px;
position: relative;
text-align: left;
font-family: Arial, Sans Serif;
margin: 0 auto;
padding:0px 0 9px 0;
font-size:12px;
font-weight:bold;
color:#c49400;
text-decoration:none;
}
.footer-area a{
font-size:12px;
font-weight:bold;
border:0px;
color:#c49400;
text-decoration:none;
}
#nav{
width: 200px;
margin-top:15px;
margin-left:2px;
margin-right:5px;
margin-bottom:10px;
overflow:hidden;
float:left;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
font-weight:bold;
}
#nav LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#D98621;
}
#nav LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
#nav-right{
width: 200px;
margin-top:15px;
margin-left:5px;
margin-right:2px;
margin-bottom:10px;
overflow:hidden;
float:right;
position:relative;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color:#292929;
}
#nav-right img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}
#nav-right UL{
width: 200px;
margin: 0px;
padding: 0px;
display: block;
overflow:hidden;
font-family: Arial, sans-serif;
}
#nav-right LI{
width: 200px;
margin: 0px;
list-style-type: none;
overflow:hidden;
text-align: left;
}
#nav-right LI A{
width: 200px;
display: block;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
text-decoration: none;
overflow:hidden;
text-align: left;
border-bottom: 1px solid #000;
background-color:#292929;
}
#nav-right LI A:hover{
width: 200px;
text-decoration: none;
display: block;
overflow:hidden;
text-align: left;
padding-left:5px;
padding-top:3px;
padding-bottom:3px;
padding-right:10px;
background-color:#2e2e2e;
background-image:url(../img/orange/li-hover.gif);
background-repeat:repeat-x;
background-position:top;
border-bottom: 1px solid #000;
}
.cat{
width:200px;
margin: 0px;
padding:4px;
overflow:hidden;
border-bottom: 1px solid #000000;
text-align: left;
color:#fff;
font-weight:bold;
background-image:url(../img/orange/cat-box-rep.png);
background-position:top;
background-repeat:repeat-x;
}
#style-switch-theme{
position:absolute;
visibility:visible;
z-index:95;
top:30px;
right:5px;
}
#style-switch{
position:absolute;
visibility:visible;
z-index:99;
top:30px;
right:0px;
display:inline;
}
#style-switch img{
border: 1px solid #000;
padding:1px;
background-color:#ffffff;
background-image:none;
}
#style-switch img:hover{
border: 1px solid #ffffff;
padding:1px;
background-color:#000;
background-image:none;
}
#style-switch a,
style-switch a:active,
style-switch a:visited,
style-switch a:link
style-switch a:hover,{
border-bottom:0px;
margin-right: 0px;
background-image:none;
}
#back-to-top{
position:absolute;
visibility:visible;
z-index:82;
right:15px;
top:7px;
}
#main-image.imgindex{
background:url(../img/orange/titregeneral.jpg) no-repeat center;
width:990px;height:220px;border:1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgvilles{
background:url(../img/orange/titrevilles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgalkmaar{
background:url(../img/orange/titrealkmaar.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgwijk{
background:url(../img/orange/titrewijkbijduurstede.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgamsterdam{
background:url(../img/orange/titreamsterdam.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesportsetiles{
background:url(../img/orange/titrelesportsetiles.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgenkhuizen{
background:url(../img/orange/titreenkhuizen.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgterschelling{
background:url(../img/orange/titreterschelling.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghoorn{
background:url(../img/orange/titrehoorn.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgeau{
background:url(../img/orange/titreeau.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgleplandelta{
background:url(../img/orange/titreleplandelta.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglesmoulins{
background:url(../img/orange/titrelesmoulins.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imglespolders{
background:url(../img/orange/titrelespolders.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgactualites{
background:url(../img/orange/titreactualites.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imghistoire{
background:url(../img/orange/titrehistoire.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgartdevivre{
background:url(../img/orange/titreartdevivre.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imgclimat{
background:url(../img/orange/titreclimat.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image.imggeographie{
background:url(../img/orange/titregeographie.jpg) no-repeat center;
width:990px;height:220px;border: 1px solid #000;padding:0px;margin:0 auto;position:relative;
}
#main-image IMG{
border: 0px;
padding:0px;
margin:0 auto;
}
-Page 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" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Your Site Title -->
<title>LES PAYS BAS</title>
<!-- END TITLE -->
<!-- CSS Style Sheets -->
<link rel="stylesheet" href="css/style.css" type="text/css" href="style.css" media="screen" />
<!-- END CSS Style Sheet -->
</head>
<body id="section-index">
<div id="header">
<!-- Your Site Name -->
<h1></h1>
<!-- END Site Name -->
<!-- Your Site Slogan -->
<h2></h2>
<!-- END Site Slogan -->
</div>
<!-- Top Links -->
<div id="navigation" style="margin-bottom:5px;">
<ul>
<li><a href="index.html">GENERAL</a></li>
<li><a href="pageeau.html" >LA MA�TRISE DE L'EAU</a></li>
<li><a href="pagevilles.html" >LES VILLES</a></li>
<li><a href="pageports.html" >LES PORTS ET �LES</a></li>
<li><a href="pageartdevivre.html" >ART DE VIVRE</a></li>
<li><a href="pageactualites.html" >ACTUALITES</a></li>
</ul>
</div>
<!-- END Top Links -->
<!-- Change the banner by replacing the image in: img/orange/orange-banner.jpg -->
<div id="main-image"class="imgindex" style="margin-bottom:5px;"></div>
<!-- END Banner -->
<div id="container">
<div id="content">
<!-- Left Side Menu -->
<div id="nav">
<ul>
<li class="cat" style="border-top: 1px solid #000;">GENERAL</li>
<li><a href="pagegeographie.html"class="interne" >GEOGRAPHIE</a></li>
<li><a href="pageclimat.html"class="interne" >CLIMAT</a></li>
<li><a href="pagehistoire.html"class="interne" >HISTOIRE</a></li>
</ul>
</div>
<!-- END Left Side Menu -->
<!-- Content -->
<div id="content-main">
<!-- Homepage Article -->
<div class="post">
<div class="posttitle">
<h2>Welcome to Your Website</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit.</p>
<br />
<br />
<span style="text-align:right;"><a href="index.html"class="center">Read More �</a></span>
</div>
</div>
<!-- END Homepage Article -->
<!-- Homepage Second Article -->
<div class="post">
<div class="posttitle">
<h2>Second Homepage Article</h2>
</div>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper
laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam.
Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.
<br />
<br />
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at,
ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet,
lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse
cursus velit vel ligula. Mauris elit.</p>
</div>
</div>
<!-- End Homepage Second Article -->
</div>
<!-- END Content -->
<!-- Right Side Menu -->
<div id="nav-right" style="margin-bottom:5px;">
<ul>
<li class="cat" style="border-top: 1px solid #000;">LES PAYS-BAS</li>
<li style="text-align:center"><img src="img/profile.jpg" alt="About Us" />
<br />
Here you can describe what your website is about</li>
<li class="cat" style="border-top: 1px solid #333;">LIENS</li>
<li><a href="index.html"class="externe">Link 1</a></li>
<li><a href="index.html"class="externe">Link 2</a></li>
<li><a href="index.html"class="externe">Link 3</a></li>
<li><a href="index.html"class="externe">Link 4</a></li>
<li><a href="index.html"class="externe">Link 5</a></li>
</ul>
</div>
<!-- END Right Side Menu -->
<!-- Footer -->
</div>
</div>
<div class="footer-area" style="margin-top:5px;"><b><a href="" title="" target="_blank">LES PAYS BAS</a></b>
<div id="back-to-top"><a href="#header">Back to Top</a></div></div>
Copyright � 2010 - Tous droits r�serv�s -::- Ingrid van Oosterom et Christian Roigt - 81290 Labrugui�re
<!-- END Footer -->
</body>
</html>