Une mise en page sans tableaux en 5 minutes

Message par **Ymai** » 04 oct. 2008, 23:17

Bonjour
A partir du moment où l'on a

body {
background-image: url(../Mes%20images/Paris%20Ground%20Zero.jpg);

c'est bien tout le corps de la page qui prend l'image; et non seulement le div "titre"

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

eda · Message par **eda** » 05 oct. 2008, 11:43

donc c'est ça le probleme ymai?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SIMBAR={CFDD86C2-882A-4CEE-BAA2-6DCB70F310C7}; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)

Mongo Bob · Message par **Mongo Bob** » 05 oct. 2008, 15:28

le code collé par Ymai dit que l'image est rattachée au fond (background) du <body> donc de la page en entier, et non au <div> titre seul.
De toute façon, après m'être abîmé les yeux sur ton code, illisible

, je n'y trouve aucun <div id="titre">, c'est donc normal qu'aucune image n'y soit rattachée!
à+...

Mongo Bob · Message par **Mongo Bob** » 05 oct. 2008, 15:33

Complément :
les 2 seules images sur ta page sont bien

Code : Tout sélectionner

Mes%20images/Paris%20Ground%20Zero.jpg

et le lien vers la pastille de Kpz, on a donc vite fait de vérifier!
Faudrait déjà créer le <div id="titre">, quand même!

Gagea · Message par **Gagea** » 08 oct. 2008, 20:00

J'ai essayé de faire cet exercice mais à la fin je me retrouve avec un espace sous le div header.

J'ai fait Ctrl+R: le div content est remonté mais pas les div menu1 et menu2.
J'ai refait Ctrl+S et le div content est redescendu au niveau des div menu

Quelle est mon erreur ? Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 08 oct. 2008, 20:57

Sans la page cela va être dur! (Rengaine habituelle ;D)

Mets la temporairement sur ton site !
Conseil tu t'y fais un répertoire tmp pour loger tes essais.

Gagea · Message par **Gagea** » 08 oct. 2008, 21:33

OK - voici la page publiée dans un dossier temp. Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 08 oct. 2008, 23:27

Ajoute h1 { margin: 0 0;} pour supprimer la marge par défaut autour du titre de niveau 1.

Gagea · Message par **Gagea** » 09 oct. 2008, 09:43

Fabrice.Tres.Net a écrit :Ajoute h1 { margin: 0 0;} pour supprimer la marge par défaut autour du titre de niveau 1.

Merci Fabrice.
J'ai rectifié mon exercice et j'ai publié sur mon site une page reprenant le tuto de Kaze. J'ai rajouté un paragraphe concernant h1 pour si des débutants comme moi avaient le même problème.
http://josar.free.fr/tutoKompozer/MenuDouble.html
Dites-moi si ça va. Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

eda · Message par **eda** » 09 oct. 2008, 19:00

c bon j'ai réussi a réglé mon problème de couleur de fond dans "titre" et autre....il suffisai d'aller dans cascades tout simplement pour enlever les couleurs..
merci encore de votre aide.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SIMBAR={CFDD86C2-882A-4CEE-BAA2-6DCB70F310C7}; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 09 oct. 2008, 19:40

Gagea a écrit : http://josar.free.fr/tutoKompozer/MenuDouble.html
Dites-moi si ça va. Merci

Pour moi c'est très bien comme d'habitude.

Je constate que les copies d'écran sont de qualité.

Suggestions:
1. rajouter un lien vers la page résultat comme ceux qui n'y arrivent pas pourront la télécharger.

2. préciser qu'il sera préférable de transformer la feuille de style interne en une feuille séparée (un fichier css) pour une utilisation + efficace, une maintenance facilitée et des possibilités d'évolutions nombreuses (changer le fond de page de toutes les pages, la couleur des titres, ... en modifiant seulement ce fichier)

Gagea · Message par **Gagea** » 09 oct. 2008, 21:14

Bonsoir,
Les deux suggestions sont réalisées. C'est vrai que c'est mieux.
Les copies d'écran, je les trouvais trop grandes mais je les laisse maintenant dans les dimensions d'origine. C'était en les réduisant que la qualité chutait.
Merci pour ton aide, tes conseils et ton appréciation.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Message par **Ymai** » 09 oct. 2008, 23:04

Fabrice.Tres.Net a écrit :
Gagea a écrit : http://josar.free.fr/tutoKompozer/MenuDouble.html
Dites-moi si ça va. Merci
Pour moi c'est très bien comme d'habitude.

Certes, mais pourquoi passer par les styles internes plutôt que CSS directement? J'ai dû rater une marche...

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

Message par **chinon37** » 10 oct. 2008, 08:02

Ymai a écrit : Certes, mais pourquoi passer par les styles internes plutôt que CSS directement? J'ai dû rater une marche...

Quand Kaze a créé ce petit tuto, l'objectif était de faire au plus simple pour quelqu'un qui ne connaissait [même] pas les css en tant que feuille de style.
On part donc d'une série de conteneurs qu'on met en forme par clic droit > styles internes. ceci ne requiert aucune connaissance préalable et on est en wysiwyg pur en exploitant les capacités du logiciel.
Ensuite, les styles internes sont exportés en feuille de style incorporée [à la page] par extraire et créer un style générique.
Il est vrai qu'on peut maintenant encore avancer d'une étape: "Exporter la feuille de style et utiliser la feuille exportée".

L'avantage de la méthode ci-dessus est de ne pas rebuter le débutant qui par définition ne connait rien des css. Il découvre progressivement les feuilles de styles "presque " sans s'en rendre compte.

Nota: le terme interne est impropre, amha, pour une feuille de style.
Je ferais ce distinguo:
- interne: les styles sont dans le corps de la page (cf clic droit sur la balise)
- incorporé: les css sont dans une "feuille" de style positionnée dans l'en-tête du fichier html entre <head> et </head>
- externe: les styles sont définis dans un fichier séparé et un lien vers ce fichier est placé dans l'entête du fichier html entre les balises <head> et </head>

Gagea · Message par **Gagea** » 10 oct. 2008, 09:14

C'est vrai que pour un débutant toutes ces dénominations sont troublantes :

style interne
style interne exporté qui devient feuille style interne ou incorporée
feuille de style incorporée et exportée qui devient feuille de style externe, séparée, exportée, liée...

chinon37 a écrit :Nota: le terme interne est impropre, amha, pour une feuille de style.

Je suis d'accord, malheureusement sur le logiciel c'est le terme "Feuille de style interne" qui est employé. Pour un débutant on ne peut pas trop changer les termes sinon il ne s'y retrouve plus. J'ai tenu compte de ta remarque dans mon tuto. Si vous voyez d'autres améliorations possibles, merci de me le dire. Vous avez une vision bien plus globale que moi.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Geckozone

Une mise en page sans tableaux en 5 minutes

Tuto mise en page avec 2 menus

Qui est en ligne ?