[Résolu] Aidez moi à construire un bloc de titre

Bonsoir à tous,

Je ne sais pas comment coder ce bloc :
http://www.mezimages.com/up/06/264321-test.png

Ce bloc en faite, sera situé en dessous de mon titre h1.
La partie 2 devra etre extensible en longueur.
Plus le titre est long, pluis la partie 2 s'allonge

La partie 1 doit etre collée à gauche de la partie 2, et la partie 3 à droite de la partie 2, vous me suivez ?

La longueur du titre sera variable

Donc comment faire ? pour positionner les parties 2 et 3 correctement ?

De plus je précise, difficulté de plus, le titre sera centré (le bloc du titre pour être préci)

J'espère avoir été assez clair


Merci de votre aide =)


Edit : je rajoute 2 exemples pour etre clair
http://www.mezimages.com/up/06/264350-2.png
http://www.mezimages.com/up/06/264352-3.png

PS : le conteneur de ce bloc titre est fixe, ce bloc noir sera centré dedans.
Modifié par Snoopy17 (26 Jun 2007 - 20:46)

Bonsoir,

Plusieurs choix s'offre à toi, soit tu met tout dans un paragraphe, et tu applique les styles avec des span.

Soit tu utilises des div, et tu utilise la règle float.

En gros Soit :

<p>Monbloc1 <span class="bloc2">Mon Bloc 2</span> <span class="bloc3">Mon bloc 3</span></p>

Soit :

<div id="centrage">

<div id="bloc_1">

</div>

<div id="float_centre">

</div>

<div>

</div>

</div>

Avec la css :

#centrage {
width: 50%;
margin: 0 auto;
}

#bloc_1 {
width: 10%;
float: left;
}

#float_centre {
width: 30%;
float: left;
}

Super_baloo8 a écrit :
Bonsoir,

Plusieurs choix s'offre à toi, soit tu met tout dans un paragraphe, et tu applique les styles avec des span.

Soit tu utilises des div, et tu utilise la règle float.

En gros Soit :

<p>Monbloc1 <span class="bloc2">Mon Bloc 2</span> <span class="bloc3">Mon bloc 3</span></p>

Soit :

<div id="centrage">

<div id="bloc_1">

</div>

<div id="float_centre">

</div>

<div>

</div>

</div>

Avec la css :

#centrage {
width: 50%;
margin: 0 auto;
}

#bloc_1 {
width: 10%;
float: left;
}

#float_centre {
width: 30%;
float: left;
}

Il n'y aura RIEN dans le bloc 1 et 3 Ce sont juste des images...

À priori, il suffit de partir d'un code HTML à peine surchargé :

<h2><span>Mon texte</span></h2>

Et en CSS :

h2 {
background: url(h2-centredroite.png) right center;
}
h2 span {
display: block;
padding: 4px 0;
text-align: center;
background: url(h2-gauche.png) left center;
}

Avec deux images en suivant le modèle suivant, mais à l'horizontale.

Florent V. a écrit :
À priori, il suffit de partir d'un code HTML à peine surchargé :

<h2><span>Mon texte</span></h2>

Et en CSS :

h2 {
background: url(h2-centredroite.png) right center;
}
h2 span {
display: block;
padding: 4px 0;
text-align: center;
background: url(h2-gauche.png) left center;
}

Avec deux images en suivant le modèle suivant, mais à l'horizontale.

Dans ce cas là, l'image de droite et celle de gauche n'ira pas coller le texte du titre
Modifié par Snoopy17 (26 Jun 2007 - 13:31)

Personne ?

Snoopy17 a écrit :
Dans ce cas là, l'image de droite et celle de gauche n'ira pas coller le texte du titre

h2 et h2 span en display: inline, alors...
Et si on veut garder un h2 en affichage de type bloc, on passe par un autre span (soyons fous...) :

<h2><span class="premier"><span>Mon texte</span></span></h2>

Je te laisse adapter images et CSS.

À ton tour de bosser un petit peu, hein.

un GRAND merci à toi Florent V. =)

Perso j'ai fais comme ceci :

<div id="bloc-titre"><h1><span>Titre</span></h1></div>

(Je suis pour le moins de choses possible dans la balise titre )

Et ca marche super :o le toute composé 2 images !
Je vais tester la méthode avec 2 spans, mais franchement merci beaucoup