18041 sujets

Questions générales et questions de débutants

Tutoriel "mise en page sans tableaux" très zouli, et RESOLU!

Bonjour à tous!

Je tiens un site très modeste dans lequel je garde les traces des sorties sportives qu'on fait entre potes.

La première version était bordelique au possible. Je plaçais au petit bonheur la chance les éléments sur la page, en m'aidant de NVU.

Mais dès j'ai vite senti les limites de cette façon de faire. Je me suis alors tourné vers les css et le tuto suivant:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

Voici le résultat:
http://choucroutecrew5.free.fr/

C'est simple, c'est beau, sauf que...
1. dès que j'utilise l'éditeur CSS de NVU, le menu change


ul#menu li a { border-right: 2px solid rgb(255, 255, 255);
background: transparent url(nouveaudesign/bgmenuli.gif) [i]no-repeat 0 0[/i];
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 152px;
line-height: 25px;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 2px;
color: rgb(255, 255, 255);
display: block;
text-decoration: none;
font-family: malayalam;

A la place de la partie en italiques, il me met:
no repeat scroll


Bon, ça à la limite j'ai compris d'où vient le bug, donc je reprends cette ligne à chaque fois que je sors de l'éditeur CSS.

2. Par contre je ne comprends pas pourquoi l'image du header disparaît dès que je mets des images dans la page.

Exemple d'une page qui a perdu son header une fois que j'ai inséré des images, et qui ne l'a pas pour autant récupéré après que je les ai enlevées. Je vous mets la partie "head":

<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-15">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Language" content="fr">
  <title>essai1</title>
  <style type="text/css">
body { margin: 10px 0pt;
padding: 0pt;
background: rgb(51, 51, 255) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
text-align: center;
font-family: "Trebuchet MS",helvetica,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 0.8em;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}
div#conteneur { border: 2px solid rgb(0, 0, 153);
margin: 0pt auto;
background: rgb(255, 255, 255) none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 770px;
text-align: left;
}
h1#header { margin: 0pt;
height: 258px;
background-image: url(nouveaudesign/imageheader.jpg);
background-repeat: no-repeat;
}
h1#header a { background: transparent url(nouveaudesign/header.gif) no-repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 400px;
height: 70px;
display: block;
position: relative;
left: 350px;
top: 15px;
text-indent: -5000px;
}
ul#menu { border-style: solid none;
border-top: 2px solid rgb(163, 158, 253);
border-bottom: 2px solid rgb(110, 107, 172);
margin: 0pt;
padding: 0pt;
background: transparent url(nouveaudesign/bgmenu.gif) repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
height: 25px;
list-style-type: none;
}
ul#menu li { margin: 0pt 0pt 5px;
padding: 0pt;
float: left;
text-align: center;
}
ul#menu li a { border-right: 2px solid rgb(255, 255, 255);
background: transparent url(nouveaudesign/bgmenuli.gif) no-repeat 0 0;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 152px;
line-height: 25px;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 2px;
color: rgb(255, 255, 255);
display: block;
text-decoration: none;
font-family: malayalam;
}
ul#menu li a:hover { border: 1px solid rgb(204, 204, 204);
background: transparent url(nouveaudesign/bgmenuli.gif) no-repeat scroll 0pt -25px;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
}
div#contenu { padding: 0pt 30px 0pt 100px;
background: transparent url(nouveaudesign/headerpenche.gif) no-repeat scroll 15px 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
}
div#contenu h2 { border-bottom: 1px solid rgb(0, 0, 153);
background: transparent url(nouveaudesign/imageheadermini.jpg) no-repeat scroll left bottom;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
padding-left: 25px;
line-height: 25px;
font-size: 1.4em;
color: rgb(0, 0, 153);
}
div#contenu h3 { border-left: 3px solid rgb(153, 187, 34);
border-bottom: 1px solid rgb(153, 187, 34);
margin-left: 15px;
padding-left: 5px;
color: rgb(153, 187, 34);
}
div#contenu p { text-align: justify;
text-indent: 2em;
line-height: 1.7em;
}
div#contenu a { color: rgb(136, 170, 0);
}
div#contenu a:hover { color: rgb(153, 187, 34);
}
p#footer { margin: 0pt;
padding-right: 10px;
line-height: 30px;
text-align: right;
color: rgb(51, 51, 255);
}
pre { overflow: auto;
}
* html pre { width: 636px;
}
  </style>
</head>



http://choucroutecrew5.free.fr/articles/ntatras05.html


So, wheriz ze problem?
Merci.
Modifié par maup (08 Jul 2007 - 23:13)
Bonjour,

Deux choses :
1. NVU est un éditeur WYSIWYG intéressant mais n'est sans doute pas adapté pour une utilisation comme éditeur de code (HTML, CSS). Le fait qu'il modifie une partie du code que tu tapes n'est pas un bug, mais une fonctionnalité du logiciel.

2. Pour ton problème d'images non affichées, c'est un problème de chemin erroné. Tes images de fond sont appelées depuis ta feuille de style. Or, ta feuille de style n'est pas dans un fichier CSS à un endroit précis, mais copiée dans chaque page.

Pour l'image de la canette, par exemple, tu as le chemin suivant dans ta feuille de styles :
url(nouveaudesign/imageheader.jpg)

ce qui, depuis la page /index.htm, correspond au fichier suivant :
http://choucroutecrew5.free.fr/nouveaudesign/imageheader.jpg

Mais, depuis la page /articles/ntatras05.html, ça correspond au fichier suivant :
http://choucroutecrew5.free.fr/articles/nouveaudesign/imageheader.jpg
Bien évidemment, le chemin est faux (erreur 404).
Lumineux!
Merci beaucoup!

Vais essayer de dompter un autre logiciel que NVU...

Smiley biggrin
Vraiment merci.
a écrit :
Bonsoir,

Es-tu déjà allé faire un tour du côté de ce sujet : Quels sont vos outils de développement ? cligne


Oui je vais sûrement trouver mon bonheur là-dedans.

Mais pour l'instant, je tombe sur un autre problème. Pour éviter les soucis de liens découverts plus haut, j'ai exporté la feuille de style de mon index. Mais quand je l'ai liée à l'une de mes pages articles, seul le body apparaît! J'ai donc une page toute bleue...
maup a écrit :
Mais quand je l'ai liée à l'une de mes pages articles, seul le body apparaît! J'ai donc une page toute bleue...

On peut voir une de ces pages ?

Sinon, je te déconseille de garder le doctype suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Avec ce doctype, les navigateurs interprèteront la page en mode Quirks, ce qui n'est pas une bonne idée. Pour qu'elle soit interprétée en mode Standard, il faudrait un doctype complet, comme par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
maup a écrit :
http://choucroutecrew5.free.fr/

En fait, une fois balancé sur le serveur, ça donne ça...

On voit pourtant le lien vers la feuille de style. Et je vous assure que la feuille de style est aussi sur le serveur.


Bonjour,

Actuellement tu pointes sur ton disque dur, çà ne peut pas fonctionner.
<link media="all" rel="stylesheet" href="file:///C:/sitewebchoucroute/design2007.css" type="text/css">


devrait être noté:
<link media="all" rel="stylesheet" href="design2007.css" type="text/css">
Smiley cligne

Sinon le remarque de Florent sur le DOCTYPE que tu utilises est toujours d'actualité Smiley cligne
En fait c'est pas si bon...
Smiley confused
Bon j'explique.

Concernant le DOCTYPE, j'ai essayé de changer, mais je dois pas avoir la bonne technique parce que dès que je retourne au code source, je remarque qu'il a enlevé les mentions que j'ai rajoutées.

Est-ce la raison de mon souci? Je ne sais pas.

Toutes mes pages du répertoire principal sont désormais (et grâce à votre sagace dévouement) correctement reliées à ma feuille css exportée. Tout fonctionne, c'est géant. Mais..

Mais comme je suis quelqu'un de très ordonné (pffrrr), j'avais l'habitude de classer mes "articles" dans un dossier justement nommé "articles". Et là, les liens ne fonctionnaient pas. Je n'avais plus mes images du header, celles de mon menu, etc.

1. j'ai essayé de copier-coller la feuille css exportée pour la placer dans le dossier "articles". No result.
2. pour éviter les doublons, je lui ai donné un autre petit nom ("design2007art" au lieu de "design2007"). no result.
3. j'ai copié-collé le dossier "nouveaudesign" pour le mettre dans le dossier "articles", de manière à placer même les images du header, du menu etc dans le même dossier que les articles et la feuille de style. No result.
4. j'ai renommé ce dossier en "nouveaudesignart" pour éviter le doublon avec celui du répertoire principal. No result.
5. j'ai enfin renommé toutes les images de ce dossier pour éviter les doublons avec le dossier du répertoire principal (exemple: "imageheader" est devenu "imageheaderart"). No result...

Donc là, je ne sais plus quoi faire.

Je vous mets la feuille de style du dossier "articles"
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */


  body { margin: 10px 0pt;

    padding: 0pt;

    background: rgb(51, 51, 255) none repeat scroll 0% 50%;

    -moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    text-align: center;

    font-family: "Trebuchet MS",helvetica,sans-serif;

    font-style: normal;

    font-variant: normal;

    font-weight: normal;

    font-size: 0.8em;

    line-height: normal;

    font-size-adjust: none;

    font-stretch: normal;

    }



  div#conteneur { border: 2px solid rgb(0, 0, 153);

    margin: 0pt auto;

    background: rgb(255, 255, 255) none repeat scroll 0% 50%;

    -moz-background-clip: initial;

    -moz-background-origin: initial;
-moz-background-inline-policy: initial;

    width: 770px;

    text-align: left;

    opacity: 1;

    }



  h1#header { margin: 0pt;

    height: 258px;

    [b]background-image: url(nouveaudesignart/imageheaderart.jpg)[/b];

    background-repeat: no-repeat;

    }



  h1#header a { [b]background: transparent url(nouveaudesignart/headerart.gif)[/b] no-repeat scroll 0% 50%;
-moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    width: 400px;

    height: 70px;

    display: block;

    position: relative;

    left: 350px;

    top: 15px;

    text-indent: -5000px;

    }



  ul#menu { border-style: solid none;

    border-top: 2px solid rgb(163, 158, 253);

    border-bottom: 2px solid rgb(110, 107, 172);

    margin: 0pt;

    padding: 0pt;

    [b]background: transparent url(nouveaudesignart/bgmenuart.gif)[/b] repeat scroll 0% 50%;
-moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    height: 25px;

    list-style-type: none;

    }



  ul#menu li { margin: 0pt 0pt 5px;

    padding: 0pt;

    float: left;

    text-align: center;

    }



  ul#menu li a { border-right: 2px solid rgb(255, 255, 255);

    [b]background: transparent url(nouveaudesignart/bgmenuliart.gif)[/b] no-repeat 0 0;

    -moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    width: 152px;

    line-height: 25px;

    font-size: 1.2em;

    font-weight: bold;

    letter-spacing: 2px;

    color: rgb(255, 255, 255);

    display: block;

    text-decoration: none;

    font-family: malayalam;

    }



  ul#menu li a:hover { border: 1px solid rgb(204, 204, 204);

    [b]background: transparent url(nouveaudesignart/bgmenuliart.gif) [/b]no-repeat scroll 0pt -25px;

    -moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    }



  div#contenu { padding: 0pt 30px 0pt 100px;

    [b]background: transparent url(nouveaudesignart/headerpencheart.gif)[/b] no-repeat scroll 15px 50%;

    -moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    }



  div#contenu h2 { border-bottom: 1px solid rgb(0, 0, 153);

    [b]background: transparent url(nouveaudesignart/imageheaderminiart.jpg)[/b] no-repeat scroll left bottom;

    -moz-background-clip: initial;

    -moz-background-origin: initial;

    -moz-background-inline-policy: initial;

    padding-left: 25px;

    line-height: 25px;

    font-size: 1.4em;

    color: rgb(0, 0, 153);

    }



  div#contenu h3 { border-left: 3px solid rgb(0, 0, 153);

    border-bottom: 1px solid rgb(0, 0, 153);

    margin-left: 15px;

    padding-left: 5px;

    color: rgb(0, 0, 153);

    }



  div#contenu p { text-align: justify;

    text-indent: 2em;

    line-height: 1.7em;

    }



  div#contenu a { color: rgb(0, 0, 153);

    }



  div#contenu a:hover { color: rgb(204, 204, 204);

    }



  p#footer { margin: 0pt;

    padding-right: 10px;

    line-height: 30px;

    text-align: right;

    color: rgb(51, 51, 255);

    }



  pre { overflow: auto;

    }



  * html pre { width: 636px;

    }


J'ai mis en gras les liens foireux.

Et je vous donne le lien.
http://choucroutecrew5.free.fr/articles/ntatras05.html

Merci encore... Smiley sweatdrop
Modifié par maup (06 Jul 2007 - 22:08)
Sujet clos
Aller à