Eternel pb de positionnement des div

shangailily · 7 Juin 2004

Bonsoir,

Je travaille à partir du site alsacreations.com qui est un bon site pr apprendre les css et etc...

Mon souci est d'avoir la présentation suivante en utilisant les div:

[carré coloré] txt

Sous IE, Opéra 7.21, ps de pb, mais sous Mozilla, Mozilla Firefox et Opéra 6.0, la présentation est différente, j'ai:

[carré coloré] txt

Comme si mon deuxième [carré coloré] txt est intégré ds le premier div.

Voici mon code:

<style>
.nav1{
width:100%;
}
.nav2{
width:100%;
margin-top:15px;
}

.bloc1 {background-color: blue;
height: 50px;
width: 50px;
float: left;
}
bloc2 {
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {background-color: yellow;
height: 50px;
width: 50px;
float: left;
}
bloc4 {
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
</style>

<body>

	<div class="nav1">
  <div class="bloc1">
  </div>
  <div class="bloc2">
  Navigation numéro 1
  </div>	
	</div>
  <div class="nav2">
 	 <div class="bloc3">
 	 </div>
 	 <div class="bloc4">
 	 Navigation numéro 2
 	 </div>	
  </div>
</body>

Où me suis-je gourée?

Merci!

Voulf · 24 Juin 2004

Salut,

ce n'est pas une erreur mais un effet logique d'un élément flotté

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style>
.nav1{
width:100%;
}
.nav2{
width:100%;
margin-top:15px;
}

.bloc1 {background-color: blue;
height: 50px;
width: 50px;
float: left;
}
bloc2 {
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {background-color: yellow;
height: 50px;
width: 50px;
float: left;
}
bloc4 {
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}

.clear {clear:left;visibility:hidden;}
</style>
</head>
<body>
<div class="nav1">
  <div class="bloc1"> </div>
  <div class="bloc2"> Navigation numéro 1 </div>
  <hr class="clear">
</div>
<div class="nav2">
  <div class="bloc3"> </div>
  <div class="bloc4"> Navigation numéro 2 </div>
</div>
</body>
</html>

Je t'ai rajouté un élément <hr class="clear"> qui à l'avantage de marquer la séparation entre les deux [carré] mais ça peut s'appliquer à tout éléments de la page ou presque.

lapin7 · 25 Juin 2004

bonjour,

si tu declares

div class="bloc2"

div class="bloc4"

il faut que dans la feuille de style tu mettes un point devant

.bloc2 {

.bloc4 {

ce qui manque dans ta feuille de css comme tu as fait pour les blocs 1 et 3

c'est peut-être là ton erreur

Connexion

Eternel pb de positionnement des div

Sujets conseillés

shangailily

Lien vers le commentaire

Partager sur d’autres sites

Voulf

Lien vers le commentaire

Partager sur d’autres sites

lapin7

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité