Bonjour à Tous,

je souhaite faire la mise en page suivante

1) dans l'en-tête de page, alignés de façon à occuper toute la largeur de fenêtre:

• un gif (bout rond de 'barre'),
• un gif en arrière plan (corps de la 'barre', pour écrire le titre par dessus et insérer le logo par dessus),
• puis un gif (bout rond de 'barre')

pour cela j'ai procédé de la façon suivante:
mais cela n'occupe qu'une partie de la largeur de fenêtre quelque soit le butineur... c pas trop joli du coup... j'ai essayé de ne pas mettre dans la boite entete mais alors cela apparait sur 3 lignes (quelque soit le navigateur)

2) en dessous, je veut mettre:

• un menu avec effets rollover par des boutons gifs (avec mon logo en dessous)
• un frame avec une barre de scroll

comme en utilisant les listes:

• je n'arrivais pas à utiliser 2 boutons différents
• je n'arrivais pas à positionner les boutons exactement à la bonne distance du bord de la fenêtre,
• je n'arrivait pas à positionner mon logo correctemet par rapport au menu....

j'ai utilisé une 'boite' dans laquelle j'ai mis mes boutons et mon logo...

tout cela donne:
là l'affichage est à peu près correct sous IE mais sous Mozilla:

• les boutons du menu sont collés contre le coté gauche de la fenêtre
• il y a une barre de scroll horizontale au butineur (j'en veut pas! je veux que cela occupe juste la place disponible dans la fenêtre)
• le frame est hyper loin (environ une largeur de menu en plus) du menu... comprend pas pourquoi ....

de plus, j'aimerais faire en sorte que le frame occupe 'la hauteur qui reste' entre l'en-tete et le pied, je vois pas comment faire... car quant je met 'auto' ou 100% il n'y a plus de barre de scroll...

3) en bas, je voudrais un pied de page de hauteur fixe 30px:

et là... sous IE, le pied de page fait une hauteur vertigineuse !!! et sous Mozilla, 'seulement' 3 cm environ ...

Quelqu'un a t'il des idées comment modifier cela ???

Très cordialement

j'édite pour poster une copie d'écran du 'but recherché', cette copie a été prise avec le site construit uniquement à base de frameset et javascripts... je veux refaire la même chose (sauf le bouton du pied de page dont je ne veux plus) mais en CSS, ET si le texte pouvait défiler dans le frame et s'arréter au survol de la souris ce serait génial

Bonjour,

Comme personne ne répond et que je progresse un peu quand même... pour la 'barre' du haut en modifiant le code de la façon suivante:Alors cela 'fonctionne', d'autant mieux que j'ai remis la 'barre' à l'endroit dans le HTML
Donc il reste le 'reste' à traiter

Très cordialement

NB1: pour ceux que cela intéresse d'avoir une idée 'globale' de ce que je suis en train de faire: cliquer là pour voir une discussion sur le sujet
NB2: j'ai commencé le CSS il y a moins d'une semaine... alors... HELP !!! AUX SECOURS !!! HILFE !!!

Bonsoir à tous,

comme peuvent le remarquer ceux qui me lisent, j'ai des soucis de postionnement car il me semble que, dans CSS, on ne puisse faire que des positionnements:

• en pourcentage de l'écran de l'ordinateur (et pas de la fenêtre ouverte)
• en absolu (pixel et autres)
• en adapté au contenu d'une boite....

du moins c'est ce que je crois comprendre de mes essais...

donc mes questions sont:

• est il possible de faire du positionnement par rapport à l'espace disponible dans la fenêtre du butineur ? (et pas en fonction de l'écran de l'ordinateur)
• existe t'il un moyen de faire comme le * dans frameset ? car cela permet d'avoir une taille de frame en fonction de la place qui reste dans le fenêtre du butineur... et donc d'avoir d'autres 'espaces' de tailles fixes sur la page

en attendant, j'ai fait une tentative avec un tableau (même si j'ai vu ici ou ailleurs que du coup ce serait moins lisible pour certaines personnes) dont j'ai fixé les caractérisitiques avec CSS

le résultat est légèrement moins pire que ci dessus, mais cependant reste assez chaotique,

donc si je ne trouve pas de solution je pense que je vais retourner aux frames, car sous cette forme (avec des framesets) au moins c'était visible/lisible par la majorité... en utilisant CSS, pour remplacer les frames, j'ai quelque chose d'illisible pour la majorité sauf si en mode texte :down: à l'impossible nul n'est tenu... après tout ce n'est pas un site 'grand public'

je vais continuer à faire des essais un ou deux jours, après cela, si cela continue à ne pas être concluant... et bien tant pis, j'utiliserais des framesets et CSS seulement pour les boutons et le style des textes....

Bonne nuit

Bonjour HadaDeLaluna,

Je fais partie de ceux qui te lisent...
Je dois même avouer que j'ai lu plusieurs fois, attentivement, ces deux messages.
Il est très difficile de te répondre parce que le problème que tu poses est trop vaste : il s'agit de la conception complète d'une page.

Tu dis avoir abordé les css depuis peu et j'ai l'impression que tu veux brûler les étapes.
As-tu lu et étudié ces pages sur Openweb ?
Tu auras une idée très précise de ce qu'il est possible de réaliser avec les feuilles de style et tu apprendras comment y parvenir.

Je crois que tu dois envisager le problème autrement : il ne faut pas vouloir refaire ton site à l'identique, simplement en changeant de technique. Il faut partir de zéro, en pensant dès le départ css.
Commence par "organiser" les différentes parties de ta page (avec juste un texte minimum, des couleurs de fond provisoires pour chaque blocs).
Une fois chaque bloc en place, tu peux aborder l'aspect graphique et mise en forme du texte.
Il te resteras ensuite à y ajouter le contenu que tu veux.

Tu auras certainement plus de suite à tes demandes en sériant les problèmes... une étape à la fois.

Re Bonjour Monique

Youupiiiiiee :yoot: enfin quelqu'un qui cause

Oui, je suis allée sur Openweb et mon code est le 'résultat' de ma lecture...

Le problème c'est que élément par élément cela marche, c'est ensemble que cela déc**ne, donc au niveau de la conception de la page:

l'organisation de la page est 'simple'

• une zone 'en-tête'
• une zone 'corps' avec
  • une zone 'menu vertical à gauche' avec 'logo en dessous'
  • une zone 'frame' à droite (avec barre 'scroll')
• une zone 'pied de page' avec (sous le menu) un compteur et (sous le frame) un pied de page 'classique' avec blabla classique

tant que je n'affiche ni les fonds de page (barre dans l'en-tête), ni les boutons (avec rollover sur fonds gif, inspirés d'Openweb) pas de problème... sauf la taille du frame qui ne s'adapte pas à la taille de fenêtre....

dès que j'introduis, le fond de la barre, les boutons, le logo, cela tourne à la cata... en ce moment sur Mozilla (en utilisant un tableau <table> car sinon c'est mon premier message qui s'applique en terme de description de l'affichage obtenu):

• j'ai les boutons qui restent collés tout à gauche du menu
• et toute la zone 'corps plus pied' qui s'affiche à droite de la barre...
• ou encore (en forçant un retour à la ligne) qui se superpose à la barre...

Donc le premier problème c'est comment gérer l'adaptation du frame ?

On m'a suggéré (mais il est dans le plâtre au niveau des bras, donc il peut pas aller bcp plus loin surtout depuis Rome...) de faire du javascript avec un calcul du type : '100%-layer = x' et moi être depuis trop longtemps 'chef' pour me souvenir spontanément comment faire (surtout que ça a dû changer depuis... et que moi l'interaction javascript CSS, c'est comme CSS... je découvre... )

En effet, la plupart des utilisateurs utilisent javascript, et ceux qui ont des problèmes de visibilité, liés à javascript, de toute façon désactivent aussi la feuille de style pour passer en mode texte, donc n'ont plus de problème avec l'adaptation de taille du 'frame'

Le deuxième problème c'est l'introduction des gifs qui perturbent beaucoup Mozilla, et moins IE étrangement: voir plus haut pour la description du problème...

Et le troisième problème c'est comment insérer un javascript

• depuis un fichier externe (à mon 'époque' c'est plutôt le 'copier-coller' direct dans le html qui prévalait)
• qui gère le défilement d'un texte (que je préfèrerais ne pas être dans le javascript),
• là, je préviens tout de suite, c'est un aspect qui a fait chorus immédiat chez mes utilisateurs (même si c'est réputé non ergonomique)

Voilà Monique ! si tu veux plus de hiérarchisation du Pb (ou plus de détails), tu peux demander: je suis à ta disposition...

Juste une petite réflexion rapide : faites ce que je dis... pas ce que je fais

Il y longtemps que je travaille à la nouvelle maquette de mon site, sans parvenir à trouver comment obtenir ce que je voulais.
Après ma dernière réponse, je m'y suis remise, j'ai appliqué mes conseils
... et le miracle a eu lieu !!!

Je vais rattaquer ton problème tout à l'heure.

Bonsoir,

pour donner un peu plus d'éléments concrets, car la taille des gifs joue un assez grand rôle dans mes soucis du 2ème Pb, voici des éléments gifs 'équivalents' à ceux que j'utilise télécharger

NB1: les gifs sont copyrightés et la fondation à un simple droit d'usage et de modification pour ses propres sites, si vous voulez les utiliser pour vous, demandez moi les coordonnées du vendeur par MP (ils vendent des tas de trucs sympas pour pas cher)

NB2: j'ai mis le même modèle que ceux que je compte utiliser mais dans une autre couleur

code CSS des boutons (le bouton1l est le même que le bouton2l à part à la taille des caractères)

Bonne nuit

Hello,
j'ai lu ton message il y a quelques jours, mais n'ai pas eu le temps d'y répondre avant maintenant...

Pour commencer, une erreur : il n'est pas possible de positionner en CSS par rapport à l'écran de l'ordinateur, ça n'a jamais été prévu à ma connaissance dans la recommandation. Le plus vaste qui te soit accessible est bien la fenêtre de rendu de ton navigateur. C'est dans la propriété position qu'on définit par rapport à quoi on situe la boîte :

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position

J'ai corrigé ta CSS pour l'en-tête pour que ça marche. B)
http://www.arcanes.fr.eu.org/~pierre/html/HadaDeLaluna/

Il y avait en fait quelques propriétés paradoxales, notamment les float: left, puisqu'il est logique qu'à droite, tu demandes un float: right...

Sinon, qu'est-ce que tu appelles exactement une « zone frame » ? Quel est le comportement que tu en attends ?

Salut,

Je pense egalement que pour la présentation d'un site avec les CSS, il faut y aller progressivement.
Dans ton premier exemple, tu parles de tes claques, de ton code en CSS et puis je vois que dans le code HTML que tu utilises encore la balise Font pour augmenter la taille d'un titre.
Donc, pour moi, tu mets la charue avant les boeufs.
Voilà ce que je te conseille.
Pour la présentation de ton site et le positionnement de tes boutons, tu gardes des tableaux, mais tu élimines le maximum d'attributs dans tes balises et tu n'utilises plus Font. Autrement dit, avec les CSS, tu fais tout sauf le positionnement de tes élements sur la page. J'aime faire les choses simplement, c'est pourquoi, je travaillerais de cette manière.
Dans l'exemple précis que tu donnes, l'utilisation de CSS peux juste te permettre d'avoir un code "plus propre" en faisant ce que je viens de te dire (élimination du maximum d'attributs).

Maintenant, si tu veux absolument le faire avec des CSS, sans tableau (ce qui est l'objectif) je te conseille de positionner tes calques avec des valeurs absolues.
Pour tes "bouts ronds" dans ton en tête, je ferais un calque pour l'ensemble puis je mettrais 3 calques à l'intérieur.
Ce qui donnerais dans ton CSS


L'idée est de définir l'emplacement et la taille des éléments qui ne doivent pas bouger. Ensuite, tu intègre tes images (les bouts arrondis) dans les calque (gauche et droite) et non en tant qu'image de fond de ton sélecteur CSS. Dans mon exemple, j'ai supposé que tes images font 50px (width) en largeur et 100px (height) en hauteur.

Pour tes boutons, je te conseille de laisser tomber le javascript.
Tu fais un calque pour chaque bouton que tu positionnes avec des valeurs absolues. Tu mets ta premiere image en fond et tu changes l'image de fond lors du survol par le curseur



Je ne te garantie pas le résultat mais c'est comme cela que je tenterai de faire.

Arf, j'ai pigé ce que tu veux en regardant la capture... En fait, tu ne raisonnes pas dans le bon sens, c'est pour ça.

En CSS, tu n'auras pas une zone frame, comme tu l'appelles. Tu auras le flot de ton document, qui défile normalement, et tout autour des éléments avec la propriété :
Je crois qu'on touche au plus gros problème dans l'utilisation de CSS :
il faut cesser de raisonner en terme d'interface, de fenêtres et de frames. Ce n'est ni plus ni moins qu'une perversion de l'esprit de HTML , qui est un langage servant à décrire des documents. Et les CSS conservent parfaitement cet esprit, en permettant de modifier radicalement la mise en pages des parties constitutives de ce document...

Et donc, au lieu de simplement afficher un menu en amont du contenu qui le suit, on l'affiche à sa gauche, de façon fixe, idem pour le titre ou des liens qui composent un en-tête. Ce mode de réflexion reste aujourdh'ui absolument primordial dans la conception d'un site, notamment parce que bien qu'on pourra sûrement naviguer dans quelques années en 3D (d'ailleurs la recommandation HTML 4 suggère un media 3d-glasses :yoot: ), il reste toujours certaines catégories de personnes qui sont forcées d'appréhender les pages d'un site de façon linéaire, par exemple les aveugles, que ce soit par la lorgnette d'une ligne en braille qui parcours le document ou grâce à la synthèse vocale (media: aural).

Pour les incrédules à propos de la 3D : http://www.w3.org/TR/html4/types.html#h-6.13

Va pas nous lui briser sa motivation à travailler proprement, malheureux !

Surtout qu'à tout prendre, réaliser la mise en page de calques avec CSS est l'affaire de peu de temps, une fois qu'on a pigé le box model de CSS, alors que supprimer les balises font de ses pages est plus complexe, s'il n'y a pas une certaine uniformité dans leur utilisation. Souvent, on ne fait que créer un style CSS par balise font qu'on trouvait dans les pages, ce qui n'est pas tellement mieux. Réaliser le rendu du contenu du document par CSS nécessite en fait de réfléchir aux types de styles qu'on va vouloir utiliser dans le document : appartés, mise en garde, notes, titres, etc. C'est plus un travail de fond, si le site est truffé de balises font...


:yoot: Surtout pas !
Les positionnement absolus, c'est un nid à emmerdes. Un de leurs gros problèmes, c'est que ça empêche le visiteur d'utiliser des fonctions comme le grossissement de se police d'écriture, puisque les boîtes ne seront plus adaptées à leur contenu... :nono:

C'est légèrement plus complexe, mais il faut systématiquement tenter d'utiliser des tailles relatives pour tous les conteneurs de texte.

Bonjour Pierre,

Dans la maquette que je prépare, je place mes boîtes principales en position absolue, avec les attributs top et left. Mais tout le reste (taille du texte, dimension des boîtes) est en valeurs relatives.
Ce qui permet un affichage "logique" du contenu avec la feuille de style désactivée.
Une taille de texte de 150% (avec Mozilla) ne pose aucun problème, à 200% seul manque 2 ou 3 lettres à la fin de deux titres.
Je peux aussi réduire considérablement la taille de la fenêtre sans avoir d'ascenceur horizontal.

Cette manière de travailler me semble intéressante, non ?

En fait, le positionnement absolu n'est pas problématique, même s'il est parfois (pas toujours) préférable de se postionner en utilisant l'em comme unité de mesure. La vraie calamité vis-à-vis de l'accessibilité, c'est le dimensionnement absolu.

:down: Mauvais :

:up: Correct :

B) Parfait :

Maintenant, tout ça est assez péremptoire. EN fait, tout dépend très fortement de ce qui va se trouver dans les boîtes que vous allez dimensionner. Mais disons qu'en règle générale, il est inutile et délétère de dimensionner de façon absolue. Lorsqu'un visiteur voudra, pour avoir un meilleur confort de lecture, augmenter la taille de la police, ou si celle-ci sera légèrement différente sur son système, par rapport à celui où vous avez essayé les pages, ce sera le bordel.

Bonjour à Tous

Cette nuit, j'étais en train d'écrire ma réponse au premier message de PierreThierry (vers minuit heure de Paris) quant la 'machine à post' s'est emballée... apparition de tout plein de messages suplémentaires... Après une période de long 'désert'... Dur dur, même pour une Fée de la Lune (Damned où est passée ma baguette magique ??? )

Pire, alors que j'appuyais sur 'ajouter ma réponse', une fois Rien, deux fois Rien, trois fois Changement d'écran, Mais post pas passé !!! Aaaaarrrrrrggghhhhhh !!

Alors je reviens aujourd'hui, bien décidée à vous répondre, mais la tâche est difficile (impression de 19 pages!!)

Pour faire 'simple' je vais faire dans l'ordre de vos messages... et cela va être long et en plusieurs post du coup

PierreThierry à 23:28 heure de Paris

Déjà Merci de répondre

Ya pas de mal, moi-même je vais être très occupée hors du panneau jusqu'au 28 minuit (Vive la Poste du Louvre pour poster les trucs avec la bonne date... sinon je sais pas comment je ferais...)

Pour le positionnement, ma remarque n'est pas le fait de la lecture des normes mais de ce que j'ai cru comprendre de ce que j'ai vu dans mon butineur, car, depuis le temps que je surfe, j'ai cru comprendre que 'certains' ne se gènent pas pour développer des butineurs non conformes, donc je me fie plus à ce que je vois dans les butineurs qu'aux normes pour avoir une idée de l'effet que le code fait (je sais c'est très très mal de ma part :flame: je suis très très 'vilaine')

Mais si tu le dit c'est certainement que tu a raison (je rappelle que je suis débutante dans le domaine du CSS) dont acte...

Merci d'avoir corrigé la barre de ma CSS, j'ai copié chez moi et vais faire les essais ASAP (je voulais faire là... mais... là chuis en train de répondre... pas complétement multi tâche la Fée)

Ben oui, étant ambidextre j'ai quelques Pb de définition gauche/droite right/left (c'est quoi ta main pour écrire ? les Deux Mon Commandant !! :yoot: ) donc Merci des rectifications

Une zone frame ?

Cela a l'aspect d'un frame (iframe ou frameset), le comportement d'un frame mais ce n'est pas un frame (d'après une très vieille pub, du temps où j'avais la TV: plus de 15 ans déjà !! Noon, rien de rien, Noooon, je ne regrette Rrrrrieeeen...)

Le comportement que j'en attend ? et bien comme un frame avec:

• l'en-tête et le pied de hauteurs fixes
• le menu et le frame de même hauteur, la dite hauteur étant la hauteur disponible entre le pied et l'en-tête...
• le menu de largeur 170 px (parce que +25px de chaque coté des boutons de 120px de large)
• et le frame de la largeur disponible laissée par le menu...
• le frame (encore et toujour) bordé d'une barre de scroll verticale si je n'arrive pas à insérer le javascript de défilement du texte ou si le javascript est désactivé mais pas la CSS

thierryf à 23:40 de Paris

Merci à Toi aussi de répondre

Je plaide 'non-coupable' pour les <font> c'est mon éditeur HTML qui les rajoute (WebExpert qu'il s'appelle M'sieur l'Agent )

Donc tu me conseille d'utiliser un tableau ? le problème c'est que le résultat visuel n'est pas très 'propre', c'est le moins qu'on puisse dire... (voir plus haut 2ème et 3ème messages)

Heeeuuuhh c'est quoi un 'calque' ?

Si c'est les définitions de 'class' pour les balises <div> le positionnement absolu a la propriété de donner une mise en page fixe et sans aucune fluidité par rapport à la fenêtre du butineur et c'est pas le but du jeux, les portables 'Viêt-Nam' de la fondation ont des touts petits écrans (c'est des occases) mais moi je bosse en 1024x768 (moins les barres Windows, Mozilla et les onglets...) et quant les volontaire sont chez eux.. la plupart ont des grands écrans... (pour les PDA, j'ai du bol, ils sont trop vieux et les lettres sont toutes petites, donc ils s'en servent pas ou alors il faut qu'ils dégainent leurs lunettes 'vision de près')

Pour l'en-tête c'est exactement ce que j'avais fait, simplement j'ai fais des erreurs droite/gauche (voir plus haut pour explications), une 'boite' <div> et trois chites boites dedans...

J'ai déjà laissé tombé le javascript pour les boutons avant de faire le premier post (c'est d'ailleurs ce qui m'a un peu décidée à utiliser CSS plutôt que le HTML de Grand Papa)

Suite au post suivant !! Attendez mon 'signal' pour répondre !! Merci

Suite du message

PierreThierry à 23:55 heure de Paris

Ben oui, la capture, je l'ai faite pour cela, un bon dessin vaut mieux que mille discours...

Heuuuh, Là tu parles un peu compliqué pour moi... surtout avant le code...

Heuuuh... alors là tu m'en bouches un coin avec la 3D, mais je crains que ce soit pas le but, le but c'est juste la chtite copie d'écran du premier message, d'autant que la fondation a fait le 'choix' d'être plutôt en retard technologiquement, genre achats d'occases (tout ça tout ça), car... depuis 1997 le budget informatique c'est Moi (mon porte monnaie à Moi et il a des limites vachement limitées... )

Sinon, pour une organisation de la page en mode texte, rien de plus simple que ce que j'ai prévu (voir mon message du 25 novembre 18:29 heure de Paris)

PierreThierry 26 novembre 2003, 00:06 heure de Paris

Pas de Problème, si tu a cliqué sur le lien dans le 'NB1' de mon 2ème message, tu verra que je suis toute façon en train de migrer vers un CMS qui fait que, de toute façon, il va falloir que je refasse toute la mise en page des textes du site

Pour le problème de l'utilisation du tableau voir plus haut....

OK! comment ?

Monique 26 novembre 2003, 00:51 heure de Paris

Merci Monique

c'est effectivement une question intéressante à poser à nos interlocuteurs...

PierreThierry 26 novembre 2003, 01:12 heure de Paris
Justement, c'est pour cela que dans mon message du mardi 25 novembre 2003, 22:28 (heure de Paris) je met un lien pour télécharger les gifs et que je signale que la taille du Logo est tapée dans le code du tout premier message....

Ouuuf!! Terminé !! Vous pouvez y aller et répondre !!! Merci à Tous !!!

Très cordialement et Bonne fin de journée