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

Voulf

lapin7

Veuillez vous connecter pour commenter

Parcourir

Activité