Discussion :

[wotan2009]

Bonjour je voudrais pouvoir faire une mise en page en colonne, j'ai donc un div parent contenant plusieurs autres div (un seul de class titre et plusieurs de class contenu) qui doivent être présentées en colonne avec le titre d'un coté et le contenu de l'autre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="section">
<div class="titre">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.titre {
        position:absolute;
 
	width:20%;
}
 
.contenu {
	position:relative;
 
	left:20%;
 
	width:80%;
}

Avec ce type de positionnement, j'ai des problèmes de chevauchement car la div de class titre ne prend pas toute la place du conteneur parent de class section. Comment y remédier ?
Merci

[pop_up]

Il est normal que ta div.titre ne prenne pas toute la hauteur. Une div s'adapte à son contenu donc elle ne prendra pas toute la hauteur.

La question est :
"pourquoi veux tu qu'elle prenne toute la hauteur ?"

Si c'est juste d'un point de vue graphique, l'astuce consiste à mettre le même fond se répétant verticalement (si c'est possible) sur ta div.section pour simuler le fait que ta div.titre prend toute la hauteur.

[addock]

Pour travailler en colonne, je te conseille d'utiliser dans le css des "float" qui permettent de mettre des div les uns à coté des autres. Par exemple, tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="div1">
      blabla
</div>
<div id="div2">
      blabla
</div>

Pour mettre ces 2 div l'une à coté de l'autre, tu mets dans le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#div1{
   float:left;
}
#div2{
   float:left;
}
.clear{
   clear:both;
}

Et tu rajoute dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="div1">
      blabla
</div>
<div id="div2">
      blabla
</div>
<div class="clear"></div>

La classe clear est utilisé lorsque lorsque tu veux reprendre "l'ordre normal des choses" afin que les div se remetent les unes en dessous des autres.
Perso je pense que les "floats" c'est vital....

[wotan2009]

Il est normal que ta div.titre ne prenne pas toute la hauteur. Une div s'adapte à son contenu donc elle ne prendra pas toute la hauteur.

La question est :
"pourquoi veux tu qu'elle prenne toute la hauteur ?"

Si c'est juste d'un point de vue graphique, l'astuce consiste à mettre le même fond se répétant verticalement (si c'est possible) sur ta div.section pour simuler le fait que ta div.titre prend toute la hauteur.

Bonjour, je voudrais que la div prenne toute la hauteur car il y a un chevauchement entre plusieurs div titre lorsque le texte de la div contenu prend moins de place que le texte de la div titre c a d quand la hauteur de la colonne contenu et plus petite que la hauteur de la colonne titre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div class="section">
<div class="titre">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
</div>
<div class="section">
<div class="titre">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
</div>

@addock: j'ai aussi essayé avec float left pour la colonne titre et un clear:both, mais il apparait d'autres problèmes, en particuliers un gros décalage entre la colonne titre et contenu. Plutot entre les éléments dans la div contenu et la les éléments de la div titre.

[addock]

Les décalages peuvent être très vite résolues avec des margin et des padding.
Personnellement je trouve ca beaucoup plus simple. J'organise d'abord grossierement des div avec des float puis je les positionne précisement avec des margin et des padding avec l'aide du module Firebug sous Mozilla. C'est impressionnant comme on bosse vite de cette manière...

[pop_up]

comme te l'as dit "addock", ton problème vient de tes positionnements.

Regarde la galerie et tu devrais trouver des mises en pages qui t'interessent :
http://css.developpez.com/galerie/?p...se-en-page#mp2

En regardant ton code, tu as besoin d'une colonne de 20% à gauche et d'une seconde à droite qui fasse 80%. ça donnerait un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="section">
    <div class="colgauche">ton titre</div>
    <div class="contenu">tes contenus</div>
</div>

tu répètes ça tant que tu le souhaite, tu utilises les positionnements flottant pour positionner tes colonnes et ça devrai fonctionner

[wotan2009]

Ok j'ai réussi a placer les éléments comme je le souhaitais avec un float:left et un float:right. Maintenant j'ai un autre problème c'est que je n'arrive pas à séparer les différentes div de class section vu que les div titre et contenu ne sont plus dans le flux. Enfin le problème des colonnes est résolu, merci a vous.