Largeur qui varie selon le moteur (webkit, gecko..)

**Halex78** · 25/08/2012, 20h23

Bonsoir,

J'ai créé une mise en page flexible, ici http://www.mereinetidor.com

Idéalement, les deux blocs visibles, c'est à dire les menus à gauche et le contenu de la page à droite, doivent remplir la totalité de la page en largeur, et ce quelquesoit la résolution, la taille de la fenêtre etc.
Cela fonctionne parfaitement sous firefox, mais sous safari, chrome, il se produit un phénomène étrange... en réduisant la taille de la fenêtre, on remarquera que le résultat souhaité (aucun espace entre les deux blocs cités) apparaît périodiquement... à vous de tester bien sûr.

Comment résoudre ce problème ? (les css sont accessibles via firebug bien sûr)
les blocs ont pour id "menu" et "txtcentre"

**Muchos** · 25/08/2012, 23h29

Selon moi, c'est à cause de la mise en page elle-même.
Là où vous pourriez simplement coder comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<style type="text/css">
#menu {
        width: 33%;
        float: left;
}
#txtcentre {
        width: 66%;
        float: left;
}
</style>
 
<body>
	<div id="menu">Menu</div>
	<div id="txtcentre">Accueil</div>
</body>

Vous avez fait comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style type="text/css">
#menu {
        float: right;
        overflow: hidden;
        padding: 1.64474%;
        width: 58.5152%;
}
#txtcentre {
        padding: 1.64474%;
        width: 34.9058%;
}
</style>
 
<body>
	<div id="txtcentre">Accueil</div>
	<div id="menu">Menu</div>
</body>

Non seulement le menu apparait après le grand texte si on désactive les styles, mais en plus les boites ne collent pas bien à cause du `float: right;'.
PS: wtf avec les pourcentages ? oO

**Halex78** · 25/08/2012, 23h57

eh bien, techniquement parlant, je ne vois pas ce que ca change...

Le menu je le place après, car quand je mettrai des media queries pour l'affichage sur mobile, je veux que les menus soient après la page, quitte à insérer un bouton permettant de faire défiler jusqu'à eux.

Les pourcentages, c'est mon petit délire, j'avais envie d'utiliser le ratio du nombre d'or phi... 1.618 d'où ces pourcentages abominables, qui selon moi ne sont pas censés poser problème... non ?

Je veux bien admettre que l'organisation de ma page avec le menu après le corps est exotique... Mais quitte à les renommer chacun pour les mettre dans un autre ordre, je ne pense pas que le navigateur nous fasse une crise à cause d'un ordre conventionnel ?

Ce serait alors le float:right qui pose problème ?
Dans ce cas comment faire pour avoir ce que j'ai actuellement en "parfait", c'est à dire avec les boîtes qui collent, et avec de plus les menus après la page lorsque le site est affiché sur mobile ?

**Muchos** · 26/08/2012, 15h34

quand je mettrai des media queries pour l'affichage sur mobile, je veux que les menus soient après la page

Oui, mais les medias queries c'est au niveau des css. Le code html doit être logique et reste inchangé.

Dans ce cas comment faire pour avoir ce que j'ai actuellement en "parfait"…

Justement, le pixel-perfect n'existe pas en web. L'usage du nombre d'or, c'est une idée de webdesign qui a eu le mérite de repenser l'ergonomie des sites, mais ça ne tient pas dans l'absolu car un design varie toujours selon le navigateur, l'OS, la config utilisateur…
Donc, plus la css sera simple, mieux ce sera. D'après moi, votre code doit être plus simple, plus logique.

Je précise aussi que votre mise en page n'est pas flexible (en particulier, votre titre ne devrait pas être une image).

**Halex78** · 26/08/2012, 17h13

Oui c'est exact, mon code html doit resté inchangé, mais cela ne répond pas à ma question qui est donc de mettre proprement les menus à la suite de la page lors de l'affichage sur mobile.
Concernant ma "logique", elle est simple : après avoir lu le contenu d'une page, le visiteur peut choisir diverses portes de sortie, d'où l'emplacement des menus. Mais cela n'est qu'une question d'organisation, et n'affecte en rien l'interprétation qu'a le navigateur de la page.

Je suis d'accord pour le pixel perfect, et il est de ce fait vrai que deux boîtes flottantes occasionneraient des défauts peu visibles, puisque situés à la périphérie de la page, et non entre les deux boîtes, je retiens donc cette solution.

Pour le nombre d'or, je ne suis pas totalement d'accord... C'est plus simple du point de vue de l'humain puisque les ratios sont rationnels, donc des suites de chiffres finies, mais du point de vue de l'ordinateur, il n'y a aucune différence... c'est une suite de chiffres à interpréter de toute façon.

Puisque ça fonctionne parfaitement sur firefox, je me suis demandé ce qui pouvait bien foirer sous chrome, mais votre solution des deux boîtes flottantes me paraît être la meilleure

Et pour la mise en page en flexible... Je ne vois pas trop l'intérêt de souligner ce détail, mais bon merci quand même pour l'information.

Donc en résumé, je respecte totalement votre respect des conventions et des codes, en ce qui concerne l'organisation du code etc., mais je ne la trouve pas plus logique que la mienne (pour le moment, peut être que quelqu'un saura me convaincre plus tard), et la simplicité du code est sensiblement égale, excepté la longueur des pourcentages, qui n'entrent selon moi pas en compte dans les détails qui font la simplicité du code.

Merci beaucoup de m'avoir accordé votre attention en tout cas

Largeur qui varie selon le moteur (webkit, gecko..)

Dimensionnement en CSS

Discussions similaires

Partager

Partager