28173 sujets

CSS et mise en forme, CSS3

Positionnement de mes deux dernières colonnes

Bonjour,

j'ai recommencé ma mise en page et le comportement entre IE et Firefox est beaucoup mieux. Mes trois colonnes semblent bien placé.

Je suis rendu à ajouté deux autres colonnes centrée en-dessous de mes 3 colonnes mais je n'y arrive pas.

Lien: http://www.uqtr.ca/fondation/fn_ca.php

Code CSS: 

#conteneur{
 position: relative;
 width: 740px;
 background-color : white;    
 color : black;
 margin-left: auto;
 margin-right: auto;
}
 
#banniere{
 background-image: url(images/i_graphiques/banniere.gif);
 background-repeat: no-repeat;
 width: 740px;
 height: 131px;
 margin: auto;
}
 
.ban_icone{
    color: #FFFFFF;
    text-align: right;
    margin-right: 15px;
    padding-top: 80px;
}
 
#corps{
 clear: both;
 background: #ffffff url(images/i_tuiles/f_600.jpg) no-repeat center center;
 border-bottom: 1px solid #808080;
 border-left: 1px solid #808080;
 border-right: 1px solid #808080;
 width: 738px;
 <!--[if IE]>
 <style type="text/css">div#cadre {height: 100%;}</style>
<![endif]-->
 min-height: 560px;
}
 
#pied{
 clear: both;
 position: absolu;
 bottom: 0;
 width: 730px ;
 height: 37px;
 background-color: #0C4072 ;
 padding-right: 10px ;
 color: #3366ff;
 font-size: 20px;
 text-align: right;
}
 
div#bloc1,
div#bloc2,
div#bloc3{
 background: transparent;
 border: 2px dotted #960;
 width: 200px;
 height: 455px;
 text-align: center;
}
div#bloc1 {
float: left;
margin-left: 20px;
}
div#bloc2 {
float: left;
margin-left: 20px;
}
div#bloc3 {
float: left;
margin-left: 20px;
}  
 
div#bloc4,
div#bloc5{
 clear: both;
 background: transparent;
 border: 2px dotted #960;
 width: 200px;
 height: 135px;
 text-align: center;
 margin-bottom: 12px;
}  
div#bloc4{
 float: left;
 margin-left: 20px;
}
div#bloc5{
 float: absolu;
 margin-left: 240px;  
}


Merci de l'aide.
Modifié par Vero (06 Sep 2006 - 22:43)
Bonjour fourniey,

Merci de bien vouloir encadrer le code à l'aide du bouton code prévu à cet effet.
Mieux encore, un exemple en ligne facilite la tâche de ceux qui pourront t'aider.

Bonne chance.

Smiley smile
Ok.
Mais pour une meilleure lecture du topic, soit tu effaces le code de ton premier post, soit tu le balises avec le bouton code.

Smiley cligne
Il faut cliquer sur le bouton code !

<edit>
Bon, j'ai édité ton sujet pour que tu le vois une fois.
Smiley cligne
Modifié par Vero (06 Sep 2006 - 22:44)
Pour essayer d'apporter une réponse à ton problème :

J'aurais peut-être intégré les bloc4 et 5 dans un autre bloc ...

Au passage :


 div#bloc5{

 float: absolu;

 margin-left: 240px;  

}

ne veut rien dire.

Un bloc peut être positionné en absolu, de la manière suivante :


position : absolute;


ou bien flotter, à droite ou à gauche d'un autre :


float : left;

Modifié par Vero (06 Sep 2006 - 22:53)
Bonjour fourniey,

Tout d'abord, j'ai remarqué quelques erreurs de syntaxe qu'il serait préférable de corriger pour éviter les comportement inattendus. Je pense notamment aux commentaires conditionnels qui ne peuvent pas s'insérer directement dans la feuille de style mais dans le code HTML, ou encore à des déclarations erronées telles que "position: absolu;" et "float: absolu;".

En ce qui concerne les trois premières colonnes, je conseille d'ajouter un "display: inline;" pour obtenir un rendu similaire sur Internet Explorer et les autres navigateurs. Il s'agit là en effet d'un palliatif au Doubled Float-Margin Bug.

En ce qui concerne le problème de centrage en lui-même, il y a plusieurs possibilités. Par exemple, il serait possible d'ajouter un élément encapsulant #bloc4 et #bloc5 et de le centrer. Le principe des flottants peut aussi être conservé, en donnant au #bloc4 une marge gauche judicieusement choisie.

Voilà donc de façon synthétique une évolution possible des déclarations :


div#bloc1, div#bloc2, div#bloc3, div#bloc4, div#bloc5 {
	float: left;
	display: inline;
}	
div#bloc1, div#bloc2, div#bloc3 {
	width: 200px;
	height: 455px;
	text-align: center;
	background: transparent;
	border: 2px dotted #960;
}
div#bloc4, div#bloc5 {
	width: 200px;
	height: 135px;
	background: transparent;
	text-align: center;
	margin-bottom: 12px;
	border: 2px dotted #960;
}	
div#bloc1 {
	margin-left: 40px;
}
div#bloc2 {
	margin-left: 20px;
}
div#bloc3 {
	margin-left: 20px;
}
div#bloc4{	
	margin-left: 150px;
}
div#bloc5{
	margin-left: 20px;	 
}


Enfin, il serait également utile de rajouter un élément entre les blocs 3 et 4 permettant d'assurer un "clear: left;" et de gérer l'espacement vertical désiré entre les blocs supérieurs et inférieurs.

Bonne continuation.
Modifié par Romain H. (06 Sep 2006 - 23:02)
Merci Romain,

J'ai apporté quelques corrections et maintenant l'affichage sous Firefox n'est pas très beau et sous IE, c'Est assez près de ce que je désire.

J'aimerais savoir comment puis-je mettre un espace entre les colonnes (ceux du haut et ceux du bas)

Merci!
Sujet clos
Aller à