28114 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de div englobant avec image de fond en repeat

Salut à tous !!

Je me décide enfin à poster car je ne trouve pas la solution en cherchant partout.

Pour commencer, j'aurai besoin de comprendre exactement ce que fais l'attribut clear:both/left/right...

Mais voici mon problème principal :

Ma page est construite comme ca :
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
	...
	...
</head>
<body>
<div id="CentreurPage">
	<div id="CadreGauche"></div>
	<div id="Global">
	...
	...
	</div>
	<div id="CadreDroite"></div>
</div>
</body>
</html>

avec dans mon CSS :
div#Global {
	float:left;
	width:905px;
	background: #FFFFFF;
}	
div#CentreurPage {
	margin-left:auto;
	margin-right:auto;
	width:905px;
}
div#CadreGauche{
	float:left;
	width:22px;
	height:100%;
	background:url('images/area_left.gif');
	background-repeat: repeat-y;
	background-color : #FFFFFF;
	}
div#CadreDroite{
	float:left;
	width:28px;
	height:100%;
	background-image:url('images/area_right.gif');
	background-repeat: repeat-y;
	background-position: right;
	}

et je n'arrive pas à faire en sorte que mes cadres gauche et droite apparaissent de chaque coté de mon div global !!

Sous mozilla, les cadres n'apparaissent pas du tout et sous IE, ils apparaissent au dessus et en dessous de mon div Global...

Vous pouver voir cela : http://alex.schwing.free.fr/site

Quelqu'un a-t'il une idée à me proposer pour avancer ??? Smiley sweatdrop
Modifié par Hollywood (30 Nov 2007 - 17:57)
Hollywood a écrit :

Pour commencer, j'aurai besoin de comprendre exactement ce que fais l'attribut clear:both/left/right...

Tout d'abord, clear n'est pas un attribut mais une propriété. Son rôle: nettoyer les flottants. Le comportement d'un élément flottant est de se placer à l'extrême gauche ou droite de son parent et de forcer le contenu qui le suit à l'enrouler.
Le clear permet au contenu qui suit un élément flottant de ne plus subir ce comportement d'habillage.

Pour ton problème de mise en page, il soulève naturellement une lacune de compréhension du positionnement css, et plus particulièrement du comportement des flottants. Je ne peux que t'encourager à (re)lire les différentes références à ce propos ici-même ou sur un des nombreuses références de qualité en la matière.

Si ton contenu central est systématiquement plus important (lire: plus "haut") que les colonnes latérales, tu devrais idéalement recourir à la propriété position pour arriver à tes fins, bien que l'utilisation de flottants soit tout à fait possible.

Pour exemple, partant de ta structure html, on aurait:

#CentreurPage {position:relative; width:905px; margin:0 auto;}
#CadreGauche,#CadreDroite {position:absolute; width:200px;}
#CadreDroite {top:0; right:0;}
#Global {margin:0 200px;}
Merci de ton explication concernant le clear !!

Concernant le reste, j'ai consulté pas mal les forums et tutos avant de poster, notamment cette page : http://www.the-asw.com/post/2005/08/23/46-centrer-un-float-en-css

Ce que je ne comprends pas sur ma page, c'est que mes 3 divs (CadreGauche, Global et CadreDroite) qui sont float:left ne se placent pas les uns a coté des autres mais les uns au dessus des autres.

Bon apparement, j'ai modifié mon CentreurPage en 
div#CentreurPage {
	margin : 0 auto;
}
et la ca marche...
mais j'avoue que j'ai pas tout compris !!
Hollywood a écrit :
Ce que je ne comprends pas sur ma page, c'est que mes 3 divs (CadreGauche, Global et CadreDroite) qui sont float:left ne se placent pas les uns a coté des autres mais les uns au dessus des autres.

Tu as un conteneur de 905px de large, censé contenir trois blocs flottants ayant les largeurs suivantes: 22px, 905px, 28px.

Le premier flottant se place à gauche. Il occupe 22px. Le navigateur tente de placer le deuxième flottant (également en float:left) juste à la droite du premier flottant. Il regarde l'espace disponible: 905-22= 883px. Or, le deuxième flottant fait 905px de large. Pas la place de caser ce deuxième flottant: il passe à la ligne.
Même chose pour la suite: 28px ne tiennent pas dans un espace libre de 0px (905-905), donc le troisième flottant passe à la ligne.

Voilà pour les maths.

Pour la propriété clear: elle force un élément à se placer au niveau en dessous des flottants qui le précèdent dans le code HTML. Un clear: left prendra en compte tous les éléments en float: left placés avant l'élément en clear. Un clear: right prendra en compte tous les éléments en float: right placés avant l'élément en clear. Enfin, un clear: both prendra en compte tous les éléments flottants placés dans le code HTML avant l'élément en clear.

Maintenant, pour le design à intégrer: à vue de nez, tu pars sur une fausse piste. Tu essayes de faire trois colonnes de hauteur égale avec des flottants, dans le but de placer des images de fond dans les «colonnes» latérales et de placer le contenu au milieu. En gros, tu imites ce que l'on fait avec un tableau de mise en forme. C'est une erreur.

Pourquoi ne pas faire un seul bloc de la largeur voulue, avec l'image de fond qui va bien répétée en hauteur, et un peu de padding (à vue de nez: 22px de padding à gauche et 28px de padding à droite).
Il faudra bien sûr faire une seule image à partir des deux images de fond utilisées initialement.

On pourra aussi faire une petite recherche sur la technique dite des «colonnes factices».
Hollywood a écrit :
Bon apparement, j'ai modifié mon CentreurPage en 
div#CentreurPage {
	margin : 0 auto;
}
et la ca marche...
mais j'avoue que j'ai pas tout compris !!

Si tu supprimes ça largeur, div#CentreurPage va prendre toute la largeur disponible dans son conteneur (body). Si cette largeur est égale ou supérieure à 955px (22+905+28), les trois flottants tiendront côte-à-côte. Avec un écran en 800x500, les trois flottants seront les uns en dessous des autres.

Par ailleurs, en supprimant la largeur de div#CentreurPage, les marges automatiques deviennent inopérantes et tu n'as plus de centrage horizontal de ce bloc.
Hollywood a écrit :
Concernant le reste, j'ai consulté pas mal les forums et tutos avant de poster, notamment cette page : http://www.the-asw.com/post/2005/08/23/46-centrer-un-float-en-css

Cette page ne correspond pas vraiment à ton besoin, tu risques surtout de t'y perdre.
Elle se rapproche à la rigueur plutôt de ceci:
http://web.covertprestige.info/test/23-un-ou-deux-blocs-centres-horizontalement.html

Mais je propose de laisser ces subtilités très particulières de côté. Smiley smile

Pour les références sur le positionnement flottant, il s'agirait plutôt de:
http://openweb.eu.org/articles/initiation_float/
Et aussi:
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Ok merci beaucoup pour le coup de l'image de fond et tes explications...

J'avance doucement mais surement !!

Merci encore.
Modifié par Hollywood (30 Nov 2007 - 15:38)
@ Florent V. :
a écrit :
Pourquoi ne pas faire un seul bloc de la largeur voulue, avec l'image de fond qui va bien répétée en hauteur, et un peu de padding (à vue de nez: 22px de padding à gauche et 28px de padding à droite).
Il faudra bien sûr faire une seule image à partir des deux images de fond utilisées initialement.
C'est ce que j'ai fait !! Ca marche nickel sous IE mais pas sous FF : sous FF, le div n'a aucune epaisseur (http://alex.schwing.free.fr/site). Je met le code du CSS de mon div : 
div#CentreurPage {
	margin : 0 auto;
	width: 916px;
	height: 100%;
	background:url('images/backgroud.gif');
	background-repeat: repeat-y;
	border:solid 1px red;
}

La bordure rouge est juste la pour faire ressortir le contour du div.
Je me demande si FF sait interpréter le "background-repeat: repeat-y;".

Quelqu'un à la réponse ?

Ok, je vais me renseigner sur les colonnes factices et je reviens !! Smiley rolleyes
Et donc, les topics parlant de colonnes factices ne m'ont pas aidé !!! Smiley decu
Modifié par Hollywood (30 Nov 2007 - 16:24)
Hollywood a écrit :
La bordure rouge est juste la pour faire ressortir le contour du div.
Je me demande si FF sait interpréter le "background-repeat: repeat-y;".

Avec ta bordure rouge, tu vois bien que le problème n'est pas l'image de fond, mais le conteneur lui-même qui a une hauteur de... zéro pixels.

Et là, j'ai un scoop:
- le rendu dans Firefox est le bon, conforme à la spécification CSS 2.1, etc.;
- le rendu dans IE est bugué.

Oui je sais, c'est paradoxal.
On pourra donc se reporter à la saine lecture suivante:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Ça devrait pas mal aider. Smiley smile
Sujet clos
Aller à