28173 sujets

CSS et mise en forme, CSS3

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é :

<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&eacute;t&eacute;</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)
Salut comodo Smiley cligne ,

je pense qu'en rajoutant :
ul { margin:0; padding:0; }
ça devrait passer même si c'est un peu ric rac Smiley lol !

Pour plus d'infos, voir la FAQ.

A+
alors toi Heyoan je te dois une fiere chandelle !
ca marche effectivement !!!
merci bcp
si tu es sur paris je peux te payer une biere si tu veux ? Smiley smile
un breton ! tout s'explique Smiley smile
c'est tres sympa ton aide je commencais a m'arracher les cheveux
merci encore @+