18041 sujets

Questions générales et questions de débutants

[Résolu] Essai de positionnement : qui peux m'expliquer ?

Bonsoir,

Voilà, après avoir lu le tutoriel http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS je me suis essayé sur une page dont voici le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=UTF-8"
 http-equiv="content-type">
  <title>EXO_POSITIONNENT</title>
  <link rel="stylesheet" type="text/css"
 href="EXO_POSITIONNENT.css">
</head>
<body>
<div class="conteneur">
<h2 class="FlottantDroite">Sch&eacute;ma de flottant</h2>
<h2>Sch&eacute;ma de Flux courant</h2>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p class="bloc">Le conteneur est ici le &lt;P&gt;</p>
<div class="bloc1">Bloc 1</div>
<div class="bloc2"> Bloc 2</div>
<div class="bloc3"> Bloc 3</div>
</div>
<p><a href="http://jigsaw.w3.org/css-validator/"><img
 style="border: 0pt none ; width: 88px; height: 31px;"
 src="http://jigsaw.w3.org/css-validator/images/vcss"
 alt="CSS Valide !"></a>
</p>
</body>
</html>


et celui des CSS :


.conteneur {
  padding-top: 15px;
  padding-left: 15px;
  background-color: Teal;
}
h2 {
	font-size: 2em;
}
.bloc {
  width: 100px;
  height: 100px;
  background-color: yellow;
} 
.FlottantDroite {
	float: right;
	background-color: Navy;
	color: White;
}

.Bloc1 {
	float: left;
	background-color: Blue;
	width: 70px;
	height: 40px;
}

.Bloc2 {
	float: left;
	background-color: Silver;
	width: 70px;
	height: 40px;
	margin-left: 20px;
}

.Bloc3 {
   float: left;
	background-color: Yellow;
	width: 70px;
	height: 40px;
	margin-left: 20px;
}


La première question que je me pose est pourquoi le lien vers le validateur W3C n'est pas en dessous des trois blocs flottants (Bloc 1, 2 et 3). Est-ce que c'est par ce qu'il est dans le flux normal lui ? Quelle est la meilleure solution pour le mettre en dessous des blocs flottants ?

La seconde question est pourquoi le bloc <div class="conteneur"> (de background-color cyan) ne s'étend pas jusqu'en dessous des trois blocs flottants ? Pourtant la base de fermeture </div> est en dessous ?

Merci d'avance,

Jean-Michel
Modifié par jims34 (31 May 2008 - 14:12)
Bonjour,

Bon, j'ai compris grâce au lien que tu m'a donné. Merci.
Le positionnement des éléments en CSS est assez ardu, en tout cas pour moi... Mais à force de persévérance, je comprendrai ! Smiley cligne

Merci encore.

Jean-Michel
Sujet clos
Aller à