Débutant au CSS

Bonjour,

Je vous explique mon problème...

J'aimerais refaire complètement mon site Web. En effet, jusqu'à maintenant j'ai procédé avec FrontPage, mais il y a peu j'ai découvert les "joies" des normes W3C... Alors j'ai décidé de tout revoir depuis la base, notamment en séparant HTML et CSS... Et c'est là qu'arrive mon problème : La mise en page ! Un screen de ce que je devrais logiquement avoir est dispo ci-dessous...

http://www.denvercountryclub.yi.org/denver7/interface.JPG

Il faut cependant que le pied de page se positionne après les colonnes latérales, mais il faut également que dans le cas d'une page ayant une taille inférieure à celle de la fenetre du navigateur, ce même pied de page vienne se coller au bas de l'écran...

Alors bon, j'ai retourné les 3 premières pages de Google, je trouve des résultats, certes, mais un peu par ici, un peu par là, etc... Conclusion : Un hack pour ceci, une propriété spécifique pour cela, etc... bref, mon code fait très "bourrin", je suis aussi prêt à parier qu'il y a des trucs qui ne servent à rien, etc...

De plus, le modèle "3 colonnes" que j'ai trouvé insère le pied de page sous le contenu central, et non sous les colonnes latérales... Et j'ai beau chercher, j'y comprends rien ! Ben vi, je débute en CSS...

J'ai oublié de préciser quelque chose... Si il n'avait pas 70% des parts du marché, j'aurais même pas réfléchi autant...Mais bon, 'faudrait que le tout soit compatible avec IE... (Au moins en attendant le 7, si bien entendu c'est mérité)

Est-ce que quelqu'un pourrait m'aider à y voir plus clair svp ?

Les sources de ce que j'ai pu trouver :

Page sur toute la hauteur : http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Modèle "3 colonnes" (je l'ai remanié par la suite selon mes besoins) : http://www.ultra-fluide.com/ressources/css/template-css2.htm

Mon code (page HTML) : http://www.denvercountryclub.yi.org/denver7/modele.html

Mon code (CSS) : http://www.denvercountryclub.yi.org/denver7/interface/style/style.css

salut
ici c'est le forum des débutants forcément, personne ne va répondre car comme toi et moi bcp sont débutants....
Salut

e

J'ai un post en dessous du tien, il a été vu 48 fois (ha non autant pour moi, il a été vu 46 fois mon post sur le menu déroulantà) et personne n'a répondu ;(
il y d'autres forums où les internautes sont plus ouvert aux débutants (je ne ferai pas de pubs)
Sans mauvaise rancoeur, mais quand même faut croire que sur alsa certains n'ont jamais été débutants...
je suis de mauvaise humeur tiens aujourd'hui...
Modifié par darcy (01 Sep 2006 - 09:24)

Moi, il est arrivé un jour d'envoyer un post, j'y ai mis 5 messages pour relancer mon sujet: personne n'a répondu... car après qqes temps de recherche, j'avais fini par trouver moi-même. Il faut savoir poser ses questions, réfléchir au problème un minimum au ieu de demander tout de suite une réponse.


Après cette intro va voir ce lien:

ici

Il parle du positionnement flottant tout en bas, regarde bien le code et si tu ne comprends pas certaines choses pose alors tes questions.

Pour un design sur trois colonnes :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

Pour le positionnement du pied de page :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

Des problèmes vont se poser si on veut des colonnes qui vont toutes deux systématiquement jusqu'en bas, indépendamment de leur contenu. Il faudra alors utiliser la technique des colonnes factices, qui est hélas peu évidente à mettre en place dans la configuration que tu présente (deux colonnes factices, à une distance variable l'une de l'autre).
Pour les colonnes factices, tu peux chercher dans les tutoriels d'Alsacréations.

darcy a écrit :
J'ai un post en dessous du tien, il a été vu 48 fois (ha non autant pour moi, il a été vu 46 fois mon post sur le menu déroulantà) et personne n'a répondu ;(
il y d'autres forums où les internautes sont plus ouvert aux débutants (je ne ferai pas de pubs)
Sans mauvaise rancoeur, mais quand même faut croire que sur alsa certains n'ont jamais été débutants...

À vrai dire, sur Alsacréations tous ont déjà été débutants... même les modérateurs.

Il arrive effectivement que certains messages ne trouvent pas de réponse. Il y a à cela deux causes principales :
- les personnes susceptibles de répondre n'étaient pas disponibles à ce moment là (je passe pour ma part beaucoup de temps sur Alsa, et il m'arrive de zapper un message auquel je pourrais répondre, tout simplement parce que si je répondais systématiquement à tous les messages il me faudrait un CDI à temps plein pour l'animation des forums d'Alsa. Mais si tu veux me financer...) ;
- les messages en question sont mal rédigés, ou bien le problème énoncé n'est pas clair.

Dans ton cas, je ne sais pas ce qu'il en est de la première cause, mais la deuxième me semble avoir joué. Je viens de lire ton message, et j'avoue ne pas avoir compris au juste où est le problème. Si la question est « comment je fais un menu déroulant », ça ne risque pas de motiver les gens à te répondre. Il y a quantité de tutoriels en ligne (dont un très vieillissant et en cours de ravalement de façade sur Alsacréations) sur le sujet.
Présente autant que possible des questions précises, de préférence en t'appuyant sur un code HTML/CSS/Javascript (ce qui demande de faire des essais par soi-même dans un premier temps).

Les questions du type « ce point précis (exemple, page en ligne ou à défaut code) me pose problème » obtiennent de meilleurs réponses que les sujets du type « j'y arrive pas, quelqu'un peut m'aider ? ».

Bonjour,

mpop a écrit :
Des problèmes vont se poser si on veut des colonnes qui vont toutes deux systématiquement jusqu'en bas, indépendamment de leur contenu. Il faudra alors utiliser la technique des colonnes factices, qui est hélas peu évidente à mettre en place dans la configuration que tu présente (deux colonnes factices, à une distance variable l'une de l'autre).

Personnellement je crois qu'il existe des modèles n VRAI colonnes qui rendent les colonnes factices un peu désuettes. Je pense en particulier à celui-ci, qui me parait robuste et fonctionne (avec certains artifices il est vrai, mais que l'on peut prendre ou laisser selon l'objectif de compatibilité) sur un panel large de navigateurs.

Bonjour,

Xavier a écrit :
Je pense en particulier à celui-ci, qui me parait robuste

Il faudra déja commencer par débrousailler la somme de hacks CSS et de contournements sur laquelle il repose, pour déterminer s'il s'agit d'une solution réellement robuste et industrialisable.

Pour ma part, je n'ai jusqu'ici pas eu le temps de faire cet excercice très fastidieux et au profit incertain. Cet aspect des choses est en fait à lier très directement au faible retentissement final de cette méthode dans les réalisations actuelles
Modifié par Laurent Denis (01 Sep 2006 - 13:41)

Re-Bonjour,

Pour répondre brièvement au fait de demander de l'aide plutôt que de chercher par soi-même, ce n'est pas faute d'essayer, croyez-moi ! Mais c'est comme demander à quelqu'un de changer des pistons sans que celui-ci aie vu un moteur de toute sa vie : "C'est quoi un piston ?"

Ici c'est pareil ! Je voudrais pouvoir "comprendre" le code ! Mais pour cela, j'ai besoin d'une base clean ! Je m'étais dit qu'une fois mon problème résolu, je pourrais lire le code, le modifier pour voir les conséquences du dit changement, dans le but de comprendre qui fait quoi ! Tandis que là, j'ai aucune base réelle, je pars de rien, il m'est donc difficile d'établir un code valable, et je ne parle même pas du fait de le comprendre !

J'ai fait un tour sur les liens que vous m'avez donnés, j'ai trouvé un générateur de mise en page, sous forme de header-3colonnes-footer, tout ce que j'ai besoin ! J'ai tout de suite ouvert la CSS et le fichier XHTML, pour les regarder. Je vois apparaître dans le fichier XHTML des attributs CSS concernant la mise en page. La CSS ne contient quant à elle que les attributs de couleurs... Est-ce normal ?

Je me posais également une autre question... Bon, une fois que le navigateur a "caché" un objet, lors d'une réutilisation (sur une autre page, par exemple), c'est plus rapide vu que déjà dans le cache... Quand je regarde le fichier XHTML, il pèse 17ko, et chaque XHTML aura un contenu variable, selon la page évidemment, mais une partie du code restera identique (celle contenant les attributs CSS de mise en page)

Je me demandais donc si il était possible de "prendre" tous les attributs CSS intégrés au fichier XHTML et de les mettre dans une seconde CSS à part. J'aurais donc trois fichiers : L'un concernant les couleurs (CSS), l'autre concernant la mise en page (CSS), et le contenu (XHTML).

Donc dans le fichier XHTML, au lieu d'appeller 1 CSS :

<style type="text/css" media="screen">@import url("css/style.css");</style>

J'en appellerais 2 :

<style type="text/css" media="screen">@import url("css/couleurs.css");</style>
<style type="text/css" media="screen">@import url("css/miseenpage.css");</style>

Est-ce que cela est faisable, et surtout permis ?


[Edit]
C'est faisable, je viens de le faire. J'ai une CSS contenant les attributs de couleur, une autre concernant les attributs de mise en page, et mes fichiers XHTML qui, après séparation du code CSS, ne pèse plus que 2ko à vide (Je gagne 15ko par page) et vu que les deux CSS seront mises dans le cache, je pense que la rapidité d'affichage n'en sera que décuplée, rectifiez-moi si je me trompe
Modifié par SolykZ (01 Sep 2006 - 20:08)

Il est effectivment préférable d'avoir l'ensemble de la mise en page dans des feuilles de style externes.

Après, soit tu rajoutes les codes récupérés dans la page HTML pour compléter la feuille de style déjà existante, soit tu en fais une deuxième.

Une petite correction :

<style type="text/css" media="screen">
	@import url("css/couleurs.css");
	@import url("css/miseenpage.css");
</style>

Note que ce que tu as fait n'était pas faux, mais c'est tout de même plus simple comme ça.

Pour ce qui est de demander de l'aide plutôt que de chercher par soi-même : entendons-nous bien, personne ne t'a fait le moindre reproche. Je répondais uniquement à darcy qui estime que les intervenants sur ce forum ne se préoccupent pas vraiment des débutants. Selon moi, c'est l'inverse. On peut peut jouer au jeu des comparaisons avec d'autres forums, mais il me semble qu'au niveau de l'(entr)aide, c'est plutôt pas mal.
Même -- et peut-être surtout -- pour les questions des débutants.


Pour ce qui concerne ta demande, j'ai donné quelques pistes ci-dessus, mais j'avoue qu'elle ne sont pas évidentes à appliquer. Le problème des débutants est qu'ils veulent généralement réaliser pour leur premier essai un design complet et complexe, qui demande une certaine maîtrise. On se retrouve donc à leur indiquer des ressources (tutoriels, documentations) qu'ils auront le plus grand mal à mettre en application.

Il est plus facile de répondre aux débutants quand ceux-ci ont des attentes de débutants, et ne cherchent pas à brûler les étapes (note : ceci est une remarque générale).

Ah mais je ne l'avais pas pris pour moi, je répondais simplement à ton post car je me sentais concerné, étant débutant... J'en vois beaucoup qui viennent et attendent une solution clé en mains, je voulais simplement préciser que ce n'était pas mon cas...

Concernant ta correction, j'y avais même pas pensé, je corrigerai cela...

Malheureusement, j'ai été habitué au travail facile... Je me rends compte maintenant en parcourant le code des pages de mon site actuel que c'est vraiment la méthode "même pas peur", j'aimerais tant corriger cela, surtout que lorsque j'aurai fini mes études d'informatique, c'est pour me diriger vers le webmastering... Revenir aux sources est pour l'instant synonyme d'offrir à mes visiteurs un site moins riche... J'aime pas trop cela je dois dire... Mais bon, une fois l'étape passée, je pourrai leur offrir un contenu PLUS riche, et c'est ça l'important je trouve... Je vais donc partir d'un modèle de base, en 3 colonnes, le faire correctement, et une fois qu'il sera bien prêt, l'améliorer...

Le problème principal, et je suppose qu'il aura été lourdement cité sur tous les forums de ce genre, c'est la compatibilité du code avec les navigateurs et plateformes diverses..... Je voulais surtout traiter cela en premier... Mais il est vrai que quand je vois le code obtenu sur mes essais, ça fait très peur...

j'ai trouvé un lien intéressant qui propose différents templates (à voir si cela peut te servir)

http://www.intensivstation.ch/templates/
Modifié par darcy (02 Sep 2006 - 11:21)