[HTML] Positionnement du texte

Version imprimable

13/08/2008, 16h50
kriss2b

[HTML] Positionnement du texte

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é
13/08/2008, 16h54
laurentibus

peut etre qu'il y a un autre moyen mais CSS est le plus simple :D .... et le seul je pense
regarde la proprieté vertical-align pour ecrire en haut , en bas ....
13/08/2008, 17h05
c_s_s

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">
13/08/2008, 17h12
kriss2b

merci et encore une question

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
13/08/2008, 17h40
c_s_s
J'avoue avoir un peu de mal à comprendre ce que tu dis. Si tu pouvais faire un effort sur la ponctuation ce serait sympa. :aie:

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:

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:

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 ? :P
14/08/2008, 14h38
kriss2b

1 pièce(s) jointe(s)

voici ce que tu demande css et merci encore de ton aide

voici le tableau donc les images d un coté et de l autre la partie ou le texte sera merci de votre aide
14/08/2008, 14h52
laurentibus

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
14/08/2008, 15h22
kriss2b

c est la caca c est la caca

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
14/08/2008, 15h35
c_s_s

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 ?

:aie:

Pour ta "dernière question", tu as ouvert un sujet il me semble, autant ne pas tout mélanger. ;)
14/08/2008, 15h36
Dark Ryus

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....
14/08/2008, 15h45
kriss2b

desolé je reprends donc

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
14/08/2008, 15h50
c_s_s

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 ?
14/08/2008, 15h54
kriss2b

voici le code au complet

<!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>

voici ce que tu demande css et merci encore de ton aide

Code:

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>

14/08/2008, 16h02
c_s_s

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

:aie:

A part ça, je vois que tout semble s'afficher comme tu le désirais, non ?
14/08/2008, 16h07
kriss2b

merci j ai remis en ordre

merci encore
15/08/2008, 00h39
Almenor

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 :aie: ,
Voici le code en question:

Citation:

<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>
15/08/2008, 01h29
kriss2b

pourquoi par exemple ne pas mettre par exemple

des elements de liste par exemple
15/08/2008, 10h01
c_s_s

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.
15/08/2008, 12h50
Almenor

Merci beaucoup :D

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 :king: