Ubuntu-fr

ToxxicZad

CSS3 - Problème texte sous image dans une <div>

Bonsoir à tous !

Je suis face à un obstacle quant au centrage d'une image dans une <div> avec CSS3 (oui, comme le dit le titre... mais c'est pour la forme quoi.)

Bref, j'explique :

Je sais que pour centrer une image dans une <div> il faut spécifier :

#div {text-align: center;}

ce qui, dans mon code, est fait, et donne ceci :

Le cadre gris, vous l'aurez deviné, c'est ma div.

C'est cool, mais je dois mettre un texte sous cette image. Evidemment, la propriété "text-align:center;" agit aussi sur le texte, il sera du coup centré. Le texte centré... bof. J'aime pas.

Alors, je me dis que je vais ajouter un <p> pour mon texte. Voici donc le code que ça donne :

/* Code complet de mon cadre gris */
#div {
float: right;
width: 250px;
height: auto;
margin-right: 8px;
margin-top: 25px;
padding-top: 15px;
background-color: rgba(115, 115, 115, 0.8);
color: white;
box-shadow: 4px 4px 4px #707070;
font-family: Arial, "Helvetica", Verdana, sans-serif;
border-radius: 4px;
text-align: center;
}

/* Puis le texte : */
<div id="div">
	<img src="ubuntu.png" /><br /><br />
	<p>Lorem ipsum dolor sit amet et consectetur.</p>
</div>

ce qui me donne le résultat suivant :

Bref... tout va mal.

J'aimerais pouvoir ajouter donc du texte sous l'image, qu'il soit blanc et justifié.

J'ai essayé en créant une autre div à mettre dans la div, j'ai essayé de créer une classe... sans succès. Peut-être que je fais faux tout simplement.

Quelqu'un pourrait-il m'éclairer ? Google n'a pas pu... mais j'ai confiance en les Ubunteros !

Merci d'avance et une très bonne soirée,

Zad

Dernière modification par ToxxicZad (Le 11/03/2013, à 19:21)

---

United we run, divided we crawl.

Cowa

Re : CSS3 - Problème texte sous image dans une <div>

Bonsoir,

Alors de tête, je ferais un truc dans le genre...
On sélectionne la balise <p> contenue dans la balise à l'id #div:

#div p
{
    color: white;
    text-align: justify;
}

Théoriquement, le texte devrait maintenant être blanc et justifié.

ToxxicZad

Re : CSS3 - Problème texte sous image dans une <div>

Hello !

Merci pour ta réponse

Alors j'ai testé et ça donne :

Bon, c'est déjà mieux, mais c'est pas encore ça, héhé ! Peut-être qu'en bricolant #div p {} ....

---

United we run, divided we crawl.

ToxxicZad

Re : CSS3 - Problème texte sous image dans une <div>

Eh oui ! En bricolant #div p ça marche !

Voici comment j'ai fait :

#div p {color: white; text-align: justify;
          background: transparent; /*car il reprenait le bg de #div */
          margin-left: 10 px; width: auto; /* pour bien rentrer le texte dans la div */

/* et là, une feinte à l'ombrage, car de nouveau, c'était repris de #div */

            box-shadow: 0px 0px 0px transparent;
}

Et le résultat est plus que convainquant :

C'est très bricolage maison tout ça je trouve, mais si c'est la manière la plus simple et la plus propre d'y arriver, je prends !

Dernière modification par ToxxicZad (Le 11/03/2013, à 21:02)

---

United we run, divided we crawl.