28221 sujets

CSS et mise en forme, CSS3

Pb de DIV container

Bonsoir à tous,

Une nouvelle fois je fais apel à vous après de nombreuses tentatives...
G un probleme de positionnement entre IE et Firefox.
Voir la page suivantehttp://kwa29.free.fr/Sofibra/index3.html
Sous IE nickel
Sous Firefox c l'orgie

bref je me doute non je suis sur meme que c moi qui merde et ke c Firefox la parole divine (de toute façon avec maintenant 10% fo absolument en tenir compte geek...).
Je vous poste la parti html incriminé ainsi que le CSS

<div id="x-menu-4">
	<div id="x-box-3">
	<h1>Sejours a themes</h1>
      	<h2>Venez les d&eacute;couvrir</h2>
      	<p><a title="" href="">&gt;&gt; La D&eacute;couverte</a></p>
      	<p><a title="" href="">&gt;&gt; La D&eacute;tente</a></p>
      	<p><a title="" href="">&gt;&gt; Le Sport</a></p>
      	<br />
	  	<div class="centrer">
	  	<img src="images/oceania.gif" alt="Cliquer ici" /> <br />
	  	<img src="images/mascotte.gif" alt="Cliquer ici" /> <br />
	  	<img src="images/continental.gif" alt="Cliquer ici" />
		</div>
	</div>
	
	<div id="x-box-4">
	<a href="http://www.hotel-sofibra.com/"><img class="gauche" height="80" alt="pont du 8 D&eacute;cembre" src="images/immacolata.jpg" width="120" /></a>
	<h1>coup de coeur</h1>
   <h2>pont du 8 D&eacute;cembre</h2>
   <h3>En Italie parmi art, bien-être et cuisine gourmande</h3>
   <a href="http://www.hotel-sofibra.com/">de &euro; 100 pour personne</a>   
	<br />           
 X3 (je simplifie)
	</div>
			
	<div id="x-box-5">
	<h1>mailing list</h1>
      	<h2>Les meilleures offres</h2>
      	<h3>sur votre e-mail</h3>
      	<div class="centrer">
	  	Votre language:<br />
	 	<select name="select"> 
	  	<option value="fr">Newsletter-FR</option> 
      	<option value="us">Newsletter-US</option>
	  	</select> 
	  	<br />
	  	Votre e-mail<br /> <input name="mail" /> <br />
      	<a href="">abonner</a></div><br /><a href="">Supprimez</a><br /><a href="">Regardez 
      	l'exemple</a><br /><a href="">privacy 
      	et politique anti-spam</a>
      	<br />
      	<h1>plaisir</h1>
      	<h2>Ludiques</h2>
      	<a href="">Ajouter ce site &agrave; mes favoris<br />Demande de 
      	brochure<br />Recommander ce site<br />Créer un lien sur mon bureau </a>
	</div>
	</div>

Et hop pour le CSS

.gauche {
  float: left;
} 
#x-box-3 {
	width:						160px;
   border-left: 				gray 1px solid;

	border-bottom:				gray 1px dotted;
	margin-left: 				5px;
	margin-right: 				5px;
	padding-left: 				5px;
	padding-bottom: 			5px;
	float: 						left;
}

#x-box-4  {	
   border-left: 				gray 1px solid;

	border-bottom:				gray 1px dotted;
	margin-left: 				5px;
	margin-right: 				5px;
	padding-left: 				5px;
	padding-bottom: 			5px;
	width:						330px;
	float: 						left;
 }

#x-box-5 {
	width:						160px;
   border-left: 				gray 1px solid;

	border-bottom:				gray 1px dotted;
	margin-left: 				5px;
	margin-right: 				5px;
	padding-left: 				5px;
	padding-bottom: 			5px;
	float: 						left;
}


D'avance merci pour vos réponses et votre aide si précieuse.... Smiley biggrin Smiley biggrin
Modifié par Kwa29@louest (01 Mar 2005 - 17:32)
Bonjour,
Merci de trouver un titre plus évocateur car "Pb entre IE et Firefox" c'est pas très vendeur Smiley cligne

Comme tu utilises désormais un bloc en flottant et que celui-ci sort du flux il te faut un autre élément muni de la propriété clear pour gérer les éléments autour. C'est expliqué dans la faq.
Ton footer semble tout indiqué et cela semble fonctionner dans Firefox:

#x-footer {
        clear:both;
        width:100%;
	margin:0 auto;
	text-align:center;
}
Merci Igor pour ta reponse et anthony evidemment.
Donc o résultat des courses après avoir regardé,lu et essayer on est pas mal meme pas mal du tout. Ca commence à avoir de la gueule....
Je vous laisse contempler Voir la page suivante http://kwa29.free.fr/Sofibra/index3.html

Par contre g perdu mon background White (bizarre) donc je v voir ca presentement de suite.
En tous cas merci beaucoup messieurs et je poste des que j'aurais trouvé la solution finale.
Bon je viens de tester est enfaite c bizarre :
J'avais deja ca de base

.c-pastel #x-menu-4 {

   background-color: 		White;

	border-right:				rgb(0,102,153) 2px solid;			

	border-left:				rgb(0,102,153) 2px solid;

}

Mais cela ne marche plus alors qu'il est le container des 3 div (si je dis pas de connerie)
Par contre sur mes box (une à une , vraiment pas tres fun)

.c-pastel #x-box-3  a:hover {

	color: 						#df5723; 

	text-decoration: 			underline;

}


Voili voila pour l'instant j'en suis la. Donc la question est comment avoir du blanc ainsi que le contour pointillé sur le container et non pas par DIV.... Smiley ravi
Désolé de vous rederanger mais après de multiples essais je n'arrive à avoir ce que je veu que par les x-box. A croire que le x-menu n'est pas pris en compte...

Quelqu'un aurait-il un début de piste que je me réaxe dans le bon sens ?? D'avance merci beaucoup.
Sujet clos
Aller à