28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici mon problème : j'ai inséré une icône avant mon <h5>. Je souhaite maintenant, quand mon titre est sur 2 lignes que la 2è ligne soit décalée par rapport à cette icône. Mieux que des mots, une image et la css.

Sur l'image ci-jointe, je voudrais que le mot"avant" commence au même niveau que le T de "Texte".


h5:before {
	color:#25B7D3;
	content:"\f10d";
    font-family: "FontAwesome";
      padding-right:10px;
}


Merci de votre aide !

upload/50580-forum.JPG
Bonjour,

Donc si j'ai bien compris, le "avant" doit être au même niveau que "Titre" et non "Texte".

Il y a plusieurs solutions mais je pense que la plus propre serait d'ajouter un pseudo-élément "before" à ton titre dont le contenu serait ton image Smiley cligne
Un décalement négatif devrait résoudre le problème par la suite Smiley smile
Modifié par docteurdread (09 Jul 2015 - 20:19)
Modérateur
Salut,

Je te fais ça de tête. Donc je peux me tromper mais tu vas comprendre là où je veux en venir. Au passage, un truc que je comprends pas (Titre 4 et h5:before....) ???


<h4>tite de level 4</h4>


h4{
padding-left:10px
}
h4:before{
position:absolute;
top:0;
left:-10px;
width:10px;
height:10px;
color:#25B7D3;
content:"\f10d";
font-family: "FontAwesome";
}


<<<EDIT
Égelement, tu peux voir pour un positionnement fait à base de table-cell/inline-bolck et un vertical align:top.

D'une manière général, j’opterai pour ce genre de construction afin de bénéficier de plus de souplesse :


<h4><span>tite de level 4</span></h4>


h4 span{
 //....
}
h4 span:before{
//....
}

EDIT;
Modifié par niuxe (09 Jul 2015 - 20:24)
Alors :
@docteurdread : oui c'est au même niveau que Titre (j'avais fait ça de tête). Peux tu me détailler ton raisonnement car je ne maitrise pas les pseudo element encore.

@niuxe : oui j'avais fait du h4 d'où le libellé du texte mais je me suis rendue compte que Wordpress les utilisait ds la sidebar titres de widgets donc je suis passée à h5. J'ai essayé ton code et ça va pas, ça me retire l'icone et ça me la met tout en haut et je ne vais pas pouvoir la positionner car le but en fait c'est que mon client sélectionne Titre 5 dans wordpress editor et que ça lui colle le bon format (icone + bonne css de texte). J'avais aussi pensé au table-cell ms même chose, je peux pas le lier à l'éditeur...
Administrateur
Bonjour,

Il y a en effet plusieurs manières de procéder.
Un grand classique serait celle-ci (j'ai utilisé <blockquote> puisque c'est l'élément prévu pour les citations) :

blockquote {
  position: relative;
  padding-left: 1em;
}
blockquote::before {
  content:"\2665";
  position: absolute;
  left: 0;
}

/* déco */
blockquote {
  width: 300px; /* à supprimer */
  background: pink; /* à supprimer */
  font-size: 2em;
}
blockquote:before{
  color:#25B7D3;
}


Le résultat : http://codepen.io/raphaelgoetter/pen/XbqzmM

Bonne chance Smiley smile
Modifié par Raphael (10 Jul 2015 - 10:54)