18041 sujets

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

[Résolu] Probleme de mise en page - alignement horizontal de blocs

bonjour à tous.
je débute en css et je malgrès tout ce que j'ai deja pu découvrir sur ce site... je reste confronté au probleme suivant:

voici le code de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#contener{
    width: 800px;
	margin: auto;
	position: relative;
}
#carre {
display:block;
height: 20px;
width: 20px;
background-color:#CC3333;
float: left;
margin: 10px;
}
#element{
height: 20px;
background-color:#CC6633;
margin-top: 5px;
position: relative;
}

#blocklist { 
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
display: block;

}

#blocklist ul{ 
   margin: 0px;
   padding: 0px;
   list-style:none;
   padding-left:10px;
}
#blocklist li{
   display: inline; 
   margin: 0px;
   padding: 0px;
   margin-left: 5px; 
   
}
-->
</style>
</head>


<body>
<div id="contener">
   <div id="element"></div>
</div>
<div id="contener">
   <div id ="carre"></div>
   <div id ="carre"></div>
   <div id ="carre"></div>
</div>
<div id="contener">
   <div id="element"></div>
	<div id="element"></div>
</div>

</body>
</html>


dans dreamweaver, l'affichage est ok mais dès que je génère la page sur firefox ou explorer, tout est de travers...!
Je reste persuadé que c'est tout simple mais pourtant je galère. Smiley bawling

merci pour vos réponses. Smiley cligne
Modifié par perinus (17 Nov 2006 - 15:03)
Déjà un id ne se déclare qu'une seule fois. Or, tu as mis le même id sur plusieurs élément, d'où le problème. Utilise plutôt une classe à la place.
FlorentG merci pour ta réponse rapide!

je viens de faire la modif: j'ai remplacé l' id en class mais ça ne fonctionne pas mieux.

j'essaye sous forme de liste mais sans succès: 

<body>
<div id="contener">
   <div class="element"></div>
    <div id="blocklist">
	  <ul>
	     <li><div class="carre"></div></li>
		 <li><div class="carre"></div></li>
		 <li><div class="carre"></div></li>
	  </ul>
	</div>
   <div class="element"></div>
   <div class="element"></div>
</div>

</body>

Modifié par perinus (17 Nov 2006 - 13:03)
oui oui ... bien sur, j'ai pas oublié de modifier le # en .

voici mon probleme en image :
dans dream >


upload/9538-dream.jpg


et dans ff >

upload/9538-ff.jpg
Modifié par perinus (17 Nov 2006 - 13:18)
Si je ne me trompe pas, tu as bien dis "voici sous dreamweaver" et ENSUITE "voici sous ff"

Il faut savoir que dreamweaver n'interprète pas du tout la page html comme un navigateur.

A mon avis
-soit il vaut mieux recommencer et regarder que sur ff ce que le resultat donne,
-soit corriger tes erreurs(si ce n'est pas trop complexe à corriger) tout en regardant sur ff.

N'oublie pas: voir sous firefox le resultat de ton travail et regarde ensuite sur explorer si tout est correct également
(fais le souvent car si tu ne regardes que sous firefox, tu vas te plaindre comme quoi sur explorer, c'est complètement décalé Smiley cligne )
Modifié par Oryo (17 Nov 2006 - 13:29)
oui c'est bien ça, et je verifie sur plusieurs navigateurs a chaque fois...

Mais ce que je cherche à faire, c'est d'obtenir une mise en page equivalente à celle que je vois dans dreamweaver. Smiley cligne
Je ne sais pas si cela est possible.
Je ne m'en suis jamais préoccupé car je me suis tjs dis que dream n'interprétait sans doute pas bien les css. Même chose pour les tableaux, le rendu était parfois différent du navigateur.
Merci pour tes réponses Oryo, mais je me fais mal comprendre...

ce que je souhaite, c'est que la liste de "carrés" de mon code se fasse entre 2 "éléments" .
Pour le moments, ils restent cachés derriere les barres, et je veux qu'ils s'intercalent normalement.

Je pense que c'est un problème de float que je maitrise mal.

Smiley bawling
Smiley murf

je pense avoir trouvé!

apres quelques modifs dans le code que voici, j'ai obtenu ce que je voulais! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#contener{
    width: 800px;
	height : auto;
	margin: auto;
}

.carre {
height: 20px;
width: 20px;
float:left;
display: block;
background-color:#CC3333;
margin: 10px;

}
.element{
height: 20px;
width: 800px;
background-color:#CC6633;
margin-top: 5px;
float:left;}

#blocklist { 
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
display: block;
float: left;

}

#blocklist ul{ 
   margin: 0px;
   padding: 0px;
   list-style:none;
   padding-left:10px;
}
#blocklist li{
   display: inline; 
   margin: 0px;
   padding: 0px;
   margin-left: 5px; 
   
}
-->
</style>
</head>


<body>
<div id="contener">
   <div class="element"></div>
      <div id="blocklist">
	  <ul>
	     <li><div class="carre"></div></li>
		 <li><div class="carre"></div></li>
		 <li><div class="carre"></div></li>
	  </ul>
	</div>
   <div class="element"></div>
   <div class="element"></div>
</div>

</body>
</html>


en tout cas, ça a l'air de fonctionner.

merci à tous
Modifié par perinus (17 Nov 2006 - 14:52)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#contener{
    width: 800px;
	height : auto;
	margin: auto;
}

.carre {
height: 20px;
width: 20px;
float:left;
display: block;
background-color:#CC3333;
margin: 10px 10px 10px 15px;

}
.element{
height: 20px;
width: 800px;
background-color:#CC6633;
margin-top: 5px;

}


#blocklist{ 
   
   margin: 0px;
   list-style:none;
   padding:0 0 0 10px;
}
.clear{
   clear:both;
}
-->
</style>
</head>


<body>
<div id="contener">
   <div class="element"></div>
	  <ul id="blocklist">
	     <li class="carre"></li>
                  <li class="carre"></li>
	     <li class="carre"></li>
	   <div class="clear"></div>
	  </ul>
   <div class="element"></div>
   <div class="element"></div>
</div>

</body>
</html>


Salut, ok lol j'avais mal compris:
voici le même résultat avec un peu moins de code html ainsi que de code css

Bye Smiley cligne
Modifié par Oryo (17 Nov 2006 - 16:19)
Sujet clos
Aller à