28172 sujets

CSS et mise en forme, CSS3

Comment aligner un paragraphe dans une div ?

Bonjour, je suis obligé d'avoir un paragraphe dans une div (Drupal le met automatiquement) et je n'arrive pas à aligner les différents éléments.

Dans mon exemple la première box n'a qu’une ligne et là pas de problème, la deuxième et là plus rien ne va! La troisième est le résultat que je désire.

En plus dans certain cas il n'y pas d'image c'est pourquoi je ne veux pas utiliser de tableau:

Comment faire?


<style type="text/css">
<!--
.contenant {
	min-height: 50px;
	width: 600px;
	background-color:#FFC;
	margin-bottom: 10px;
}
.image {
	background-color: #06C;
	float: left;
}
img {
	width: 48px;
	height: 48px;
}
.texte {
	float: left;
	background-color:#960;
}
h3 {
	margin: 0;
	padding: 0 5px 0 5px;
	display: block;
}
.texte p {
	background-color:#0FC;
	margin: 0;
	padding: 0 5px 0 5px;
}
.clear {
	clear: both;
}
/* table */
table td {
	vertical-align: top;
	}
-->
</style>
</head>
<body>
<!-- box avec une ligne de texte -->
<div class="contenant">
  <div class="image"><img src="images/profile_icones2/5-bleu-48x48.png" width="48" height="48" /></div>
  <div class="texte">
    <h3>titre</h3>
    <p>Pudandi assit verspel itescimus doluptam nulluptatur, ut magnatias apicim.<br />
    </p>
  </div>
  <div class="clear"></div>
</div>
<!-- box avec plus d'une ligne de texte -->
<div class="contenant">
  <div class="image"><img src="images/profile_icones2/5-bleu-48x48.png" width="48" height="48" /></div>
  <div class="texte">
    <h3>titre</h3>
    <p>Et providebis nis eostemqui tem voluptatur mod molestem rem quate voles et elecum fuga. Is abore que net vellab iur? Ucim voluptusam, cum fugiatum volorempore pa vellorume laboreptae nonsequi si ut moloreptate esequiat.<br />
      Reces perro con re esci de voluptat fa.</p>
  </div>
  <div class="clear"></div>
</div>
<!-- box avec un tableau -->
<div class="contenant">
  <table>
    <tr>
      <td><img src="images/profile_icones2/5-bleu-48x48.png" width="48" height="48" /></td>
      <td> <h3>titre</h3>
      Et providebis nis eostemqui tem voluptatur mod molestem rem quate voles et elecum fuga. Is abore que net vellab iur? Ucim voluptusam, cum fugiatum volorempore pa vellorume laboreptae nonsequi si ut moloreptate esequiat.<br />
      Reces perro con re esci de voluptat fa</td>
    </tr>
  </table>
</div>
<div class="clear"></div>
</div>
</body>
Bonjour,

Si la largeur de l’image dans div.image ainsi que la largeur de div.contenant sont fixes alors applique une largeur de 552px à .texte.

Les lignes qui ne contiennent pas d’images ont-elle une div.image vide ou n’ont-elle même pas de div.image ?
Si je mets une largeur fixe à .texte, quand il n'y a pas d'image il y a un vide...
Et il y a toujours une div .image même si il n'y a pas d'image
Tu peux fixer la largeur de div.image à 48px pour que tes lignes avec ou sans images soient toutes alignées verticalement.
Oui, mais il y a un vide non désiré si il n'y pas d'image.
C'est comme si l'on met une marge à la div .texte, il y a toujours un vide.
Modifié par domb (13 Aug 2012 - 11:26)
Si tu ne veux pas de vide à gauche quand il n’y a pas d’image il te suffit dans la css de .texte de supprimer la ligne float:left.
Modifié par adrien881 (13 Aug 2012 - 14:39)
Oui mais à ce moment là le texte passe sous l'image ce que je ne veux pas aussi.
Je crois que je veux l'impossible...
Si tu ne veux pas que le texte passe sous l’image avec les navigateurs modernes tu peux utiliser les propriétés display:table
Rajoute à la fin de ta css
.contenant {
	display:table
}

.image, .texte {
	display:table-cell
}

.image {
	float:none;
	vertical-align:top
}


IE7 ne saura pas l’interpréter. Pour ce boulet il faudrait que tu puisses ajouter une classe aux divs qui n’ont pas d’images à leur gauche.
Merci pour vos réponses, elles m'ont bien aidé.

Smiley biggrin
Modifié par domb (14 Aug 2012 - 15:12)
Sujet clos
Aller à