La Ferme du web - Les forums

priere · 07/11/2009 06:44:54

Bonjour smile

Voilà, alors en fait, j'essaye en vain de comprendre pourquoi après le tutoriel "créer le design d'un site web de la maquette photoshop à l'intégration XHTML/CSS"--qui est excellent d'ailleurs, Merci tongue --, mon image "header" ainsi que toutes les autres parties de mon "kit graphique" ne s'affichent pas lorsque je commence à rentrer le code CSS pas à pas. En gros, je bloque à cette partie du tuto pour ainsi dire : http://www.lafermeduweb.net/tutorial/mi … s-p21.html
Je m'interroge sur la taille de mes images qui sont par 1024, si la largeur était d'environs 800 pixels est ce que cela changerait tout? Je n'y connais pas grand chose à ce sujet. neutral Bref, j'ai tout essayé, j'y ai passé la nuit donc j'ai décidé de demander de l'aide au lieu de stagner...Toutes les images contenues dans mon dossier "images" dans mon dossier "site", ne s'affichent vraiment pas à l'aide du CSS. Uniquement si je rentre les images coupées, directement via le HTML. Mais bien entendu le rendu est nul, aucune mise en forme et pas de "repeat" pour l'image de corps du milieu etc...J'ai fait tout ce qui est dit dans le tutoriel pourtant, sauf peut-être les dimensions des images?Ou ça n'a rien à voir? Parce que moi ça ne m'empêche pas de les voir si je les intègre direct via HTML mais c'est pas le but sad Bref, je l'ai mis en ligne pour voir via mon hébergeur, c'est une catastrophe. Avec le fichier CSS, la seule chose qui marche c'est le fond uni et le changement de couleur pour l'écriture et bien sûr tout ce qui est liens et texte avec HTML. Je suis perdue, ma demande peut paraître idiote mais tant pis. hmm
Merci à ceux qui voudront bien m'éclairer.Cela me serait d'un grand secours... Ca serait vraiment super gentil. roll

Virginie

Dernière modification par priere (07/11/2009 06:51:09)

Botte De Foin Publicitaire · 07/11/2009 06:44:54

Sybio · 07/11/2009 18:48:24

Salut Virginie ^^

Et bien je vais te lister toutes les erreurs possibles que tu as du faire, à toi de vérifier si tout est correct !
Déjà, pour l'histoire d'image trop grande, rassure-toi ça n'a rien à voir wink

Erreur probable 1:
Tu as mal spécifié le chemin de ton image par rapport à ton fichier CSS.
En effet regarde dans quel dossier se trouve ton fichier CSS, par exemple s'il se trouve dans le dossier "styles" qui est dans ton dossier site, il faudra remonter le fichier "styles" pour aller dans le fichier "images".
Et pour ça il faut rajouter "../" dans le chemin de ton image.

Un exemple:

Code:

background-image: url('../images/header.jpg');

Erreur probable 2:
Tu as oublié d'assigner une largeur et une hauteur à ton bloc qui contient l'image.

Un exemple:

Code:

#menu
{
    background-image: url('../images/menu.jpg');
    width: 1025px;
    height: 28px;
}

Erreur probable 3:
Tu as mal spécifié le chemin de ton image dans ton fichier CSS encore une fois, mais en oubliant un sous-dossier

Un exemple:

Code:

background-image: url('../images/design/header.jpg');

Erreur probable 4:
Tu as mal spécifié le chemin de ton image dans ton fichier CSS encore une fois xD, mais en te trompant d'extension d'image

Un exemple:

Code:

background-image: url('../images/design/header.png');

Erreur probable 5:
Tu as peut-être oublié de mettre ton bloc dans le fichier html !!

Un exemple:

Code:

<div id='header'></div> dans le fichier html

Erreur probable 6:
Si tu connais les #id et les .class, peut-être que tu as mis un id dans l'html et une classe dans le css, ou inversement !

Erreur probable 7:
Si rien ne marche avec ton fichier CSS, aucune déco, etc... Tu as peut-être mal spécifié le chemin de ton fichier CSS par rapport à celui de ton fichier html.
Par exemple si ton fichier HTML se trouve à la racine du dossier "site", et ton fichier CSS est dans le dossier "styles" (lui-même à la racine de "site"), et bien voilà la balise link a mettre dans ton fichier HTML

Code:

<link rel="stylesheet" media="screen" type="text/css" href="styles/main.css" />

Voila, et si tu ne trouves toujours pas, envoie-moi ton code, tes images, ou mieux ton site hébergé que je vois les sources etc... wink

priere · 07/11/2009 21:37:19

Salut Sybio smile MERCI big_smile
Eh bien voilà, grâce à tes précieuses énumérations d'erreurs possibles, j'ai enfin "réussi", enfin surtout compris!
Je suis contente, je connais un peu plus les bases maintenant roll
En fait la seule bêtise que j'avais faîte c'était dans le fichier CSS !--

Erreur probable 3:
Tu as mal spécifié le chemin de ton image dans ton fichier CSS encore une fois, mais en oubliant un sous-dossier

Un exemple:

background-image: url('../images/design/header.jpg');

J'avais omis un sous-dossier.
J'avais fait ça dans le fichier CSS :

#header { background-image: url("../images/header.jpg");

A la place de ça :

#header { background-image: url("../site/images/header.jpg");

En fait, c'était tout bête yikes

Quoi qu'il en soit je ne compte pas utiliser cette interface, c'était principalement pour apprendre et m'entraîner afin d'essayer de confectionner un prochain site et puis comme c'est mon premier je l'ai quelque peu raté... J'ai des progrès à faire smile Entre autre, pour le corps du milieu, je ne comprends pas pourquoi ça rend comme ça...Ainsi que les traits en bas à droite. Je crois pas que ce soit un problème de code, je pense plutôt que j'ai dû me tromper à une certaine étape avec Photoshop dans le design mais je ne vois pas hmm Je sais bien que ce n'est pas le bon topic pour ce qui concerne Photoshop ... neutral Mais, comme ça a concerné le CSS.. Deux en un !

http://www.creature-sennuie.com Encore merci Sybio pour la rapidité de ta réponse!

Virginie

Dernière modification par priere (09/11/2009 03:39:16)

Sybio · 08/11/2009 15:13:16

Et bien pour le footer tu n'as pas soustrais le height par le padding-top, donc l'image est répétée de force yikes

Erreur:

Code:

#footer
{
   background-image: url("images/bas.jpg");
   width: 1024px;
   height: 38px;
   color: #b3a793;
   font-size: 12px;
   text-align: center;
   padding-top: 40px;
}

38 - 40 = -2
Pour éviter de mettre un height négatif, j'ai mis 0px et j'ai baissé ton padding-top à 38px:

Correction

Code:

#footer
{
   background-image: url("images/bas.jpg");
   width: 1024px;
   height: 0px; // le padding-top élargit la hauteur du bloc de 38px, donc il faut enlever 38px à la hauteur
   color: #b3a793;
   font-size: 12px;
   text-align: center;
   padding-top: 38px; //le texte se décale de 38px par le haut
}

Pour ce qui est de ton milieu, si tu dupliques l'image tu constateras qu'elle n'est pas marron foncée au milieu (ce que tu voulais non ?), donc tu n'as pas découpé une image avec du marron au milieu mais du gris :p
Plus qu'a redécouper le bon milieu!

Sybio · 08/11/2009 15:14:58

et pour les traits en bas à droite, regarde ton image footer il y a un trait dessus, ca vient donc de ta découpe wink
Plus qu'a redécouper l'image en virant le trait !

Et ça c'est surement avec une bordure noire sur un calque.
Du coup quand tu recadres ton image avant de la découper, fais un clic droit sur un calque visible, et choisis l'option aplatir l'image, normalement il ne doit pas y avoir de problème de bordure !

Et si tu n'arrives toujours pas, héberge ton fichier .psd sur ton site que je récupère et corrige ça :p

priere · 08/11/2009 21:41:13

Bonsoir et merci beaucoup pour tes précieux conseils, Sybio tongue

Je les ai suivis et ça rend beaucoup mieux big_smile par contre, je n'ai pas réussi en ce qui concerne le redécoupage du "corps" du milieu parce que photoshop dit qu'il y a moins de 50% de pixels je ne sais quoi, donc j'ai découpé l'endroit que j'ai cru le plus "propice" sur l'image du bas. Mais j'ai comme l'impression que cela "génère" une sorte de "conflit" au niveau des pixels, des couleurs, des bords du "corps" etc.
Pour les traits disgracieux d'en bas à droite; de mon pc, on dirait qu'ils ont miraculeusement disparus, non ? hmm

Encore merci roll cool

V.

EDIT : Je sais pas ce que j'ai touché(j'étais en train d'insérer du contenu), mais maintenant dès que j'écris ça enlève une partie du design du corps et on aperçoit la couleur de l'arrière-plan à la place. sad sad sad

Regarde en bas de la page : http://www.creature-sennuie.com/

Dernière modification par priere (09/11/2009 05:27:21)

Sybio · 10/11/2009 12:05:07

A ca c'est le paragraphe qui fait ça !
En fait quand tu mets une balise de type bloc en début ou en fin de div, ici le corps, ça l'écarte un peu j'ai jamais vraiment su pourquoi ^^'

Donc le truc, c'est d'enlever xD
Ou alors faut voir avec les padding-bottom par défaut des paragraphe, peut-être qu'il faut les mettre à 0, idem pour le mpargin-bottom.

Bref évite les paragraphes en fin de div wink

priere · 10/11/2009 19:50:14

J'ai rien compris hmm

Sybio · 10/11/2009 23:09:13

Bin enlève ta balise <p> à la fin de ton corps wink

priere · 11/11/2009 12:22:42

Merci Sybio wink
Je te vénère . lol

priere · 11/11/2009 21:48:45

et pour les traits en bas à droite, regarde ton image footer il y a un trait dessus, ca vient donc de ta découpe
Plus qu'a redécouper l'image en virant le trait !

Et ça c'est surement avec une bordure noire sur un calque.
Du coup quand tu recadres ton image avant de la découper, fais un clic droit sur un calque visible, et choisis l'option aplatir l'image, normalement il ne doit pas y avoir de problème de bordure !

Et si tu n'arrives toujours pas, héberge ton fichier .psd sur ton site que je récupère et corrige ça :p

Je n'y parviens pas roll

Voici le lien du footer : http://www.creature-sennuie.com/bas.psd

Si tu pouvais faire quelque chose ça serait génial. MERCI. smile

Ps : Sais-tu comment cela se fait que le site s'affiche différemment sous Mozilla firefox et sous IE ? Notamment pour le texte, la mise en page? mad hmm Quand je mets une image on dirait que ça fait tout bugger.
Et puis quand je mets la balise <p align="center"</p>, bah ça refait le truc qui coupe le kit en bas, donc ça veut dire que je suis dans l'impossibilité de centrer une image sur cette page, puisqu'on doit bannir ces balises là...
C'est embêtant..

Dernière modification par priere (11/11/2009 22:02:48)

priere · 16/11/2009 00:00:03

BONSOIR
Pourquoi ma page marron a des pixels pas égaux ? L'effet rend bizarre...
Si on pouvait me répondre...

Dernière modification par priere (16/11/2009 00:00:18)

La Ferme du web - Les forums

#1 07/11/2009 06:44:54

Problème avec intégration CSS avec tutoriel maquette Photoshop.

07/11/2009 06:44:54

#2 07/11/2009 18:48:24

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

Code:

Code:

Code:

Code:

Code:

Code:

#3 07/11/2009 21:37:19

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#4 08/11/2009 15:13:16

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

Code:

Code:

#5 08/11/2009 15:14:58

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#6 08/11/2009 21:41:13

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#7 10/11/2009 12:05:07

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#8 10/11/2009 19:50:14

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#9 10/11/2009 23:09:13

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#10 11/11/2009 12:22:42

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#11 11/11/2009 21:48:45

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

#12 16/11/2009 00:00:03

Re: Problème avec intégration CSS avec tutoriel maquette Photoshop.

Pied de page des forums