CSS/HTML - Positionner les images

(reprise du message précédent)

Fixe, qu'il puisse être lu sur toute la page en résolution 800X600 et que la taille soit la même pour les grosses résolutions (avec l'image de fond qui s'étend a droite et à gauche (marges).

Bon j'ai fait un essai vite fait ici : Essai

Vérifié uniquement sous FF3 et IE7. IE6 devrait poser quelques problèmes (min-height, PNG transparents) assez faciles à résoudre.

Je n'ai pas trop trop porté attention à l'accessibilité, s'il y a des choses améliorables je prends. Le code n'est pas hyper clean non plus, me tapez pas
Modifié par mistike (13 May 2009 - 13:32)

C'est tout de même pas mal.

Le fond est en dégradé comparé au mien mais ça doit être un problème de lien que j'ai du faire.
La barre de menu n'a pas de dégradé mais elle est disponible sous l'appelation menu.PNG dans Images donc ça c'est pas gênant.
La barre (dégradé gris) pour l'espace de connexion n'est pas présent mais ça aussi c'est possible de le rajouter derrière.
La police d'écriture est à changer, même si je pense pas retrouver la même que j'avais mise lors de la phase de création du menu sous Photoshop. Et je pense qu'au final je vais enlever les deux séparateurs et simplement laisser un écart plus important pour démarquer les deux boutons.

Voila, sinon c'est très bien et ça m'avance tout de même pas mal dans mon projet. Y'a plus cas continuer pour le reste (espace de connexion, contenu du corps, ...)

Un grand Merci !

Alors en fait j'ai refait les images, principalement du menu. Regarde les images que j'ai utilisées ici : sous dossier images. Tu verras qu'il y en a beaucoup moins et qu'elles sont petites.

* Le fond est dégradé car il l'était sur ta maquette, donc je l'ai refait.

* La barre de menu et le footer n'ont pas de dégradé visible car je les ai juste agrandies mais c'est facile à refaire. Elles sont transparentes par contre

* Je n'ai pas mis l'espace de connexion parce que je suis une bille en formulaires et que j'avais pas envie de chercher

* La police... laquelle as-tu utilisée sous photoshop ?

* Pour tes images, inutile de faire du PNG si tu n'as pas de transparence. Le jpg est plus léger

J'ai rajouté les images de contenu. Elles peuvent se positionner toutes seules car tu les as taillées pile poil, mais je les ai mises dans des div séparés pour pouvoir les cibler quand même au cas où

Je t'invite à bien étudier à la fois le code HTML et le code CSS afin de comprendre la structure et surtout comment ça fonctionne...
Modifié par mistike (13 May 2009 - 14:21)

Oui, je viens de regarder les deux codes et c'est vrai que j'ai pas toutes les connaissances nécessaires pour faire ça tout seul. Mais quand on lis le CSS on fait facilement le lien de "qui fait quoi ?" dans le code HTML et qu'elle résultat ça donne sur la page en elle même.

Je retourne travailler, je reviens en fin de journée, je viens de prendre ton code, de l'arranger pour ma page mais les images ne s'affichent pas, je verrais ça en rentrant.

Merci encore !

La police d'écriture c'était : Calibri taille 15 sur le logiciel
Je comprend pas pourquoi les images ne s'affiche pas, il affiche uniquement le ALT comme il le faisait avant avec l'image droite et gauche. J'ai même copié/collé ton code complètement pour vérifier et ça fait exactement pareil. Je comprend pas.

Sinon pour le CSS, quelques petites questions :

- Pourquoi quand on met un DIV sur le code HTML, on marque pas cette DIV dans le code CSS ?

Exemple :

div#panier

- Quand est-ce qu'on utilise SPAN ?
- A quoi correspond

a:hover

Bon j'ai d'autres questions mais j'irais me documenter par la suite.

PS : Certaines images ne s'afficher pas car il fallait mettre .PNG au lieu de .png dans la feuille CSS...
Modifié par DKProject (13 May 2009 - 18:56)

DKProject a écrit :
La police d'écriture c'était : Calibri taille 15 sur le logiciel

Effectivement ce n'est pas une police standard...

a écrit :

Je comprend pas pourquoi les images ne s'affiche pas, il affiche uniquement le ALT comme il le faisait avant avec l'image droite et gauche. J'ai même copié/collé ton code complètement pour vérifier et ça fait exactement pareil. Je comprend pas.


PS : Certaines images ne s'afficher pas car il fallait mettre .PNG au lieu de .png dans la feuille CSS...

Il faut qu'elles soient dans le bon répertoire. Dans mon exemple elles étaient dans ./images (chemin relatif).

Pour l'extension, celles que j'ai refaites et utilisées n'avaient plus l'extension en majuscule, sauf celles du contenu que je n'ai pas touchées.

a écrit :

- Pourquoi quand on met un DIV sur le code HTML, on marque pas cette DIV dans le code CSS ?

Exemple :

div#panier

Dans le CSS, tu sélectionnes les éléments par leur "nom" (classe ou id), peu importe leur "type" (div, span...). Si un élément possède une classe ou un id, il est inutile de spécifier son "type" dans le CSS.

a écrit :

- Quand est-ce qu'on utilise SPAN ?

Un DIV est un élément de type bloc. Un SPAN est un élément de type inline (en ligne). Tu vas me dire, c'est quoi la différence
Voir ce magnifique tuto
Et puis ensuite celui-ci

a écrit :

- A quoi correspond

a:hover

C'est l'état survolé d'un lien. Dans mon exemple, lorsque tu survoles un lien du menu sans le cliquer, il devient souligné.

a écrit :

Bon j'ai d'autres questions mais j'irais me documenter par la suite.

Je ne saurais trop te conseiller de parcourir les tutos d'Alsa, voire celui du Site du Zéro...
Modifié par mistike (13 May 2009 - 19:58)

Ok, merci pour tout ces liens. J'ai réussi à répondre à mes questions dans certains cas en essayant de parcourir le code HTML et CSS et en bidouillant un peu. Merci pour ces compléments.

Bon, maintenant...

Je me casse la tête depuis tout à l'heure sur quelques problèmes :

- Je ne parviens pas à coller les deux images (gauche et droite)
- Je ne parviens pas non plus à descendre l'image du dessous contre le footer (pour que la femme ne soit pas découpée)
- Impossible de retrouver ma barre grise de connexion, j'arrive pas à la faire réapparaître, pourtant j'ai cherché dans le code HTML et CSS, j'ai ajouté un DIV dans les deux codes et j'ai ensuite paramétré pour quelle soit visible mais apparemment j'ai encore du me tromper...
- Et enfin, j'ai essayé de centrer le texte du footer (copyright) mais pas moyen de voir de quelle manière.


PS : Si jamais vous auriez une adresse Windows Live Messeger à me communiquer pour pouvoir améliorer nos conditions de travail. J'ai pas trop envie de monopoliser le forum avec des pages et des pages de questions... Alors si c'était envisageable, ça serait super !!!


PS2 : Je suis parvenu à centrer le copyright !!!


PS3 : J'ai envie de mettre un petit séparateur entre les deux blocs d'images sur la page d'accueil. Je dois passer obligatoirement par le CSS. J'ai essayé mais comme d'habitude ça n'a pas marché... vraiment nul !

J'ai mis dans le code HTML le code suivant :

    <div id="corps">
    
      <div class="offres">

        <a href="50.html"><img src="images/accueil/gauche.jpg" alt="Offre spéciale, chaussures jusqu'à -50%" /></a>
        <a href="20.html"><img src="images/accueil/droite.jpg" alt="Nouvelle collection, -20% sur tous les articles" /></a>
      </div>
	  
	  [b]<div class="separateur">
	  </div>[/b]
      
      <div class="selection">
        <a href="ete.html"><img src="images/accueil/ete.jpg" alt="C'est l'été, profitez-en avec notre sélection ensoleillée" /></a>
      </div>
      
    </div>

Et dans le code CSS (entre .selection et .offre)

#corps #separateur {
background:url(images/separation.jpg);
border-left:0px;
margin-left:30px;
}

Modifié par DKProject (13 May 2009 - 20:49)

DKProject a écrit :

- Je ne parviens pas non plus à descendre l'image du dessous contre le footer (pour que la femme ne soit pas découpée)

Tu as déjà trouvé le margin du bas de la photo

Il te reste ça à modifier :

#corps {
background:#FFFFFF none repeat scroll 0 0;
min-height:300px;
padding:10px 0;
}

^ là j'ai mis un padding de 10px en haut et en bas. Il faut enlever celui du bas :

#corps {
background:#FFFFFF none repeat scroll 0 0;
min-height:300px;
padding:10px 0 0 0;
}

Ah merci, j'avais essayer d'augmenter et baisser le "300px" a cette endroit pour voir quel élément était lié donc j'étais pas si loin !

La je suis au niveau de ma barre grise... mais je perd relativement patience parce que j'ai essayé pleins de techniques différentes pour y parvenir mais elle reste invisible. Le corps de la page peut t-il la cacher ?

DKProject a écrit :

PS3 : J'ai envie de mettre un petit séparateur entre les deux blocs d'images sur la page d'accueil. Je dois passer obligatoirement par le CSS. J'ai essayé mais comme d'habitude ça n'a pas marché... vraiment nul !

J'ai mis dans le code HTML le code suivant :

    <div id="corps">
    
      <div class="offres">

        <a href="50.html"><img src="images/accueil/gauche.jpg" alt="Offre spéciale, chaussures jusqu'à -50%" /></a>
        <a href="20.html"><img src="images/accueil/droite.jpg" alt="Nouvelle collection, -20% sur tous les articles" /></a>
      </div>
	  
	  [b]<div class="separateur">
	  </div>[/b]
      
      <div class="selection">
        <a href="ete.html"><img src="images/accueil/ete.jpg" alt="C'est l'été, profitez-en avec notre sélection ensoleillée" /></a>
      </div>
      
    </div>

Et dans le code CSS (entre .selection et .offre)

#corps #separateur {
background:url(images/separation.jpg);
border-left:0px;
margin-left:30px;
}

Ca ne marche pas parce que ton div est vide, et donc il a une largeur et une hauteur... nulles.

Pour séparateur je te propose <hr /> : Ici

J'utilise <hr> avec du CSS ou bien je dispose juste la petite image de séparation que j'ai créée ?

http://shade45.free.fr/projet/images/separation.jpg
Modifié par DKProject (13 May 2009 - 21:07)

C'est quoi ce <br /> qui traine à la fin ? Si tu veux descendre tes images de validation, utilise les marges dans le CSS

Je veux bien utiliser les marges mais mes deux images de validation ne sont pas relié à quoi que ce soit dans le CSS (elles sont juste englobées dans le "global").

Je dois créer un DIV ?

Je viens de réussir ma séparation, merci !

a écrit :


- Impossible de retrouver ma barre grise de connexion, j'arrive pas à la faire réapparaître, pourtant j'ai cherché dans le code HTML et CSS, j'ai ajouté un DIV dans les deux codes et j'ai ensuite paramétré pour quelle soit visible mais apparemment j'ai encore du me tromper...

Déjà il faudrait le mettre au bon endroit, donc dans le div "connexion", c'est-à-dire entre les deux balises <div id="connexion"> et </div>

Arf, c'est les erreurs de débutants. Je confond le CSS et l'affichage d'image dans le code HTML...
Donc enfaite je dois mettre le lien de l'image dans le code HTML... désolé !

PS : Voila c'est bon... merci !
Modifié par DKProject (13 May 2009 - 21:19)

DKProject a écrit :
Arf, c'est les erreurs de débutants. Je confond le CSS et l'affichage d'image dans le code HTML...
Donc enfaite je dois mettre le lien de l'image dans le code HTML... désolé !

PS : Voila c'est bon... merci !

Pas forcément

Dans le code HTML tu mets les images qui présentent du contenu (par exemple tes trois photos). Celles qui ne sont que de la déco, doivent aller dans le CSS. Comme par exemple une barre de séparation

Sinon, pour ton formulaire, vu que tu as fait des modifs je ne sais plus à quoi il est censé ressembler... et il n'est pas sur la maquette.

Bon déjà, sans le styler à part le fond et la taille de police, je l'ai remis sur mon exemple

a écrit :

PS : Si jamais vous auriez une adresse Windows Live Messeger à me communiquer pour pouvoir améliorer nos conditions de travail. J'ai pas trop envie de monopoliser le forum avec des pages et des pages de questions... confused Alors si c'était envisageable, ça serait super !!! smile

Désolée, pas de messenger (de plus je n'ai pas l'air comme ça mais là je suis au boulot ^^). Par contre, je ne sais pas effectivement si on n'est pas un poil Hors Sujet / Hors Charte.... Dans ce cas nos vaillants modérateurs nous le diront !!
Modifié par mistike (13 May 2009 - 21:23)

Oui, y'a un problème là... mon image grise ne devrais pas être dans le CSS puisque je veux mettre mon formulaire par dessus ?

En théorie mon formulaire devrait être présenté de cette manière :

Pseudo : [Zone de texte] Mot de passe : [Zone de texte] |CONNEXION|

Et à droite de connexion avoir les deux liens l'un au dessus de l'autre (encore une prouesse que je ne saurai pas faire... lol)

a écrit :
Désolée, pas de messenger (de plus je n'ai pas l'air comme ça mais là je suis au boulot ^^). Par contre, je ne sais pas effectivement si on n'est pas un poil Hors Sujet / Hors Charte.... Dans ce cas nos vaillants modérateurs nous le diront !! murf

Ca serait dommage de nous censurer, je dois dire que cet entretien me permet d'apprendre très largement les deux codes et ce plus facilement que lorsque je me rend sur des sites censés m'apprendre les langages. Même si je sais que rien ne remplacera les tutoriels.

C'est pour cela je j'édite un maximum mes messages !

J'aimerais juste savoir, avant de partir pour mon lit, comment résoudre :

- L'espace entre les deux images
Modifié par DKProject (13 May 2009 - 21:29)

DKProject a écrit :
Oui, y'a un problème là... mon image grise ne devrais pas être dans le CSS puisque je veux mettre mon formulaire par dessus ?

Si tu regardes mon code, tu verras que l'image grise, qui n'est que de la déco, se trouve définie dans le CSS, en tant qu'arrière-plan du div "connexion". Dans le HTML je n'ai fait qu'un copier-coller de ton propre code de formulaire, qui ne contient aucune info concernant son *apparence*.

Oui, je viens de retirer l'image dans le code HTML et tout est bien maintenant. Il me reste plus cas réussir à placer les éléments du formulaire pour obtenir ce que je désire (je sais pas si je peux prendre les textes (Identifiants oubliés ? Devenez membre) et les réaliser en boutons cliquables, ça serais peut-être plus pratique et esthétique.

DKProject a écrit :
Oui, je viens de retirer l'image dans le code HTML et tout est bien maintenant. Il me reste plus cas réussir à placer les éléments du formulaire pour obtenir ce que je désire (je sais pas si je peux prendre les textes (Identifiants oubliés ? Devenez membre) et les réaliser en boutons cliquables, ça serais peut-être plus pratique et esthétique.

Pas sûr, ça peut aussi charger trop. A tester. Par contre je doute que tu aies la place de tout mettre sur la même ligne -