plusieurs questions sur la mise en page.

[lomaster]

Bonjour tout le monde,

 

Voila j'aimerai avoir un block au milieu de la page dans lequel le site se trouverait. J'ai réussi cependant lorsque la résolution est plus petite ou si je réduit la fenêtre le block garde la même valeur en height donc je me retrouve sans marge avec le bas de la page...

 

Donc comment faire pour que le block est le même pourcentage quelque soit la résolution ou la taille de la fenêtre?

 

Merci je vous joins le fichier css.

 

le site :

 

http://lomaster.perso.cegetel.net/ (je parle de la page d'acceuil)

 

le css :

 

body

{

margin-top: 100px;

background-color: black;

height: 655px !important; ( cette valeur qui pose probleme je pense je n'arrive pas a la mettre en %.. des que je la mets en % le block avec la barre de défilement disparait..et la page se retrouve avec une hauteur pas possible..)

height: 80%;

width: 77% !important;

width: 75.3%;

margin-left: 2% !important;/*marge sur la gauche*/

margin-left: 1.2%;

margin-right: 4.5% !important;/*marge sur la droite*/

}

 

 

 

#contenu/*le gros du site sera ecrit là*/

{

 

background-color:#fc7200;

margin-left: 16% !important;/*marge sur la gauche*/

margin-left: 16%;

margin-right: 3.5% !important;/*marge sur la droite*/

position: relative;

font-family:"Times New Roman", serif;/*police d'ecriture*/

color: black;

margin-bottom: 25px;

height: 90% !important;/*les attribut suivant permettent d'avoir une barre de défilement.(hauter de l abarre) */

height: 89.2%;

overflow: auto;/*voire valeure du dessus*/

width: 97% !important;

width: 95.3%;

}

 

 

 

------------------------------

 

 

En faite je voudrais que le block que vous voyez sur la page d'accueil soit présent avec les marges dans toute les résolution et que je n'est pas à mettre cette barre de défilement.. dès que je l'enlève le block n'a plus la hauteur que je souhaite...

 

Hesiter pas si vous n'avez pas compris je vous répondrez.

 

merci par avance.

[Dylav]

A ma connaissance, tu ne peux pas exprimer la hauteur en pourcentage. Ou plus exactement, c'est inopérant, et la mise en page se calque sur le "besoin" de hauteur de son contenu.

 

Mais la hauteur peut être exprimée en absolu (en pixels) et, si tu prévois bien ton coup (un bloc div avec gestion des débordements), tu verras apparaître un ascenseur si nécessaire.

 

Nota : attention au double ascenseur, il n'y a pas plus agaçant pour l'internaute (en tout cas, pour moi ). La solution serait de diminuer la hauteur de ton block central, tu n'aurais plus que son ascenseur à lui. Il te faut alors choisir une hauteur compatible avec toutes les résolutions d'écran, c'est-à-dire, bien entendu, avec la plus petite. Mais tu n'es peut-être pas obligé de réveiller le 640x480... ni même le 800x600 (qui, au pire, se retrouveraient avec un double ascenseur. Ben oui, tant pis).

[lomaster]

bonsoir,

 

IL vaut mieux que le block soit dans Body ou que je définice body comme un block? La j'ai un block dans le body.. Mais ce que je voudrais moi c'est n'avoir aucun ascensseur.. Mais je n'arrive pas à définir un block de la taille que je souhaite.. a chaque fois que j'exprime la valeur en rouge ci dessus le bloque se retrouve avec une hauteur trop importante du coup un ascensseu ce mets sur la droit de la fenêtre...

 

(la taille de mon block est bon mais je voudrais enlever l'ascensseur de mon block ..(du coup il y aura moins de texte par page.)

Modifié le 6 novembre 2006 par lomaster

[Dylav]

Si je comprends bien, tu voudrais, dans l'idéal, un bloc central de taille proportionnelle à celle de l'écran (selon sa résolution), c'est-à-dire que les dimensions de ce bloc seraient en % de celles de l'écran.

 

Je prétends (et je pense avoir raison) que ce n'est pas possible pour la hauteur du bloc, qui ne peut qu'être laissée flottante, ou exprimée en fixe (en pixels).

 

Tenant compte de cette contrainte, tu décides de donner au bloc une hauteur fixe, mais tu ne veux pas y voir apparaître un ascenseur, donc tu voudrais construire des pages successives, autant que nécessaire pour afficher l'ensemble de ton propos.

 

En "statique" (c'est-à-dire pour des pages HTML construites une fois pour toutes), c'est possible, à condition d'exprimer la taille de la police, elle aussi, en proportionnel : vois la mesure "em" (proportionnelle à la résolution de l'écran).

 

Mais tu as une infinité (enfin, presque) d'autres possibilités si tu construis tes pages "à la volée", en "dynamique" au moment où elles sont sollicitées, grâce à un langage de programmation côté serveur*. Dans ce cas, tu programmes, donc tu peux, par exemple, tenir compte de la résolution de l'écran (récupérable en tant que variable) pour choisir la façon de tailler ton bloc. Tu devines toutes les capacités de souplesse que ça donne. Mais c'est forcément beaucoup plus délicat à mettre en oeuvre (écriture, tests, etc).

 

Il est possible aussi, probablement, de résoudre la question par un script JavaScript qui calcule les dimensions du bloc en fonction de la résolution de l'écran. Mais tu risques de te heurter à des visiteurs qui refusent l'exécution du JavaScript, et qui auront alors de ton site une vision... sans doute insatisfaisante. Et JavaScript n'est pas un langage très... convivial.

 

* sur les langages de programmation côté serveur et la mise en oeuvre, ça dépasse mes compétences. Si tu veux aller par là, il faudra que je te trouve un autre interlocuteur !

__________

 

Et je m'aperçois que je n'ai pas répondu à ta question Body/Bloc ou Body-bloc. Je ne serai pas totalement affirmatif, mais il me semble qu'il n'est pas possible de "dimensionner" le body (le body, c'est l'écran : c'est le corps de l'écran**. Ainsi, la solution est forcément de décrire un bloc à l'intérieur du body.

 

** ou, quand tu mets en oeuvre des frames (découpage de l'écran en plusieurs parties contiguës), chaque frame a son propre body, c'est la même problématique. Attention, les frames ne sont plus en odeur de sainteté dans les spécifications du W3C : encore tolérées, elle risquent de ne plus être implémentables dans les prochaines versions de XHTML.

[lomaster]

bonjour,

 

 

merci pour toutes les explications.

 

Je viens de pensé à un truck si je divise mon ecran en un tableau avec 9 cases, la case du milieu serait toujour proportionnelle à la résolution.. Mais est-il possible de charger une page différente dans la case numéro 5 sans pour autand utiliser une frame?

c'est à dire que je mettrais page 1.2.3... en bas de la case 5 mais seul la case numéro 5 serait chargé..??

 

 

 

 

Amicalement.

[Dylav]

Bonjour Lomaster,

 

Avec ton tableau, tu vas avoir les mêmes inconvénients. Certes, tu peux le définir pleine page (width=100%, height=100%), puis tes lignes et tes colonnes en % respectivement de la hauteur et de la largeur du tableau. Mais ta case 5 (pourquoi l'as-tu numérotée 9 ? ) va se mettre à prendre de la hauteur si le texte que tu souhaites y insérer est trop copieux. Et, si mes souvenirs sont exacts, je crois que ce serait le cas même si tu lui donnais une hauteur fixe (genre height=200px).

 

En outre, de plus en plus de spécialistes déconseillent fortement l'utilisation détournée du tableau pour faire de la mise en page. C'est en particulier dommageable aux handicapés visuels, qui utilisent un dispositif sonore qui leur décrit le tableau : d'où une incohérence totale du discours.

 

Si tu as quelques instants, parcours au moins le début du topic que j'ai commis ici, qui collecte et/ou évoque des tas d'aspects importants de la conception d'applications web, avec en particulier le site pompage.net : ses articles (traduits en français) sont passionnants, dans ce domaine.

[lomaster]

merci je vais lire quelques articles (bravo pour le tiens)

 

( pour le contenu, je me doute que quelque soit la taille si je mets du texte la case augmentera, c'est pour cela que je voudrais savoir si il y à une maniere d'obtenir la même chose qu'une frame mais sans utiliser cette attribut.. Ce qui me permettrais de garder la même auteur.. Enfin je pense.)

 

enfaite j'aimerais arrivé au résultat suivant :

 

la page d'acceuil. ( le carde dans lequel le site est contenu.)

 

j'imagine que ce n'est pas avec du html et css.. si c'est du java est-il facile de le rédiger? ou même de le trouver sur le net?

 

merci.

Modifié le 7 novembre 2006 par lomaster

[Dylav]

Plutôt sympa, effectivement, la dynamique du site Moonda. En plus, j'adore les fonds sombres, je trouve ça reposant, même si tout le monde dit que le meilleur contraste, c'est d'écrire noir sur blanc...

 

En revanche, j'ai jeté un oeil sur le code, ce n'est pas très orthodoxe. Il y a un joyeux mélange entre contenu et présentation (avec des instructions de mise en forme directement dans les balises du <body>). Sans avoir détaillé, j'ai aperçu du JavaScript (sans doute pour piloter le dynamisme des enchaînements).

 

Pour revenir à ton problème, je verrais bien une solution hyperclassique en trois colonnes, à l'aide de 3 blocs <div> s'alignant de gauche à droite (avec, si nécessaire, une entête et un pied de page, mais ce n'est pas sûr d'après la description de ton besoin). Tu trouveras un excellent exemple avec le site "souris folle" de Môssieur Tangui (l'adresse est vers la fin de mon topic cité plus haut). Très pur dans l'écriture (respect des normes).

 

Si tu définis ta <div> centrale en vertical-align:middle, le texte que tu y inséreras restera cadré central en hauteur, d'où l'effet recherché, plus souple qu'avec ton tableau de 9 cases. Il te restera,

• soit à te prémunir contre les débordements en calibrant bien les textes que tu y mets,
  
• soit à accepter, malgré tout, un ascenseur vertical pour les définitions d'écran trop limitées (genre 640x480, voire 800x600, sachant qu'une très large majorité des écrans sont aujourd'hui au moins en 1024x768).
  

Même si cela ne te satisfait pas entièrement, tu bénéficieras au moins d'une solution robuste et simple, qui aura le mérite d'être aisée à maintenir parce que facile à comprendre lorsque tu voudras t'y remettre quelques mois plus tard - et qui restera élégante, malgré tout (au moins techniquement). Des tas d'auteurs suggèrent d'éviter la sophistication, primo pour assurer la pérennité de la solution par rapport aux évolutions des langages et des navigateurs, et secundo pour faciliter la maintenance (mais là, je me répète).

 

Un point de détail : si tu veux comprendre comment fonctionne une page, capture-la par "fichier" / "enregistrer sous", tu auras le code HTML d'une part, et d'autre part un répertoire contenant tout ce qui est nécessaire à son affichage (feuille de style, images, javascript, etc). C'est souvent révélateur.

[lomaster]

re,

 

Okay c'est super, merci pour toutes tes explications, je pense que je vais opter pour les trois colonnes.

 

Tite derniere question au passage

 

Prenons pour exemple, la banniere de mon site, tu remarques qu'un espace blanc important se trouve à droite apres l'ordinateur.

J'ai fais cela car sous mozilla, lorsque je fais apparaître le menu favoris sur la gauche l'image se réduit et donc cette espace est rongé.

 

Comment faire pour enlever cette espace (qui n'est pas tres beau) mais sans pour autand que l'image lorsque le menu favoris apparaît, l'image soit couper. Si je ne mets pas cette espace blanc lorsque les favoris apparaîssent, l'ordinateur est couper.. Comment redimenssionner l'image automatiquement?

 

Un peu comme la banniere de Zeb, lorsque le menu favoris apparaît, l'espace entre les nom (astuces, acceuil, telechargement...) reste le même.

 

Amicalement.

[Dylav]

Là, excuse-moi, mais j'ai besoin de compléments d'information préalables. Quand tu évoques ton site, parles-tu de Espace-Web, ou de A Tout-Service ?

 

En outre, qu'il s'agisse de l'une ou de l'autre de ces deux pages, je ne vois pas l'ordinateur que tu évoques ? Je dois être fatigué, moi...