28220 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical image/paragraphe

Bonjour,

J'ai trouvé une solution sympa sur le forum pour aligner verticalement du texte à côté d'une image : http://forum.alsacreations.com/topic.php?fid=4&tid=1118

C'est nickel. Sauf si le texte retourne à la ligne, la c la cata ! Le texte reprend en bas de l'image !!!
Je suis pas encore trop callé en CSS mais j'aurais aimé avoir une soluce sans tableau... Merci d'avance !

Le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="all">
* {padding: 0; margin: 0;}
h1, p {
margin: 0.5em;
}
p.flag {
line-height: 1em;
}
p.flag img{
vertical-align: text-top;
 display:inline;
}
span {
vertical-align: text-top;
 text-align:justify;
}

p.flag span {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="content">
<h1>Test</h1>
<p class="flag"><img src="images/etoile.jpg" alt="" /><span>Italie, 1938. A force de gaieté, de vitalité, d'imagination, et avec l'aide d'un enlèvement, Guido a épousé Dora. Cinq ans plus tard, ils ont eu un fils. Mais, conséquence des lois raciales, Guido, qui est juif, est déporté avec son enfant. Par amour, Dora les rejoint. Dès lors, Guido n'a plus qu'une obsession : sauver son enfant de l'enfer.</span></p>
</div>
</body>
</html>


Le résultat:
upload/2577-capture1.jpg
Modifié par benodilo (13 Jul 2005 - 16:31)
Administrateur
Bonjour benodilo et bienvenue ici Smiley smile

Veux-tu bien relire le point des Règles qui explique comment afficher les codes proprement ? Merci d'avance de modifier ton message en conséquence.

Pour répondre à ta question, as-tu commencé par faire une recherche dans le forum ou dans la FAQ, comme cela est conseillé avant de poster ?

J'ai trouvé ceci dans la FAQ, je pense que ça correspond à ce que tu cherches :
http://forum.alsacreations.com/faq/#item5

Bonne chance Smiley cligne
Raphael a écrit :
Bonjour benodilo et bienvenue ici Smiley smile

Veux-tu bien relire le point des Règles qui explique comment afficher les codes proprement ? Merci d'avance de modifier ton message en conséquence.


Je commence bien.... Milles excuses Smiley bawling
a écrit :

Pour répondre à ta question, as-tu commencé par faire une recherche dans le forum ou dans la FAQ, comme cela est conseillé avant de poster ?


Oui j'y fait référence d'ailleurs au début de mon message Smiley cligne

a écrit :

J'ai trouvé ceci dans la FAQ, je pense que ça correspond à ce que tu cherches :
http://forum.alsacreations.com/faq/#item5
Bonne chance Smiley cligne


Hélas ça ne répond pas à mon problême car je ne veux pas aligner une ligne mais un paragraphe... Smiley biggol
J'ai bidouillé dans tous les sens mais ça va pas, je vais qd même pas me remettre aux tableaux qd même Smiley help

En tout cas merci pour ta première réponse et encore mille excuse pour ce post mal rédigé...
Modifié par benodilo (12 Jul 2005 - 16:41)
Administrateur
benodilo a écrit :

Hélas ça ne répond pas à mon problême car je ne veux pas aligner une ligne mais un paragraphe... Smiley biggol
J'ai bidouillé dans tous les sens mais ça va pas, je vais qd même pas me remettre aux tableaux qd même Smiley help

Dans ce cas, le positionnement Flottant me paraît tout indiqué, non ?
Oui merci c pas mal mais c pas encore top :
-si le texte est trop court le "conteneur" est raccourcit (c normal mais ça m'arrange pas pour mon cadre..).
upload/2577-capture3.png

-si le texte est trop long il reprend en dessous del'image.
upload/2577-capture2.png

J'ai bien essayé de mettre le texte dans un Div et de modifier le CSS mais g rien de concluant...
Reste le positionnement absolu/relatif, la ca fonctionne nickel mais comme c indiqué dans ta FAQ c à éviter et je m'en serais bien passé...

Comme je suis débutant en CSS j'aimerais savoir si c simple et que c moi qui me débrouille mal ou si c un problême que bcp de personnes rencontres...

En tout cas je m'excuse si g posé des questions idiotes et si je donne l'impression de ne pas bcp creusé par moi même. Pourtant c pas vrai, g essayé un paquet de soluces et j''ai avalé toute ta FAQ qui est excellente (g trouvé pleons d'infos utiles pour d'autres problèmes que j'avais) ! Smiley murf 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="all">
.gauche {
  float: left;
  }
.droite {
 text-align:justify;
}
.conteneur {
 border-style:double;
 width:50em;
  }
</style>
</head>
<body>
 <div class="conteneur">
   <img class="gauche" alt="..." src="images/etoile.jpg" />

   <div class="droite">texte exte a be blbla</div>
</div>
</body>
</html>
Administrateur
benodilo a écrit :

-si le texte est trop court le "conteneur" est raccourcit (c normal mais ça m'arrange pas pour mon cadre..).

Dans ce cas, il va falloir utiliser la propriété clear, comme cela est expliqué dans la FAQ :
http://forum.alsacreations.com/faq/#item6 Smiley cligne

benodilo a écrit :
-si le texte est trop long il reprend en dessous del'image.

Alors, il suffit de lui imposer une marge à gauche de la taille de l'image.
Ah bah oui c bon tou marche nickel now.
Merci bcp, fallait peut-être pas une formation à 4000€ de Webmaster et avoir écrit un bouquin pour trouvé la soluce mais moi j'y serais surement pas arrivé !
Encore merci.

Voici donc le bout de code, si ça peut servir à quelqu'un :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="all">
.gauche {
  float: left;
  }
.droite {
 text-align:justify;
 margin-left:166px;
}
.conteneur {
 border-style:double;
 width:50em;
  }
  .spacer {
clear: both;
}
</style>
</head>
<body>
 <div class="conteneur">
   <img class="gauche" alt="..." src="images/etoile.jpg" />

   <div class="droite">texte extete exte a be blblatexte  blblbla extete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblblaextete exte a be blblatexte  blblbla</div>
  <div class="spacer"></div>
</div>
</body>
</html>


Le résultat avec bcp de texte :
upload/2577-capture4.png
Sujet clos
Aller à