28220 sujets

CSS et mise en forme, CSS3

[résolu]Probleme de position de div

voila je comprend pas pourquoi mon image de droite div bandeau-avion(avion )
ne colle pas a gauche et en haut comme les autres ,



Le rendu
EDIT par Igor : attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.

Le html

<!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>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="contener">
<div id="bandeau">
<div id="logo"></div>
<div id="pub"></div>
<div id="bandeau_bas"></div>
<div id="bandeau_avion"></div><!-- ferme div bandeau avion -->

</div>   <!-- ferme div bandeau -->
</div>  <!-- ferme div contener -->
</body>
</html>


la css

html , body {
	font:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin-left: 0px;
	width:100%;
}
#contener{
background-color:#CCCCCC;
width:955px;
height:500px;
margin-left:0px;
}
/*////////////////////////////////////////////////////////////////
//				Le bandeau			       //
////////////////////////////////////////////////////////////////*/
#bandeau{
width:955px;
height:139px;
background-color:#00CC66;
float:left;
}
#logo{
background-image:url(images/bandeau_logo.gif);
background-repeat:no-repeat;
width:254px;
height:139px;
display:block;
float:left;
}
#pub{
background-color:#CCCC66;
width:468px;
height:70px;
float:left;
}
#bandeau_bas{
background-image:url(images/bandeau_bas.gif);
background-repeat:repeat-x;
width:468px;
height:69px;
float:left;
}
#bandeau_avion
{
background-image:url(images/bandeau_avion.gif);
background-repeat:no-repeat;
width:233px;
height:139px;
float:right;
}

Modifié par nebil (06 Aug 2006 - 23:48)
Bonjour à toi aussi Smiley ohwell ,

nebil a écrit :
voila je comprend pk mon image de droite div bandeau-avion(avion )
ne colle pas a gauche et en haut comme les autres ,


Si tu comprend alors il n'y a pas de problème. Smiley cligne
Salut, place ta div avion avant celle du bas ... 


<!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>Document sans nom</title>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div id="contener">
<div id="bandeau">
<div id="logo"></div>
<div id="pub"></div>
<div id="bandeau_avion"></div><!-- ferme div bandeau avion -->
<div id="bandeau_bas"></div>

</div>   <!-- ferme div bandeau -->
</div>  <!-- ferme div contener -->

</body>

</html>


Ca devrait marcher ! Ciao

ps: Mdrrrrr igor ^^
Modifié par spiderneo (06 Aug 2006 - 22:27)
Bonjour à toi aussi Smiley ohwell Smiley ohwell

Es-tu certain de tes mesures en pixel, çà m'a l'air au cordeau cette mise en écran.
Enfin une page en ligne avec un contenu dans toutes ces div vides seraient un plus.

ps: ton précédent post est résolu ?
Modifié par Igor (06 Aug 2006 - 22:56)
A mon avis, c'est la largeur de ton contener qui est trop petite pour IE, puisque les distances sont défois différentes... essaye de l'agmenter beaucoup, comme ca tu verras si c'et ca ou pas !

cela dit je comprend pas pour tu ne fais pas qu'une seul image ...
Modifié par spiderneo (06 Aug 2006 - 22:55)
nebil a écrit :
agrandir le contener , non j'ai deja essayer sa marche pas


Smiley coucou
Tu lis ce que j'écris ou pas Smiley confuse

Es-tu certain d'avoir besoin de toutes ces div pour réaliser ce simple bandeau ?
Ton logo est-il un élément de contenu comme le titre du site, est-il support d'un lien ?
Ton avion est-il un élément de contenu, est-il support d'un lien ?

Toutes ces images doivent-elles être en background ?

Le mode de positionnement de ta page compète serait un plus (je me répète) pour savoir si c'est le plus adapté.
Modérateur
bonjour,


<edit> bon c'est resolu, c'est bien pour toi Smiley smile , ça n'avait pas avoir comme je le propose ici avec le sens dans lequel tes element arrivent dans le flux ? ...
ah , je fais aussi le même genre de remarque pour tes background ....
++
</edit>
En replaçant en premier dans le flux le flottant a droite, cela fonctionne. comme ceci:
<!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" xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>
html , body {
	font:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin-left: 0px;
	width:100%;
}
#contener{
background-color:#CCCCCC;
width:955px;
height:500px;
margin-left:0px;
}

/*////////////////////////////////////////////////////////////////
//				Le bandeau	                //
////////////////////////////////////////////////////////////////*/

#bandeau{
width:955px;
height:139px;
background-color:#00CC66;
float:left;
}
#logo{
background-image:url(images/bandeau_logo.gif);
background-repeat:no-repeat;
width:254px;
height:139px;
display:block;
float:left;background-color:#777;
}
#pub{
background-color:#CCCC66;
width:468px;
height:70px;
float:left;background-color:#555;

}

#bandeau_bas{
background-image:url(images/bandeau_bas.gif);
background-repeat:repeat-x;
width:468px;
height:69px;
float:left;background-color:#666;

}
#bandeau_avion
{
background-image:url(images/bandeau_avion.gif);
background-repeat:no-repeat;
width:233px;
height:139px;
float:right;background-color:#333;

}</style>
</head>
<body>
<div id="contener">
	<div id="bandeau">
	<div id="bandeau_avion">4</div> 
	<div id="logo">1</div>
	<div id="pub">2</div>
	<div id="bandeau_bas">3</div>
</div>   <!-- ferme div bandeau -->

<p>tester sans les images , les couleurs et numero permettent de visualiser 
les differentes zones. cela permet de "monter" un premier "gabarit" et de le tester
avant d'entammer la suite ...</p>
</div>  <!-- ferme div contener -->
</body>
</html>



en fait il te faut placer en premier les elements les plus haut, car des qu'un element devra faire un retour a la ligne , le suivant se placera a hauteur de celui-ci au plus haut si il a la place , ou passera en dessous.
<re-edit> Dans certaines version de IE, et d'opera (je ne 'ai pas tester dans les dernieres) il y a un "bug" qui fait que le dernier flottant remonte au lieu de s'aligner sur le dernier, mais il s'agit bien d'un bug et ce n'est pas le comportement normale</edit>

#pub et #bandeau_bas mis aprés logo et bandeau_avion dans le flux, pourront etre positionné en float a gauche ou a droite ou en marge equivalente, mais le bug des 3 pixels va se montrer . autant garder tout le monde en flottants.

en testant en local tu devrais retrouvé tes images aux bon endroits, pour les autres ce sont des tons de gris differents qui permetent de situé les zones par rapports aux autres.



les div , #bandeau_avion et #logo, s'ils ne reçoivent aucun texte pourrait etre de simple image avec un "alt="blabla".

++
Modifié par gcyrillus (07 Aug 2006 - 00:10)
Merci a vous , merci pour tes explications gcyrillus.
Modifié par nebil (07 Aug 2006 - 00:59)
Sujet clos
Aller à