[HTML] Positionnement du texte

**kriss2b** · 13/08/2008, 16h50

Bonjour a tous et toutes
Voila mon probleme j essai desesperement dans un tableau et 2 colonne d'ecrire un texte,dans la colonne de droite 3 lignes d'1 images de 131 px chacune sachant que le tableau fait 990px : 393px le probleme est que quand j'ecris mon texte dans la colonne de gauche le texte se positionne au milieu du dit tableau alors que je souhaite que certains textes soient en haut , d'autres a droite etc etc suis je obligé de passé par le css obligatoirement ??

merci a vous tous et toutes et surtout bon été

**laurentibus** · 13/08/2008, 16h54

peut etre qu'il y a un autre moyen mais CSS est le plus simple

.... et le seul je pense
regarde la proprieté vertical-align pour ecrire en haut , en bas ....

**c_s_s** · 13/08/2008, 17h05

Par défaut, les éléments d'une cellule sont centrés verticalement.

Si tu veux les afficher en haut de la cellule, tu peux utiliser la propriété VALIGN dans le code HTML

Ex : <td valign="top">

Pour aligner les textes à gauche, au centre ou à droite, tu peux utiliser la propriété ALIGN

Ex : <td align="right"> ou <td align="center">

**kriss2b** · 13/08/2008, 17h12

merci ca confirme
cela etant maintenant une autre question j ai donc une 3 lignes et 2 colonnes sur ma colonne de droite 3 images de 131 px / 217 px et sur la gauche d environ 773 px
(773 + 217= 990px ) taille de mon tab
je souhaite que mon texte s'adapte sur l 'ensemble de la tr de gauche et qu il ne me deplace pas apres les images de droite

merci

**c_s_s** · 13/08/2008, 17h40

J'avoue avoir un peu de mal à comprendre ce que tu dis. Si tu pouvais faire un effort sur la ponctuation ce serait sympa.

Comment est structuré ton tableau actuellement ?
Où mets-tu ton texte dans la colonne de gauche ? Je ne vois pas comment il peut apparaître "après" les images de la colonne de droite ??

Normalement, ton tableau doit ressembler à ça (shématiquement) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <tr>
    <td>?</td>
    <td>?</td>
    <td>?</td>
 </tr>
  <tr>
    <td>image</td>
    <td>image</td>
    <td>image</td>
 </tr>
</table>

Si tu veux que ton texte (colonne de gauche) occupe la même place en hauteur que l'ensemble des cellules de la colonne de droite, alors tu peux fusionner les trois cellules de la colonne de gauche, comme ça :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td rowspan="3">Texte</td>
 </tr>
  <tr>
    <td>image</td>
    <td>image</td>
    <td>image</td>
 </tr>
</table>

Tu peux montrer à quoi ressemble ton tableau et tenter d'expliquer plus clairement à quel résultat tu veux arriver ?

**kriss2b** · 14/08/2008, 14h38

voici le tableau donc les images d un coté et de l autre la partie ou le texte sera merci de votre aide

**laurentibus** · 14/08/2008, 14h52

sinon si tu veux mettre ton texte au pixel pres ... bon c'est vraiment la méthode bourin et qui restreint pas mal les évolutions .. ( ex si tu change les tailles d'images ben ton image et texte seront confondus .... )

utilise : position: absolute

**kriss2b** · 14/08/2008, 15h22

c est la m.....
non j aimerai faire ca propre
aller derniere question, sur les images de droite j aimerai qu au passage de la souris l image s affiche sur la meme page en grand que dois je faire svp merci

**c_s_s** · 14/08/2008, 15h35

Je ne comprends plus rien, je croyais que tes images étaient à droite, or elles sont à gauche sur ta capture d'écran.

Et où est le texte dont tu parlais ? Je ne le vois pas non plus ?

Pour ta "dernière question", tu as ouvert un sujet il me semble, autant ne pas tout mélanger.

**Dark Ryus** · 14/08/2008, 15h36

La faut que tu fasse un peu de javascript et de CSS (avec les z-index pour les différentes couches).

tu peux mettre une grande image dans ton code et cacher la balise avec un display:none et avec du javascript du la démasque et tu gère l'affichage par dessus avec les z-index.

après ya d'autres solutions...

Et pour ton sujet de base, c'est flou car ton screen ne correspond pas à tes explications....

**kriss2b** · 14/08/2008, 15h45

voila donc la capture d ecran je souhaite donc que :
sur le fond bleu mon texte soit ecrit ,mais qu il demarre a hauteur de la photo du haut , qu ensuite il puisse prendre l ensemble de l espace qui lui est allouer .

Que je puisse faire une mise en page comme je le souhaite j espere avoir été plus clair.

PARDON de vous faire partir dans tout les sens

**c_s_s** · 14/08/2008, 15h50

Si tu veux que ton texte soit aligné en haut, il suffit de préciser VALIGN=TOP dans ta cellule.
Ensuite, il prendra naturellement l'ensemble de l'espace de la cellule.

As-tu une page en ligne ou le code HTML de ta page pour qu'on puisse travailler à partir de quelque chose de concret ?

**kriss2b** · 14/08/2008, 15h54

<!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>Document sans nom</title>
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>

<body onload="MM_preloadImages('../images-retail/accueil_fermer.jpg','../images-retail/dromadaire_fermer.jpg','../images-retail/marc_fermer.jpg','../images-retail/4X4_fermer.jpg','../images-retail/spiritualite_fermer.jpg','../images-retail/circ_fermer.jpg','../images-retail/tarifs_fermer.jpg','../images-retail/ptit_fermer.jpg','../images-retail/cont_fermer.jpg')">
<table width="990" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="../images-retail/file_chameaux-recoup.jpg" width="990" height="150" /></td>
</tr>
<tr>
<td colspan="2"><img src="../images-retail/Haut_de_Page_03.jpg" width="990" height="77" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td colspan="2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../images-retail/accueil_fermer.jpg',1)"><img src="../images-retail/accueil_ouvert.jpg" name="Image3" width="110" height="39" border="0" id="Image3" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../images-retail/dromadaire_fermer.jpg',1)"><img src="../images-retail/dromadaire_ouvert.jpg" name="Image4" width="110" height="39" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images-retail/marc_fermer.jpg',1)"><img src="../images-retail/marches_ouvert.jpg" name="Image5" width="110" height="39" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images-retail/4X4_fermer.jpg',1)"><img src="../images-retail/4X4_ouvert.jpg" name="Image6" width="110" height="39" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../images-retail/spiritualite_fermer.jpg',1)"><img src="../images-retail/spiritualite_ouvert.jpg" name="Image7" width="110" height="39" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images-retail/circ_fermer.jpg',1)"><img src="../images-retail/circuits_ouvert.jpg" name="Image8" width="110" height="39" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../images-retail/tarifs_fermer.jpg',1)"><img src="../images-retail/tarifs_ouvert.jpg" name="Image9" width="110" height="39" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../images-retail/ptit_fermer.jpg',1)"><img src="../images-retail/ptits-truc_ouvert.jpg" name="Image10" width="110" height="39" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../images-retail/cont_fermer.jpg',1)"><img src="../images-retail/Contact_ouvert.jpg" name="Image11" width="110" height="39" border="0" id="Image11" /></a></td>
</tr>
<tr>
<td width="217"><img src="../images-retail/image_dromadaire_retail.jpg" width="217" height="131" /></td>
<td valign="top" width="773" height="393" rowspan="3">uuuuuuuuuuuuuuuuuuu </td>
</tr>
<tr>
<td><img src="../images-retail/chamelier_retail.jpg" width="217" height="131" /></td>
</tr>
<tr>
<td><img src="../images-retail/retail_habib_et-_camel.jpg" width="217" height="131" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="852,16,979,54" href="../album_photo_dynamique/index.html" />
</map></body>
</html>

**kriss2b** · 14/08/2008, 15h56

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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>Document sans nom</title>
<style type="text/css">
<!--
body {
background-color: #775836;
}
td {
border: thin solid #FFFFFF;
}
table {
border: thin solid #FFFFFF;
}
.a.img {
border: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
 
 
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('../images-retail/accueil_fermer.jpg','../images-retail/dromadaire_fermer.jpg','../images-retail/marc_fermer.jpg','../images-retail/4X4_fermer.jpg','../images-retail/spiritualite_fermer.jpg','../images-retail/circ_fermer.jpg','../images-retail/tarifs_fermer.jpg','../images-retail/ptit_fermer.jpg','../images-retail/cont_fermer.jpg')">
<table width="990" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="../images-retail/file_chameaux-recoup.jpg" width="990" height="150" /></td>
</tr>
<tr>
<td colspan="2"><img src="../images-retail/Haut_de_Page_03.jpg" width="990" height="77" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td colspan="2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../images-retail/accueil_fermer.jpg',1)"><img src="../images-retail/accueil_ouvert.jpg" name="Image3" width="110" height="39" border="0" id="Image3" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../images-retail/dromadaire_fermer.jpg',1)"><img src="../images-retail/dromadaire_ouvert.jpg" name="Image4" width="110" height="39" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images-retail/marc_fermer.jpg',1)"><img src="../images-retail/marches_ouvert.jpg" name="Image5" width="110" height="39" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../images-retail/4X4_fermer.jpg',1)"><img src="../images-retail/4X4_ouvert.jpg" name="Image6" width="110" height="39" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../images-retail/spiritualite_fermer.jpg',1)"><img src="../images-retail/spiritualite_ouvert.jpg" name="Image7" width="110" height="39" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images-retail/circ_fermer.jpg',1)"><img src="../images-retail/circuits_ouvert.jpg" name="Image8" width="110" height="39" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../images-retail/tarifs_fermer.jpg',1)"><img src="../images-retail/tarifs_ouvert.jpg" name="Image9" width="110" height="39" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../images-retail/ptit_fermer.jpg',1)"><img src="../images-retail/ptits-truc_ouvert.jpg" name="Image10" width="110" height="39" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../images-retail/cont_fermer.jpg',1)"><img src="../images-retail/Contact_ouvert.jpg" name="Image11" width="110" height="39" border="0" id="Image11" /></a></td>
</tr>
<tr>
<td width="217"><img src="../images-retail/image_dromadaire_retail.jpg" width="217" height="131" /></td>
<td valign="top" width="773" height="393" rowspan="3">uuuuuuuuuuuuuuuuuuu </td>
</tr>
<tr>
<td><img src="../images-retail/chamelier_retail.jpg" width="217" height="131" /></td>
</tr>
<tr>
<td><img src="../images-retail/retail_habib_et-_camel.jpg" width="217" height="131" /></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
 
 
<map name="Map" id="Map"><area shape="rect" coords="852,16,979,54" href="../album_photo_dynamique/index.html" />
</map></body>
</html>

**c_s_s** · 14/08/2008, 16h02

Si tu pouvais éditer ton message et mettre ton code entre les balises [-code-] [-/code-] (sans tiret), ce serait parfait.

A part ça, je vois que tout semble s'afficher comme tu le désirais, non ?

**kriss2b** · 14/08/2008, 16h07

merci encore

**Almenor** · 15/08/2008, 00h39

Bonjour à tous,

Je profite de se topic pour poser une question qui reste dans le thème plutôt que d'en recréer un.

Je débute en html et je bosse sur mon premier site.

Je suis en train d'essayer de centrer un texte dans un cadre, le soucis est que les phrases étant de grandeur différente, avec les balises <center> ou align ça alligne chaque phrase au milieu donc avec des décalages, alors que je voudrai que chaque ligne commence au même endroit (au milieu donc ^^)

J'espère avoir été clair

,
Voici le code en question:

<tr>
<td align=center height=50%>
<span class=titre>titre</span><br>
6134   <a class="petit" href="xxxx.htm" target="bas">texte</a><br>
6438   <a class="petit" href="xxxx.htm" target="bas">texte 2</a><br>
8738   <a class="petit" href="xxxx.htm" target="bas">texte 3</a><br>
6470   <a class="petit" href="xxxx.htm" target="bas">texte 4</a><br>
6153   <a class="petit" href="xxxx.htm" target="bas">texte 5</a><br>
6173   <a class="petit" href="xxxx.htm" target="bas">texte 6</a><br>
<br>
6513   Numéro général du xxxxxx<br>
6341   Fax xxxxxxx(bureau xxxxxx)<br>
</td>
</tr>

**kriss2b** · 15/08/2008, 01h29

des elements de liste par exemple

**c_s_s** · 15/08/2008, 10h01

Bonjour,

Si tu veux que tes lignes de texte commencent au même endroit, tu peux enlever align="center" et mettre une marge interne dans ta cellule.

Ex : <td style="padding-left:15%;height:50%;">

Après tu choisis la valeur de la marge en fonction de ce qui t'arrange.
Là j'ai mis 15%, mais tu peux mettre une taille fixe si tu préfères.

**Almenor** · 15/08/2008, 12h50

Merci beaucoup

J'ai dû mettre une valeur fixe car en % mon cadre devenait anormalement large, enfin, le résultat est là c'est ce qui compte

[HTML] Positionnement du texte

HTML

Discussions similaires

Partager

Partager