28173 sujets

CSS et mise en forme, CSS3

Mise en forme en %

• Salut à tous... Voilà, je rencontre un stress de débutant, mais bon, il faut ce qu'il faut, et je ne parviens pas à voir ou j'ai fait une erreur...

• Voilà, en gros, je refais un site, ou j'ai envie de travailler %... Une composition toute simple.

->Un div de tete ( 100% )
->Un div pour le logo (100%)
->Un div pour englober mes deux blocs ( 90 % )
->Un div pour bloc de gauche (15% )
->Un div pour bloc de droite ( 60% )

Smiley biggol Smiley biggol

Jusque là, c'est tranquille !!! Mais le stress, c'est qu'en fait, mes 2 blocs ne rentrent pas dans mon bloc englobant...

Voici le code CSS-----------------------------------------
 body{
	margin: 0px;
	text-align: center;
}

#tete{
	height: 42px;
	width: 100%;
	background-image: url(Images/golo.gif);
	background-repeat: repeat-x;
}
#logo{
	background-image: url(Images/logo.gif);
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 100px;
}
#contenu{
	background-color: #FFFFFF;
	border: 1px solid #009FB8;
	margin-right: auto;
	margin-left: auto;
	width: 90%;
	padding: 10px;
}
#blocgauche{
	width: 15%;
	background-color: #CCCCCC;
	float: left;
	
}
#blocdroit{
	width: 60%;
	background-color: #CCCCCC;
	float: right;


Et voici mon code HTML------------------------------
<div id="tete"></div>
   <div id="logo"></div>
   <div id="contenu">
   	<div id="blocgauche">Ceci est le bloc gauche qui doit être englobé</div>
   	<div id="blocdroit">Ceci est le bloc droit qui doit être englobé</div>
   </div>


Je laisse pour finir une image pour visualiser cela... upload/14508-page.jpg

Merci d'avance !!!! Il faut obsolument que ce bloc rentre dans le cadre !!!!

François Smiley lol Smiley biggrin
Hello Halindel,

écoute le code marche, et c'est vraiment tranquille entre (), mais dans le IE, mon bloc englobant se retrouve alligné sur le bord gauche de mon écran...
non windows Smiley lol et je n'utilise que le code que tu as donnée donc j'en sais pas plus, mais chez moi c'est bien centré comme tu veux je pense.
Bah, pas la peine d'entrer dans des débats préjugés à l'avance.

Merci pour ton coup de main... Mais je dois trouver une soluce...
Rien compris à cet échange... Smiley biggol

FranZz, d'après ton code et ta capture d'écran, je vois que:

1. Tu as un problème de dépassement des flottants.

2. Ce comportement (dépassement des flottants) devrait être obtenu avec TOUS les navigateurs, à l'exception notable d'Internet Explorer pour Windows à cause d'un comportement non standard lié au HasLayout (voir à la FAQ du forum à ce sujet).

3. Pour les navigateurs autres qu'Internet Explorer pour Windows, on peut empêcher le dépassement des flottants via un contexte de formatage, que l'on obtiendra par exemple avec un overflow: auto ou overflow: hidden sur div#content.

4. Pour le centrage, il se peut qu'il ne soit pas correct avec Internet Explorer 5 et 6 notamment, pour peu que la page soit rendue en mode Quirks et pas en mode Standard (y a-t-il un Doctype complet, avec URL de la DTD, à cette page?).

5. Dans tous les cas, la technique des marges automatiques ne suffit pas à obtenir le centrage horizontal dans IE Win 5.x. Il faudra ruser un peu (un text-align: center sur body devrait faire l'affaire).

6. De toute façon, on n'a pas besoin des marges automatiques pour centrer ce bloc: il suffit de ne pas donner de largeur, et de lui attribuer des marges de 5% à gauche et à droite. Smiley cligne

Voili voilou.
MOI NON PLUS J'AI PAS COMPRIS GRAND CHOSE à MES POSTS... Smiley biggol Smiley biggol
POUR LE BODY align=center; ben c'est fait...

Sinon, ben quand je balance un overflow auto, j'ai tjs le meme stress sur IE Mac, mon bloc colle sur la gauche de mon écran !!!...
Sinon, après coup; la technique du "pas de valeur" de largeur, mais des marges de 5%, ben ça arrange tout !!!

Faut ruser quoi, toujours ruser...

Merci pour ce rusage Florent V Smiley langue Smiley langue Smiley murf
FranZz a écrit :
Sinon, ben quand je balance un overflow auto, j'ai tjs le meme stress sur IE Mac, mon bloc colle sur la gauche de mon écran !!!...

IE 5 Mac est un navigateur vieillissant, plus distribué depuis janvier 2006 (tout de même...), et aux parts de marché très rares.

Pour rappel, c'est un navigateur totalement différent d'IE pour Windows, donc le travail fait pour la compatibilité avec l'un ne profite pas nécessairement à l'autre.

Pour ma part, je ne perds pas de temps à tester la compatibilité avec ce navigateur, de même que je m'occupe très peu d'IE 5 pour Windows (un minimum car parts de marché un peu moins négligeables, mais pas plus que ça).

Il y a bien sûr toujours des situations particulières dans lesquelles il est important de prendre en compte tel ou tel navigateur (par exemple lorsqu'on développe une application intranet et qu'on sait que le parc de l'entreprise se partage entre IE 5.5 et IE 6.0), mais le cas général ça serait plutôt:
1 - faire un site en utilisant les standards bien supportés par les navigateurs modernes (dont IE7, Firefox, Safari, Opera...);
2 - travailler la compatibilité IE6, si besoin via des correctifs CSS adressés spécifiquement à ce navigateur via un commentaire conditionnel;
3 - si on a le temps et que l'ampleur du projet le justifie, travailler la compatibilité avec les navigateurs plus anciens: IE 5.0 et 5.5 (en priorité), Safari 1, Netscape 6/7, etc.
Modifié par Florent V. (29 Oct 2007 - 17:34)
et une petite div avec un clear:both; pour que ton cadre englobe bien tes deux divs contenues ?

<div id="englobante">
<div id="englobée_gche"></div>
<div id="englobée_droite"></div>

<div style="clear:both;"></div>
</div>


Je ne sais pas si j'ai bien compris ton pb mais j'ai eu souvent ce problème au début (enfin le tout début parce que je suis loin d'être au top now). Et en effet IE Mac n'est pas vraiment un standard, fais attention.

Tschüß,
Aurélia.
Sujet clos
Aller à