Re',
Alors tout d'abord quelques remarques générales :
XHTML Strict :
- toutes les balises et les attributs doivent être en minuscules. Il faut donc remplacer
<IMG SRC="..." par
<img src="..."
- toutes les balises et les attributs de mise en forme (<font>, align, border, etc...) sont invalides et doivent être remplacés par du code css (séparation contenu / présentation)
- les balises vides (ou auto-fermantes) comme
img doivent être fermées à l'aide de
/>
- les balises <img> doivent avoir un attribut
alt qui donnera une information alternative en cas d'images désactivées.
par exemple, on peut remplacer :
<div id="bannieres">
<IMG SRC="/images/bannieres/banniere2.jpg" BORDER = "0">
</div>
par
[b]HTML[/b]
<div id="bannieres">
<img src="/images/bannieres/banniere2.jpg" alt="Californication Center" />
</div>
[b]CSS[/b]
#bannieres img { border:none; }
CSS
- attention de ne pas avoir la même couleur de
background et de texte pour un même élément (
body { background-color: #000000; } ) car en cas d'images désactivées on ne voit plus rien
.
- lorsque 2 déclarations sont identiques on peut les regrouper en une seule à l'aide d'une virgule. Par exemple on peut remplacer
a:link {
color: #2F466A;
text-decoration: none;
}
a:visited {
color: #2F466A;
text-decoration: none;
}
par
a:link, a:visited {
color: #2F466A;
text-decoration: none;
}
Concernant ta question, l'espacement de tes liens à l'aide de
<img src="phpbb3/styles/zeitgeist/theme/images/separation_menu.jpg" width="2" height="30" />
est incorrecte car elle ne respecte pas la séparation contenu / présentation.
En général on utilise pour les menus des listes non ordonnées. Cela donnerait par exemple :
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Californication Center</title>
<style type="text/css" media="screen,projection">
<!--
#global {
width: 817px;
margin-right: auto;
margin-left: auto;
}
#menu {
background: #999999 url(http://www.californication-center.fr/phpbb3/styles/zeitgeist/theme/images/fond_menu_haut.jpg);
text-align: center;
font-size: .7em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
list-style-image:none;
list-style-position: outside;
margin:0;
padding:0;
}
#menu li {
display:inline;
padding: 0 2px;
background: transparent url(http://www.californication-center.fr/phpbb3/styles/zeitgeist/theme/images/separation_menu.jpg) right center no-repeat;
}
#menu li.last_li {
background: none;
}
#menu li a {
line-height: 25px;
color: #2F466A;
text-decoration: none;
padding: 2px 8px 2px 4px;
}
#menu li a:hover,
#menu li a:focus,
#menu li a:active {
color: #2A63BA;
text-decoration: underline;
}
#menu li a.active, #menu li a.active:hover {
color: #2F466A;
}
-->
</style>
</head>
<body>
<div id="global">
<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="pages_web/la_serie.php">La série</a></li>
<li><a href="pages_web/episodes.php">Episodes</a></li>
<li><a href="pages_web/personnages.php">Personnages</a></li>
<li><a href="pages_web/streaming.php">Streaming</a></li>
<li><a href="pages_web/jukebox.php">Jukebox</a></li>
<li><a href="pages_web/telechargements.php">Téléchargements</a></li>
<li><a href="pages_web/achats.php">Achats</a></li>
<li><a href="pages_web/galerie.php">Galerie</a></li>
<li class="last_li"><a href="phpbb3/index.php">Forum</a></li>
</ul>
</div>
</body>
</html>
Peut-être que le mieux serait de reprendre du début. Un petit tour sur cet article :
comment débuter et trouver l'information ?, ainsi que
dans les Tutoriels et
dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.
Bonne continuation
.
Edit: je viens de voir que tu utilises un DOCTYPE XHTML Transitional alors que mes remarques sur le fait d'utiliser des balises et des attributs de mise en forme ne concernaient que le XHTML Strict
. Cela dit je t'invite à utiliser le Strict car bien que plus rigoureux il permet du même coup de ne pas mélanger contenu et présentation, ce qui est une très bonne habitude (ne serait-ce que pour la maintenance de ton site)
.
Lire à ce sujet :
Les DTD HTML4.01 et XHTML1.0 : comment choisir ? Modifié par Heyoan (29 Jun 2008 - 04:54)
! Même si ma proposition n'est pas parfaite, elle respecte cette fameuse séparation du contenu et de la présentation... et accessoirement elle centre (à peu près) ton texte.
!