28172 sujets

CSS et mise en forme, CSS3

Padding sur un élément inline en plusieurs lignes

Je dois réaliser ces titres :

upload/895-20110331-p4y.png

Mais je ne vois pas comment faire ça en css pour que ça reste facilement gérable.

Le comportement idéal serait un display:inline, mais alors impossible d'avoir un padding-left sur la 2ème ligne.

<h2><span>Demandez le catalogue</span></h2>

h2 {width: 140px}
h2 span {display: inline; background: blue; color: #fff; padding: 0 5px}


La seule solution que je vois, c'est de séparer le titre en deux éléments en display: block. Mais ça devient ingérable avec un cms.

<h2><span>Demandez</span><span>le catalogue</span></h2>

h2 {width: 140px}
h2 span {display: block; background: blue; color: #fff; padding: 0 5px}


Et display: inline-block ne m'aide pas.

Si quelqu'un a une idée… Smiley cligne
Modifié par cedb3 (31 Mar 2011 - 15:42)
Mabelle a écrit :
Bonjour

Et pourquoi pas ceci ?
&lt;h2&gt;Demandez&lt;br/&gt;le catalogue&lt;/h2&gt;


En fait le saut de ligne ne change rien au problème.
bonjour,

forcer un titre a passer sur deux lignes en ne gardant q'un certains nombre de caractéres sur la premiere lignes peut-être possible.

Les conditions sont :

-connaitre le texte
-fixé la taille de police en em
-inbriquer une balise de type inline dans le titre complet
-la prise en charge du pseudo-element :before (c'est lui qui repousse le texte et provoque le retour a la ligne)
-affiché le separateur d'unité via content:'\001f';( http://en.wikipedia.org/wiki/List_of_Unicode_characters )
-avoir la patience de regler les largeur du titre et du pseudo:elément
-fournir via @fontface la police d'affichage si celle-ci venait a manquez sur le poste du visiteur
-croisez les doigts pour que EM et l'affichage de la police dans les différents navigateurs/os aient le même ratio ...

(est mis a contribution: contexte de formatage, display , css3 )

pour tester en ligne : http://gcyrillus.free.fr/essai/titre-sur-deux-lignes.html
<!Doctype html> 
<html lang="fr"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
        <title>titre sur deux lignes (texte connu a l'avance)</title> 
        <style type="text/css">

h1 , h2 , h3 , h4 , h5 , h6 {  color: #fff; padding: 0 5px ;width:9em;text-transform:uppercase;}
span { background: blue; color: #fff;}
h1:before ,h2:before ,h3:before ,h4:before ,h5:before ,h6:before {content:'\001f';float:right;width:2.6em;
margin-right:-5px;box-shadow: -2em  0  0  #00f;}
body {font-family:verdana;font-size:0.75em;background:#999 url(http://gcyrillus.free.fr/essai/arrod.png);text-shadow:0 0 1px #222;}
p, ol {background:#ddd }
</style>
</head>
<body>
<p>h1</p>
<h1><span>Demandez le catalogue</span></h1>
<p>h2</p>
<h2><span>Demandez le catalogue</span></h2>
<p>h3</p>
<h3><span>Demandez le catalogue</span></h3>
<p>h4</p>
<h4><span>Demandez le catalogue</span></h4>
<p>h5</p>
<h5><span>Demandez le catalogue</span></h5>
<p>h6</p>
<h6><span>Demandez le catalogue</span></h6>
</body>
</html>
Merci, mais ça ne m'aide pas non plus, moi c'est plutôt un problème de padding. Le saut de ligne est provoqué par la largeur du conteneur.
Modifié par cedb3 (31 Mar 2011 - 15:43)
pourtant le padding semble bien apparaitre dans mon ff, opera, safari, chrome.
Daans IE8 seul le padding de droite de la premiere ligne n'apparait pas.

Sur le fond ce que tu recherche n'est pas faisable sans contorsions et mise a l'ecart de plusieurs navigateurs , une image avec un alt bien clair fera l'affaire ... Smiley smile

cordialement, GC
Sujet clos
Aller à