Discussion :

[Sayrus]

Hello,

J'ai un problème sur lequel je passe plusieurs jours mais je ne parviens pas à le résoudre!

Imaginez un site où chaque page est réalisé en TABLE

On aura par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

Comment obtenir la même chose avec uniquement des DIV ?

Je parle bien du contenu d'une page dynamique, et non du layout d'un site.


Merci beaucoup de votre aide car je tourne en rond

[mLk92]

salut,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<p>
<span width="33%">LEFT</span>
<span width="33%">CENTER</span>
<span width="34%">RIGHT</span>
</p>
<p>
<span width="100%">content</span>
</p>
<p>
<span width="50%">LEFT</span>
<span width="50%">RIGHT</span>
</p>
</div>

Si c'est ce que tu voulais, faudrais réfléchir un peu !

Sinon explique nous mieux ton souci

[Sayrus]

Hello,

Merci pour ta réponse mais ça n'est pas non plus la solution car le contenu (LEFT, CENTER, RIGHT, Content, etc) sont des contenus avec plusieurs paragraphes, des images aussi, etc.

Hors, en span ça ne donne pas dutout un affichage en 3 colonnes.


Mon but est de générer des div en 1, 2 ou 3 colonnes, de manière dynamique, en position relative, on voit bien les 1, 2 ou 3 colonnes mais l'alignement horizontal est décalé ( logique).

Alors je veux passer en position absolute avec un margin-left de x % mais alors le contenu de chacune des colonnes n'apparait pas car je ne parviens pas à obtenir l'entièreté de la hauteur de chacune des 3 colonnes...


Je ne vois toujours pas de solutin , que puis-je faire?

[BnA]

Salut.

Alors...

En CSS bien sûr, crée UNE GRANDE DIV (= table) dont l'ID est, par exemple, "container" (classique! )

Ensuite, il suffit de faire la même structure que ton tableau.

Tu crèes 3 DIV dans #container (en gros, 1 DIV par <tr>), dont les ID sont respectivement #header, #main et #footer

Dans #header, tu crèes 3 nouvelles DIV, dont les class seront respectivement .left, .mid et .right.

Ensuite, tu fais de même dans #footer (en utilisant les mêmes noms de class).

Maintenant, il ne te reste plus qu'à positionner correctement .left, .mid et .right un à côté de l'autre avec la propriété CSS float.

Je t'ai dit d'utiliser les mêmes noms de classes, car si tu t'y prends bien dans ton CSS, tu n'aura qu'à déclarer 1 seule fois le positionnement de ces éléments-là.

En espérant que c'est bien ce que tu cherchais à obtenir.

Bien à toi!

[Sayrus]

Hello!

Merci pour ton aide

J'essai cette solution:

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
.left{
 
float:left;
 
}
 
.mid{
 
 
}
 
.right{
 
float:right;
 
}

Le . right seulement ne s'aligne pas à la même hauteur, que faut-il rajouter comme propriété?

[pop_up]

je te conseille de lire ceci :

http://www.projectseven.com/tutorial...umns/index.htm

je pense que ça pourrait t'aider

[Sayrus]

Intéressant ce script!


Facile à mettre en place! Je vais l'utiliser si je ne parviens pas a résoudre mon problème avec la 3e colonne.

J'attends de voir si il y a moyen de rectifier la 3e colonne en float:right à hauteur des 2 autres.

Sinon j'utiliserai le script.

Merci

[BnA]

J'attends de voir si il y a moyen de rectifier la 3e colonne en float:right à hauteur des 2 autres.

Tu as quoi exactement comme résultat?

Montre-nous ton code complet, ou bien un screenshot pour que l'aide que nous te fournirons soit plus efficace!

[Sayrus]

Oui bien sûr.

Le screenshot qui suit sera plus parlant!

J'ai indiqué le code css pour chacune des divs à côté sur le screenshot pour plus de facilité.

En gros, la colonne de droite remonte trop haut, elle devrait s'arrêter en dessous du texte d'1 colonne juste au dessus! Alors que la div d'1 colonne juste au dessus est pourtant en relative!

PS: ne pas tenir compte des images trop grande. le bord blanc c'est normal c'est l'image qui est comme ça.





Merci de votre aide! Je galère mais je sent que la solution n'est pas loin!

[BnA]

C'est normal que la position de ta colonne .right soit en absolute?

Sinon, tu peux aller jeter un coup d'oeil sur The Noodle Incident - Little Boxes (tu peux récupérér le CSS de chaque "disposition".

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.

[Sayrus]

Un très grand merci pour ton aide!

Et également aux autres pour leurs idées

J'ai résolu mon problème en moins de deux grâce à cette méthode!

GG!

[BnA]

De rien, ça fait plaisir!!

[Sayrus]

Juste un petit détail

avec ce code pour l'affichage en 3 colonnes celui du site que tu m'as proposé:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#left {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #left {
	width: 170px; /* ie5win fudge ends */
	}
#middle {
	padding: 10px;
	border: 0px;
	background: #666;
	/* ie5win fudge begins */
	margin: -20px 190px 0px 190px; 
	voice-family: "\"}\"";
	voice-family:inherit;
	margin-top: 0px;
	}
html>body #middle {
	margin-top: 0px; /* ie5win fudge ends */
	}
#right {
	position: absolute;
	top: 0px;
	right: 0px; /* Opera5.02 will show a space at right 
	when there is no scroll bar */
	margin: 0px;
	padding: 10px;
	border: 0px;
	background: #666;
	width: 190px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 170px;
	}
html>body #right {
	width: 170px; /* ie5win fudge ends */
	}

Si la colonne de gauche ou de droite est plus grande que la colonne du milieu, cette colonne plus grande, son contenu s'arretera à la fin de la colonne du milieu et donc n'apparaitra pas.

Une astuce pour que la plus grande hauteur des 3 colonnes soit prise en considération? au faut-il que j'utilise le script js décrit ci-dessus dans un des posts?

Merci!!!

[BnA]

As-tu déjà recoder ta page avec cette méthode?

Si oui, en théorie (désolé mais j'ai la tête comme un camion, plus envie de coder une seule ligne aujourdhui), tu n'as qu'a ne pas spécifier de height à la DIV parent, et mettre le height à 100% pour les 3 div internes.

En théorie, j'insiste.

A toi de tester!

[Sayrus]

Ok merci

Je regarderai à ça.