28221 sujets

CSS et mise en forme, CSS3

Mise en page de titres sur un site

Bonjour,

Reprenant une mise en page vue sur CSS Garden, j'essaie de mettre en forme des titres de rubrique de cette façon :

http://ipr.univ-paris1.fr/spip/IMG/titre_ok.png

Mais, lorsque le titre passe sur deux lignes, le résultat n'est pas très propre :

http://ipr.univ-paris1.fr/spip/IMG/titre_pas_ok.png

Ce que j'aimerai obtenir :

http://ipr.univ-paris1.fr/spip/IMG/titre_bon.png

Voici le code html :

<div class="texte">
<h2><span>[(#TITRE)]</span></h2>


Et le CSS :

	.texte H2 {
	color:#09345F;
	background-color:#EBF2FC;
	display:block;
	}
	
	.texte H2 SPAN{
	background-color:#FFFFFF;
	}


Existe-t-il une solution ?

Merci d'avance,

G. Saunier
Si tu ne veux pas de retour à la ligne entre deux mots (par exemple entre 'de' et 'l'institut'), tu peux mettre un espace insécable. Donc faut remplacer les espaces par &nbsp; :

La division en centres de recherches de&nbsp;l'institut
Bien, après relecture, je m'ai trompé, j'avais pas vu que tu parlais du fond bleu clair qui est pas bon Smiley lol

Essaye de mettre ton span en display block, genre :
.texte h2 span {
    background-color: #fff;
    display: block;
}


(et met toutes tes propriétés et définitions en minuscule, ça réduit le poids des pages quand elles sont compressées)
Modifié le 12 Jan 2005 - 11:48
Merci de ta réponse.

Malheureusement, cette solution ne donne pas grand chose :

- soit on remplace tous les espaces, et dans ce cas, c'est la ligne qui déborde (sans parler du problème que cela pose pour un site dynamique) :

http://ipr.univ-paris1.fr/spip/IMG/titre_reponse1.png

- soit on place un ou deux espaces, et dans ce cas on ne fait que déplacer le problème :

http://ipr.univ-paris1.fr/spip/IMG/titre_reponse2.png

Encore une fois (je n'ai peut-être pas été clair), je cherche à aligner verticalement la bordure bleue, même si le texte est sur plusieurs lignes (j'ajoute un commentaire à l'image du premier post).

D'autres idées ?

G Saunier.
FlorentG a écrit :
Si tu ne veux pas de retour à la ligne entre deux mots (par exemple entre 'de' et 'l'institut'), tu peux mettre un espace insécable. Donc faut remplacer les espaces par &nbsp; :

La division en centres de recherches de&nbsp;l'institut


Petite précision en passant: l'abus d'espaces insécables peut poser de gros problèmes quand la page est affichée sur un mobile. Mieux vaut les réserver à leur usage typographique normal (avant les signes de ponctuation double, etc.)
Re-Salut,

À mon tour excuse moi : je n'ai pas lu ta seconde réponse avant de poster la mienne.

J'ai essayé le display:block;, l'ennui c'est que dans ce cas, le span prend automatiquement toute la largeur et recouvre le fond bleu. J'ai alors essayé de fixer sa largeur, mais lorsque le titre est court, l'affichage n'est pas très bon non plus (exemple avec un witdh de 75%) :

http://ipr.univ-paris1.fr/spip/IMG/titre_reponse3.png

G. Saunier.
Modifié le 12 Jan 2005 - 11:56
Sinon vire le span, et rajoute la bordure de droite avec border :

<div class="texte">
<h2>[(#TITRE)]</h2>


.texte h2 {
	color:#09345F;
        background-color:#fff;
        border-right: 20px solid #ebf2fc;
}


Comme ça, tu aura toujours une zone bleue à droite, de taille fixe, et quelque soit ce qu'il y a dans le h2.
Modifié le 12 Jan 2005 - 12:17
FlorentG a écrit :
Comme ça, tu aura toujours une zone bleue à droite, de taille fixe, et quelque soit ce qu'il y a dans le h2.


Certes, mais c'est exactement ce que je veux éviter : j'aimerai que la bordure bleue se modifie selon le contenu...
Non : cela ne change rien (sans parler du problème d'IE).

Je me demande si la construction span dans un h2 est la bonne ?

...
Administrateur
gsaunier a écrit :


Certes, mais c'est exactement ce que je veux éviter : j'aimerai que la bordure bleue se modifie selon le contenu...

Combine les 2.
Une zone en haut à droite 'bordure' toujours présente.
Une zone en haut à gauche avec titre + éventuellement bordure.
En bas, pleine largeur, le paragraphe.
Le haut peut faire plusieurs lignes que ça dérangera pas (euh si, ce serait préférable que les 2 lignes soient d'égale longueur plutôt qu'un seul mot sur la 2ème ligne, mais ça ...)

Le titre ne peut jamais occuper 100% de la largeur mais 90% (exemple, fais-ça en % ou px ou ...) en plus du design que tu veux copier.
Comme ça il y aura au minimum 10% de bordure bleue mais beaucoup plus si le titre est trop court.


EDIT: joli design.
Des titres courts, c'est mieux. Pourquoi pas 'Les centres de recherche'? Smiley smile
Salut et merci de tes conseils... mais j'avoue que je n'ai pas bien tout compris Smiley confused : haut, bas, etc. Peux-tu être plus précis ? Merci.
Sujet clos
Aller à