Version complète: sur le forum Webmaster Hub : Eternel pb de positionnement des div
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
shangailily
lundi 7 juin 2004 à 17:09
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
[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
[carré coloré] txt

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

Voici mon code:

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>


CODE
<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
jeudi 24 juin 2004 à 14:39
Salut,

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

HTML
<!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
vendredi 25 juin 2004 à 08:01
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
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.