28173 sujets

CSS et mise en forme, CSS3

Pb imbrication calques

Bonjour,

J'ai besoin d'une petite mise au point car je vais bientôt me transformer en chèvre si çà continue !

J'ai une page avec des calques imbriqués pour assurer le positionnement des différents éléments dans la page. Je souhaite faire en sorte que mon calque "test" s'étire en fonction du contenu de mon calque "test2" et je n'y arrive pas.

C'est comme si ils avaient un comportement indépendant.

Voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<style>
 	div.test {
		position:absolute;
		top: 0px;
		left: 197px;
		width: 805px;
		min-height: 100px;
		background-color: #ACACAC;
		background-image:url(graph/fond_actu.gif);
		background-repeat: no-repeat;
	}

	div.test2 {
		position:absolute;
		top: 129px;
		left: 148px;
		width: 616px;
		background-image:url(graph/actu_fond_liste.gif);
		background-repeat: repeat;
	}

</style>

<body>
<div align="center">
	<div align="left" style="width: 1002px;">
			<div class="test">
				<div class="test2">
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
					dsadzazdazdaz<br>
				</div>
			</div>
	</div>
</div>

</body>
</html>

Modifié par david86 (09 Jun 2007 - 14:12)
Bonjour,

A priori comme ça tu n'y arrivera pas !
Une piste :
div.test {
float: right;
margin-left: 197px;
width: 805px;
min-height: 100px;
background-color: #ACACAC;
background-image:url(graph/fond_actu.gif);
background-repeat: no-repeat;
}

div.test2 {
margin-top: 129px;
margin-left: 148px;
width: 616px;
background: lime;
background-repeat: repeat;
}
Bonjour david86,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley smile

ghost a écrit :
A priori comme ça tu n'y arrivera pas !

Pour développer un peu : le problème dans ton code, david86, c'est que tes deux éléments imbriqués sont tous les deux positionnés en absolu.

Or, un élément positionné en absolu sort du flux de son conteneur, c'est à dire que pour le conteneur (et à vrai dire pour tous les autres éléments de la page qui ne sont pas des enfants ou descendants du bloc positionné en absolu) c'est comme si le bloc positionné en absolu n'existait pas, du moins du point de vue du positionnement CSS.

Voir par exemple sur Openweb cette initiation au positionnement absolu :
http://openweb.eu.org/articles/initiation_absolue/

Pour ces raisons, on évitera comme la peste de recourir au positionnement absolu à chaque fois qu'un bloc doit être pris en compte par son parent ou les blocs qui le suivent ou le précèdent.

Pour beaucoup de mises en page, une solution est effectivement d'utiliser des flottants, comme le propose ghost.


Un rappel sur le positionnement CSS (articles sur Openweb) :
1. flux et position relative
2. position float
3. position absolue et fixe
Modifié par Florent V. (09 Jun 2007 - 09:29)
j'ai réussi a faire en sorte que cela fonctionne, merci ! Smiley murf
Par contre je me heurte à un autre souci :

Imaginons que j'ai un site sur une présentation "classique" à deux colonnes :
- Bandeau en haut
- Colonne à gauche avec les menus (taille verticale pouvant varier)
- Colonne de contenu (taille verticale pouvant varier)

Comment faire pour que, quoi qu'il arrive :
- Les deux colonnes commencent à la même position verticale
- Que le fond d'une colonne aille pile poil jusqu'au bas de l'autre et vice versa.

Malgré des heures passées là dessus, j'arrive pas à solutionner tout cela Smiley decu j'hésite à retourner aux tableaux !!! Smiley biggol
david86 a écrit :
Comment faire pour que, quoi qu'il arrive :
- Les deux colonnes commencent à la même position verticale
- Que le fond d'une colonne aille pile poil jusqu'au bas de l'autre et vice versa.

Malgré des heures passées là dessus, j'arrive pas à solutionner tout cela Smiley decu j'hésite à retourner aux tableaux !!! Smiley biggol

Dans un monde idéal, on pourrait utiliser display: table-cell (pas supporté par IE 6 et 7...). Dans note monde moins idéal, deux solutions relativement simples :
- utiliser un tableau de mise en page ;
- utiliser la technique des colonnes factices.

http://pompage.net/pompe/colonnesfactices
Sujet clos
Aller à