28173 sujets

CSS et mise en forme, CSS3

[résolu]Problème de positionnement de div Imbriquées

Bonjour,

j'ai un problème avec mon site.
Je veut positionner 4 div dans un autre div, de sorte à ce que ces 4 div soit postionés par rapport aux bords du div qui les contients.

Pour le 1er (menu sur la gauche) il n'y a pas de soucis, mais pour les autres ça marche pas bien, je suis obligé de mettre des marges négatives et énormes...

Le site : http://www.scoutorama.org/integration/
Les styles : http://www.scoutorama.org/integration/styles.css

Cela fait 2 semaines que je m'y suis mis à fond et n'ai touvé aucun site qui explique ce problème, ça serait cool si quelqu'un peut m'aider...
Modifié par windvins (04 Feb 2007 - 15:28)
Salut,

ça ressemble fortement au problème de gestion des floattants sous Firefox, parceque sous IE c'est nickel...

Essaye de placer un 

<hr style="clear: both; visibility: hidden" />

En dessous de tes trois Blocs de droite, juste avant la fermeture de celui qui les contient, pour le forcer à les contenir... Smiley langue

Cherches dans la FAQ avec "débordements de floattants" tu trouvera ton bonheur ici.
Modifié par Hum (27 Jan 2007 - 22:32)
Bonjour,

Il y a un petit mélange dans ton code !!
pour une idée
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>

<style type="text/css">
*{padding: 0; margin: 0;}

#header{
height: 80px;
margin: auto;
border: 1px solid purple;
}

#conteneur{
width: 800px;
margin: auto;
border: 1px solid red;
}

#conteneur_top{
background: orange;
height: 20px
}

#gauche{
float: left;

border: 1px solid black;
width: 150px;
margin-left: 20px; 
margin-top: 20px;
height: 400px
}

#centre{
border: 1px dashed blue;
margin-left: 190px;
margin-top: 20px;
width: 320px;
height: auto;
}

#centre1{
border: 1px solid blue;
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 200px
}

#centre2{
border: 1px solid blue;
margin: auto;
margin-bottom: 20px;
width: 90%;
height: 400px
}

#droite{
float: right;
border: 1px solid green;
margin-right: 20px;
margin-top: 100px;
width: 250px;
height: 300px
} 

#conteneur_bot{
clear: both;
background: orange;
height: 20px
}
</style>
</head>

<body>	
<div id="header">
header
</div>
<div id="conteneur">
	<div id="conteneur_top">bords arrondis
	</div>
	<div id="gauche">
	gauche
	</div>
	<div id="droite">
	droite
	</div>	 
	<div id="centre">
		<div id="centre1">
		articles
		</div>
		<div id="centre2">
		top10
		</div>
	</div>
	<div id="conteneur_bot">bords arrondis
	</div>
</div>
</body>
</html>


ps: les menus avec une liste c'est mieux qu'avec des <hn>
windvins a écrit :
Pour le 1er (menu sur la gauche) il n'y a pas de soucis, mais pour les autres ça marche pas bien, je suis obligé de mettre des marges négatives et énormes...

C'est normal, le positionnement relatif n'est absolument pas fait pour l'utilisation que tu en fais.

Avant de se lancer bille en tête dans une fausse solution, un petit passage en revue des différents types de positionnement en CSS ?
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/

À priori, le plus intéressant sera d'utiliser deux flottants, à la rigueur trois (et pas six ou douze, ne pas abuser des bonnes choses ! Smiley lol ), pour placer les éléments comme des colonnes.

Note : les deux blocs du milieu forment une « colonne » centrale. Les englober dans un même conteneur sera utile.

Un exemple :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
Remarque : vu qu'on est sur un design fixe en largeur, et si on ne veut pas le rendre fluide (snif), autant profiter de cet avantage pratique pour faire correspondre l'ordre de lecture gauche-droite avec l'ordre des éléments dans le code.
C'est bon, j'ai résolu le problème en adaptant le modèle de Ghost. Effectivement je n'avais pas utilisé les floattants, maintenant c'est bon je sais à quoi ça sert ! En plus la compatibilité sous internet explorer est bien meilleure (juste un ptit problème de png transparent)

Je vous remercie tous pour votre aide.

Un apperçu du résultat :
http://www.scoutorama.org/integration
Modifié par windvins (28 Jan 2007 - 15:45)
Non en fait ça ne vas pas du tout. J'ai fait l'erreur de ne pas tester mon site dès le début sous internet explorer, et le modèle fournit par Ghost ne fonctionne pas du tout sous internet explorer Smiley fache . Sous Firefox : aucun problèmes...

J'ai fait les test sous IE6, je nes sais pas ce que ça donne sous la version 7.

Si quelqu'un pouvait me dire ce qu'il faut modifier dans le modèle de Ghost pour le rendre compatible sous IE...
Bonjour,

div#droite est flottant à droite, mais 1) il est plus large (width: 320px) que nécessaire et 2) il déclenche deux bugs d'IE6.

Les bugs en question sont :
1 - Doubled Margin Bug : la marge à droite du premier bloc en float: right est doublée sous IE6. Ici, la marge de 20px donnera une marge de 40px. Faire une recherche sur le doubled margin bug pour un correctif.
2 - Les éléments ayant une dimension fixe sous IE perdent la capacité à être survolés par les flottants. Si un flottant est trop large, il repoussera tous les blocs adjacents ayant des dimensions fixes (ou tout autre propriété conférant le layout au bloc en question), au lieu de n'en repousser que le contenu (texte, images) ou les autres éléments flottants.

Corriger le doubled margin bug + la largeur excessive du flottant de droite devrait être suffisant.

Au passage : la plupart de tes blocs ont une hauteur fixe, et ne supportent donc pas l'agrandissement des polices. C'est dommage. À ce sujet :
Accessibilité : Agrandissement de la taille des polices
Sujet clos
Aller à