28172 sujets

CSS et mise en forme, CSS3

Question de mise en page !

Bonjour à toutes et à tous,

je vous sollicite pour vos conseilles avisés dans la mise page en HTML et CSS. Ce n'est qu'un exercice d'application, et je n'ai que deux questions à vous poser :

1) je désire créer quatre boites, le plus simplement du monde, afin de découper ma page en différentes divisions spécialisées. nous avons :

--> c'est volontaire de ne pas avoir mis de <!DOCTYPE> !

--> un conteneur qui sera ici le "body".

--> une en-tête "header" de dimension width=100% et height=20%

--> un menu "nav" de dimension width=25% et height=80%. Je désire mettre le menu soit à gauche ou soit à droite.

--> un corps "main" de dimension width=75% et height=60%

--> un pied de pahe "footer" de dimension width=100% et height=20%

Et voici le code HTML+CSS :
<html>
<head>
<title></title>
<style type="text/css>
* {
			margin				: 0;
			border				: none;
			padding				: 0;
}

html {
			overflow			: hidden;
}


body {
			overflow			: hidden;
}

#header {
			background-color	: red;
			width				: 100%;
			height				: 20%;
			float				: left;
}

#nav {
			background-color	: green;
			width				: 24.99%;
			height				: 80%;
			float				: left;
}

#main {
			background-color	: blue;
			width				: 75%;
			height				: 59.99%;
			float				: right;
}

#footer {
			background-color	: yellow;
			width				: 75%;
			height				: 20%;
			float				: left;
}

#clear {	clear				: both;
}

</style>
</head>

<body>
<div id="header"><h1>header</h1></div>
<div id="nav"><h1>navigator</h1></div>
<div id="main"><h1>main</h1></div>
<div id="footer"><h1>footer</h1></div>
<div id="clear"></div>
</body>
</html>
Est-ce la bonne méthode ?


2) avec cet exercice, j'ai constaté un bug sur MSIE 8.0 ! Lorsque je redimensionne mon navigateur, le constate qu'il y a une désorganisation des boites ? J'ai fait une recherche en fouillant dans la DOM et j'ai constaté en regardant les deux zones suivantes :

--> clientHeight
--> clientWidth

qu'il y avait un problème d'arrondis.
           height   width
body :      478      706
header :     96      706
nav :        382      177
main :       287      530
footer :      96      530
Faisons les calculs :

width à 25% --> 706 * 0.25 = 176.5
width à 75% --> 706 * 0.75 = 529.5

MSIE trouve 177 et 530. Nous aurions dû trouver soit 176 et 530 ou 177 et 529.

height à 20% --> 478 * 0.20 = 95.6
height à 60% --> 478 * 0.60 = 286.8
height à 80% --> 478 * 0.80 = 382.4

MSIE trouve 96, 287 et 382. Ils sont correctes !


Il semble que le problème des arrondis se porte sur le calcul au plus près. D'après moi, le calcul se fait de la facon suivante :

partie entière de (taille maximal * taux + 0.5)

c'est ce 0.5 qui pose problème.

J'ai trouvé une solution que j'ai appliqué dans mon CSS. Par exemple, pour la classe '#nav' et pour la propriété 'width', j'ai mis 24.99% au lieu de 25%.
Et de même pour la classe '#main' et pour la propriété 'height', j'ai mis 59.99% au lieu de 60%.


Est-ce la bonne méthode ?

Si vous avez des conseils à me donner, alors ouvrez le feu !

@+
Modifié par Artemus24 (02 Jul 2011 - 19:23)
Bonjour Artemus24,

Sans que je ne puisse apporter de réponse à ta question, il me semble que ta constatation rejoigne ce topic vieux de 6 ans déjà.

A+
Bonsoir à toutes et à tous,

ce n'est pas de l'aide que je demande mais bien des conseils auprès des experts que vous êtes tous car je suis encore débutant :

Premier conseil : D'abord, le code que j'ai donné ci-dessus, fonctionne correctement. Enfin tout est relatif puisqu'il s'agit d'un simple exercice. J'aimerai savoir si la technique que j'ai utilisé est correcte ou pas.

Mon conteneur "BODY" est défini à la taille de la fenêtre. Je place à l'intérieur des boîtes ayant une subdivision en pourcentage qui sont multiples de la taille de la fenêtre. Pour placer les boites, je fais deux choses :

1) dans le CSS, chaque "ID" associée à une boite contient :
FLOAT : LEFT ou FLOAT : RIGHT.
un WIDTH ou un HEIGHT en pourcentage.

Est-ce que je n'a pas trop abusé des FLOAT ? Existe-t-il une solution plus simple que la mienne ?

2) dans le HTML, l'ordre des <div id=".."> est important.

Donc ma question est : pour une mise en page assez simpliste, a-t-on le droit de casser le flux ? Je cherche à savoir si ce que j'ai fait correspond à la norme ?

Deuxième conseil : Le problème de MSIE 8.0 est un problème sur les arrondis. Je sait que ma solution fonctionne car je l'ai testé, mais chaque navigateur fonctionne selon ses propres règles. J'ai constaté que si l'on place 59.99% au lieu de 60%, le problème sera résolu sur MSIE 8.0 mais par contre sur Opéra il tronque la partie décimale ! Du coup, résoudre un problème d'arrondi sur MSIE 8.0 provoque une autre anomalie sur Opéra !

Hormis d'isoler les solutions pour chaque navigateur, dans ce cas de figure, on ne peut pas résoudre le problème par une solution générale. Avez-vous une idée à me communiquer sur la résolution de problèmes en général ?

@+
Sujet clos
Aller à