divs sous td

[bastien]

Bonjour,

le code html :

Code :

1
2
3
4
5
6
7
8
9
<table class="bloc_accueil">
<tr><td>
			<div class="entete_contenu">
				blabla
			</div>
			<div class="liste_contenu">
			blibli
			</div>
		</td></tr></table>

et le code css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.bloc_accueil{
	width:100%;
	margin: 20px auto auto auto;
	text-align:center;
}
 
 .bloc_accueil .entete_contenu{
	background : url("../squelette/entete_accueil_liste_domaine.png") repeat-x;
	height:30%;
	color:white;
	border:1px solid #f033FC;
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bold;
	margin-top:10px;
	}
 
.bloc_accueil .liste_contenu{
	border:1px solid #f033FC;
	text-align:center;
height:70%;
}

Le bloc liste_contenu occupe bien tout l'espace horizontal, mais pas vertical.

En fait, je désire que, quelque soit le contenu du bloc liste_contenu, ce bloc ait un cadre qui délimite toute la cellule td. height:70% ne semble pas convenir !

Comment faire?

Merci

[e-fitz]

Bonjour,
je ne comprend pas vraiment ce que tu souhaites faire.

Tu parles de cadre qui délimite toute la cellule mais aussi de height à 70%

Pourrais tu préciser afin que j'essaye de t'aider.

Bonne journée

[bastien]

Bonjour,

L'idée est de placer dans une cellule td d'une table deux blocs div du type :

Code :

1
2
3
4
5
6
7
8
<td>
<div id="entete_contenu">
ENTETE
</div>
<div id="corps_contenu">
CORPS
</div>
</td>

Imaginons que la table soit en 2x2
le bloc "entete_contenu" est fixé à 30px;
Si on place une bordure sur le bloc "corps_contenu", le cadre ne sera que à proximité du texte alors que la cellule peut avoir une épaisseur bien supérieure à celle du texte (à caused'une autre cellule voisine). Je veux que le cadre du bloc "corps_contenu" ait une hauteur=hauteur de la cellule - 30px(entete).

Si le css ne le permet pas, ilfaudra que je m'oriente versle javascript mais bof bof si jepouvais éviter ce serait bien
Je ne parviens pas

[e-fitz]

ReBonjour, en mettant une bordure a ton div corps celle ci s'adaptera automatiquement à la hauteur, donc je ne vois pas le problème...

Poste une image schématique si tu as la possibilité cela sera plus simple car la je ne vois vraiment pas ce qui te bloque.

[AyManoVic]

salut
t'as fait ça :

Code :

<table class="bloc_accueil">

alors que dans ton code CSS la classe bloc_acceuil est faite pour un div
si tu la veux pour une table tu devrais faire comme ça

Code :

1
2
3
4
5
table.bloc_accueil{
	width:100%;
	margin: 20px auto auto auto;
	text-align:center;
}

de même pour les autres

[bastien]

Bonjour,

J'ai ajouté dans mon code css :

Code :

1
2
3
td{
vertical-align:top;
}

Les blocs div sont alignés verticalement.

Mais mon souci de voir les blocs intérieurs au td occuper toute la hauteur de la cellule n'est pas résolu !

[e-fitz]

Bonjour,
Les div ne s'adaptes pas en hauteur au conteneur mais au contenu (si je me rappelle bien).

Tu peux mettre un overflow hidden sur le td et un height plus grand que le height du td sur le div, mais cela peut poser problème en cas de redimensionnement en hauteur.

Es tu obligé d'utiliser cette structure (<td><div /></td>) ?