18085 sujets

Questions générales et questions de débutants

Pb de mise en page css

Bonjour,

le sujet a déjà été traité mais aucune réponse n'a été donné aussi je me permets de le relancer.

Voilà, je travaille sur une page composée d'une en-tête, d'une pseudo-frame et d'un footer.
Le but est que les trois éléments soient visible à l'écran en même temps et que le contenu de la pseudo frame soit scrollable.
C'est à dire que l'entête est collée en haut de page et que le footer est collé au bas de l'écran. La pseudoframe elle, doit remplir l'espace entre les deux et si besoin est, afficher un menu scrollable.
Sous Mozilla, tout s'affiche sans soucis... mais sous IE, c'est la catastrophe. L'attribut bottom n'étant pas interprété, on se retrouve avec des résultats plus qu'éléatoires et je ne sais plus quoi faire pour remédier à ce soucis...

merci d'avance

aiglobulles - bruno mercier

ps: page de visualisation du pb: http://globule.apinc.org/Cybernautes
ps2: merci de ne pas me demander pkoi je veux afficher cette page comme ça ou de me dire de changer de design... c'est pas ce que je demande Smiley cligne )
a écrit :
merci de ne pas me demander pkoi je veux afficher cette page comme ça ou de me dire de changer de design... c'est pas ce que je demande


Si un suicidaire me demande une arme, penses tu que ce soit mal de lui expliquer qu'il vaudrait mieux changer d'idée ?

Autre petite remarque :

quel est le rapport entre le fait que tu génère ta page avec php et la présentation que tu souhaites obtenir via CSS ?

Ta page utilise un include pour générer le document html complet, c'est une chose, mais une fois générée, il n'est plus question de php...

Tu veux que le contenu soit scrollable, il existe la propriété "overflow: auto;" combinée à une hauteur définie pour le contenu.

Mais ça pose le gros problème suivant : sous firefox, il n'est plus possible d'utiliser la molette de la souris pour scroller...

Puisque la hauteur du contenu est fixée, il n'y a rien de spécial à faire pour que le haut reste en haut et que le bas reste en bas...


PS: pour une fois j'éludes le truc avec les "pseudo frame" Smiley langue
Bonjour aiglobulles, et bienvenue,

Il y a tout de même un préalable, avant de tenter de répondre à ta question et de pouvoir résoudre ton problème de CSS : utiliser une Déclaration de Type de Document correcte et valider tes pages :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
    "[#red]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd[/#]">
[#red]<html [/#]xmlns="http://www.w3.org/1999/xhtml">
[#red]<html [/#] dir="ltr" lang="fr"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


- l'url incluse dans la DTD est celle de XHTML1.1 : voir le lien ci-dessus pour copier la DTD XHTML1.0 exacte
- Deux éléments <html>, c'est de trop Smiley cligne
- en revanche, un élément <head>, c'est utile...
- et il faudrait faire un choix sur l'ensemble de tes pages entre HTML4.01 et XHTML1.0, dont tu mélanges les syntaxes.

<edit> (l'extrait de code ci-dessus vient de ta page http://globule.apinc.org/Cybernautes/rubrique.php3?id_rubrique=2 , mais des problèmes similaires sont présents dans l'ensemble du site )
Modifié par Laurent Denis (24 Jul 2005 - 12:24)
bonjour aiglobulles et bienvenue aussi Smiley smile

La solution css à ta question est 

html,body {
height:100%;
}

#haut {
height:15%;/* à adapter */
}

#centre {
height:70%;
}

#bas {
height:15%;
}


La remarque de cedric concernant l'usage de la mollette sous firefox indique bien le problème que pose les pseudo frame css via zones scrollables. En fait dans le cas d'une navigation clavier ton contenu sera définitivement inaccessible.

Par ailleurs utiliser cette possibilité en l'associant à certaine technique php va te faire entrer dans un monde d'illusions plutôt ruineuses.

++
Bonjour et merci pour vos réponses...

En fait, je suis franchement paumé avec ces histoires de crossbrowser.... Les DTD, j'avoue ne jamais m'être éternisé dessus... tant que les pages s'affichent comme je l'entend, je suis heureux...

Mon gros gros soucis, c'est IE. Sous firefox, mon site s'affiche correctement, je ne lui demande rien de plus... quitte à devoir actionner la souris sur la bare de défilement, personne n'en mourra... Par contre, le site s'affiche n'importe comment sous IE à moins d'indiquer des valeurs fixes (70%; 15% etc..)
Dans l'absolu, on pourrai se dire que ce sont des pourcentages et que ça s'adaptera... mais le soucis, c'est que, mes bannières ont des valeurs définies. 119px pour celle du haut, 69 pour celle du bas, donc, fonction de la résolution de l'écran de mon visiteur, les pourcentgaes n'apporteront rien de plus...

Bon, je veux bien faire un effort pour les DTD, mais svp, aidez moi à trouver une solution...

Merci d'avance, aiglobulles qui commence à désespérer
aiglobulles a écrit :
Les DTD, j'avoue ne jamais m'être éternisé dessus... tant que les pages s'affichent comme je l'entend, je suis heureux...


Alors, vu sous cet angle, disons clairement que :
- le choix de la DTD a une influence directe sur l'affichage, car il bascule le navigateur dans l'un ou l'autre de ses modes de rendu. IE6 en particulier optera pour deux modes de calculs différents des tailles de boîtes CSS selon la DTD...
- les erreurs HTML, le code HTML invalide, etc. a également une influence directe sur l'affichage, car il rend totalement imprévisible le comportement de chaque navigateur qui passe dans son propre mode de gestion des erreurs.

Pour ces deux raisons, il est illusoire de commencer par autre chose qu'un code HTML valide selon une DTD bien déterminée pour régler un problème d'affichage Smiley cligne

Dans ton cas, la DTD XHTML1.0 stricte est appropriée. Sa syntaxe correcte est dans le lien donné ci-dessus. A partir de là, le valdateur HTML du W3C t'indiqueras les erreurs à corriger, et tu trouveras ici toute l'aide nécessaire...
Modifié par Laurent Denis (24 Jul 2005 - 14:18)
a écrit :
. Sous firefox, mon site s'affiche correctement, je ne lui demande rien de plus... quitte à devoir actionner la souris sur la bare de défilement, personne n'en mourra...


Smiley sweatdrop

Avec des idées pareilles, d'ici qq temps il n'y aura plus que toi qui pourra visualiser correctement ton site...

Mais bon , effectivement des sites du genre, je ne me suicide pas, je quitte le site...

Ceci dit, regarde des grands sites, genre amazon, ou autre, regarde des sites non commerciaux même, comme celui-ci par exemple, ...

Ont ils besoin de telles choses pour rendre le site attrayant ?

Non, ...

Il doit bien y avoir une raison non ?
Merci pour ces quelques précisions, mais alors, cela signifiet-il qu'en utilisant la DTD en question, IE serai capable d'interpreter correctement une fille de style incluant des notions comme "bottom" ?

Là, je viens de refaire la page en local uniquement à l'aide de CSS et de valeurs définies en pourcentage, mais dès que je modifie la résolution de l'écran, l'affichage du site se dégrade...
Cédric, je trouve tt de même dommage de devoir faire le même genre de présentation que les autres....

Si j'ai envie de faire ainsi, c'est parceque ça me plait, ni plus ni moins. Ca fait des jours que je perd mon temps à essayer de trouver une solution pour que ce fichu IE daigne afficher mon site correctement et nada...

Je trouve quand même dommage que sitôt qu'on essaye de faire autre chose que ce que l'on voit habituellement, on nous répond systématiquement ben les autres font pas comme toi, fais donc comme les autres... c'est pas génial pour la liberté de création... alors il me reste les iframes qui fonctionnent presque partout, mais là, on me dirai que ça plaira pas au W3C...

J'ai modifié la DTD, et nada, rien n'a changé, c'est même pire !! Là franchement, j'commence à désespérer... j'avais trouver une fois un gars qui avait fait un script justement parceque IE ne comprend pas l'attribut bottom... impossible de retrouver ce script.... et je ne comprend pas non plus pourquoi le div du milieu passe systématiquement sous le div du footer au lieu de stopper quand celui ci commence... Pffff, IE me gache la vie... je pèse mes mots... mais j'en ai franchement ras la casquette de ma casser la tête à cause de leur gueguerre commerciale à la noix...

Bon, je vais prendre l'air sinon je sens que j'vais finir par tout casser chez moi... désolé pour le dérangement...

Bon dimanche à tous et merci quand même.
aiglobulles a écrit :
Je trouve quand même dommage que sitôt qu'on essaye de faire autre chose que ce que l'on voit habituellement, on nous répond systématiquement ben les autres font pas comme toi, fais donc comme les autres... c'est pas génial pour la liberté de création...


Je pense qu'on pourrait effectivement recentrer ce topic sur le problème concret d'aiglobulles, qui a manifestement entendu les avertissements sur les div scrollables. C'est bon, on tourne la page sur ce sujet, svp.

aiglobulles a écrit :
J'ai modifié la DTD, et nada, rien n'a changé, c'est même pire !! Là franchement, j'commence à désespérer...


Le problème concret, donc. On ré-explique : modifier la DTD, c'est la première étape.
- La seconde étape, c'est de valider tes pages, et donc de modifier encore d'autres choses pour y parvenir.
- La troisième étape, alors et seulement alors, après avoir éliminé toutes les causes d'erreur non CSS, ce sera enfin, comme tu le réclames, de trouver comment faire en sorte que tu aies la présentation que tu souhaites dans Internet Explorer, si c'est possible.

Je regrette, aiglobulles, si tu t'impatientes : je ne demande pas mieux que te t'aider. Mais pas de perdre mon temps à bricoler une astuce CSS pour que ça passe vite fait mal fait avec un code HTML invalide.

Si cela te semble trop casse-pied, ou si tu es vraiment trop pressé, autant que tu simplifies les choses et que tu utilises :
- un tableau de présentation (si tu n'imbrique pas les tableaux, ce sera déjà mieux que rien)
- et un iframe (parfaitement autorisé par le W3C...)
Modifié par Laurent Denis (24 Jul 2005 - 17:14)
OK, Laurent,

je trouve ta reflexion censée et je pense que c'est très certainement la meilleure manière d'apprendre....
Je vais donc suivre la démarche que tu me conseilles.... à titre d'information, je viens de soumette ma page au validateur w3c et y a pas une ligne de correcte....

Avant de reprendre cette page, je pense que je vais tt de même reprendre l'iframe histoire d'avoir un site opérationnel au plus vite à défaut qu'il soit conforme aux standards... je reviendrai sur les standards à tête reposée...

merci pour tout
aiglobulles a écrit :
Avant de reprendre cette page, je pense que je vais tt de même reprendre l'iframe histoire d'avoir un site opérationnel au plus vite à défaut qu'il soit conforme aux standards... je reviendrai sur les standards à tête reposée...


Le passage aux standards peut être progressif, en effet. Faire une page valide XHTML1.0 transitional (ce coup-ci) avec l'iframe est déjà une bonne première étape Smiley cligne
Alors, quelqu'un a t-il une solution finalement ?

Merci d'avance

aiglobulles
Modifié par aiglobulles (28 Jul 2005 - 05:11)
Bon, l'est tôt, l'est temps d'aller se coucher, je m'arracherai ce qui me reste de cheveux demain Smiley cligne ))

Bye tous... et si jamais quelqu'un se décide à me filer une solution, je suis preneur Smiley langue
Modifié par aiglobulles (28 Jul 2005 - 05:13)
Sujet clos
Aller à