28172 sujets

CSS et mise en forme, CSS3

Alignement vert. dans une cellule

Hello,

deux jours que je m'arrache les cheveux.
j'essaie d'aligner des balises sur le haut ou/et le bas d'un cellule de tableau.
pas moyen d'y arriver.

dans l'exemple suivant je souhaiterais que toutes les div contenant "(S) Indisp." soient en bas de la cellule et que toutes les div contenant soient en haut de la cellule.

upload/12900-cal.jpg 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Calendrier</title>
	<style type="text/css">
	body { font:10px Arial,Helvetica,sans-serif;text-align:center;color:#000; border:0px; padding:0; margin:0px; }
	table { border-collapse:collapse; empty-cells:show; overflow:visible; padding:0px; border-spacing:0px; border:0px; margin:0px; }
	table tr,td,th { border:1px solid black; }
	tr.big { height: 30px; }
	td.nbmatin { background-color:#444;color:#FFF; }
	td.nbsoir { background-color:#996633;color:#FFF; }
	.indispo { background-color:red; }
	.astreinte { background-color:#ff9; }
	.matin { background-color:#09C; }
	.soir { background-color:#FC0; }
	.top { float:top; margin:auto; margin-top:0px; }
	.bottom { float:bottom; margin:auto; margin-bottom:0px; }
	</style>
</head>
<body>

<div style="padding:10px 0 10px 10px">
<table>
<tr>
	<th>Nom</th>
	<th>NB_Matin</th>
	<th>NB_Soir</th>
	<th>Ven 15/10/10</th>
	<th>Lun 18/10/10</th>
	<th>Mar 19/10/10</th>
</tr>
<tr class="big">
	<td><div>Lucie</div></td>
	<td class="nbmatin"><div>1</div></td>
	<td class="nbsoir"><div>0</div></td>
	<td class="matin">
		<div class="astreinte top">(M) Astreinte</div>
		<div class="matin top">Matin</div>
		<div class="indispo bottom">(S) Indisp.</div>
	</td>
	<td>
		<div class="indispo bottom">(S) Indisp.</div>
	</td>
	<td>
		<div class="indispo top">(M) Indisp.</div>
		<div class="indispo bottom">(S) Indisp.</div>
	</td>
</tr>
</table>
</body>
</html>


merci grandement de l'aide que vous pourrez m'apporter.
Modifié par mobidyc (18 Sep 2010 - 23:47)
Hello,
Float n'accepte pas les valeurs top ou bottom, les valeurs possibles sont: left, right ou none.

Tu peux essayer vertical-align, mais si je me souviens bien, ça ne marche qu'avec un élément de type inline.

Dans ton cas, passe tes 
<td>
en position:relative, puis tes 
<div>
.indispo et .astreinte en position:absolute avec top:0 pour l'une et bottom:0 pour l'autre.
merci pour vos réponses, elles ont le mérite d'exister et je me sens moins seul Smiley cligne

par contre ça ne fonctionne pas.
vertical-align ne fonctionne pas sur mes <div> et est inutile si je le met dans le <td> puisque je peux avoir le cas ou une <div doit être en haut et une autre qui doit être en bas dans le même <td>.

pour le position:absolute/relative dans le <td>/<div>, ça me fait sortir la <div> du flux Smiley ohwell

je sens que je vais être obligé de mettre une table dans les cellules, choses que je voulais éviter ;'(
Modifié par mobidyc (21 Sep 2010 - 11:22)
Hello,

question subsidiaire en rapport à la réponse de vdo93:

float:top et float:bottom sont censés être valide en css3 (le but n'est pas de faire du css3 mais je me pose la question).
firefox3.6 ne gère-t'il pas cette version de css ?
Modifié par mobidyc (21 Sep 2010 - 11:36)
Les nouvelles valeurs de float (top,bottom lié à page) sont seulement en "Working draft" ce qui signifie que tout peut encore changer au niveau des spécifs. On ne peut pas parler de validité en CSS3. Peut être que ces spécifs ne verront jamais le jour de cette manière.

Et Firefox ne gère pas ces valeurs la, même si il gère déjà d'autres propriétés "CSS3".

Pour ton soucis, que veux tu dire par "la boite sort du flux"? Oui elle sort du flux, mais si tu met top:0, elle reste dans le td parent qui est en position:relative. Tu as fixer une taille au td?
Hello,

voici un screenshot pour montrer la sortie du flux.
upload/12900-cal2.jpg

pas mis de taille sur le <td>, le code est tel qu'il est mis dans le post d'origine.


voici le code avec les positions indiquée.
n'ayant pas d'expérience sur les positions, j'ai aussi testé en les inversant, c'est moche Smiley cligne 
<table>
<tr>
	<th>Nom</th>
	<th>Ven 15/10/10</th>
	<th>Lun 18/10/10</th>
	<th>Mar 19/10/10</th>
</tr>
<tr class="big" style="clear:both;">
	<td><div>Lucie</div></td>
	<td class="matin" style="vertical-align:bottom;">
		<div class="astreinte top">(M) Astreinte</div>
		<div class="matin top">Matin</div>
		<div class="indispo bottom">(S) Indisp.</div>
	</td>
	<td style="position:relative;">
		<div style="position:absolute;" class="indispo bottom">(S) Indisp.</div>
	</td>
	<td style="vertical-align:bottom;">
		<div class="indispo top">(M) Indisp.</div>
		<div class="indispo bottom">(S) Indisp.</div>
	</td>
</tr>
</table>

Modifié par mobidyc (21 Sep 2010 - 12:46)
hello,

j'ai un peu avancé.
j'arrive maintenant à bien avoir mes balises div en haut ou en bas.
il m'a fallut ajouter une <div> container avant de mettre les données.

et chose un peu dommage, je suis obligé de définir une taille fixe à la hauteur du container. ;(

seul problème, si j'ai deux div en haut par exemple,
elles se superposent Smiley ohwell

tellement bien d'ailleurs, qu'on ne voit pas la balise du dessous du tout:
<div style="background-color:gray;height:30px;position:relative;">
	<div style="position:absolute;background-color:red;color:#FFF;top:0px;vertical-align:top;">(M) Indisp.</div>
	<div style="position:absolute;background-color:#ff9;top:0px;vertical-align:top;">(M) Astreinte</div>
	<div style="position:absolute;background-color:red;color:#FFF;bottom:0px;vertical-align:bottom;">(S) Indisp.</div>
</div>
Utilises plutôt des class sur tes balises que tu gères ensuite dans le CSS, comme sur ton premier exemple de code. Parce qu'utiliser l'attribut style n'est pas une bonne chose. Cela rend le code difficilement maintenable...

Si tu as plusieurs boites à placer en haut mais quelles ne doivent pas se superposer, c'est plus dur...et tu dois utiliser du javascript pour détecter si tu places une boite en haut ou plus bas (cas d'une boite deja en haut).

A quoi veux tu arriver exactement? Peut être que ton problème peut être résolu différemment?
Hello,

j'ai utilisé l'attribut style pour tester, bien sur je ne l'utilise jamais (ou très rarement) quand le code est terminé.

je viens de passer par des tables dans chaque cellule de ma table.
çaysale, très sale même, mais à défaut, j'ai au mon un affichage qui fonctionne comme je souhaite.

voici l'affichage qui fonctionne, si vous trouvez un moyen de se passer de la table imbriquée, je pourrais y retravailler:

upload/12900-cal5.jpg
Modifié par mobidyc (21 Sep 2010 - 15:14)
Bonjour,

Comment fais-tu pour que ta 2ème table (celle imbriquée) prenne la hauteur de la cellule dans laquelle elle se trouve?

Merci
Tu lui a donné une hauteur fixe en pixel j'imagine.. moi mon problème est que je ne connais pas la hauteur de ma cellule :S
Sujet clos
Aller à