Mise en page CSS au lieu de Frame besoin d'aide je n'y comprend rien

(reprise du message précédent)

Jefferson a écrit :
Pourtant en enlevant "width: 100%;" à mon footer il ne prend plus que la largeur du mot "footer"

Hmm dans ce cas, c'est que tu l'as positionné soit en absolu (position : absolute), soit en flottant (float), car ce n'est pas le comportement normal. Es-tu obligé de le positionner ainsi ?

Jefferson a écrit :
Et autrement peut-on mélanger pixels et pourcentage alors ?

Non malheureusement

Mon footer était effectivement en absolute, suis-je obligé de le positionner ainsi? Euh je n'en sais strictement rien pour tout avouer j'ai lu plusieurs trucs sur l'absolu/relatif/fixe/statique mais je ne sais toujours pas parmi les 4 lequel choisir et pour lequel des 5 éléments de ma page (ou plutôt des 6 éléments avec le conteneur). Donc jusqu'à présent j'ai plutôt fait au hasard à ce niveau-là .

Sinon vu que je ne peux apparement pas mélanger pixels et pourcentage (ce qui est bien dommage ), en fait même si je savais utiliser correctement absolute,relative,etc. je n'y arriverai pas avec ces mesures-là si j'ai bien compris il faut choisir soit de fixer précisement en pixels soit de mettre des valeurs en %. Du coup j'ai fait un petit test en pourcentage (pour assurez une meilleure compatibilité avec différentes résolutions je pense que c'était le mieux et vous pouvez VOIR LE RÉSULTAT ICI seulement là toujours j'ai mis les valeurs relative et absolute au pif et peut-être fallait-il même mettre fixe ou statique quelque part… De plus ma méthode ne fonctionne pas parfaitement bien comme vous pouvez le voir j'ai une sorte d'espace blanc à gauche et à droite de ma partie "centre" et ce malgré un body en margin: 0; et padding: 0;
Quels conseils pour la suite ?

Jefferson a écrit :
Mon footer était effectivement en absolute, suis-je obligé de le positionner ainsi? Euh je n'en sais strictement rien pour tout avouer j'ai lu plusieurs trucs sur l'absolu/relatif/fixe/statique mais je ne sais toujours pas parmi les 4 lequel choisir

Hop, avant d'être très occupé par d'autres missions, voici de quoi t'aider :
http://forum.alsacreations.com/faq/#item59

J'ai relu une énième fois ces docs, je pense avoir un peu mieux compris du coup j'ai choisi de tout mettre en "relative" sauf mon footer en "absolute" et ça marche mais il y'a toujours le bug des 2 espaces blancs à gauche et à droite de mon "centre", donc peut-être ai-je fais le mauvais choix ? Ou ce bug vient peut-être de quelque chose que j'ai oublié de faire ? Dans ce cas merci de me répondre sans m'envoyer à la chasse aux indices et à l'énigme, j'ai ma dose pour la journée, je pète un plomb so please . Je sens que je suis proche du but…

Voici ma page mise à jour

Raphael a écrit :
Merci de lire toute la phrase (sans-doute ironique)

Absolument j'aime bien me fendre la gueule moi, c'est aussi pour cela que je n'ai pas du tout apprecier le fameux " "

Faut rester cool surtout pour les gens qui debarquent et comprennent pas grand chose comme moi en plus etant alsacien avec mon accent je m'exprime aussi mal

Bonjour,

@Jefferson> Je ne sais pas si c'est à conseiller car on est un peu dans le domaine de l'astuce plus que de l'utilisation rationnelle des css mais je vois un moyen de faire ce que tu veux (spécifier une largeur genre 100% - 128px) c'est d'utiliser les marges négatives voir cet article
Les pros te conseilleront mieux que moi pour déterminer s'il s'agit là d'une pratique "acceptable" ou pas
Modifié par zanzibar (07 Nov 2005 - 10:48)

Raphael a écrit :

Jefferson a écrit :
Et autrement peut-on mélanger pixels et pourcentage alors ?

Non malheureusement

Question idiote :
tu parles pour la meme direction (width ou height) ou en general ?
ou alors on peut utiliser les pixels pour la largeur et les % pour la hauteur par exemple ?
Modifié par jessee (07 Nov 2005 - 11:39)

jessee a écrit :

Question idiote :
tu parles pour la meme direction (width ou height) ou en general ?
ou alors on peut utiliser les pixels pour la largeur et les % pour la hauteur par exemple ?

Chaque propriété est indépendante des autres, donc tu peux attribuer n'importe quelle unité à "height" et n'importe quelle (autre) unité à "width".
Par contre, impossible de cumuler deux unités différentes au sein de la même propriété (sauf dans le cas des background-position)

Ok Raphael Merci

Autre question :

ton exemple de site dynamique en php ok tu vois lequel celui en bleu

c'est normal que la roulette de souris ne marche pas chez moi sous firefox par contre pas de probleme sous ie et maxthon ?

Et sinon c'est normal aussi que malgre le body a 100% aussi bien en width qu'en height ca ne prenne pas tout l'ecran et alors pkoi ce body a 100% ?

Merci

jessee a écrit :
Autre question :

Désolé, mais là on sort complètement du cadre du sujet ouvert pas Jefferson.
Pour que tout le monde s'y retrouve, pour faciliter les recherches futures et pour respecter le sujet en cours, merci de créer un nouveau sujet.

Je suis de retour après pas mal de galères, de recherches, de lectures, de tests,etc. Et j'en suis parvenu à 3 pages de test.

Tout d'abord je suis reparti de mon TEST 3 pour le modifier et commencer à travailler sur les liens de mon menu (étant donné que je devenais fou à force de ne travailler que sur les cadres de ma page, bosser sur le contenu ça ne faisait pas de mal) du coup j'ai créé ceci:TEST 4 - PHP mais j'avais toujours mon problème de mélange de valeurs en pourcentage et en pixels donc ce n'était pas génial.

Puis zanzibar (tel un sauveur lol) a passé son lien sur les marges négatives; je m'y suis atelé, j'ai étudié l'astuce et avec ce système j'ai tout d'abord créé: TEST 5 Le hic c'est que je n'arrivais pas à ce que le contenu de ma page descende jusqu'en bas mais aussi ma partie "Footer" n'était pas placée au bon endroit…

Du coup j'ai créé le TEST 5 BIS et là mon Footer se plaçait au bon endroit (du moins chez moi sous IE6SP2) par contre pour la hauteur j'ai toujours le même problème ça ne prend pas tout la hauteur de ma page. Je m'adresse donc à nouveau à vous pour vous demander: Comment faire ? Il y a peut-être un truc à inverser, une ligne de code manquante, mais laquelle ? Quelle fonction utiliser ? Répondez sans m'envoyer au pôle nord chercher ma réponse s'il vous plaît j'en ai marre de lutter au début ça m'amusait un peu mais à force quand je pense au temps que je passe pour uniquement créer des cadres vides j'en presque…
¨
Merci d'avance.

Up !!! Je reformule en gros ma page c'est TEST 5 BIS et j'aimerai que le contenu (menu, centre, news,etc.) s'étire vers le bas en hauteur pour que ça remplisse ma page.

Je suis dans le même état que toi Jefferson pour un site. Si quelqu'un peut offrir une réponse, ca serais cool, merci.

Par contre je crois qu'on ne peut faire qu'une hauteur en pixel pour que cela fonctionne, mais le problème c'est que ca ne se redimensionne pas du coup un site fait sous une résolution de 1240x1024 fera toujours 1024 de hauteur . Une solution en % ?

Non Super_baloo8 détrompes-toi ! On peut spécifier une hauteur en % ! Je ne suis que débutant mais j'ai appris à faire des hauteurs en pourcentage au cours de ma lutte voir mon TEST 3 Pourcentage BIS. Je m'étais lancé dans cette aventure après ce message:

Raphael a écrit :

Hmm, ton conteneur fait 100% de hauteur... par rapport à quoi ?
Des pistes sans doute utiles : http://forum.alsacreations.com/faq/#item57

Du coup si j'ai bien compris pour procéder il faut que tu aies:

body {
width: 100%;
height: 100%;

}
#conteneurdusite {
position: relative;
min-height: 100%
min-width: 100%;

Que tu rajoutes des hauteurs à tous tes élements en calculant par exemple height: 15%; donc le reste de la page à 85% (news,menu dans mon exemple) =100% en tout.

Dans la partie html:

<body>
<div id="conteneurdusite">

[EMPLACEMENT DES AUTRES DIV]

</div>
</body>

Note:Mon TEST 3 Pourcentage BIS fonctionne bien sous IE mais a un petit bug au niveau de mon footer sous Mozilla, comment y remédier? Je recherche aussi toujours à mélanger pixels et pourcentage en hauteur, après l'échec de mon TEST 5 BIS avec les backgrounds positions.

La question de Super_baloo8 m'a motivé à repartir de mon TEST 3 Pourcentage Bis pour la création de mon site vu que je n'arrivais pas à étirer la hauteur de ma page TEST 5 Bis. Du coup j'ai posté sur un autre forum (infidélité oblige vu que plus grand monde ne me répond dans ce sujet ici) bref on m'a donné quelques conseils pour que je corrige mon bug du footer de mon Test 3 Pourcentage Bis qui partait en vrille sous mozilla, et depuis c'est avec mes liens en php que j'ai du mal voir mon autre sujet, et quand j'ai commencé à mettre du contenu dans ma page (images de mon menu, etc.) ce sont d'autres bugs qui sont apparus sous mozilla (sous IE toujours nickel).

Voilà tout ça pour dire que j'ai un peu progressé depuis même si c'est pas encore ça…

[Message sans intérêt, merci de ne pas prendre le forum pour un bac à sable. --Stephan]
Modifié par Stephan (15 Nov 2005 - 01:47)

Bonjour,

En premier lieu : réaliser une mise en page de ce type qui "couvre" toute la hauteur de l'écran quelque-soit le contenu est un exercice particulièrement difficile, provoquant presque systématiquement des erreurs ou des défauts d'affichage dans un navigateur ou un autre.

En second lieu, c'est une idée erronée sur le fond. Le mécanisme d'affichage essentiel de CSS est un flux vertical indépendant de la hauteur de la zone d'affichage, accessible grâce au scroll vertical du navigateur. Une page Web HTML n'est pas un "écran" : c'est quelque-chose sur lequel l'écran est une fenêtre défilante.

En identifiant l'écran et le document HTML, on dégrade fortement la qualité du site :
- ergonomie réduite
- accessibilité réduite
- design plus ou moins dégradé selon les particularités de la configuration utilisateur.

Beaucoup de difficultés, donc, pour un résultat nécessairement médiocre. C'est hélas souvent une idée sur laquelle se précipitent de nombreux débutants (Une rapide recherche sur ce forum suffit à voir le temps qui y a été perdu par de multiples personnes). Mais aussi des designers plus chevronnés, qui ont encore du mal à se détacher des habitudes acquises avec les tableaux de mise en page. J'ai rencontré hier encore un cas similaire sur un site grand compte préparant une impportante opération de com pour les fêtes de Noël : ce qui aurais pu être une excellente démonstration de sa récente politique de qualité et d'accessibilité s'est finalement transformé en bricolage assez lamentable, en totale contradiction avec la démarche qu'il cherche à mettre en avant par ailleurs. En très grande partie à cause de ce problème très précis.

C'est pourquoi je te conseillerais fortement d'y renoncer, et de te consacrer au développement de ton contenu, bien plus important que ce point de détail de design.
Modifié par Laurent Denis (15 Nov 2005 - 06:01)

Laurent Denis a écrit :
Bonjour,

En premier lieu : réaliser une mise en page de ce type qui "couvre" toute la hauteur de l'écran quelque-soit le contenu est un exercice particulièrement difficile, provoquant presque systématiquement des erreurs ou des défauts d'affichage dans un navigateur ou un autre.

En second lieu, c'est une idée erronée sur le fond. Le mécanisme d'affichage essentiel de CSS est un flux vertical indépendant de la hauteur de la zone d'affichage, accessible grâce au scroll vertical du navigateur. Une page Web HTML n'est pas un "écran" : c'est quelque-chose sur lequel l'écran est une fenêtre défilante.

En identifiant l'écran et le document HTML, on dégrade fortement la qualité du site :
- ergonomie réduite
- accessibilité réduite
- design plus ou moins dégradé selon les particularités de la configuration utilisateur.

Beaucoup de difficultés, donc, pour un résultat nécessairement médiocre. C'est hélas souvent une idée sur laquelle se précipitent de nombreux débutants (Une rapide recherche sur ce forum suffit à voir le temps qui y a été perdu par de multiples personnes). Mais aussi des designers plus chevronnés, qui ont encore du mal à se détacher des habitudes acquises avec les tableaux de mise en page. J'ai rencontré hier encore un cas similaire sur un site grand compte préparant une impportante opération de com pour les fêtes de Noël : ce qui aurais pu être une excellente démonstration de sa récente politique de qualité et d'accessibilité s'est finalement transformé en bricolage assez lamentable, en totale contradiction avec la démarche qu'il cherche à mettre en avant par ailleurs. En très grande partie à cause de ce problème très précis.

C'est pourquoi je te conseillerais fortement d'y renoncer, et de te consacrer au développement de ton contenu, bien plus important que ce point de détail de design.

Personnellement je ne sais pas ce que cela a a voir avec la qualite d'un site, mais bon !!!!
En ce qui me concerne s'il y a une chose dont j'ai bien une sainte horreur c'est tous ces sites a la con que l'on rencontre et qui sur mon ecran 1024 mettent des marges debiles de chaque cote au point de me demande pourquoi donc a t'on invente et sorti ces ecrans 1024, 1200, etc.. ???????????

Je suppose que tu n'es pas de mon avis mais pourtant crois moi beaucoup de gens reagissent comme moi.
Pour terminer je dirai qu'ecran est fait pour etre occupe entierement et pas qu'a moitie ou alors on arrete tout et on revient au bon vieux temps du dos et des ecrans "texte"

jessee a écrit :

tous ces sites a la con que l'on rencontre et qui sur mon ecran 1024 mettent des marges debiles de chaque cote

Pour terminer je dirai qu'ecran est fait pour etre occupe entierement et pas qu'a moitie ou alors on arrete tout et on revient au bon vieux temps du dos et des ecrans "texte"

Jessee, est-ce que tu lis attentivement ce que les intervenants disent ? Il n'est pas question ici des marges latérales, ni de l'espace prise horizontalement, mais bien de vouloir prendre toute la place verticalement.

Mais si tu insiste au niveau horizontal, sache que mettre un texte trop long en largeur (100% d'un écran de 1280 par exemple), rend la lecture difficile. Sauf qu'ici, ce n'était pas le sujet je crois. D'ailleurs, Laurent, t'aurais pas un article quelque part à propos de la largeur recommandée des paragraphes, même si c'est hors-sujet ?
Modifié par Merkel (15 Nov 2005 - 14:58)

Merkel a écrit :


Jessee, est-ce que tu lis attentivement ce que les intervenants disent ? Il n'est pas question ici des marges latérales, ni de l'espace prise horizontalement, mais bien de vouloir prendre toute la place verticalement.

Mais si tu insiste au niveau horizontal, sache que mettre un texte trop long en largeur (100% d'un écran de 1280 par exemple), rend la lecture difficile. Sauf qu'ici, ce n'était pas le sujet je crois. D'ailleurs, Laurent, t'aurais pas un article quelque part à propos de la largeur recommandée des paragraphes, même si c'est hors-sujet ?

Bein je vois toujours pas ou est le probleme ?

en hauteur c'est exactement pareil maintenant t'as des sites qui font presque une dizaine de page en hauteur et tu te tapes tout le defilement quand est en bas pour retrouver le menu qui lui est en haut
alors la encore genial le progres et surtout vive la roulette
une question me vient a l'esprit a quand le ferrari de scroll ???????
pour enfin acceder facilement aux autres menus, surtout que parfois il est vrai que l'on n'a pas forcement envie d'aller jusqu'au bas de la page (ou se trouve dans quelques rares cas un bouton pour remonter) et alors "y a plus de boutons plus rien" ---> vive la roulette

En ce qui me concerne je croyais toujours et le crois encore toujours que le plus important pour les visiteurs c'est de pouvoir acceder le plus rapidement a leur information et non pas de faire joujou avec les roulettes de souris
mais bien sur c'est mon avis strictement perso
et a chacun son avis...

jessee a écrit :

En ce qui me concerne je croyais toujours et le crois encore toujours que le plus important pour les visiteurs c'est de pouvoir acceder le plus rapidement a leur information et non pas de faire joujou avec les roulettes de souris
mais bien sur c'est mon avis strictement perso
et a chacun son avis...

Oui tout à fait, je n'ai pas le dis le contraire non plus ! Mon seul point est que si tu met toujours ton contenu textuel en pleine largeur de l'écran, disons 1280 pixels de large, ca fait des lignes de paragraphes beaucoup trop longue à lire et quand la personne en termine une, il doit revenir loin à gauche avec son regard pour commencer la seconde phrase. Lorsqu'il y a plusieurs lignes, le lecteur peut s'y perdre et abandonner sa lecture, d'où l'intérêt parfois de limiter la largeur du contenu même si cela entraîne forcément une hauteur plus grande et une scrollbar. Il faut aussi que tu sache que parfois, le design graphique du site ne permet tout simplement pas d'être fluide à 100% et est bloqué en 800x600 ou 1024x768.
Modifié par Merkel (15 Nov 2005 - 20:04)