28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je voudrais savoir s'il est possible de spécifier en CSS qu'un titre soit suivi du premier paragraphe sans retour à la ligne. Par contre, les autres paragraphes auraient un retour à la ligne normal. Par exemple :


<h2>Description :</h2>
<p>premier paragraphe de la description</p>
<p>Deuxième paragraphe</p>
<p>Troisième paragraphe</p>


serait affiché comme ça :

Description : premier paragraphe de la description
Deuxième paragraphe
Troisième paragraphe

Et si quelqu'un a une autre idée pour avoir ce type de présentation tout en restant "propre" d'un point de vue sémantique en xhtml, je suis preneur aussi...

Merci d'avance.
Modifié par youen (03 Oct 2009 - 22:13)
Salut,

L'élément h est par défaut en display:block ce qui à pour effet de lui attribuer une largeur de 100%. En le passant en inline il ne prendra que la largeur de son contenu. (idem pour p)

<h2>Description :</h2> 
<p class="first">premier paragraphe de la description</p> 
<p>Deuxième paragraphe</p> 
<p>Troisième paragraphe</p>


h2,p.first{display:inline;}

Modifié par pfoofen (03 Oct 2009 - 13:05)
Merci beaucoup pfoofen, j'avais déjà vu le "display: inline" mais je connaissais pas le "first", c'était la brique qui me manquait Smiley smile

Edit: ah, j'avais pas vu que tu mettais la classe "first" dans le premier <p> je croyais que c'était un mot clé géré par CSS. Enfin je vais voir si je m'en sort avec ça.
Modifié par youen (03 Oct 2009 - 22:18)
Oui ou sinon

<h2>Description :</h2>  
<p>premier paragraphe de la description</p>  
<p>Deuxième paragraphe</p>  
<p>Troisième paragraphe</p>


h2,p:first-child{display:inline;}
Sinon dans un monde parfait tu ferrais :


h2{
  
  display: run-in;
}


Malheureusement seul Opera semble appartenir à ce monde. Smiley decu