Alignement d'un texte et d'une image

Le
Pascale
Je butte sur un problème agaçant : je voudrais aligner verticalement un
texte bref sur une image un peu comme on le voit ici :
http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-
texte.html
sauf que dans mon cas, le texte est à gauche de l'image et non à droite.

Donc j'ai un code HTML du genre :

<p class="carte">Pour accéder au calendrier et aux annuaires<br>choisissez
la
région<br>puis cliquez sur le bouton du département<br><br>ou bien
<img src="images/France.png" width="450" height="450" usemap="#Map"
title="Carte des régions" alt="Carte des régions">
<map name="Map">
<area shape="poly" coords="131," href="region.php?ouca=bretagne"
target="_self" title="Bretagne" alt="Bretagne">

</map></p>

Le texte à aligner est bien sûr celui qui précède la carte.

La partie CSS est de ce style :

P.carte IMAGE {vertical-align: middle; display: inline;}
(normalement, cette partie est superflue, mais)

P.carte MAP {display: inline;}

P.carte {line-height: 250%;}
(histoire que le texte ne soit pas trop tasssé).

Mon souci, c'est que rien de tout ça ne fonctionne, le texte est au-dessus
de la carte et non à sa gauche !
Qu'est-ce que j'ai fait de travers ?

--
Pascale
http://www.la-grille-verte.net
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 8
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pascale
Le #22847791
Pascale news::

P.carte IMAGE {vertical-align: middle; display: inline;}



P.carte IMG , évidemment (mais ça marche quand même pas)

--
Pascale
http://www.la-grille-verte.net
SAM
Le #22847921
Le 26/11/10 16:03, Pascale a écrit :
Je butte sur un problème agaçant : je voudrais aligner verticalement un
texte bref sur une image un peu comme on le voit ici :
http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-
texte.html
sauf que dans mon cas, le texte est à gauche de l'image et non à droite.



le vertical-align ne fonctionne que pour une seule ligne
ici n'est donc aligné que la ligne "ou bien"

changer de méthode


.carte span { display: inline-block; width: 20em; text-align: right }
.carte img { vertical-align: middle }

<p class="carte">
<span>Pour accéder au calendrier et aux annuaires choisissez
la région puis cliquez sur le bouton du département ou bien</span>
<img src="asm1.gif" width="450" height="450" usemap="#Map"
title="Carte des régions" alt="Carte des régions"></p>

<map name="Map">
<area shape="poly" coords="131,..." href="region.php?ouca=bretagne"
target="_self" title="Bretagne" alt="Bretagne">
</map>


on peut aussi remettre les <br>


Donc j'ai un code HTML du genre :


(...)

P.carte MAP {display: inline;}



MAP peut être n'importe où dans le fichier
(en général on le relègue tout à la fin avant </body>)
et n'a pas à être stylé
... surtout en *inline* !


--
Stéphane Moriaux avec/with iMac-intel
Olivier Miakinen
Le #22848051
Le 26/11/2010 16:03, Pascale a écrit :

<p class="carte">Pour accéder au calendrier et aux annuaires<br>choisissez
la
région<br>puis cliquez sur le bouton du département<br><br>ou bien
<img src="images/France.png" width="450" height="450" usemap="#Map"
title="Carte des régions" alt="Carte des régions">
<map name="Map">
<area shape="poly" coords="131,..." href="region.php?ouca=bretagne"
target="_self" title="Bretagne" alt="Bretagne">
.................................
</map></p>

[...]

Mon souci, c'est que rien de tout ça ne fonctionne, le texte est au-dessus
de la carte et non à sa gauche !
Qu'est-ce que j'ai fait de travers ?



Au hasard : les <br> ?

En fait, j'imaginerais bien que le « ou bien » soit correctement aligné
par rapport à l'image, puisque aucun <br> ne les sépare. Ce n'est pas le
cas ?
Pascale
Le #22848171
Olivier Miakinen news:4cefd363$:

Au hasard : les <br> ?

En fait, j'imaginerais bien que le « ou bien » soit correctement aligné
par rapport à l'image, puisque aucun <br> ne les sépare. Ce n'est pas le
cas ?



Voui, c'est clairement le problème ! Est-ce qu'on peut espérer que ce
problème d'alignement vertical sera résolu simplement en CSS3, que ce soit
pour des éléments block ou inline ?

--
Pascale
http://www.la-grille-verte.net
docanski
Le #22848381
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, Pascale ecrit ce qui suit en ce 26/11/2010 16:39 :
Olivier Miakinen
Au hasard : les<br> ?

En fait, j'imaginerais bien que le « ou bien » soit correctement aligné
par rapport à l'image, puisque aucun<br> ne les sépare. Ce n'est pas le
cas ?



Voui, c'est clairement le problème ! Est-ce qu'on peut espérer que ce
problème d'alignement vertical sera résolu simplement en CSS3, que ce soit
pour des éléments block ou inline ?



Ne trouverais-tu pas de l'inspiration ici :
http://docanski.free.fr/valastuc/fds11b.htm ?
Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Olivier Miakinen
Le #22848371
Le 26/11/2010 16:39, Pascale a écrit :
Olivier Miakinen news:4cefd363$:

Au hasard : les <br> ?

En fait, j'imaginerais bien que le « ou bien » soit correctement aligné
par rapport à l'image, puisque aucun <br> ne les sépare. Ce n'est pas le
cas ?



Voui, c'est clairement le problème ! Est-ce qu'on peut espérer que ce
problème d'alignement vertical sera résolu simplement en CSS3, que ce soit
pour des éléments block ou inline ?



Tu veux dire que, sans rien changer à ton code HTML, tu
voudrais pouvoir dire en CSS que la partie gauche de la
ligne « ou bien placer en dessous des lignes précédentes, mais que sa partie
droite (l'image) doit remonter sur les lignes qui précèdent,
probablement en les repoussant pour faire de la place ?

Je ne pense pas que ce soit possible, ni même souhaitable.

En revanche, tu pourrais envisager de mettre les lignes de texte
dans un conteneur de type bloc, et le faire flotter à gauche de
l'image (ou bien faire flotter l'image à sa droite).

Cordialement,
--
Olivier Miakinen
docanski
Le #22848361
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, docanski ecrit ce qui suit en ce 26/11/2010 17:04 :

http://docanski.free.fr/valastuc/fds11b.htm ?



'tain ! Je viens de me rendre compte qu'il y a une (répétée) faute
d'orthographe grande comme une maison dans cet exposé ! Et cela depuis
10 ans que je n'y suis pas revenu ... :-(
Va falloir corriger ça un de ces jours.

Cordialement,


--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
SAM
Le #22848521
Le 26/11/10 17:10, Olivier Miakinen a écrit :
Le 26/11/2010 16:39, Pascale a écrit :
Olivier Miakinen news:4cefd363$:

Au hasard : les<br> ?

En fait, j'imaginerais bien que le « ou bien » soit correctement aligné
par rapport à l'image, puisque aucun<br> ne les sépare. Ce n'est pas le
cas ?



Voui, c'est clairement le problème ! Est-ce qu'on peut espérer que ce
problème d'alignement vertical sera résolu simplement en CSS3, que ce soit
pour des éléments block ou inline ?



Tu veux dire que, sans rien changer à ton code HTML, tu
voudrais pouvoir dire en CSS que la partie gauche de la
ligne « ou bien placer en dessous des lignes précédentes, mais que sa partie
droite (l'image) doit remonter sur les lignes qui précèdent,
probablement en les repoussant pour faire de la place ?

Je ne pense pas que ce soit possible, ni même souhaitable.

En revanche, tu pourrais envisager de mettre les lignes de texte
dans un conteneur



voui, toutafé

de type bloc,



presque, ... inline-block

et le faire flotter à gauche de
l'image (ou bien faire flotter l'image à sa droite).



Même pas besoin

... si IE sait qioi faire de inline-block
(ce n'est pas M$ qui a inventé ce style au départ ?)

Cordialement,



Relire mon post précédent ?

--
Stéphane Moriaux avec/with iMac-intel
Olivier Miakinen
Le #22848711
Le 26/11/2010 17:12, docanski a écrit :

http://docanski.free.fr/valastuc/fds11b.htm ?



'tain ! Je viens de me rendre compte qu'il y a une (répétée) faute
d'orthographe grande comme une maison dans cet exposé !



Grande comme une maison et lourde de 10 tonnes, je suppose. ;-)

Note que tu peux aussi accentuer les deux À vers le début de la page, et
corriger les points de suspension vers la fin (toujours trois points,
pas deux ni quatre, et pas d'espace avant).

Cordialement,
--
Olivier Miakinen
Olivier Miakinen
Le #22848701
Le 26/11/2010 17:24, SAM a écrit :

En revanche, tu pourrais envisager de mettre les lignes de texte
dans un conteneur



voui, toutafé

de type bloc,



presque, ... inline-block

et le faire flotter à gauche de
l'image (ou bien faire flotter l'image à sa droite).



Même pas besoin

... si IE sait quoi faire de inline-block



[OUI] à tout.

Relire mon post précédent ?



Yaka.
Publicité
Poster une réponse
Anonyme