28172 sujets

CSS et mise en forme, CSS3

Pb d'imbrication ?

Bonjour,

Sur la page
http://cahierdetexte.lycee-mariecurie.org/essai_css.html
je n'arrive pas à comprendre pourquoi la bordure bleue n'encadre pas tout le texte.

Voici le CSS

.une-saisie {
	border: thin solid #0066FF;
	position: relative;
}

.une-saisie #en-tête{

}

.une-saisie #principal {
	width: 50%;
	float:left;
}

.une-saisie #complements {
	float:left;
	width: 50%;
}


Et le html

<div class="une-saisie">
	<div id="en-tete"><h2>Mercredi 12 janvier 2010</h2></div>
	<div id="principal">
		<h3>Objectifs</h3>
		<p>Elitr fabulas mel ex. Sed admodum detracto an.</p>
		<h3>Contenu</h3>
		<p>Elitr fabulas mel ex. Sed admodum detracto an.</p>
	</div>
	
	<div id="complements">
		<h4>Travail à faire pour le 23 janvier 2010</h4>
		<p>Elitr fabulas mel ex. Sed admodum </p>
		<h4>Documents et liens</h4>
		<p class="url"><a href="http://physique-appliquee.net">physique-appliquee.net</a></p>
		<p class="com">de nombreuses ressources en ligne et à télécharger</p>
		<p class="doc"><a href="document.doc">Document.doc</a></p>
		<p class="image"><img src="img_css/acetone03.jpg" alt="ac&eacute;tone" width="330" height="119" /></p>
	</div>
	
</div>


Je me demandais également s'il est possible de placer des #id dans des .class.

Je ne sais pas si je me fais bien comprendre. Je maîtrise très mal les CSS.
La consultation de ma page et du css sera sans doute plus parlante.

Merci pour votre Aide

ClaudeD
Bonjour,

La bordure bleue n'encadre pas tout le texte parce que tes div #pricipal et #complements logées dans .une-saisie sont en flottement.

Il faut que tu "annule le flottement" à la fin de ces deux conteneurs avec un clear: both par exemple :

/* cette nouvelle classe dans le CSS */ .briser-le-flottement {clear: both;}

et dans ta page html, juste après ta div #complément (mais toujours dans .une-saisie)


<p><br class"briser-le-flottement" /></p>
<!-- ou bien un paragraphe vide -->
<p class"briser-le-flottement></p>

Normalement, ça devrait aller.
Modifié par Aureance (28 Jan 2010 - 18:39)
Je vois que tu as modifié ton exercice… tu fais suivre plusieurs conteneurs .une-saisie les uns à la suite des autres. Dans ce cas précis, tu pourrais indiquer le clear: both directement dans ce conteneur. Les deux div qu'il contient resteraient en flottement; Puis le flottement serait à nouveau stoppé à l'apparition du conteneur suivant qui contiendrait à nouveau 2 div en float, etc… il faudrait malgré tout finir le dernier conteneur avec la méthode indiquée plus haut.
Sujet clos
Aller à