28220 sujets

CSS et mise en forme, CSS3

Porblème placement en position relative

Bonjour,

J'ai le problème suivant, dans un div conteneur nommé "site" (width:990px;)qui contient une images(gb01.jpg) placée en bground, je place un div nommé "bandeauBan" (width:956px;) dans lequel il y a 2 images placées l'une en dessous de l'autre et positionnées à gauche et 2 anim flash, la première au centre et la seconde collé à la première à droite. Ce div doit être placé au centre de l'autre laissant ainsi apparaître les bords et l'image bg01.jpg.
Je n'arrive pas à pouvoir placé ainsi.

#site {
	position: relative;
	left: 0px;
	top: 0px;
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	height: 100%;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-y;
	margin-top: 0;
	margin-bottom: 0;
}

.bandeauBan {  
	position: relative;
	left: 0px;
	top: 0px;
	width: 956px;
	background-color: #FFFFFF;
	text-align: left;
	float: left;
}
/* image Gauche Haut 1er image)*/
.bandGH{
	position: relative;
	left: 17px;
	top: 0px;
	width: 253px;
	margin: 0;
	padding: 0;
	text-align: left;
}
/*image GaucheBas placé en dessous de la 1ere image*/
[.bandGB{
	position: relative;
	left: 0px;
	top: 0px;
	width: 253px;
	text-align: left;
}
/*1er anim flash placée à droite des 2 images */
.bandC{
	position: absolute;
	width: 494px;
	margin-left: 254px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	padding-right: 0;
}
*/ 2eme anim flash placée à droite de la première anim flash*/
.bandD{
	position: absolute;
	width: 209px;
	height: 132px;
	top: 0px;
	left: 747px;
	padding: 0;
	border: 0;
}

}


Je n'y arrive pas à placer cela correctement sans être obligé de mettre chaque image et anim dans un div et de le positionné en absolute, j'ai essayer en relative en donnant une classe à chaque élément, mais cela ne se positionne pas correctement, il reste tjrs centré .... bizar !!

Merci de votre aide !!
Modifié par Gobelin (09 Jan 2007 - 15:54)
Hé ben, c'est champ de bataille et compagnie ces jours-ci sur Alsacréations. On donne dans l'artillerie lourde : positionnement absolu, positionnement relatif... tout ça sans trop savoir si on tire sur les militaires ou les civils. Je préfèrerais pas être là pour compter les morts. Smiley lol


(Désolé du ton moqueur, faut bien relâcher la pression de temps en temps...)


Plus sérieusement, attention à ne pas abuser des positionnements relatifs et absolu. On en a rarement besoin : deux ou trois éléments au plus dans la plupart des mises en page. Et souvent on n'en a pas besoin du tout...

De plus, ma comparaison du positionnement absolu avec l'artillerie lourde n'est pas une exagération : quand on ne maitrise pas les implications du positionnement absolu, on fait souvent des bêtises, et au final on s'arrache les cheveux.

Petit exemple d'utilisation préoccupante :
#site {
	position: relative;
	left: 0px;
	top: 0px;
	...
}

À quoi cela peut-il bien servir de positionner ce bloc en relatif, si ça n'est pas pour le décaler d'un seul pixel ? Si c'est pour positionner le bloc afin de pouvoir l'utiliser comme référent pour le positionnement absolu de ses enfants, on gardera le position: relative, mais on supprimera les top et left ici inutiles.

Ensuite, pour placer ta div.bandeauBan, de largeur fixe, au centre (horizontalement) de son parent, il suffira d'utiliser la technique des marges automatiques. En passant, il y a pas mal de choses inutiles dans le code correspondant à cet élément :
.bandeauBan {
	position: relative; /* à priori inutile */
	left: 0px; /* inutile */
	top: 0px; /* inutile */
	width: 956px;
	background-color: #FFFFFF;
	text-align: left; /* inutile */
	float: left; /* inutile */
}

Si on corrige, on peut avoir ceci :
div#bandeauBan {
	width: 956px;
	margin: 0 auto;
	background-color: white;
}

Je trouve qu'il y a de l'amélioration (note : tant qu'à faire, autant utiliser un identifiant plutôt qu'une classe pour ce bloc, à moins que l'on ne veuille utiliser ce style plusieurs fois sur la page ?

Pour le contenu de la bannière :
- les deux images dans un sous-conteneur flottant à gauche (ce conteneur, div ou paragraphe ou titre de section, devra avoir une largeur fixe) ;
- la première animation flash flottante à gauche également ;
- la troisième animation flash peut être flottante à gauche, flottante à droite, ou tout simplement en flux.

Attention tout de même aux possibles dépassement de flottants :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Sujet clos
Aller à