Icone puis titre aligné à droite

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Icone puis titre aligné à droite

Skaym

bonjour à tous,

Je cherche à faire un titre composé d'une icône, puis du titre lui même, le tout aligné a droite de ma div, et cette div suivie du texte courant, comme dans l'exemple ci dessous :

Et impossible de trouver comment! Avec des float:right, le texte courant vient toujours s'habiller autour du texte, ou alors mon icône va se placer a droite du titre, au lieu d’être a sa gauche.

J'ai extrait le bout de code pour faire des tests sans être gêné par le reste de mon site, ça donne ça (j'ai abrégé le lorem ipsum par souci de lisibilité):

Code :

<div class="titre">
<img src="images/ico_profil.png" alt="ico"><h3>Youkaidi</h3>
</div>
<div>
<p> Lorem ipsum dolor sit amet[...] </p>
</div>

Je n'inclus pas le morceau de CSS puisqu'il est tout petit et faux ^^

D'autre part, au fil de mon site je vais retrouver plusieurs fois ce type de titrage, avec une icône qui changera pour chaque titre, puis le titre qui aura toujours le même style. L'ensemble sera parfois aligné a gauche, parfois aligné a droite.
Quel est le moyen le plus propre pour faire ca? Vaut il mieux mettre mes images dans le fichier html au fur et a mesure, ou peut être mettre une div vide avec une classe genre "image" et en css définir son background comme étant l'image de l’icône que je veux?

En espérant avoir été clair je vous remercie par avance pour vos aides et suggestions.

**edit** Bon je voulais effacer le post vu que la solution est d'une simplicité gênante eheh. float:right était une mauvaise idée. text-align:right est une bonne idée. Vu qu'il y a un texte et une image ça m'avait pas traversé l'esprit .

Message édité par Skaym le 31-01-2013 à 16:48:30

Publicité

flo850

moi je

ca peut aussi fonctionner aver un float

Code :

.titre {
    width:200px;
}
.titre h3 {
    float:right;
}
.titre div {
    clear:right
}

Code :

<div class="titre">
     <h3><img src="images/ico_profil.png" alt="ico">Youkaidi</h3> 
            <div>
                       <!-- start slipsum code -->
 
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
 
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
 
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
 </div>

Message édité par flo850 le 31-01-2013 à 22:10:50

---------------

FORUM HardWare.fr

Programmation

HTML/CSS

Icone puis titre aligné à droite

Sujets relatifs
Comment supprimer la bordure à gauche et à droite ?	[SQL] Problème de modélisation (pas d'autre idée de titre dsl)
Rendu de plusieurs "plans d'eau" non aligné en OpenGL	Forcer le titre de l'entête à rester au milieu du bloc !?!
sprintf et justification à droite	Récupérer titre, résumé et image comme sur Facebook
mb_ereg_replace ajouter l'icône PDF	[Resolu][Qt] maximiser la taille d'une icone sur un bouton
Aligné un texte a gauche et a droite
Plus de sujets relatifs à : Icone puis titre aligné à droite

Page générée en 0.065 secondes