28172 sujets

CSS et mise en forme, CSS3

Problème de site avec float et ie6

Bonjour

j'aimerais avoir un design de site avec un header en haut, un menu sur la gauche et un contenu a sa droite.
le header en normal,
le menu en float: left

dans le contenu, il y a des boites flottantes en largeur de 33% ou moins par exemple
j'aimerais placer 3 boites qui remplissent presque tout l'écran mais centrées et donc le texte qui suit va a la ligne.
Pour faire ça j'ai entouré d'un div qui est censé remplir tout l'écran, mais non, sous ie6.

Voici des images:
[img=http://img300.imageshack.us/img300/2457/sanstitrelv4.th.png]

voici le code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>test</title>
	<style type="text/css">
		body {
			margin:0;
			padding:0;
		}
		
		#container {
			margin:0;
			padding:0;
		}
		
		#header {
			clear:both;
			border:solid 1px purple;
			margin-bottom:10px;
		}
		
		#gauche {
			float:left;
			width:154px;
			margin:0;
			padding:0;
		}
		
		#gauche2 {
			width:154px;
			border:solid 1px black;
			margin-bottom:10px;
			margin-right:5px;
			margin-left:10px;
			margin-top:0;
			padding:0;
		}
		
		#milieu {
			margin:0;
			padding:0;
			padding-left:174px;
			

		}
		
		#milieu2 {
			margin:0 10px 10px 0;
			border:solid 1px red;
			
			
		}
		
		#bas {
			clear:both;
			border:solid 1px green;
		}
		
		.clear {
			height:1%;
			overflow:hidden;
			
		}
		
		
	</style>
</head>
<body>
<div id="container">
	<div id="header">header</div>

	<div id="gauche">
		<div id="gauche2">
			blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>blah gauche<br>
		</div>
	</div>
	<div id="milieu">
		<div id="milieu2">
			le milieule milieule milieule milieule <br><br>
			<div style="overflow:hidden;text-align:center;padding:0;background-color:red;">z
				<p style="border:solid 1px black;float:left;width:13%;margin:0;padding:0;">float<br>float</p>
				<p style="border:solid 1px black;float:left;width:33%;margin:0;padding:0;">float<br>float</p>
				<p style="border:solid 1px black;float:left;width:33%;margin:0;padding:0;">float<br>float</p>

			</div>
			milieule milieule 
			<p style="text-align:center;overflow:hidden;background-color:green;">100%!</p>
			milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieule milieu
		</div>
	</div>

	<div id="bas">footer</div>
</div>
</body>
</html>

Modifié par madri2 (03 Feb 2009 - 17:59)
la solution que j'avais trouvé c'est de mettre le tout dans un tableau et un td pour le menu et un td pour le contenu, du coup je peux utiliser "clear" pour aller à la ligne après les 3 blocs flottant
Salut,

Moi j'ai trouvé une meilleure solution, tu détectes le navigateur avec php, et si c'est IE6, alors tu affiches une grosse box rouge "Attention ce site n'est pas fait pour les vieilleries de Microsoft, passez donc à IE7 rapidement !"

C'est bien moins prise de tete !
Je dirais que la réponse se trouve en bonne partie par ici:
http://covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Le overflow:hidden sur ton bloc au fond rouge empêche les flottants de dépasser (ce qu'ils feraient en temps normal) car il crée ce qu'on appelle un contexte de formatage. Ça marche partout... sauf dans IE6 (pas de problème dans IE7). Pour obtenir quelque chose d'équivalent, un faut conférer le layout à l'élément.

À lire: L’étrange HasLayout de Monsieur Internet Explorer.
hum donc il faut que je mette height:1% sur mes conteneurs, on dirais que ça marche!
merci, je vais étudier ce truc..
Modifié par madri2 (04 Feb 2009 - 15:00)
en fait, avec des éléments plus complexe ça ne fonctionne pas,
le overflow hidden devrait pouvoir etre supprimé et fonctionner quand meme
comment centrer mes 3 blocs flottants ?

et de manière plus générale,

comment je dois m'y prendre pour faire ça:
le design du fichier plus haut, et après un nombre illimité de blocs dans le contenu qui peuvent remplir ou pas toute la largeur disponible (mais leur taille est en pourcent ou en fixe)

edit: on m'a suggéré de mettre le menu en absolute et un padding-left pour le contenu
Modifié par madri2 (04 Feb 2009 - 16:17)
Sujet clos
Aller à