[encore] pb d'alignement des div

[Wanbli]

Par avance, je suis désolée de poser la question pour la X-ième fois ...

J'ai lu avec intéret ... (beaucoup !!!) les questions passées, lu les réponses, essayé d'adapter les conseils et ....

Echec ...

Le problème :

Après une étude intensive (quoique parfois hasardeuse) du CSS , je me lance dans mes pages, avec mon ancien PC équipé exclusivement de .... IE (aïe pas taper).

Avec IE, le résultat était ... a peu pres a la hauteur de mes espérances.

Depuis, j'ai changé de PC et j'ai opté pour Mozilla histoire de varier les plaisirs, et surtout de voir à koi ressemblait mon site sur un autre navigateur ... et là ... horreur !

En largeur mes div se chevauchent alors que j'utilise une largeur et un positionnement en % ...

Jusque là mon calcul de positionnement était logique sur IE ... mais vu le bazar sur Moz', on dirait que sa largeur d'écran ne fait pas 100 % ...

Où est mon erreur ??? Enfin je me doute que vous allez sauter au plafond en voyant ma CSS (mea culpa ... je ne gère pas encore la notion d'héritage ...) mais si vous pouviez tout d'abord m"éclairer sur ce pb précis ...

MErci d'avance :

Exemple de page

La CSS

[kozlika]

Bonjour Wanbli,

Première piste :

Internet Explorer et les autres navigateurs n'ont pas la même façon de calculer les dimensions. Par exemple si tu écris :

.boite {

width:100px;

margin:10px;

padding:10px;

}

La largeur totale de la boite sera de 100px pour IE et de 120px pour les autres navigateurs.

Dans ta feuille de styles, si les pourcentages font bien 100% au total pour IE, il faut y ajouter les padding pour les autres, ce qui donne à ta page une dimension supérieure à 100%.

un lien où on visualise ça

Modifié 16 Juillet 2004 par kozlika

[Voulf]

Salut!

Il me semble que les valeurs en pourcentage ne fournissent pas les même rendu sur les deux navigateurs... Concernant le positionnement en absolu, je reste septique car je n'ai pas testé son utilisation de cette manière.

Cependant pour améliorer l'actuel tu peux commencer par modifier ceci :

.cadredroite {
	position: absolute;
	top: 190px;
	width: 10%;
/*On réduit un peu la largeur de cette encart */
	margin-left: 87%;
/* La propriété right devient un margin-left */
	text-align: center;
	background-color: #f7f7f7;
	border-left: 1px solid #3a3a3a;
	border-right: 1px solid #3a3a3a;
	border-top: 4px double #3a3a3a;
	border-bottom: 4px double #3a3a3a;
	padding: 5px;
	}

et ceci :

#menugene a {
	display: block;
	background-color: #3a3a3a;
	text-decoration: none;
	color: #e3e7ed;
/* On enlève le width 100% */
	font-size: 9pt;
	font-weight: 800;
	padding: 3px 5px 3px 5px;
	}

[kozlika]

Re-moi

Pour que tu voies, j'ai mis en ligne ta page html sans y toucher et la feuille css en enlevant tous les paddings.

http://kozlika.free.fr/test-moto/index_test.html

[edit]Oups, pardon Voulf t'a donné une solution[/edit]

Modifié 16 Juillet 2004 par kozlika

[Wanbli]

D'accord !

Et merci pour vos explications ... ceci confirme que les interprétations sont vraiment différentes d'un navigateur à l'autre ... donc pour faire universel, on est vraiment obligés de "composer" et de trouver le meilleur compomis ...

Si j'ai bien compris, il faut tester car ce n'est pas "scientifique" ...

J'y retourne !

Thanks !

[kozlika]

ceci confirme que les interprétations sont vraiment différentes d'un navigateur à l'autre ...

A dire vrai elles sont surtout très différentes de Internet Explorer à TOUS les autres

[Xavier]

Mais c'est parce que ce calcul dépend du mode de rendu utilisé. "Quirk" dans IE et "Standard" dans Mozilla probablement. Mais Mozilla peut rendre la page comme IE dans certains cas, et réciproquement.

Regarde ce Tableau récapitulatif, et trouve un doctype qui soit interprété de la même manière par tous les navigateurs

[Wanbli]

Bon, y'a du mieux !

Mais Voulf, j'ai un souci avec mes menus de gauche.

En effet, j'ai bien noté le fait d'enlever le width=100% pour l'affichage de mon menu de gauche.

#menugene a {
display: block;
background-color: #3a3a3a;
text-decoration: none;
color: #e3e7ed;
/* On enlève le width 100% */
font-size: 9pt;
font-weight: 800;
padding: 3px 5px 3px 5px;
}

Mais voici le dilemne :

Si je mets le width=100% l'apparence est nickel sur IE mais ça déborde horriblement sur Mozilla,

Si j'enlève cette ligne, l'apparence devient nickel sur Mozilla, mais IE me fait comme une impression de saut de ligne et mon menu de gauche s'étire en vertical ...

Alors ... question existentielle d'un vendredi soir ...

Existe-t-il des situations ou l'on ne peut pas etre 100 % compatible avec les navigateurs ??? Parce que dans mon cas ... pour un résultat satisfaisant sur IE et Mozilla ... je fais quoi la ???? J'ai testé à 95% ... résultat à se taper la tete contre les murs ...

[Voulf]

Salut

Je pense qu'il y a qques choses à corriger mais tu ne dois pas être loin du but. Comme ces modifications sont spécifiques elles entraineront surement d'autres modifications pour ajustement. Je te mets une liste de lien qui t'aideront à traiter les points séparéments, tu verras qu'il existe des techniques pour faire que celà soit visuellement quasi identique. Je dis bien quasi, il est des cas où cela n'est pas possible mais finalement quel est le plus important : le contenu ou sa mise en forme ?

J'ai compris bien des choses en lisant cet article : Pompage : Le Tao du webdesign

Pour la mise en page je te conseille ce site : Noodle Incident : Box Lessons.

Pour la réalisation du menu, je te conseille celui-ci : Listamatic.

Pour les questions sur les modèles de boites (Mode Standard, Mode Dégradé [Quirk Mode]), un petit tour sur Openweb : Modèles de boites.

Voilà, je ne sais pas où tu en et je te livre donc des liens que tu as peut-être déjà lu ?

Maintenant si tu veux un coup de main pour mettre en application ces différentes méthodes, tu fais un appel de phare et on fera le nécessaire

[Desesperance]

A noter dans les différences d'interprétation :

Le pourcentage d'un div en float peut-être totalement différent, 100% peuvent dire "100% de l'espace qui t'es réservé" et "100% de la largeur de la page" selon les navigateurs.

Si tu as des problèmes (mais apparament ce n'est pas le cas) mineurs avec un div à 100%; tu peux toujours essayer 98; 99% et ça permet d'éviter l'effet "tout en bas" sur Internet Explorer.