salut à tous,
Je suis en train de réaliser un site pour un client et je m'efforce de le rendre compatible XHTML strict 1.0. A vrai dire je fait des sites web depuis 1995 et c'est seulement maintenant que j'essai d'oublier les tableaux et autres font dans mon code. Mais pour un vieux comme moi cela veux dire tout reformater et tout reinstaller !
Le probleme que j'ai c'est la barre de navigation en haut, alors qu'un espace lui est reservé, le dernier onglet va a la ligne car il y'a une marge tout a gauche du logo et je ne sais pas pourquoi.
Votre aide est la bienvenue, merci d'avance.
Un exemple de page :
http://volfoni.com/fr/cinema_projection_numerique_3D/kit_3D.html
Le code xhtml associé :
La css associée :
Ah et puis je viens de remarquer autre chose de bizare qui est peut etre lié, en cliquant sur les onglets de navigation, plus je vais vers la droite plus l'espace se retreci à droite ... peut etre que ca a un rapport ?
Modifié par commodo (26 Sep 2007 - 12:43)
Je suis en train de réaliser un site pour un client et je m'efforce de le rendre compatible XHTML strict 1.0. A vrai dire je fait des sites web depuis 1995 et c'est seulement maintenant que j'essai d'oublier les tableaux et autres font dans mon code. Mais pour un vieux comme moi cela veux dire tout reformater et tout reinstaller !
Le probleme que j'ai c'est la barre de navigation en haut, alors qu'un espace lui est reservé, le dernier onglet va a la ligne car il y'a une marge tout a gauche du logo et je ne sais pas pourquoi.
Votre aide est la bienvenue, merci d'avance.
Un exemple de page :
http://volfoni.com/fr/cinema_projection_numerique_3D/kit_3D.html
Le code xhtml associé :
<div id="navbar">
<ul id="nav">
<li><a id="lien0" href="/">Volfoni projection 3D</a></li><li><a id="lien1" href="/fr/cinema_projection_numerique_3D/kit_3D.html">Le Kit 3-D</a></li>
<li><a id="lien2" href="/fr/cinema_projection_numerique_3D/pack_3D.html">Le pack 3-D</a></li>
<li><a id="lien3" href="/fr/cinema_projection_numerique_3D/options.html">Les options</a></li>
<li><a id="lien4" href="/fr/cinema_projection_numerique_3D/tarifs.html">Les tarifs</a></li>
<li><a id="lien5" href="/fr/cinema_projection_numerique_3D/conseils.html">Les conseils</a></li>
<li><a id="lien6" href="/fr/societe/volfoni.html">La société</a></li>
</ul>
</div>
La css associée :
body { font : 88%/1.4 "Verdana", Arial, sans-serif;
color: #ffffff;
background-color: #000000;
font-size: 12px;
list-style-image: url(/pics/puce.png);
list-style-position: outside;
margin: 0 auto;
width: 950px;
position: relative;
}
ul#nav li {
list-style-type: none;
list-style-image:none; }
ul#nav a {
text-decoration: none;
display: block;
text-indent: -2000px; }
ul#nav li {
float: left; }
a#lien0{
background-image: url(/pics/logo-volfoni.png);
height: 80px;
width: 234px; }
a#lien1{
background-image: url(/pics/fr_menu1i.png);
height: 80px;
width: 124px;
}
a#lien1:hover{
background-image: url(/pics/fr_menu1a.png); }
a#lien2{
background-image: url(/pics/fr_menu2i.png);
height: 80px;
width: 139px; }
a#lien2:hover{
background-image: url(/pics/fr_menu2a.png); }
a#lien3{
background-image: url(/pics/fr_menu3i.png);
height: 80px;
width: 121px; }
a#lien3:hover{
background-image: url(/pics/fr_menu3a.png); }
a#lien4{
background-image: url(/pics/fr_menu4i.png);
height: 80px;
width: 101px; }
a#lien4:hover{
background-image: url(/pics/fr_menu4a.png); }
a#lien5{
background-image: url(/pics/fr_menu5i.png);
height: 80px;
width: 110px; }
a#lien5:hover{
background-image: url(/pics/fr_menu5a.png); }
a#lien6{
background-image: url(/pics/fr_menu6i.png);
height: 80px;
width: 110px; }
a#lien6:hover{
background-image: url(/pics/fr_menu6a.png);}
#main_content {
height:482px;
background-image: url(/pics/interface-fr.png);
top: 130px;
background-repeat: no-repeat;
background-position: left top;
margin-top: 120px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 140px;
padding-right: 120px;
padding-bottom: 20px;
padding-left: 280px;
position: absolute;
}
#navbar { position: absolute;
float: left;
}
a:hover {
color: #ff0000;
text-decoration: underline
}
a {
color: #ffffff; }
h1 {
font-size: 18px; }
h2 {
font-size: 18px; }
strong {
font-size: 13px;
font-weight: bold; }
h1 strong {
font-size: 18px;
font-weight: bold; }
#main_content p {
padding-left: 77px;
}
#main_content ol {
font-weight: bold;
padding-left: 77px; }
#main_content ul {
font-weight: bold;
padding-left: 77px; }
h2 strong {
font-size: 18px;
font-weight: bold;
}
Ah et puis je viens de remarquer autre chose de bizare qui est peut etre lié, en cliquant sur les onglets de navigation, plus je vais vers la droite plus l'espace se retreci à droite ... peut etre que ca a un rapport ?
Modifié par commodo (26 Sep 2007 - 12:43)