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

Après avoir posté sur quelques forums par rapport à un problème de frame comme ici=> Problème création de site avec frame src (mainframe, topframe,etc.).

J'y ai appris que c'était l'antiquité et qu'il fallait que je me mette au CSS. On m'a d'ailleurs filé des liens de ce site, des tutoriaux à lire, etc. C'est ce que j'ai fait seulement m'y connaissant très peu en webmastering je galère pas mal (pour ne pas dire énormément).

En 5 jours je suis donc passé de mes frames http://www.humanbeatbox.fr/_test/subtest

à mon début de css:
http://www.humanbeatbox.fr/_test/creation_a_partir_du_modele6.html

Mon code ne doit pas être très propre car je l'ai créé à partir du modele6 du site et je l'ai bidouillé pour obtenir un résultat qui n'est pas du tout celui que je voulais d'où ma demande d'aide.

Voici ce que je voudrais:
En fait il y 'aurait 5 espaces:

1-Top qui ferait 92 pixels de haut (height: 92px;) et 100% de la page en largeur
2-Menu qui ferait 135 pixels de large (width: 135px;) et tout ce qui reste de la page en hauteur (en%=?)
3-News qui ferait 128 pixels de large (width: 128px;) et tout ce qui reste de la page en hauteur (en%=?)
4-Footer qui ferait…euh… je ne sais plus combien de pixels de haut mais un truc fixe (quoique…) et une largeur de 100% (dans un souci de compatibilité de navigateur et de résolution d'écran).
5-Centre qui serait le carré au milieu de la page, et qui changerait ça serait l'équivalent d'une "mainframe" et à partir de mon menu je pourrais faire un lien vers cet espace et le contenu du milieu de ma page changerait mais pas le reste ce qui éviterait un rechargement, du menu, des news, etc… Et là dessus je n'ai rien trouvé (ou peut-être pas compris que cela servait à ça).

Aussi dans un souci d'une meilleure compatibilité je voudrais éviter les "position: absolute;"

Plus simple (après un éditage de mon post) voici une image de ce que j'aimerai:

http://humanbeatbox.free.fr/_test/miseenpagecss.jpg

Ce serait super cool de me créer le truc (je sais on peut toujours rêver) ou au moins m'aiguiller pour faire ça car les tutoriaux que j'ai lu m'ont embrouillé grave les histoires de parents, d'enfants, de frères, etc. je pense que c'est ça qui fait que je n'y arrive pas. Je ne sais pas dire à quel élément d'agir sur quel autre etc.

Merci d'avance pour vos réponses.
Modifié par Jefferson (12 Nov 2005 - 19:39)

Bonjour à toi aussi

Si tu débutes le mieux serait de commencer par ceci: Comment débuter et trouver l'information ?.

Comme tu le soulignes dans ton post nous n'allons pas ici faire pour toi le gabarit de ta page. Le mieux pour apprendre et progresser serait que nous dise ce que tu ne comprends pas. Tes deux liens proposent une utilisation de cadres (frames) et je ne vois pas d'utilisation d'un modèle.

A propos des frames tu peux lire ceci: Les frames (cadres) : a méditer...

Apparement y'a eu un bug à cause de la redirection de mon site, mais la seconde page ce n'est pas des frames mais bien du css pour y accéder il faut plutôt y aller par ce lien:

http://humanbeatbox.free.fr/_test/creation_a_partir_du_modele6.html

Ensuite par rapport aux liens que tu as filés je les ai déjà lus, enfin après pas tous les liens de ces 2 liens, mais j'en ai lu quelques uns (open web, tuteurs, etc.).

Là où je bute c'est sur comment créer mes cadres, avec le css si j'ai bien compris il faut donner la position d'un cadre par rapport à un autre, etc.

Par rapport au fait de me faire le gabarit de ma page, on sait jamais il y a peut-être quelqu'un qui peut me faire ça en secondes alors que de mon côté j'ai mis 5 jours à créer un truc loin du résultat voulu. D'ailleurs pour + tard je recherche des webmasteurs bénévole pour mon site qui traite du humanbeatboxing art des percussions vocales qui est en partenariat avec www.humanbeatbox.com site que je traduis entièrement bénévollement (déjà + de 70 pages et quelques vidéos traduites seul). Bref je suis meilleur en traduction qu'en création de page, et là il ne me manque que le gabarit de ma page pour me relancer.

Alors mon pauvre Jefferson si tu attends de l'aide ici t'es tres mal parti

Deja pour commencer tu vas avoir droit a une agression en regle de la part d'un bulldog qui mord pour un rien, il s'identifie sous "merlin" et vas te dire en mettant toutes les formes :
"on est pas la pour faire le boulot a ta place "

A mon avis tu ferais mieux d'essayer de te debrouiller tout seul, car il paraitrait qu'il y a des "experts" sur ce forum mais je ne les ai jamais vu, moi,
juste eu droit au bulldog de service

sinon vas donc voir sur d'autres forum plus sympa et moins agressifs

en tous cas bonne chance a toi et bon courage
Modifié par jessee (05 Nov 2005 - 23:20)

Bonsoir Jefferson et bienvenue sur le forum.

Jefferson a écrit :
Ce serait super cool de me créer le truc (je sais on peut toujours rêver)

en fait, comme te l'a fait remarquer jessee de façon très aimable ( ), le but de ce forum n'est effectivement pas de faire le travail à ta place, ce qui ne t'apporterait rien, mais plutôt de t'aider dans ton apprentissage et de t'accompagner.

Par rapport à ta charte graphique, tu vas avoir du mal à créer des blocs (menu et news) qui vont avoir une hauteur de "100%-92px" car cette hauteur n'est pas mesurable en CSS.

Sur ce thème, je t'oriente vers un sujet déjà traité sur le forum il y'a quelques temps :
http://forum.alsacreations.com/topic.php?fid=4&tid=243

Mais tu peux aussi "faire semblant" que ces blocs vont jusqu'en bas

Pour Top, Centre et Footer, aucun problème : un élément de type bloc occupe toujours par défaut toute la largeur disponible sans avoir besoin de la spécifier.

@jessee > peut-être n'as tu pas eu l'accueil que tu souhaitais, mais voudrais-tu bien avoir la courtoisie toi-même de ne pas agresser gratuitement les autres membres ?
Si vraiment tu ne te sens pas à l'aise sur ce forum, je ne voudrais pas que tu te sentes obligé d'y participer. L'ambiance y est très bonne dans l'ensemble, je trouverais dommage que tu la gâches inutilement.
Modifié par Raphael (05 Nov 2005 - 23:54)

J'avoue ne pas comrendre pourquoi tu souhaite eviter les position:absolu par souci de compatibilité. Si j'en crois les différents tuto et bouquins, ce type d'inconvénient (incompatibilité) ne semble pas lié à l'utilisation du position:absolu.

Pour ma part, suivant ton dessin, je pense qu'un emboitage de div devraient te permettre d'atteindre tes objectifs. je verrai bien un div pour la page qui incluerai 5 div (un par couleur). Pour le bleu, je crois comprendre que la hauteur est dépendante du contenu (texte) donc je ne specifirai qu'une hauteur min (height-min). pour le jaune et le gris tu devrais aller voir le post de -FG- (Pb de hauteur de div) sur le salon débutant, Merkel donne une réponse qui devrait te convenir http://pompage.net/pompe/colonnesfactices/

Pour le positionnement, tu l'as compris, je commencerai en absolu (c'est le + simple à mettre en oeuvre) et j'oublierai les margin dans un premier temps (pb compatibilité entre FF et IE sur la façon de calculer la taille d'un bloc)

Bonne chance

Bonjour,

Si personne n'a encore cité les Modèles de mise en page en CSS, maintenant c'est fait

Felipe a écrit :
Si personne n'a encore cité les Modèles de mise en page en CSS, maintenant c'est fait

Si si, Jefferson l'a fait

Jefferson a écrit :
Mon code ne doit pas être très propre car je l'ai créé à partir du modele6 du site et je l'ai bidouillé

Ok merci pour vos réponses, je vais continuer ma lutte et ma compréhension de ce langage avec vos pistes aujourd'hui.

Tout d'abord désolé Igor au fait d'avoir oublié de commencer par "bonjour" pourtant je suis poli d'habitude mais là j'avais envoyé ce message hier soir après une journée de lutte où je voulais m'en sortir seul, puis je l'ai écrit un peu comme si j'appelai les pompiers ou le SAMU en panique du coup j'ai oublié les formules de politesse, j'ai également oublié de mettre en forme mes liens donc encore une fois désolé.

Par rapport à ce que tu disais Jessee, je n'attendais pas forcément de l'aide pour faire le boulot à ma place (même si ça m'aurait bien aidé pour que j'avance sur mes traductions) mais j'attendais avant tout une réponse pour que j'avance d'une manière ou d'autre. Ce que j’attends d'un forum ce sont des réponses, et celui-ci m'a l'air très vivant, c'est ce qui me plaît. Après il y a peut-être des incompatibilités d'humeur, des divergences de conception de la vie, etc. mais je ne vais pas rentrer dans vos histoires je viens d'arriver mais si ça arrive c'est justement ce qui fait que c'est "vivant" une fois encore; ce n'est pas comme si tu posais ta question à une machine et qu'elle te sortait à chaque fois la même réponse. L'avantage d'un forum c'est que tu peux avoir des réponses et des avis différents pour atteindre ton but.Fin de la parenthèse.

Pour revenir à mon problème (ou mes problèmes) de ma page; dans la page Comprendre le positionnement des balises en CSS j'ai lu:

a écrit :
Note : il n'est nullement obligatoire d'utiliser le pixel pour placer son bloc; n'importe quelle unité est valable (% , em, auto,...)

Du coup sans savoir comment utiliser ce % je me suis dit que ça devait fonctionner comme les frames, et tous mes tests avec des valeurs en % ont échoué… Quand je dis 100% je veux dire par là que ça prenne tout le reste de la page, de façon à ce qu'il n'y ait pas de blanc.Donc je veux une valeur fixe en largeur (pour menu et news par exemple) mais une valeur relative en hauteur qui s'adapte en fonction des résolutions d'écran, etc. et ce sans scroll. Je pensais donc qu'il fallait utiliser le % dans ce cas.

Par rapport à ce que tu disais Merlin en fait j'ai lu plusieurs fois sur ce site que le positionnement absolu était à éviter pour des problèmes d'incompatibilité. J'ai peut-être mal compris, peut-être que c'est uniquement lorsque l'on fait ça sous dreamweaver?

Bref merci pour toutes vos pistes je m'en vais étudier tout ça, la journée va être longue.

À + tard.

Jefferson a écrit :
Du coup sans savoir comment utiliser ce % je me suis dit que ça devait fonctionner comme les frames, et tous mes tests avec des valeurs en % ont échoué… Quand je dis 100% je veux dire par là que ça prenne tout le reste de la page, de façon à ce qu'il n'y ait pas de blanc.Donc je veux une valeur fixe en largeur (pour menu et news par exemple) mais une valeur relative en hauteur qui s'adapte en fonction des résolutions d'écran, etc. et ce sans scroll. Je pensais donc qu'il fallait utiliser le % dans ce cas.

Non en fait ce n'est pas si simple que ça.

En fait, le principe général est celui-ci :
- un élément de type bloc (voir liens donné) par exemple <div> occupe par défaut toute la largeur (100%) de son conteneur. S'il n'est pas contenu dans un autre bloc, alors il occupe toute la largeur du document (body). S'il y'a d'autres éléments qui prennent de la place dans le conteneur, alors il occupe toute la largeur restante.
- pour ce qui est de la hauteur, c'est différent. Un élément n'occupe que la hauteur de son contenu. Si un élément n'a pas de contenu, il n'occupe aucune hauteur, sauf si on lui indique spécifiquement une hauteur (height).

Dans ton cas, tu voudrais que tes éléments occupent 100% de la hauteur d'un conteneur qui... n'a lui-même pas de hauteur. A moins de spécifier une hauteur à ton conteneur général, les 100% ne se baseront sur rien et n'auront aucun effet.

Je ne suis pas sûr d'être clair, mais l'essentiel est là.

jessee a écrit :


Bien ton lien mais faudrait peut etre le signaler aux personnes qui ignorent la la politesse et la courtoisie et qui se comporte comme je l'ai dit comme un bulldog de service qui mord pour un rien (image)

Pour la dernière fois soyons clairs : si tu as des problèmes avec une personne en particulier, merci de régler cela entre vous, par mail ou messages privés. Je pense que vous êtes tous deux des adultes responsables et dans ce cas merci de débattre de choses privées... en privé.
Le forum n'a vraiment pas à pâtir de ce genre de sarcasmes privés.

A moins que ton seul objectif soit de jeter gratuitement des sarcasmes sur le forum et de répandre une mauvaise ambiance, dans ce cas, je le répète je préfèrerais que tu ne t'obstines plus à venir dans un endroit où tu ne te sens pas à ton aise.
Personne n'a rien contre toi, personne ne t'a agressé (j'ai beau lire et relire les interventions que tu mentionnes et je ne vois rien de blessant. De l'incompréhension peut-être, mais rien de blessant).

Bref, on va faire simple :
- soit tu te sens bien sur ce forum, tu adhères à ses règles et à la communauté d'entraide qu'elle représente
- soit tu ne t'y sens pas bien (pour une raison apparemment personnelle avec un seul membre en particulier), et dans ce cas merci de ne pas diffuser ce malaise strictement personnel et merci de ne pas te forcer à venir.
Modifié par Raphael (06 Nov 2005 - 14:24)

jessee a écrit :
en effet j'aurais peut etre du faire comme lui et mettre un tableau et non y mettre tout mon code

Ou une page directement visible en ligne, ce qui est toujours plus pratique pour les "aidants" que de recopier un code

PS : mais là nous polluons déjà le sujet de Jefferson
Modifié par Raphael (06 Nov 2005 - 14:25)

A cela et sans vouloir m'en prendre a quiconque je fais juste un constat, concernant Merlin :

Merlin a écrit :
J'avoue ne pas comrendre

Alors je me demande franchement pourquoi donc intervenir dans ces cas la si on ne comprends pas ?????????????????????????

Comme je l'ai dis pls haut je reconnais que je m'y suis certainement mal pris pour formuler ma demande et cela n'est pas une raison de me coller des trucs du genre "on n'est pas la pour faire le boulot a ta place" et surtout accompagne du fameux " "

Mais je vais en rester la, car ce forum n'est pas fait pour eduquer les gens mais plutot a aider les gens et cela est plus important.

MERCI

Comme me l'a conseillé Merlin je me suis débarrassé des margin, à la place j'ai décidé d'utiliser un float:right; et un float:left; pour mon menu et mes news. J'ai aussi mis mes 5 éléments dans un élément "conteneur" auquel j'ai donné une hauteur et une largeur comme me l'avait conseillé Raphael. Donc j'ai mis:

#conteneur {
position: absolute;
width: 100%;
height: 100%;

Par contre quand je dis à mon menu de prendre 100% en hauteur ça ne fonctionne pas ! Néanmoins si je fixe le conteneur à une taille en pixels ça marche !

De plus j'ai toujours du mal avec mon élément footer qui devrait être contenu entre les news et le menu tout en étant au bas de ma page… Par contre si je fixe height: 1000px (par exemple) à mon conteneur, là menu et news se déploient vu que je leur ai mis 100% en hauteur et footer prend à peu près sa place (après je voudrais qu'il soit poussé en bas par center mais ça c'est une autre histoire).Seulement je voudrais utiliser un % de la page et non pas une valeur fixe en pixels (et je n'ai pas compris la méthode où l'on fait semblant que cela descend).

Vous pouvez voir où j'en suis de ma page ici

En attendant je vais continuer de relire encore et encore les pages que vous m'avez filé pour m'aider et essayer de reconstituer le puzzle

PS:J'ai aussi nettoyé un peu mon code pour qu'il soit plus lisible.

Jefferson a écrit :
Donc j'ai mis:

#conteneur {
position: absolute;
width: 100%;
height: 100%;

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

jessee a écrit :
Alors je me demande franchement pourquoi donc intervenir dans ces cas la si on ne comprends pas ?????????????????????????

Merci de lire toute la phrase (sans-doute ironique) et éviter de sortir des morceaux de phrases de leur contexte lorsqu'il n'y a pas lieu de le faire. Parce que là on atteind vraiment le n'importe quoi.
Je le répète : si tu as des incompatibilités d'humeur avec un membre du forum, merci de régler ça entre vous.
Modifié par Raphael (06 Nov 2005 - 16:38)

Petit à petit j'avance sur mon casse-tête chinois .

En cliquant ici vous verrez où j'en suis de ma page

Grâce à tes précieux conseils Raphael j'ai rajouté ce qui me manquait, c'est à dire:

html, body {
    height: 100%;

ainsi que:

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

Entre autres modifications de mon code…

Par contre le problème c'est que vu que j'ai mis des valeurs en pixels pour fixer la hauteur de mon "Top", je ne peux pas utiliser correctement le % pour fixer la hauteur de mon "Menu" et "News". En fait il me faudrait une manière de dire:
height: 100% moins 92 px (=>hauteur de mon top)
Seulement comment faire ?

De même ça me servirait pour mon "footer" à qui j'ai spécifié 100% de largeur (width: 100%;) et qui dépasse sur ma partie news (et pas sur menu va savoir pourquoi) et donc j'aimerai lui spécifier:
width: 100% moins la largeur de news (128px)

Est-ce que ce genre de méthode, qui mêle % et px pour spécifier une hauteur ou une largeur est possible ? Si oui quelle balise faut-il utiliser ?
(Je ne sais pas si ma question est claire).

Jefferson a écrit :
De même ça me servirait pour mon "footer" à qui j'ai spécifié 100% de largeur (width: 100%;) et qui dépasse sur ma partie news (et pas sur menu va savoir pourquoi) et donc j'aimerai lui spécifier:
width: 100% moins la largeur de news (128px)

Pour le footer tu ne devrais pas avoir à spécifier de largeur : par défaut, les blocs occupent toute la largeur restante dans leur conteneur.
Au contraire, si tu imposes une largeur de 100%, ton footer va occuper toute la place et donc passer par dessus le reste.
Modifié par Raphael (06 Nov 2005 - 18:57)

Pourtant en enlevant "width: 100%;" à mon footer il ne prend plus que la largeur du mot "footer"… Et autrement peut-on mélanger pixels et pourcentage alors ?

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