[CSS 3] Comment faire pour que ma colonne central s'adapte

pierrot10 · 10/04/2011, 22h50

Bonjour,
J'ai 3 div que je veux en colonne, de manière donc à avoir 3 colonnes :o).
La colonne de gauche aura une largeur et celle de droite aussi. Normalement identique.

Ma question est concernant la colonne du centre. Cette derniere sera plus large car elle contiendra le contenu des pages.

Simplement dans certaines pages, la colonne de droite ne sera pas exploitée, donc elle aura une largeur de 0px (ou 1px).

je souhaiterais sasvoir comment faire pour que ma colonne central s'adapte toujours en fonction de la largeur de la colonne de droite, mais si elle devait avoir une largeur différente que la colonne de gauche.

A la base je pensasi travailler avec un float, mais je dois vous avouer que je n'ai pas d'idée pour arriver à mon but.

Merci pour vos lumières

vodiem · 11/04/2011, 03h12

salut pierrot10,

ex:

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head> 
<style type="text/css">
#gauche {
width:200px;
height:200px;
float:left;
background-color:#3332CC;
}
#centre {
width:100%;
height:200px;
float:left;
background-color:#eee;
}
#droite {
width:100px;
height:200px;
float:right;
background-color:#FE0000;
}
</style>
</head>
<body>
<div id="centre">
centre
<div id="gauche">
colonne de gauche
</div>
<div id="droite">
colonne de droite
</div>
</div>
</body>
</html>

pierrot10 · 18/04/2011, 20h10

Salut,
Merci pour ta réponse.
Le problème c'est je veux mettre de bordure dans la 3 div

Code CSS :

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

1
2
3
4
 
#gauche,#centre,#droite{
border:1px solid #cccccc;
}

Le problème, dans ton exemple, on verra que la bordure de #centre va englober les deux autres.
Alors que je souhaite avoir 3 bloc en colonne, qui ont un border:1px solid #ccc, et un margin:5px.

Ceddoc · 19/04/2011, 08h54

edit: répondu trop vite je relis la discussion et j'édite ce message si je trouve une solution sinon à supprimer

edit2: pas trouvé de solution "facile" mais des fois je me dit que même si les tableaux c'est pas bien ben la... ce serait vite réglé avec quelquechose du genre :

Code :

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

1
2
3
4
5
6
7
8
 
<table cellpadding=0 cellspacing=0 id="maintable">
<tr>
<td id="gauche">ta colonne gauche</td>
<td id="centre">ta colonne centrale</td>
<td id="droite">ta colonne droite</td>
</tr>
</table>

et comme css

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
 
#maintable {
border:none;
width:100%;
}
 
td#gauche {
border:1px solid #000;
width: 200px;
}
 
td#centre{
border-width:1px 0px 1px 0px;
 
}
 
td#droite{
border:1px solid #000;
}

En espérant t'avoir aidé

pierrot10 · 19/04/2011, 10h34

Salut,

Merci pour ta réponse.
Ben oui pour le moment, je le fais avec des tableaux

Ceddoc · 19/04/2011, 10h45

Et il y a quelque chose qui ne marche pas bien ou qui te bloque? ou c'est juste par acquis de conscience que tu cherche à le faire avec des divs?

Bisûnûrs · 19/04/2011, 10h45

A mon avis tu peux t'inspirer de ça :
http://covertprestige.info/css/exemp...nnes-factices/

pierrot10 · 19/04/2011, 11h11

Ben un petit peu des deux

Ce qui me bloque, c'est que j'aimerais avoir 3 bloques

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
div.glob{width:500px;}
table.table_3_col td{
	-moz-border-radius-topleft : 5px; 
	-moz-border-radius-topright : 5px; 
	-moz-border-radius-bottomleft : 5px; 
	-moz-border-radius-bottomright : 5px; 
	-webkit-border-top-left-radius : 5px;
	-webkit-border-top-right-radius : 5px;
	-webkit-border-bottom-left-radius : 5px;
	-webkit-border-bottom-right-radius : 5px;
	border:1px solid #cccccc;
}

Il faudrait que
1) La col ne gauche soit toujours collée au div parent (.glob) avec une largeur fix
2) La col de droit soit toujours collée au div parent (.glob), mais à sa droite
3) que mon ma col de droite d'adapte eb fonction des largeurs de la col de gauche et de droite, si elle devait changé.
4) MAIS SURTOUT, et c'est notamment ca que je cherche à faire et que je ne n'arrive pas à faire avec un tableau, c'est que mes trois colonne ait un cadre (border:1px solid #cccccc

MAIS que la colonne du centre soit séparé de 5px.

Un peu comme si je mettais trois div en

Code CSS :

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

float:left

et pour le div du centre

Code CSS :

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

margin:0px 5px 0px 5px;

Vous voyez?

En résumé,
Avec des div, je epux les aligner, séparé mon div du centre avec des margin:0px 5px 0px 5px, faire en sorte que mon div de droite, soit collé à droite de son div parent, mais je n'arrive pas à ce que la largeur du div central s'adapte en fonction du div de droite.

Avec un tableau, j'y arrive, mais là, je n'arrve pas a avoir

Code CSS :

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

margin:0px 5px 0px 5px;

sur la cellule du centre.

Voilà, j'espère que j'ai été assez claire?
Merci
avec

Ceddoc · 19/04/2011, 11h20

La solution sale pour le tableau ce serait de rajouter des cellules vide entre la cellule gauche et la cellule centrale et entre la celulle centrale et la cellule droite. ces cellules "écarteuses" seraient vide, sans bord et avec une largeur de 5px pour remplacer ton

Code :

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

margin:0px 5px 0px 5px;

La solution propre pour l'un ou l'autre je suis curieux de la connaître

pierrot10 · 19/04/2011, 11h43

Ha ben oui, ben je voulais justement éviter les cellules écarteuses

vodiem · 19/04/2011, 11h58

tu veux parler de border-spacing ?

Ceddoc · 19/04/2011, 12h01

ah oui en effet avec un border spacing sur la cellule du milieux ça peut le faire.

pierrot10 · 19/04/2011, 13h23

Bonjour,
Ben c'est pas mal du tout.
Je m'excuse dêtre un peu pointilleux, mais le seul probleme qu'il se pose, que qu'il y a un "margin" gauche sur ma col de gauche. J'aurai préféré qu'elle soit aligné avec le texte.

A moins que je me trompe, le

border-spacing

n'agit que tu la <table> et pas le <td>.

Si ca pouvait agir que sur le <td> du centre, ca serait top.

Mais bon, pour le moment ca va.
Merci

10/04/2011, 22h50	#1
pierrot10 Débutant Inscription : mai 2005 Messages : 1 957 Détails du profil Informations personnelles : Localisation : Suisse Informations forums : Inscription : mai 2005 Messages : 1 957 Points : 615 Points : 615	Comment faire pour que ma colonne central s'adapte Bonjour, J'ai 3 div que je veux en colonne, de manière donc à avoir 3 colonnes :o). La colonne de gauche aura une largeur et celle de droite aussi. Normalement identique. Ma question est concernant la colonne du centre. Cette derniere sera plus large car elle contiendra le contenu des pages. Simplement dans certaines pages, la colonne de droite ne sera pas exploitée, donc elle aura une largeur de 0px (ou 1px). je souhaiterais sasvoir comment faire pour que ma colonne central s'adapte toujours en fonction de la largeur de la colonne de droite, mais si elle devait avoir une largeur différente que la colonne de gauche. A la base je pensasi travailler avec un float, mais je dois vous avouer que je n'ai pas d'idée pour arriver à mon but. Merci pour vos lumières __________________ Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!
	00

19/04/2011, 10h34	#5
pierrot10 Débutant Inscription : mai 2005 Messages : 1 957 Détails du profil Informations personnelles : Localisation : Suisse Informations forums : Inscription : mai 2005 Messages : 1 957 Points : 615 Points : 615	Salut, Merci pour ta réponse. Ben oui pour le moment, je le fais avec des tableaux __________________ Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!
	00

19/04/2011, 11h20	#9
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	La solution sale pour le tableau ce serait de rajouter des cellules vide entre la cellule gauche et la cellule centrale et entre la celulle centrale et la cellule droite. ces cellules "écarteuses" seraient vide, sans bord et avec une largeur de 5px pour remplacer ton Code : Sélectionner tout - Visualiser dans une fenêtre à part margin:0px 5px 0px 5px; La solution propre pour l'un ou l'autre je suis curieux de la connaître
	00

19/04/2011, 11h43	#10
pierrot10 Débutant Inscription : mai 2005 Messages : 1 957 Détails du profil Informations personnelles : Localisation : Suisse Informations forums : Inscription : mai 2005 Messages : 1 957 Points : 615 Points : 615	Ha ben oui, ben je voulais justement éviter les cellules écarteuses __________________ Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!
	00

19/04/2011, 13h23	#13
pierrot10 Débutant Inscription : mai 2005 Messages : 1 957 Détails du profil Informations personnelles : Localisation : Suisse Informations forums : Inscription : mai 2005 Messages : 1 957 Points : 615 Points : 615	Bonjour, Ben c'est pas mal du tout. Je m'excuse dêtre un peu pointilleux, mais le seul probleme qu'il se pose, que qu'il y a un "margin" gauche sur ma col de gauche. J'aurai préféré qu'elle soit aligné avec le texte. A moins que je me trompe, le border-spacing n'agit que tu la <table> et pas le <td>. Si ca pouvait agir que sur le <td> du centre, ca serait top. Mais bon, pour le moment ca va. Merci __________________ Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!
	00

19/04/2011, 10h45	#6
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	Et il y a quelque chose qui ne marche pas bien ou qui te bloque? ou c'est juste par acquis de conscience que tu cherche à le faire avec des divs?
	00

19/04/2011, 10h45	#7
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	A mon avis tu peux t'inspirer de ça : http://covertprestige.info/css/exemp...nnes-factices/
	00

19/04/2011, 11h58	#11
vodiem Expert Confirmé Diem VO Vivre Inscription : avril 2006 Messages : 2 644 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 644 Points : 3 895 Points : 3 895	tu veux parler de border-spacing ?
	10

19/04/2011, 12h01	#12
Ceddoc Membre éclairé Cédric Développeur Java / Web / .NET Inscription : janvier 2009 Messages : 327 Détails du profil Informations personnelles : Nom : Cédric Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Java / Web / .NET Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2009 Messages : 327 Points : 369 Points : 369	ah oui en effet avec un border spacing sur la cellule du milieux ça peut le faire.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email