Création style Css

gigab · Message par **gigab** » 13 juil. 2006, 12:29

Bonjour,
Merci d'abord à tous ceux qui m'ont aidé.
Je suis arrivé à ce point dans ma création de menu
http://jg.gillard.free.fr/essai/
J'ai donc créé 3 pages :
monmenu.inc.php sur dreamweaver
messtyles.css et index.php sur Nvu.

Le problème maintenant :
Le menu est trop décalé à droite je voudrai le décaler un peu vers la gauche sans pour autant le centrer. Je n'arrive pas non plus à enlever le soulignement du texte puis mettre une barre horizontale à quelques pixels des titres.
J'ai mis une image de fonds à partir de la feuille de style messtyles.css en ouvrant l'éditeur de Css et dans la page en en créant une "body". Le fonds apparait bien sous Nvu mais pas sur le serveur.

Merci d'avance pour votre aide !!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 13 juil. 2006, 13:10

Pour ce point-ci, c'est facile :

Code : Tout sélectionner

body { background-image: url(file:///E:/Essai/skin%20cuntrapunctus%20III.jpg);
    }

"E/Essai", c'est sur le disque dur de ton ordi et pas sur le serveur. Mets un chemin relatif pour ton url d'image, qui soit l'exact double de ce que tu dois avoir sur le serveur, et aussi :
http://www.geckozone.org/forum/viewtopi ... 7b054db871
Pour ce point-ci :

Le menu est trop décalé à droite je voudrai le décaler un peu vers la gauche

je vois que ce menu est dans un div à l'id "navcontainer", or je ne vois pas de propriété css pour l'id "navcontainer" dans ta feuille de style, ce div n'est signalé que dans le code html, c'est comme si tu avais la signalisation d'un div et puis c'est tout, or, comme ce fameux div "navcontainer" est inclus dans un div dont le style est "text align-right", et ben, forcément, il s'aligne à droite, et pas un peu + à gauche comme tu voudrais :

Code : Tout sélectionner

<div style="text-align: right;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>

<body><div id="navcontainer">
<ul id="navlist">
   <li><a href="" title="">Liens</a></li>
   <li><a href="" title="">Contact</a></li>
   <li><a href="" title="">Compositeurs</a></li>

   <li><a href="" title="">Accueil</a>
     <hr />
     <a href="" title=""><br />
   </a></li>
  </ul>
</div>

Alors, du coup on voit 2 doctype, qui viennent de ce que tu as utilisé DW en plus de NVU? Oooooohhhhhh... un peu louche, ça.
Bref, ton divcontainer est à droite parce qu'il est sous l'influence du "align-right" du div qui l'inclue, mais tu ne peux pas avoir 2 doctype, faudrait faire un peu de ménage, ne passe pas ça au validateur du W3C, tu vas le perturber?!?!?!?!

Mongo Bob · Message par **Mongo Bob** » 13 juil. 2006, 13:28

1er doctype, html Transitionnel

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

et 2ème doctype, xhtml Transitionnel

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Original...

Do-IT · Message par **Do-IT** » 13 juil. 2006, 13:44

http://jg.gillard.free.fr/essai/monmenu.inc.php devrait être un fragment html hors il s'agit d'une page html entière, d'où les doublons. Je lui ai pourtant dit d'utiliser un éditeur externe pour créer ce fichier, et surtout pas nvu.
En plus le doctype est du xhtml

Grrr

gigab · Message par **gigab** » 13 juil. 2006, 14:24

Je ne comprend rien

Bon je reprend calmement au début, j'y arriverai, le tout c'est que je comprenne le truc.

Je lui ai pourtant dit d'utiliser un éditeur externe pour créer ce fichier, et surtout pas nvu.

J'ai utilisé Dreamweaver...

Pour l'image de fonds j'ai pourtant bien remis un lien relatif, mais quand je réouvre le truc, ça me remet l'ancien..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Après essais voilà ce que ça donne http://jg.gillard.free.fr/essai/.
J'ai donc recopié le code Css à partir de l'éditeur, mais ça ne fonctionnait pas plus. J'ai donc exporté la feuille de style et voilà ce que ça donne. C'est bon pour l'image de fonds, mais tout ce que j'avais copié pour le menu a été effacé...et m'a tout balancé dans la page index.php....
Que c'est il passé ?

Mongo Bob · Message par **Mongo Bob** » 13 juil. 2006, 16:28

Pour l'image de fonds j'ai pourtant bien remis un lien relatif, mais quand je réouvre le truc, ça me remet l'ancien..

Comprends pas, n'emploie pas de termes aussi imprécis, quand tu réouvres le truc tu veux dire quoi par ça? L'ancien quoi?
Tu mets un lien relatif et tu n'as toujours pas d'image? Tu as actionné "Rafraîchir" dans le haut du navigateur? Je vois 2 images semblables à gauche et à droite, c'est ça que tu veux? L'url là-dessous, c'est exactement ce que tu as sur ton ordi (après "free.fr/"):

Code : Tout sélectionner

body { background-image: url(http://jg.gillard.free.fr/essai/cuntrapunctus.jpg);

?
Auquel cas, ça fait un point de réglé...

gigab · Message par **gigab** » 13 juil. 2006, 17:22

Oui pour l'image finalement c'est réglé.
en fait, j'ai tout repris depuis le début..
J'ai recréé les 3 pages.

Ceci dit, j'ai toujours le problème des menus. Je suis bien allé sur l'éditeur de Css, mais rien ne se passe.
(NB : ça c'est juste pour la page messtyles.css)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 13 juil. 2006, 23:22

Ceci dit, j'ai toujours le problème des menus. Je suis bien allé sur l'éditeur de Css, mais rien ne se passe.
(NB : ça c'est juste pour la page messtyles.css)

J'ai du mal à te comprendre; tu as été sur l'éditeur css et rien ne se passe? Ben, il faut pas que regarder! Pour que quelquechose se passe, il faut faire une modif, qu'est-ce que tu as fait, après? A part ça, "messtyles.css" n'est pas une page comme une autre, c'est une feuille de style pleine de code css, question de vocabulaire.
De toute façon, tu pourrais supprimer ça :

Code : Tout sélectionner

<div style="text-align: right;"> et le /div qui va avec 10 lignes + bas!

puis dans css donner à

Code : Tout sélectionner

<ul class="navlist">

ces propriétés :

Code : Tout sélectionner

float: left;
margin-left: 75%;

tu supprimes par la même occase le display:inline et tu laisses en Non défini, ça lui redonnera l'aspect bloc par défaut. Pas besoin de bloc div pour l'enfermer dedans, puisque l'ul est lui-même un bloc (quand on force pas en le mettant en "inline").
Déjà comme ça, tu auras ton menu moins à droite, tu mets 50% au lieu de 75, et il sera au milieu, tu mets 25 et il sera presqu'à gauche.
Si tu sais pas changer ça dans l'éditeur css, crie au-secours, vu que c'est pas en se contentant d'y aller que ça va faire qqch...
Déjà on dirait que tu t'es débarrassé de tes 2 doctype, si c'est un include php que tu voulais faire, comme disait Do-IT, il fallait prendre que le bout de code html nécessaire, pas toute la page (si j'ai bien compris, c'est ça qui s'est passé). Le même Do-IT a donné + d'explications pour un include là, et elles sont claires :
http://www.geckozone.org/forum/viewtopi ... che+commun
Je me demande si tu devrais pas te taper un bon tuto de A à Z avant de te lancer, vu que il me semble que se passer de tuto au départ, ça vous refait perdre encore plus de temps après. Tuto, celui qui m'a apporté la lumière :
http://info.sio2.be/NVU/1/index.php
Attention, son auteur rôde souvent par ici!

gigab · Message par **gigab** » 14 juil. 2006, 09:54

Voilà ce que j'ai mis dans la page messtyles.css
J'ai ouvert l'éditeur Css de cette page, et j'ai noté le code Css qui était donné

Peut être que ce n'était pas la bonne formule. j'en ai profité pour rajouter une règle "body" pour le fonds..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 14 juil. 2006, 11:21

Tu ouvres une feuille (et pas une page) css avec NVU comme si c'était une page html? Et tu ouvres l'éditeur css de la feuille css?

Tu notes le code = ? Et après?

Tu as rajouté une règle pour le body et tu as mis quoi en + de ce qu'i y'avait déjà?
Moi, je vois toujours ça, donc rien de changé :

Code : Tout sélectionner

body { background-image: url(http://jg.gillard.free.fr/essai/cuntrapunctus.jpg);

Aucun commentaire sur ma réponse précédente, comprends rien, tu me pousses à l'abandon

Bis:

Tuto, celui qui m'a apporté la lumière :
http://info.sio2.be/NVU/1/index.php

Bon courage.

gigab · Message par **gigab** » 14 juil. 2006, 12:04

J'ai lu le tuto, mais pour ce que je veux faire exactement ça ne m'apporte rien. Oh j'ai lu 240 pages de tuto que je me suis imprimé, mais bon..

Je reprend depuis le début.
1/ j'ouvre Nvu, il y a une page par défaut "sans titre". Je crée un menu normal. Je vais dans le code et je sélectionne ce qui a trait au menu et je le copie dans le bloc note. C'est mon fichier monmenu.php

2/ je réouvre Nvu. J'ai la page par défaut que j'enregistre sous messtyles.css.
Pour éviter que ça devienne messtyles.css.html, je fait enregistrer sous "tous les fichiers".
Lorsque cette page est ouverte, je vais dans outils "éditeur de css" et je recopie le code css qui j'ai mis plus haut, tel qu'indiqué sur ma capture d'écran dans mon message précédent.
Je ne fais rien d'autre. Si mes règles de feuilles de style interne sont fausses, je ne comprend rien. J'ai lu un tuto qui expliquait comment mettre le code sur la page, donc créer une règle "body". Il n'y avait rien sur les menus, comment les placer en ligne, comment leur donner un style quand la souris passe dessus etc..

3/ J'ouvre Nvu, j'enregistre la page par défaut en index.php. Dans le code de cette page, j'indique includemonmenu.php (le code php.)

Pour ta remarque précédente, je ne vois pas les codes que tu me dit. J'ai du changer quelque chose.

Enfin moi ce que je recherche c'est
1/ Avoir un menu spécifique qui se répète à chaque page que je créerai
2/ Avoir l'image de fonds aussi sur chaque page.
Tout ça en évitant de recréer menu et fonds à chaque fois.

Après je sens qu'il va y avoir d'autres problèmes genre est ce que tout va être en php, comment remplir les pages du site, etc..
mais bon chaque choses en son temps.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 18 juil. 2006, 08:51

je réouvre Nvu. J'ai la page par défaut que j'enregistre sous messtyles.css.
Pour éviter que ça devienne messtyles.css.html, je fait enregistrer sous "tous les fichiers".

"messtyles.css" n'est pas une page, c'est un fichier .css lié à chacune de tes pages (ou interne à chacune...). Tu as l'air de dire que tu l'ouvres comme une page html : pas normal.
Ouvre un dossier, n'importe lequel

Outils/Options des dossiers/Affichage/Décoche "Masquer les extensions des dossiers dont le type est connu". Ton "messtyles" a quelle extension? Il doit s'énoncer strictement : "messtyles.css", à mon avis tu vas voir "messtyles.html.css" ou un truc barbare comme ça. Supprime le superflu et ne garde que ".css" : tu ne pourras plus l'ouvrir directement avec NVu, ce qui est normal.
Quand tu fais "tous les fichiers" dans "Enregistrer sous", ce n'est pas pour enregistrer sous une extension quelconque, c'est pour voir tous les fichiers déjà créés, différent.
Quant à la façon de créer un menu commun par "include.php", ça m'a l'air tellement simple que je ne saurais mieux expliquer que dans le lien ci-dessus.

gigab · Message par **gigab** » 18 juil. 2006, 09:07

Ah oui, moi la page messtyles.css était une page que j'ouvrais direct avec Nvu. Ceci dit, j'ai quand même viré l'extension .html avant.

En fait, j'ai trouvé un compromis, ça vaut ce que ça vaut. J'ai fait une seule page avec des blocs et ensuite j'ai fait un css pour tout mettre en forme. Après j'ai dupliqué cette page en autant de fois que mon site contenait de pages..

Geckozone

Création style Css

Création style Css

Qui est en ligne ?