Pages en plusieurs lignes de 1, 2 ou 3 colonnes

Bonjour à tous,

J'ai développé en PHP un générateur de page en plusieurs lignes comprenant 1, 2 ou 3 colonnes.

Voici la structure:

<table width='100%'>
 <tr>
  <td width='33%' valign='top'>Content LEFT</td>
  <td  width='33%' valign='top'>Content CENTER</td>
  <td width='34%' valign='top'>Content RIGHT</td>
</tr>
<tr>
  <td width='100%' valign='top'>Content</td>
</tr>
<tr>
  <td width='50%' valign='top'>Content LEFT</td>
  <td width='50%' valign='top'>Content RIGHT</td>
</tr>
</table>

En tableau pas de suicis, ça fonctionne très bien.

par contre, lorsque je veux passer le tout en CSS, je rencontre des problèmes avec les DIV.

Lorsqu'il y a 3 colonnes, la 3e colonne est décalée vers le bas au lieu d'être alignée horizontalement avec les 2 autres. Logique car j'ai placé la 1er colonnes en position relative.

Cependant, j'aimerais par tout les moyens faire remonter cette 3e colonnes en restant en position relative.

Si j'utilise la position absolue, là mon contenu de mes colonnes n'apparaitra pas ou partiellement uniquement ( en fonction de la première colonne qui est en position relative)

Comment puis-je faire pour aligner à hauteur égale mes 3 colonnes, et surtout que le contenu de chacune de ces colonnes soit visible?

Voici mon code CSS:

#page .page_row{

	position:relative;
	height:auto;
	
}

#page .page_line{

	overflow:hidden;
	height:auto;
	margin-bottom:10px;

}

#page .page_line_left{

	overflow:hidden;
	position:relative;
	

}

#page .page_line_center{

	overflow:hidden;
	position:absolute;

	top:0px;
	bottom:0px;
	
}

#page .page_line_right{
	

	overflow:hidden;
	float:right;
	top:0px;
	

}

Voici le code HTML d'une page généree dynamiquement:

<div class='page_row'>
    <div class='page_line'>
         <div class='page_line_left' style="width:33%">{Contenu + images}</div>
         <div class='page_line_center' style="margin-left:33%; width:33%">{contenu+images}</div
         <div class='page_line_right' style="margin-left:66%; width:34%; ">{contenu+images}</div>
   </div>
</div>

Modifié par sayrus (15 Nov 2007 - 12:51)

Salut,
Je suis dans la même gadoue, avec seulement deux colonnes...
Qu'entends tu en fait par "site en plusieurs lignes"?

a écrit :
faire remonter cette 3e colonnes en restant en position relative.

Pourquoi?

J'ai trouvé des idées ici

Une autre piste:
1-Tu fais un grand conteneur, positionné, pour tes trois colonnes
2-Tu lui colle un "min-heigt:[hauteur minimum du site]"
3-Tout ce que tu mets dedans (je veux dire les block-colonnes), tu le mets en "min-height:100%" (ne fonctionne pas avec les floats)
Résultat (si je me suis pas trompé ):
-Les colonnes en position:relative allongerons le tout en fonction du contenu et feront minimum [hauteur minimum du site]
-Celles en position:absolute feront toujours la hauteur du reste, mais le contenu dépassera s'il est plus long que les colonnes en relative: tu peux lui coller un overflow...

Si ça peut t'aider (j'ai passé la nuit sur ces problèmes, alors je suis dans le bain )

Salut,

Ce n'est pas vraiment au layout du site que j'ai un problème, mais bien dans le contenu même

Je pense qu'un screenshot sera plus parlant, voici:

http://www.mwp-downloads.be/CSS-3cols-prob.jpg

Joli petit cochon
déjà:

float:left;
position:relative;

Je crois pas que ça fonctionne
[edit: si, ça fonctionne...]
Et

float:left;
height:100% ;

ça ne fonctionne pas (en tout cas pas chez moi, FF2.0): le float fait sortir l'élément du flux normal (partiellement), et ne prend plus en compte les valeur en rapport avec son conteneur. Il faudra fixer les valeurs en unités (em, px)
Enfin, arrêtez moi si je me trompe...

Ensuite, forcément, si ta colonne class="right" est en absolute, elle sort du flux et se positionne par rapport à son premier ancêtre positionné, soit la colonne1 si je comprends bien...
Pour aller plus loin, tu pourrais envoyer les imbrications de tes blocs? (le html)
Modifié par BlindeKinder (15 Nov 2007 - 16:04)

Voici le code HTML

<div class='page_line'>
   <div class='.left' style="width:49%;">{le contenu}</div>
   <div class='.right' style="margin-left:50%; width:50%; position:relative; ">{le contenu}</div>
</div>
													
<div class='page_line'>
   <div class='.left' style="width:100%;">{le contenu}</div>
</div>
												
<div class='page_line'>
  <div class='.left' style="width:31%;">{le contenu}</div>
  <div class='.mid' style="margin-left:33%; width:31%;">{le contenu}</div>
  <div class='.right' style="margin-left:66%; width:34%; position:absolute; left:0px; ">{le contenu}</div>
</div>

PS : la capture d'écran a été prise sous FF 2.0.0.9 et les styles dans les balises HTML je l'ai indiqué sur le screenshot, une partie est dans le code car la page est chargée dynamiquement
Modifié par sayrus (15 Nov 2007 - 15:36)

Pour information :

Sous IE 7, mon screenshot fonctionne, c'est juste sous firefox que j'ai la 3e colonne qui remonte de trop, comment corriger ce bug?

a écrit :
float:left;
position:relative;

Je crois pas que ça fonctionne

En fait si

Bon je lance quelques trucs:
-et si tu mets ta deuxième colonne en float, la troisième (en float ou relative ou rien) devrait s'aligner, non?
Elle remonte parce que la colonne unique au dessus est en float, je pense... fais des clear:both à chaque retour à la ligne
-je ne te conseille pas vraiment la position:absolute dans ce cas, tu auras trop d'ennuis...
-"position:relative; top 0px ;" ne résoudra rien, ça reviendrait à dire à quelqu'un: "vas te mettre où tu es déjà..."

Alors voilà, j'ai trouvé une solution :

Quelqu'un d'un autre forum m'a proposé ceci:

a écrit :

Et à partir de ce site, voici ce que je ferais (moyennant différentes adaptations que, je pense, tu saurais effectuer tout seul).

1 DIV #container qui contient 3 DIV (une en dessous de l'autre, donc aucune spécification particulière quant au positionnement, spécifie juste le width à 100% et un height quelconque), que je vais nommer A, B et C pour la facilité.

Ensuite, considère les DIV A, B et C comme des pages à part entière.

Dans A, insère et adapte le code de "Two box" (basic, fluid ou touch trying).

Dans B, tu peux ne rien mettre, ou mettre une DIV sans paramètre particuliers.

Et pour finir, dans C, insère et adapte "Three Column" (try ou touching, à ton choix).

Tu devrais finir par obtenir ce que tu désires.

Voici le lien:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html[/url]

Une vrai mine d'or


Ceci t'aidera très certainement pour tout ce que tu as besoin étant donné que ça a résolu mon problème très rapidement!

Merci pour ton aide en tout cas et bonne continuation

Merci pour le lien , joliment fait, mais malheureusement ne règle pas le problème de "remplir jusqu'en bas si le contenu n'est pas assez long..."
Bonne continuation à toi...

Ceci pourra t'aider je pense

http://www.projectseven.com/tutorial...umns/index.htm
Modifié par sayrus (16 Nov 2007 - 08:55)

merci
Je redonne le lien complet
En fait je voulais éviter je javascript (déjà parce que je ne le connais pas bien ) pour la présentation générale...
Oui, il manque encore des possibilités pour le vertical en CSS...
(Voir ce topic)... J'aurais pu m'en sortir simplement avec quelque chose du genre: height:100%-300px...
Mais bon, j'ai déjà mes deux colonnes de même taille quelque soit le contenu ; on ne peut pas se pleindre