Positionner 3 div dans une cellule de tableau

**max44410** · 16/04/2007, 10h32

salut

bon et bien voila tout est dans le titre,
j'aimerais positionner trois div dans une cellule de tableau. le premier div doit etre a gauche, et le second div doit etre centrer dans cette cellule, et le 3eme a droite.
j'ai essaye plein de truc mais je n'arrive pas au resultat escompte.

bon je vais essaye de faire au mieux pour le dessin. en fait j'ai une date a gauche, un titre au milieu et un lien edit a droite.

|---------------------------------------------------------|
|Div 1 | | Div2 | | DIV 3 |
|---------------------------------------------------------|

donc voila 3 div pour en finir ...
Les 3 divs ne se touche pas forcement.

je n'arrive pas a dessiner ce que je veux avec le forum...

Merci les graphistes ..

**blueice** · 16/04/2007, 12h11

Code css :

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

1
2
3
text-align:left;
text-align:center;
text-align:right;

**E.Bzz** · 16/04/2007, 15h28

Utilise des span (type ligne) au lieu de div (type bloc) ...

A+

**max44410** · 17/04/2007, 11h37

Bonjour,

Desolé les gars ça ne fonctionne pas ....

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
 
<td background="images/haut-bar.png" valign="bottom" style="padding-bottom:2px;">
	<span style="text-align:left;">
		<?php echo getInfoDate(timeStampToDate($result[$i]['time_message']), "dM", "FR"); ?>
	</span>
	<span style="text-align:center;">
			<?php echo "(¯`·._.·[".$result[$i]['titre_message']."]·._.·´¯) "; ?>
	</span>
		<?php if (isset($_SESSION['open']))
			{
			if ($_SESSION['droit_user'] == 1)
				{
				?>
				<span style="text-align:right;">
					<?php echo "[edit]"; ?>
				</span>	
		<?php
				}
			}
		?>
</td>

pour le résultat Rendez-vous ICI

ils sont tous les 3 (enfin 2 pour vous car vous etes pas identifié) a gauche ... (en tout cas sur firefox c'est comme ça)

**E.Bzz** · 17/04/2007, 11h46

Envoyé par max44410

pour le résultat Rendez-vous ICI

=> 500 - INTERNAL SERVER ERROR

ils sont tous les 3 (enfin 2 pour vous car vous etes pas identifié) a gauche ... (en tout cas sur firefox c'est comme ça)

Le align dans le span, c'est pour aligner ce qui est ... dans le span.

Ce que tu veux modifier, c'est le contenu du TD.
EDIT : Au fait : pas terrible, le valign="bottom" =>

Code :

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

<td background="images/haut-bar.png" style="padding-bottom:2px;vertical-align:bottom;text-align:center">

A+

**max44410** · 17/04/2007, 11h48

Envoyé par E.Bzz

=> 500 - INTERNAL SERVER ERROR

ouai c'est free qui merde à mort ... je sais pas ce qu'il a en ce moment ??

**Korko Fain** · 17/04/2007, 11h50

tu ajoute ça dans les 3 colonnes :

Code :

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

display: inline;

**max44410** · 17/04/2007, 11h54

Envoyé par E.Bzz

Le align dans le span, c'est pour aligner ce qui est ... dans le span.

Ce que tu veux modifier, c'est le contenu du TD.
EDIT : Au fait : pas terrible, le valign="bottom" =>

Code :

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

<td background="images/haut-bar.png" style="padding-bottom:2px;vertical-align:bottom;text-align:center">

A+

si je fait ce que tu me dit ... j'ai mes 3 spans qui se retrouvent au milieu, moi j'en veut un a gauche; un au centre; et un a droite.

pourquoi moi valign est pas terrible ??

**max44410** · 17/04/2007, 11h55

Envoyé par Korko Fain

tu ajoute ça dans les 3 colonnes :

Code :

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

display: inline;

quelles colones ?? j'en ai qu'un seul <td> ...?

**Korko Fain** · 17/04/2007, 11h58

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#div1 {
display: inline;
margin-left: 0;
}
 
#div2 {
display: inline;
margin-left: auto;
}
 
#div3 {
display: inline;
margin-right: 0;
}

**max44410** · 17/04/2007, 12h00

bon maintenant mon code ça donne ça :

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
 
<td background="images/haut-bar.png" valign="bottom" style="padding-bottom:2px;">
	<div style="text-align:left;display:inline;">
		<?php echo getInfoDate(timeStampToDate($result[$i]['time_message']), "dM", "FR"); ?>
		</div>
		<div style="text-align:center;display:inline;">
			<?php echo "(¯`·._.·[".$result[$i]['titre_message']."]·._.·´¯) "; ?>
		</div>
		<?php if (isset($_SESSION['open']))
			{
			if ($_SESSION['droit_user'] == 1)
				{
		?>
				<div style="text-align:right;display:inline;">
				<?php echo "<a href=\"index.php?rub=ajout_billet&maj=".$result[$i]['id_message']."\">[edit]</a>"; ?>
				</div>	
			<?php
				}
			}
		?>
</td>

et ils sont toujours tous a gauche !!!

si je me text-align:center; dans le td ils sont tous centrés

**Korko Fain** · 17/04/2007, 12h04

met pas des "text-align" c'est pour le texte pas pour les block lol a la limite met des float à la place :

Code :

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

1
2
float: right;
float: left;

Meme si je crois que float: center; sa marche pas sa serait trop beau :p
Regarde ce que j'ai mis plus haut

**E.Bzz** · 17/04/2007, 12h07

Les span sont en display:inline, par défaut, non ?

Sinon, si tu leur donnes une largeur = 1/3 de celle du TD, en gardant les text-align des span (left, center, right), leur contenu "devrait" être comme tu le souhaites (si td=100px et chaque span=10px, effectivement, tout sera "au milieu" : il faut des span de 33px pour que ce soit leurs text-align qui influent sur le rendu) ...

A+

**E.Bzz** · 17/04/2007, 12h09

Envoyé par max44410

pourquoi moi valign est pas terrible ??

Si tu utilises les CSS, autant que ce soit complétement

**max44410** · 18/04/2007, 02h27

Envoyé par E.Bzz

Les span sont en display:inline, par défaut, non ?

Sinon, si tu leur donnes une largeur = 1/3 de celle du TD, en gardant les text-align des span (left, center, right), leur contenu "devrait" être comme tu le souhaites (si td=100px et chaque span=10px, effectivement, tout sera "au milieu" : il faut des span de 33px pour que ce soit leurs text-align qui influent sur le rendu) ...

A+

maintenant mon code ça donne ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style media="screen" type="text/css">
#div1 { display: inline; margin-left: 0; }
#div2 { display: inline; margin-left: auto; }
#div3 { display: inline; margin-right: 0; }
</style>
</head>
 
[...]
<td background="images/haut-bar.png" style="padding-bottom:2px;vertical-align:bottom">
	<div id="div1">Date</div>
	<div id="div2">(¯`·._.·["titre"]·._.·´¯)</div>
	<div id="div3">[edit]</div>	
</td>

Le résultat est toujours le même ... tout est à gauche.

pour la solution de la taille (1/3), je ne peux pas, c'est un tableau en pourcentage. De plus mes div ne font pas forcément la même taille. exemple du titre qui va etre plus grand que les autres.

**blueice** · 18/04/2007, 08h26

Mais pourquoi diable mettre des divs dans un tableau ?

Tu as le tableau !

**max44410** · 18/04/2007, 08h53

Envoyé par blueice

Mais pourquoi diable mettre des divs dans un tableau ?

Tu as le tableau !

moi je fais ce que l'on me conseil ... j'ai essayer avec des span ... ça fonctionnais pas, ... on me dit d'essayer avec des div ... je fais ... du moment que j'ai un rendu qui correspond a ce que je veux ...

enfin pour le moment je ne l'ai pas ... mais bon !!

**blueice** · 18/04/2007, 09h32

Tiens :

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
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
table { width:60%; border:1px solid black; border-collapse:collapse; }
td { width:25%; border:1px solid black; border-collapse:collapse; padding:2px; }
.left { text-align:left; }
.center { text-align:center; }
.right { text-align:right; }
-->
</style></head>
 
<body>
<table width="60%">
  <tr>
    <td class="left">18/04/2007</td>
    <td class="center">Titre</td>
    <td class="right">http://www.toto.com</td>
  </tr>
  <tr>
    <td class="left">18/04/2007</td>
    <td class="center">Titre 2</td>
    <td class="right">http://www.tutu.com</td>
  </tr>
</table>
</body>
</html>

**max44410** · 18/04/2007, 09h48

ouai bah j'avais fini par faire comme ça ... les div et les span c'est vraiment de la M****e on peut jamais faire comme on veut pour les positionner...

rien de tel qu'un bon tableau ...

Merci quand meme blueice !!