Mise en page : Bug FIREFOX only !

Normalement, c'est un problème tout simple, les div se positionnent mal entre elles.

J'ai essayé de faire mon site avec des <div> plutôt qu'un tableau.
Je l'ai testé sous Opéra (ca fonctionne bien) et à la fin sous IE pour verifier (cela fonctionne encore mieux, bonne surprise )

Puis, tout à la fin, je regarde sous FireFox, et la, catastrophe ...
Notez que je c'est pour ainsi dire ma premiere tentative de site web, donc ce n'est pas très bien écrit.
(je ne respecte pas vraiment les standards, mais j'ai fait gros gros efforts)

Bon, je vous laisse constater par vous meme :
Maquette du site en question
Pour avoir les 2 versions, je ne peux que vous demander de regarder avec 2 navigateurs

La difficultée est de faire un site 100% proportionnel à la resolution. (notez que cela fonctionne aussi bien en 100x100 que 1000x1000 sous ie ou Opera)
De plus, un certain nombre de positions sont relatives, comme le menu avec 4 boutons placés dans 4 div de 25%.
Le probleme, sous Firefox, c'est que 25+25+25+25 = 150%, enfin, cela change selon la taille de la fenetre.
(Il y a aussi 2 fausses frames au milieu, et notez que le vrai site est en php, mais la je ne mets que le code html : les liens ne fonctionnent pas)

Les div sont de toutes les couleurs pour vous pour pouvoir les différentier.

Le css :

BODY {
	margin-top: 3;
	margin-left: 3;
	margin-right: 3;
	margin-bottom: 3;
background: #6699CC;
}

.frame_titre { /* le titre en haut de page */
height: 9%;
background-color: #669900;
}


.menuH_cell_sel { /* case du menu haut (selectionnée) */
	background-color: #CCFFCC;
	height:5%;
	width:25%; /* 4 cases sur 100% : 25% */
	text-align:center;
	float:left;
	position:relative;
}

.menuH_cell_norm{ /* case du menu haut (non-selectionnée) */
	border-left: 10px solid #BB99CC;
	border-right: 10px solid #0099FF;
	background-color: #66CCCC;	
	height:5%;
	width:25%;
	float:left;
	position:relative;
}

.menuH_text{ /* texte dans les cases, pour essayer de le positionner, peut-on faire mieux ?*/
	margin-top:10px;
	text-align:center;
}

.ligne_v_h{ /* ligne noire separatrice menuH - bas de page */
	background-color: #000000;
	height: 1%; 
	width: 100%;
/* comment forcer le "float : passe a la ligne !" ? */
}

.bloc_v{ /* bloc vert d'encapsulation du reste de la page */
	background-color: #CCFFCC;
	height: 85%;
	width: 100%;
}


.frame_menu { /* fausse frame gauche : menu gauche */
line-height: 50px; /* interligne */
width: 15%;
height: 94%; /* pourquoi 94 ? j'en sais rien... */
overflow: auto;
float:left;
position:relative;
background-color: #CC00CC;
}

.frame_principale { /* fausse frame droite : main */
padding: 50px;
width: 84%; 
height: 94%;
overflow: auto;
float:left;
position:relative;
background-color: #CCCCFF;
}

ol,ul,p,body,td,tr,th,form { font-family: verdana,arial,helvetica,sans-serif; font-size:x-small;color: #000; }

h1 { font-size: x-large; font-family: verdana,arial,helvetica,sans-serif; }
h2 { font-size: large; font-family: verdana,arial,helvetica,sans-serif; }
h3 { font-size: medium; font-family: verdana,arial,helvetica,sans-serif; }
h4 { font-size: small; font-family: verdana,arial,helvetica,sans-serif;background-color: #CCCCFF;margin-left:15px;}
h5 { font-size: small; font-family: verdana,arial,helvetica,sans-serif;background-color:}
h6 { font-size: x-small; font-family: verdana,arial,helvetica,sans-serif; }

pre,tt { font-family: courier,sans-serif }

a:link { text-decoration:none; color:black }
a:visited { text-decoration:none; color:black }
a:active { text-decoration:none: color:gray }
a:hover { text-decoration:underline; color:red }

#menuH_text a:hover{ text-decoration:underline; color:#FFBFFF }
/* alors ca, ca marche pas */

Et le source je vous laisse aller à la page

Une premiere solution serait de remarquer que sous Opera et IE, il affiche les div de gauche à droite, de bas en haut, dans l'ordre de leurs declaration.
Sous Firefox, la ligne noire devrait separer le haut et le bas se retrouve déportée sur la droite, comment forcer de la mettre en dessous ?
Sinon, le vrai bug, c'est que 4 div de 25% mises cote à cote ne font pas 100% de la page, et c'est ca le probleme à resoudre
Encapsuler dans une autre div ?

Sinon, j'en profite, j'aurais 2 autres petites questions ...
- Le titre est dans un tableau pour etre centré en vertical, comment faire ca dans une div ?

- derniere ligne du css : j'ai essayé de modifier le a:hover pour quelque liens en particuliers, quelle est la façon la plus simple ? Comment le modifier pour une classe div particuliere ?
Modifié par Wiiip (18 Aug 2006 - 15:14)

Bonjour Wiiip,

Apparement tu n'utilises pas encore Opera 9, sinon tu aurais à peu près le même résultat qu'avec Firefox.

Quand une page n'a pas de doctype, Internet Explorer et Opera<9 ne calculent pas la dimension des boîtes d'une manière standard : la bordure et le padding est alors compris dans la largeur ou hauteur spécifiées.

Il faudrait donc choisir un doctype notamment pour que tous les navigateurs calculent les dimensions de la même façon (à l'exception d'IE 5.x).
Ce qui te permettrait par ailleurs de corriger les erreurs de la page grâce à un validateur (car il y en a )
Modifié par Alan (18 Aug 2006 - 15:54)

Oh, merci ^^
Maintenant, je sais à quoi sert ce bidule. '^^

C'est très gentil de ta part, maintenant, cela ne fonctionne plus du tout sur aucun navigateur alors

Mais, bon, dans ce cas, je fais comment pour le forcer à comprendre que 4 boites de largeur 25% tiennent sur la même ligne ?
'^^
(non, en fait, je viens de comprendre : il faut compter les marges)

Le validateur, j'avais deja regarde par curiosité, mais comme c'est mon premier site, et que j'ai envie de faire simple, je n'ai pas envie de m'embeter avec des erreurs aussi géniales que "character '>' is not allowed here." (en fin de balise) ou " character % is not allowed here." (lors de la définition d'une taille)

Si le %age n'est pas autorisé par la convention, alors, je ne me conformerais pas à la convention.
Modifié par Wiiip (18 Aug 2006 - 16:19)

Wiiip a écrit :


Le validateur, j'avais deja regarde par curiosité, mais comme c'est mon premier site, et que j'ai envie de faire simple, je n'ai pas envie de m'embeter avec des erreurs aussi géniales que "character '>' is not allowed here." (en fin de balise) ou " character % is not allowed here." (lors de la définition d'une taille)

Si le %age n'est pas autorisé par la convention, alors, je ne me conformerais pas à la convention.

Bonjour Wiiip,

Un peu de lecture:
Valider ? Pour quoi faire concrètement ?

Super !

Youpi '^^

Alors, en fait, ta solution, je ne l'aime pas du tout du tout ><

Parce qu'avant que j'ajoute ce stupide doctype, au moins, ils étaient TOUS d'accord sur une chose :
le bloc de "toto" ne tiendrait, et c'est la base du site, tiendrait dans un bloc de taille inférieure à 100%, de taille proportionnelle à a la résolution.

C'est quelque chose qui a été difficile à obtenir, et si je n'ai pas moyen de faire la même chose quand on ajoute le doc type, alors je ne mettrais pas le doc type.

(Mais au moins, je pourrais le faire qui fonctionne sans le doc type grace à ton information : ils tiennent pas compte des marges dans la taille '^^)

Wiiip a écrit :
C'est quelque chose qui a été difficile à obtenir, et si je n'ai pas moyen de faire la même chose quand on ajoute le doc type, alors je ne mettrais pas le doc type.

Bonjour Wiiip

Je ne pense pas que ce serait une bonne idée

Quand tu développes ton site, fais le d'abord pour un affichage correct sous firefox, ensuite tu n'as plus, si nécessaire, qu'à l'adapter pour les autres navigateurs... Ce sera beaucoup plus facile ainsi... Et avec un doctype

Finalement, il existe bien un moyen d'obtenir ce que je voulais tout en utilisant un doctype, il y a une ruse de sioux en écrivant html{ height:100%}

Cela donne ceci
(pour comprendre ce qui est différent de d'habitude, il faut rezise la fenetre)

Par contre, j'ai toujours du mal à comprendre
J'écris <div> toc </div> <div>tic</div>
et si les bloc toc et tic ont une hauteur fixée, le bloc tic peut possiblement commencer au meme endroit que le bloc toc ><

Mais, cela n'est vrai qu'avec firefox, avec IE, le bloc tic est donc plus gros. (pour test, mon bloc "tic" est la ligne de separation entre le corps et le menu au dessus. Sous FF, j'ai du donner une taille enorme pour qu'elle apparaisse, et sous IE, la taille enorme apparait donc en totalité)

Il y a un moyen de regler ce probleme ?
Modifié par Wiiip (29 Aug 2006 - 17:33)

Salut,
Au risque de passer pour la mauvaise de service....
quand je vois ça :

<div class="frame_titre">
			<table width=100% height=100%><tr id="menuH"><td align=center>
				<h1>Web Site</h1></td></tr>
			</table>

		</div>

Je me dis qu'il est vraiment nécessaire de reprendre les bases avant d'avancer (c'est pas pour casser le morale hein, mais parce que tu vas t'arracher les cheveux et la tête si tu ne te simplifie pas les choses....)
Parce que ça c'est pour faire simplement un titre qui prend toute la largeur de ta page avec du texte centré...

<h1>Web Site</h1>
avec dans ta CSS un simple h1 {text-align:center;}
et le tour est joué....

Pour tes liens, c'est pareil, jette un oeil aux exemples de mise en page d'alsa ou à la galerie de menu, simplifie, simplifie tes balises :
regarde du côté des effets de roll over tout en css pour tes liens, tu verras comment gérer des liens sous forme de blocs, ce qui t'évite de les mettre forcément dans des div et va te rendre le code bien plus lisible.
Avances pas à pas, avec un doctype et Firefox et son petit outil de validation pratique, dans la barre webdéveloppeur et tu vas arriver à un truc qui fonctionne pour tout le monde avec un code léger.... léger

/Edit/
J'oubliais : et n'oublie pas d'aller faire un tour dans la FAQ, pour la question des différences de marge autour des blocs d'un navigateur à l'autre
Modifié par cktoon (29 Aug 2006 - 19:18)