Background multi lignes / elements

pierropierro
Les bases HTML/CSS

Bonsoir à tous, j'ai un soucis de mise en forme qui commence à me prendre le chou.
L'objectif étant de réaliser cette mise en page ;
http://hpics.li/19ff7b8

Je cherche donc à mettre un background à la fois sur mon titre et mon texte.

Niveau structure voilà ce que j'ai 

<div class="content">
<h3>Hello le monde comment ça va ce soir ?</h3>
<p>quis tincidunt aliquet, ut, vel amet ac tristique dis sit mattis, phasellus! Tincidunt arcu! Dapibus ultrices dictumst etiam? </p>
</div>

J'ai trouvé différentes solutions mais toutes supposent que mes élements h3 et p soient en display inline ce qui va les mettre forcement l'un à la suite de l'autre.
Pour le moment le meilleur résultat auquel j'arrive est : http://codepen.io/2lasoul/pen/WoOeRP qui m'embête puisque je rajoute des break dans mon php et que firefox ajoute aussi le background sur les br.

Je suis à court d'idées si quelqu'un parmi vous à une idée je suis preneur.

Merci à tous

4 réponses

Huggy

Tu pourrais utiliser une classe pour fixer le comportement inline de ton paragraphe
et remplacer les br par des p

<div class="content">
  <h3>Hello le monde comment ça va ce soir ?</h3><p></p>
<p class="enligne">quis tincidunt aliquet, ut, vel amet ac tristique dis sit mattis, phasellus! Tincidunt arcu! Dapibus ultrices dictumst etiam?</p>
</div>

p.enligne {
  display: inline;
  background: orange;
  box-shadow: 5px 0 0 orange, -5px 0 0 orange;
}
JeremieMeunier

En rajoutant un <br /> sur ton codepen pour voire ce que tu disait ça ne m'a pas du tout colorer le <br />

Roak

Salut.
Une bonne méthode sinon est l'utilisation des pseudos éléments. Tu peux par exemple utiliser le pseudo élément after sur ton h3.
Ce qui te permet d'enlever tes br.

h3::after {
  content: '';
  display: block;
  margin-bottom: 10px;
}
Brandon Sauveniere

Salut !

Je ne sais pas si tu as résolu ton problème mais tu peux également mettre tes éléments en inline-block (pour que tes élements inline se comportent comme des blocs).

Sinon, tu peux également mettre ton background sur l'élément parent (ta div, par exemple) qui contient ton titre et ton texte.

Ton lien pour l'image ne fonctionne pas, je ne sais pas t'aider plus :p