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 ?
P.carte IMG , évidemment (mais ça marche quand même pas)
-- Pascale http://www.la-grille-verte.net
SAM
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"
<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 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
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"
<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>
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"
<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 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 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 ?
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 ?
<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
Olivier Miakinen <om+ écrivait 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 ?
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 ?
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
Alors que les eleveurs et agriculteurs empoisonnent toujours la Bretagne, Pascale ecrit ce qui suit en ce 26/11/2010 16:39 :
Olivier Miakinen<om+ écrivait
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/
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, Pascale ecrit ce qui suit en ce 26/11/2010 16:39 :
Olivier Miakinen<om+news@miakinen.net> écrivait
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/
Alors que les eleveurs et agriculteurs empoisonnent toujours la Bretagne, Pascale ecrit ce qui suit en ce 26/11/2010 16:39 :
Olivier Miakinen<om+ écrivait
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 26/11/2010 16:39, Pascale a écrit :
Olivier Miakinen <om+ écrivait 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 <img src=...> » (le « ou bien ») doit bien se 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).
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 <img src=...> » (le « ou bien ») doit bien se
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).
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 <img src=...> » (le « ou bien ») doit bien se 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
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/
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/
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 26/11/10 17:10, Olivier Miakinen a écrit :
Le 26/11/2010 16:39, Pascale a écrit :
Olivier Miakinen<om+ écrivait 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<img src=...> » (le « ou bien ») doit bien se 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 ?)
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<img src=...> » (le « ou bien ») doit bien se
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 ?)
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<img src=...> » (le « ou bien ») doit bien se 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 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
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).
'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 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.
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).
