Entête d'un article

Bonjour,

J'ai un léger problème avec mon entête d'article.

Voici ce que j'ai fait :

<div class="illustration">
			<img src="http://image.com/stf4x3036.4747.13.jpg" alt="" />
			<p>Ma légende sur le contenu legende - auteur &copy; copyright</p>
		</div>
		<div class="entete">
			<h2 class="surtitre">Ceci est mon surtitre</h2>
			<h3 class="titre">Ceci est mon titre</h3>
			<div class="chapo">Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo Ceci est mon chapo </div>
			<div class="source">Auteur | ma Source  | Publié le 21/10/2008</div>
		</div>
	 </div>

et j'ai mis en float: left, l'illustration. Le problème est que si mon .illustration p est trop grand, alors .illustration prendra trop de place. J'aimerais du coup que la taille de .illustration p soit au maximum aussi grand que .illustration img

Est-il possible ?

Au passage, une autre petite question. Quelle est la meilleure méthode de "clear" un float.

Je faisais avant un <div style="clear:both">, puis j'ai trouvé un article qui parlait d'une classe .clearfix à mettre sur le conteneur. Ca marchait bien, jusqu'au jour où on m'a dit que c'était has been et il fallait utiliser overflow: hidden. Sauf que j'en ai rapidement parlé sur #css@freenode, on m'a dit aussi que c'était "has been". De ce fait, quelle est la meilleure méthode pour "cleaner" un float ?

Merci

bonjour,

je ne saisi pas bien ton soucis

1) Illustration : limiter p a la largeur de l'image ?
:

.illustration img {display:block;}
.illustration p {display:inline;}

(en passant p en inline , tu perds des possibilité de style ( :fist-letter , first-line , ...)

2) entete doit-il passer en desous de illustration ? , si oui :

clear

est approprié

As tu une page en ligne , même simplifié et eventuellement un dessin a proposé?

<edit>
heu

has been

Les regles CSS ne se périment pas ( par defaut : still is ), ce sont les navigateurs qui deviennent obsolète . Ne pas choisir une methode car 'A la mode' , mais parcequ'elle fonctionne et est pertinente .
Modifié par gcyrillus (21 Oct 2008 - 16:35)

.mod_intro .illustration
	{
	float: left !important;
	font-size: 1.0em !important;
	overflow: hidden !important;
	zoom: 1 !important;
	margin: 0 5px 5px 0 !important;
	}
	
.mod_intro .illustration p
	{
	color: gray !important;
	font-size: 0.8em !important;
	width: 130px !important;
	margin: 2px auto !important;
	}

.mod_intro .entete .surtitre
	{
	background: url(../../images/2/commun/flecheSubTitle.gif) no-repeat 0px 1px !important;
	}
	
.mod_intro .entete .titre
	{
	color: black !important;
	font-size: 1.9em !important;
	float: none !important;
	border: 0px !important;
	}
	
.mod_intro .entete .chapo
	{
	font-size: 0.9em;
	}
	
.mod_intro .entete .source
	{
	color: #7B982E !important;
	font-size: 0.95em !important;
	padding: 4px 0px !important;
	}

Sachant qu'en fait, ce qui me dérange, c'est que le border de .surtitre passe en dessous de l'image qui est dans un bloc ayant un float: left.

Or, je voudrais que la bordure commence où est le texte du h2 et finisse à la fin de la totalité de la div principale, tout comme son background.

As tu essayé d'appliquer

overflow:hidden;
zoom:1; 

aux titres pour qu'il se démarquent des flottants ?

GC


<edit> moi , l'expression et l'orthographe ça fait quatre ...</>
Modifié par gcyrillus (21 Oct 2008 - 17:33)