Le tuto de Gagea

Gagea · Message par **Gagea** » 22 nov. 2008, 16:22

Merci Ymai pour ta réponse,
Personnellement j'ai trouvé plus facile de créer des pages avec wrapper.
Disons que lorsque j'ai appris avec ton tuto je ne m'en sortais pas bien tant que je ne me suis pas décidée à mettre un wrapper.
Plus tard peut-être j'abandonnerai cette méthode mais pour l'instant je préfère. Y a-t'il un inconvénient ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Message par **Ymai** » 22 nov. 2008, 16:40

Gagea a écrit :Y a-t'il un inconvénient ?

Non, mais http://fr.wikipedia.org/wiki/Rasoir_d%27Occam
Et j'ai aussi appris comme cela.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 22 nov. 2008, 17:02

En fait, je crois que c'est plus simple lorsqu'on veut centrer un site car sur les $@!@*%% de Internet Explorer cela doit encore coincer...

Sur FF on pourrait s'en passer!

GAUNCE · Message par **GAUNCE** » 22 nov. 2008, 17:20

Et quand on a pas mis de wrapper, qu'est-ce qu'on risque?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Gagea · Message par **Gagea** » 23 nov. 2008, 20:59

Ymai a écrit :
tuto a écrit :Notre page web a besoin d'une enveloppe de protection qui englobe toutes les autres zones.
J'aurais envie de demander "Pourquoi?"

Bonjour Ymai : J'aimerais arriver à comprendre. Je pense que wrapper ou conteneur c'est l'enveloppe qui englobe tout le contenu (l'en-tête, le menu, le texte et le pied-de-page) d'une page quand on veut la centrer. Effectivement dans ton tuto tu ne parles pas de cette enveloppe mais dans le code source d'une page au hasard de ton tuto j'ai vu :

Code : Tout sélectionner

</head>
<body>
<div id="conteneur">

et le css

Code : Tout sélectionner

#conteneur {
  border-color: #ffff00;
  border-width: 0;
  margin: auto;
  width: 930px;
}

Tu me dis "j'ai aussi appris comme ça". Ce qui laisse supposer que tu ne procèdes plus comme ça. Comment faut-il faire pour s'en passer ? Faut-il appliquer au body le style que nous avons appliqué l'un et l'autre à notre enveloppe ? Merci d'éclairer ma lanterne.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 23 nov. 2008, 21:14

L'article suivant semble confirmer qu'il n'y a pas de salut sans un div englobant la "page réelle" si on veut la centrer.
http://css.alsacreations.com/Faire-une- ... web-en-CSS

Message par **Ymai** » 23 nov. 2008, 21:29

Actuellement, je fais des choses de ce type-ci:

Code : Tout sélectionner

body {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

Gagea · Message par **Gagea** » 23 nov. 2008, 21:42

Merci. J'essayerai.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Message par **chinon37** » 24 nov. 2008, 08:04

Ymai a écrit :Actuellement, je fais des choses de ce type-ci:
Code : Tout sélectionner
body {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

Attention, sous IE avec un mauvais doctype et sous IE5 et <, il faut ajouter:

Code : Tout sélectionner

text-align: left;

sinon, il y aura un bug de centrage.
Bien penser, dès le bloc suivant, à remettre l'alignement du texte comme souhaité.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3

Gagea · Message par **Gagea** » 24 nov. 2008, 09:47

Merci Chinon pour cette précision,
C'est donc une complication de vouloir se passer d'une enveloppe.
C'est bon à savoir qu'on peut faire autrement, mais dans mon tuto, qui s'adresse à des débutants je ne vais pas proposer cette solution. Qu'en pensez-vous ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Message par **chinon37** » 24 nov. 2008, 09:50

Non, non, ce n'est pas une complication.
Pour moi, la complication, c'est de faire un conteneur supplémentaire alors qu'on peut passer par <body>
Ma précision ci-dessus n'a pas lieu d'être si :
- on utilise KpZ qui donne automatiquement un doctype valide
- on considère que IE5 est quantité négligeable, qu'on peut donc négliger.
Après, à chacun de voir...

GAUNCE · Message par **GAUNCE** » 24 nov. 2008, 12:17

Une fois le body délimité à 1000px, on a donc cette enveloppe remplaçant un div conteneur, ok...
alors comment met on une image d'arrière plan au body, donc au 1000px et une autre à l'arrière plan du body, donc de 1000px à disons 1900px?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Message par **chinon37** » 24 nov. 2008, 13:52

Bien entendu, on ne peut mettre qu'une image de fond par bloc et le body est un bloc.
Dans ce cas, on peut toujours créer une règle html pour un fond "complet" qui couvrira la page quelque soit sa largeur et une règle body pour une largeur spécifiée.
Perso, et ceci n'engage que moi, je mettrais une image de fond pour le body et une couleur de fond coordonnée pour html.

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 24 nov. 2008, 13:55

On parle du tuto de Gagea ici

Je propose d'y insérer ceci
http://josar.free.fr/tutoKompozer/feuil ... o_css.html

L'exemple donné ne contient pas de conteneur global, juste menu + le contenu.

Ce mini tuto permet de montrer et de se familiariser au css via webdevelopper et Firefox

Gagea, tu as juste à recopier le fichier chez toi, l'adapter à ton bon plaisir, tenir compte des remarques deZôtres et faire éventuellement les corrections nécessaires.

Ce message s'auto-détruira au bout du temps nécessaire au refroidissement du fût d'un canon, le fichier aussi

GAUNCE · Message par **GAUNCE** » 24 nov. 2008, 18:04

Fabrice.Tres.Net a écrit :La présentation d'un document avec des retours de chariot est à éviter, l'espacement des éléments se fait avec des marges, du bourrage, ou des espacements avant et après des paragraphes, des titres,... C'est prévu au niveau css!

Qu'est ce que tu appelles "bourrage"?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Geckozone

Le tuto de Gagea

Qui est en ligne ?