[Résolu] Mon passage des frames à l'overflow

Bonjour à tous,
J'ai créée un petit site sans prétention, en autodidacte.
Voulant avoir deux menus fixes (haut et gauche), j'ai pris pour point de départ la techniques des frames.
Aujourd'hui, après tout ce que j'ai pu lire sur les frames, le problème du référencement de mon site sur google où seul le cadre central apparaît et mon incapacité à valider mon site entièrement en W3C (je n'arrive pas à faire de DTD personnalisé), je veux supprimer toutes ces frames.
Il m'est apparu alors que les overflows étaient la meilleure solution. Pouvez-vous d'ailleurs me confirmer si c'est la meilleur alternative aux frames (afin de garder mes menus fixes)?
J'ai déjà créée une page de base, mais je ne comprend pas tout.
Mon problème principal (hormis toutes les erreurs que je ne vois pas) :
Sous IE, y'à un bout du header qui est blanc.
Sous FF, y'à une scrollbar en bas et j'en veux pas.

Si vous avez des solutions à m'apporter, des conseils ou même des critiques, n'hésitez pas, je suis là pour ça.
Modifié par MissGG (18 Feb 2007 - 05:37)

MissGG a écrit :
Voulant avoir deux menus fixes (haut et gauche), j'ai pris pour point de départ la techniques des frames.

Argh, des menus fixes, les gens sont vraiment masos...

MissGG a écrit :
Il m'est apparu alors que les overflows étaient la meilleure solution. Pouvez-vous d'ailleurs me confirmer si c'est la meilleur alternative aux frames (afin de garder mes menus fixes)?

Les overflow sont un bricolage à mon sens peu recommandable.
La meilleure alternative, c'est le positionnement fixe (position: fixed), qui est beaucoup plus propre et maitrisable. Comme IE6 ne le comprend pas, on pourra, via les commentaires conditionnels, lui adresser un style particulier (passer le menu en position: absolute), ce qui fera qu'on aura un menu fixe dans Firefox, Opera, Safari, Konqueror et IE7, mais pas dans IE6.

MissGG a écrit :
J'ai déjà créée une page de base, mais je ne comprend pas tout.
Mon problème principal (hormis toutes les erreurs que je ne vois pas) :
Sous IE, y'à un bout du header qui est blanc.
Sous FF, y'à une scrollbar en bas et j'en veux pas.

Pas le temps de faire du debugging pour IE tout de suite, mais sur le dernier point : pour ne pas avoir de barre de défilement en bas, il suffit d'avoir un contenu dont la largeur ne dépasse pas les 100% de la largeur de l'élément html.
Ici, tu as un body avec une largeur de 100% et une marge à gauche de 142px, ce qui va faire un espace occupé total trop large de 142px.
En virant le width: 100%;, il y a peut-être moyen d'arranger les choses.

MissGG a écrit :
Si vous avez des solutions à m'apporter, des conseils ou même des critiques, n'hésitez pas, je suis là pour ça.

Une critique : le texte est peu lisible quand il est superposé à l'image de la voiture. Ça n'empêche pas la lecture (du moins si on a une bonne vue, ce qui n'est pas le cas de tout le monde), mais ça la ralentit.
Un conseil : ne pas se lancer dans des choses compliquées demandant des bidouillages (comme les menus fixes, par exemple) avant d'avoir quelques connaissances supplémentaires en CSS. Commencer par faire des choses simples. La simplicité permet souvent de faire des choses lisibles et agréables, ce qui reste encore la meilleure manière de mettre en avant un contenu.
Modifié par mpop (25 Nov 2006 - 12:48)

Bonsoir mpop et merci d'avoir répondu,

Tu dis :

a écrit :
Argh, des menus fixes, les gens sont vraiment masos...

Lol, eh oui, je suis mazo. Désolé mais c'est le seul point où je ne changerai pas d'avis. Je souhaite absolument conserver le header et le menu en fixe.
Pour IE, j'ai fait un espèce de hacked et il arrive à afficher mes parties en fixe.
Pour la scrollbar horizontal sous FF, j'ai suivi ton conseil ce qui a résolu mon problème. Merci.
Par contre, sous IE, y'a toujours un bout du menu qui apparaît blanc (Je me demande si il n'est pas de la taille de mon menu et que ça viendrait là). As-tu une solution à m'apporter ou une piste, car je ne vois pas d'où viens le problème?
Y'a un autre souci, sous FF, l'image de fond bouge (ce qui est dangereux pour les epileptiques). D'où vient le problème? L'image est en fixed.
En ce qui concerne l'interface, elle n'est pas aboutit, je me réserve la refonte, une fois que les frames seront virer.
Je précise que c'est mon premier site et que je m'attaquerai au design bientôt.
Modifié par MissGG (25 Nov 2006 - 22:34)

MissGG a écrit :
Lol, eh oui, je suis mazo. Désolé mais c'est le seul point où je ne changerai pas d'avis. Je souhaite absolument conserver le header et le menu en fixe.

Absolument ? Tu veux dire que c'est un besoin essentiel pour l'ergonomie de ton site, qui sinon sera moins utilisable ou moins accessible ?

D'expérience, je dirais qu'il s'agit (dans 90%) plutôt d'une lubie de designer plutôt que d'un besoin réel. Les lubies de designer ne sont pas mauvaises en elles-même (ça permet également aux sites de ne pas tous se ressembler entre eux, ce qui est déjà pas mal), mais dans certains cas précis elles peuvent amener à choisir des solutions peu robustes pour implémenter un design, ce qui est assez regrettable.

Je trouve dommage, pour la réalisation d'un premier site, de se lancer dans ce genre de bidouillages. Mais bon, ce n'est pas une condamnation, juste un avis personnel.

Par contre, je serais bien en mal de faire du debugging sur ce genre de configuration bricolée. Si tu veux des informations sur la solution intermédiaire du position:fixed dégradé en position: absolute pour IE 6 et inférieurs, fais-moi signe.

Pour le reste, je laisse ceux qui sont plus habitués au bidouillage que moi répondre.

Je ne comprends pas qu'avec tous les moyens qu'on a en programmation, il soit si difficile d'avoir 2 menus fixes.
Certes, c'est une lubie de ma part mais aussi des deux personnes pour qui j'ai fait ce site et qui tiennent justement à ce qu'il reste ainsi.
Aujourd'hui, je veux virer les frames, notamment à cause du référencement sur google.
Mais, si garder mes deux menus fixes est quasi impossible pour qu'il soit affiché de manière identique ss FF et IE, je vais devoir abandonner cette lubie, sniff. Et, en ce cas, je suis preneuse de tes conseils. J'aimerai que les menus ne se rechargent pas sur toutes les pages. Je fais un include en php et pis c'est tout donc.
Concernant l'interface, ils veulent la garder ainsi pour l'instant. Moi, je suis d'accord qu'elle est trop simple et qu'au niveau de la lecture, les couleurs n'aident pas.
Donc, je suis ouvert à tes critiques.
Et après, je négocierai les transformations
Modifié par MissGG (27 Nov 2006 - 15:25)

Salut.

MissGG a écrit :
Aujourd'hui, je veux virer les frames, notamment à cause du référencement sur google.
Mais, si garder mes deux menus fixes est quasi impossible pour qu'il soit affiché de manière identique ss FF et IE, je vais devoir abandonner cette lubie, sniff.

Si vraiment tu ne peux pas convaincre les demandeurs d'accepter la dégradation sur IE6, alors il ne te reste qu'à revenir à un frameset*. Les cadres ne sont pas exclus des standards, mais ils sont à réserver à des utilisations particulières, où ils sont vraiment utiles. Ce qui n'est pas le cas ici, comme l'a souligné mpop.

*Mais fais-leur miroiter les avantages de la solution alternative (accessibilité, légèreté, et surtout référencement amélioré) avant de recommencer

MissGG a écrit :
Je ne comprends pas qu'avec tous les moyens qu'on a en programmation, il soit si difficile d'avoir 2 menus fixes.

Ce n'est pas la faute des feuilles de style si le navigateur le plus populaire au monde est une antiquité Supprime IE6 (et les -encore- plus anciens) de la surface du globe, et tu pourras te contenter d'utiliser les position: fixed pour avoir un rendu impeccable sur tous les navigateurs ... mais gardons les détails pour vendredÿ
Modifié par Sopo (27 Nov 2006 - 15:39)

Je donne juste une piste ou deux sur la solution du position: fixed avec dégradation gracieuse pour IE6.

On va faire une interface « toute simple », sans overflow et autres joyeusetés.

<body>
	<div id="entete">
	</div>

	<div id="menu">
	</div>
	
	<div id="contenu">
	...
	</div>
</body>

On commencera par positionner les éléments fixes de la même manière que si l'on voulait les positionner en absolu :

div#entete {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: skyblue;
}
div#menu {
	position: fixed;
	top: 100px;
	left: 0px;
	width: 120px;
}

Les dimensions sont bien sûr indicatives.
Le menu de gauche n'a pas besoin d'aller tout en bas. Pour le fond en image qui donne l'impression d'avoir une « colonne » sur toute la hauteur à gauche, on se contentera de le mettre comme image de fond de l'élément body, et tout ira bien.

Il ne reste plus qu'à adapter pour IE6. Pour ça, on va utiliser non pas un hack CSS, mais plutôt les commentaires conditionnels :

<head>
	...
	<link href="standard.css" rel="stylesheet" type="text/css" />
	<!--[if lte IE 6]>
		<link href="ie-only.css" rel="stylesheet" type="text/css" />
	<![endif]-->
</head>

Et dans la feuille de style pour IE6 et inférieurs (lte = less than or equal), on applique un correctif :

div#entete {
	position: absolute;
}
div#menu {
	position: absolute;
	top: 100px;
	left: 0px;
	width: 120px;
}

Et voilà, ça devrait faire l'affaire.

Note en passant : on aura peut-être besoin de supprimer les marges et padding des éléments html et body.

Bonsoir à tous,
Je ne savais pas ce que c'était que la dégradation IE6.
Donc, si j'ai bien compris, je peux avoir ce que je veux sous FF et Cie, mais pas sous IE?
J'ai mis en ligne après modif.
Mais pour IE, la page affiche toute noire. J'vais m'pencher sur la question car j'ai dû faire une erreur.

arf, fallait que je change [if lte IE 6] en [if lte IE 7] car je suis passé au 7 (update windows) donc forcément.

MissGG a écrit :
arf, fallait que je change [if lte IE 6] en [if lte IE 7] car je suis passé au 7 (update windows) donc forcément.

Ah mais non, pas du tout !
Le « less than / equal » n'est pas là pour rien : on veut que les correctifs s'appliquent à IE5, IE5.5 et IE6, mais pas à IE7, car IE7 sait faire du positionnement fixe (comme Opera, Safari, Firefox...). C'est d'ailleurs pour ça que la dégradation gracieuse commence à devenir intéressante : d'ici quelques mois, la part de personnes qui pourra voir la version « plus mieux » et non pas uniquement la version « accessible et fonctionnelle mais pas optimale » passera de 15-20% à... quoi... 50% ? 60% ?

Là dégradation gracieuse pour ces propriétés CSS non comprises par IE6 mais comprises par IE7 commence donc à devenir très intéressante, alors qu'elle était assez abstraite jusqu'ici.

Le code que j'ai proposé est donc à conserver tel quel (pour les commentaires conditionnels), et à tester avec IE7 et IE6 pour vérifier que tout ça marche bien.

Ca marche pas sous IE...

MissGG a écrit :
Ca marche pas sous IE...

Lequel d'IE

Je suis au 7 actuellement.
Mon but est de virer les frames de mon site actuel qui lui marche ss IE.
Modifié par MissGG (18 Feb 2007 - 05:38)

J'ai suivi les différents conseils que vous m'avez donné et vous en remercie.
J'avais mis de côté le site quelques temps et là j'y retourne avec la ferme attention de régler ce problème de frame avant de (re)faire le design.
J'espère que vous pourrez m'aider à nouveau, car ça marche bien sous firefox mais pas sous IE7 (et pour les autres IE, je sais pas).
Merci d'avance de m'expliquer c'qui cloche car je vois pas.

Mon problème n'est toujours pas résolu, z' avez pas une petite idée d'où ça vient car je vois vraiment pas.
Merci d'avance.

J'ai réussi à ce que ça s'affiche bien dans IE7 grâce à Florent V. dans un message de karnabal résolu ci-dessous. Merci
J'avais pas mis les crochets autour du endif.
Toujours les problèmes d'espace ss FF avant mon titre et mon copyright. Je cherche...

Voici quelques pages de mon site, sans frame. Dites-moi si ca va ou pas. Seules les pages accueil, présentation, ma cox, discussion, contacts marchent. Car pour les autres, j'ai pas mis à jour car ça passe par une base de données. Je le ferais quand je mettrai en ligne le site sans frame.
Y'a toujours un problème avec les espaces avant mon titre et après mon copyright ss FF, mais pas ss IE. Je comprends pas pourquoi.
J'arrive pas à cadrer mon fond comme sur le site sans frame.
Voilà.
J'espère que vous critiquerez bien le code.
Pour le design, je m'en moque pour l'instant.
Merci d'avance.

Salut

Quel est-le problème avec le "cadrage" de l'arrière-plan ? Que veux-tu faire ?

Pour ton code, il y a deux trois choses que tu pourrais nettoyer :

<div id="menu"><br><br><br><br><br><br><br><div class="menutitre">Menu</div><br>

Serait avantageusement remplacé par un titre, avec des marges déterminées via CSS ;

<li><div class="menulien"><a href="nimp.htm" class="a" TARGET="fond">Présentation</a></div><br></li>

le <div> à l'intérieur des <li> est inutile, tu peux tout à fait styler les li directement. Et que font les <br> là-dedans ?

L'attribut TARGET de tes liens est inutile, si tu n'as plus de frames

Tu pourrais aussi utiliser les sélecteurs CSS au lieu d'ajouter une classe à tous les liens, puisqu'il n'y a de toutes façons qu'une liste dans "div#menu" :

HTML:
<div id="menu">
   <h2>Menu</h2>
   <ul>
      <li><a href="..." title="...">Présentation</a></li>
      <li><a href="..." title="...">Portnawak</a></li>
      ...
   </ul>
</div>

CSS:
#menu ul {
   ...
}
#menu li {
   ...
}
#menu li a {
   ...
}

salut,

Merci de tes conseils.
Je suis en train de faire les modifs . Je fais signe dès que c'est ok.

Voilà modif effectué