CSS/HTML - Positionner les images

(reprise du message précédent)

DKProject a écrit :


PS : J'ai réussi à tirer le trait de soulignement sur le copyright. Je sais pas comment mais il est parti !

Sûrement en fermant une balise <a> qui trainait

Tu devrais essayer d'indenter ton code, peut-être y verrais-tu plus clair et oublierais moins de balises fermantes

DKProject a écrit :
Merci pour les BR. Mais pour le A, ce n'est pas ici que le slash me gêne, c'est après le lien de l'image entre les balises A. Si je met ça dans cette position il m'indique 45 erreurs.

Je ne sais pas si la version en ligne est à jour puisque tu le fais en direct live mais certaines de tes balises <img> ne sont pas fermées.

Essaye de prendre ça ligne par ligne, en corrigeant chaque erreur. La plupart sont clairement indiquées par le validateur, si ça peut t'aider.

Exemple :

    <ul>
      <li><a href="accueil.html"><img src="images/header.PNG" border="0" id="header" alt="header"></a></li>

      <li><a href="panier.html"><img src="images/panier.PNG" border="0" id="panier" alt="panier"></a></li>	
    </ul>

Ici, aucune des deux balises <img> n'est fermée.

Après on attaquera la séparation du HTML et du CSS

Oui, j'ai déjà essayé de bien l'éclaircir mais je vais encore peaufiner ce côté là ! Je dois dire que la partie programmation c'est pas trop mon fort et que je galère pas mal. Désolé de vous prendre votre temps pour des problèmes qui peuvent, en apparence, facilement se régler.

Bon, comme c'est de pire en pire voici le lien vers les specs :
http://www.la-grange.net/w3c/html4.01/index/elements.html


Quand c'est marqué :
Balise ouvrante : obligatoire, balise fermante : obligatoire
* il faut utiliser <element>...</element>
Exemple : l'élément A.

Quand c'est marqué :
Balise ouvrante : obligatoire, balise fermante : interdite
* il faut utiliser <element /> (on parle d'élément vide).
Exemple : l'élément BR ou l'élément IMG.
Modifié par Heyoan (11 May 2009 - 20:31)

Ok merci.

PS : Voila c'est déjà moins fouillis et il me reste que 5 erreurs (BR) et le BODY aussi.

PS 2 : C'est bon, mon code passe au vert avec le validateur, merci !!!
Modifié par DKProject (11 May 2009 - 20:54)

mistike a écrit :


Je ne sais pas si la version en ligne est à jour puisque tu le fais en direct live mais certaines de tes balises <img> ne sont pas fermées.

Essaye de prendre ça ligne par ligne, en corrigeant chaque erreur. La plupart sont clairement indiquées par le validateur, si ça peut t'aider.

Exemple :

    <ul>
      <li><a href="accueil.html"><img src="images/header.PNG" border="0" id="header" alt="header"></a></li>

      <li><a href="panier.html"><img src="images/panier.PNG" border="0" id="panier" alt="panier"></a></li>	
    </ul>

Ici, aucune des deux balises <img> n'est fermée.

Après on attaquera la séparation du HTML et du CSS

Prêt pour la seconde étape !

DKProject a écrit :


Prêt pour la seconde étape !

Sans les images ça va pas être facile hein

Bon, le principe, c'est de séparer tout ce qui est contenu (dans le doc HTML) de tout ce qui est mise en forme (dans le CSS).

Donc tout ce qui est "border=truc, position=machin", ça n'a rien à faire dans le HTML.

Un peu de lecture :

Construire-un-site-sans-tableaux

ensuite la suite

Est bien les images qui seront sur l'accueil se seront celles qui sont disponibles dans le dossiers ACCUEIL :

http://shade45.free.fr/projet/images/accueil/

Elles seront disposées de la même façon que le design de départ (premier lien dans mon tout premier poste).
Là ce que je comprend pas c'est que depuis que mon code est valide, elles n'apparaissent plus sur la page d'accueil.

Pour le menu, pour prendre l'exemple, se sera quelque chose de cette forme là ?

<ul>

        <li>
                <a href="#">accueil</a>
        </li>
        
        <li>
                <a href="#">membres</a>
        </li>
        
        <li>
                <a href="#">images</a>
        </li>
        
        <li>
                <a href="#">téléchargements</a>
        </li>
        
        <li>
                <a href="#">plus</a>
        </li>
        
</ul>

Avec un

<DIV ID=""></DIV>

?
Modifié par DKProject (11 May 2009 - 21:35)

hello,

Mmm il semblerait qu'il y ai pas mal de chose à dire sur si peu de ligne:

    <ul>
      <li><a href="accueil.html"><img src="images/header.PNG" border="0" id="header" alt="header" /></a></li>

      <li><a href="panier.html"><img src="images/panier.PNG" border="0" id="panier" alt="panier" /></a></li>	
    </ul>

Soit mais pourquoi faire une liste pour cela alors qu'un H1 pour le logo et un div pour le panier me semblerait plus sympathique

Pourquoi le <br /> pour le séparer de ton menu alors qu'une marge devrais suffir

Une table pour ton menu ??? pourquoi pas simplement une liste et tout ces attributs border="0" sur tes images, pourquoi ne pas le définir une bone fois pour toute dans ton css

img {border:0;}

Après j'ai plus les yeux qui s'ouvrent assez grand mais attention a tes balises <br />

J'ai essayé d'arranger un peu le code en fonction de vos instructions mais les images ne se placent pas là où j'aimerais.

      <h1 id="header"><a href="accueil.html" title="Accueil"><img src="images/header.PNG" alt="header" /></a>
	  </h1>
	  <div id="panier"><a href="panier.html"><img src="images/panier.PNG" border="0" alt="panier" /></a>
	  </div>

Je verrais ce soir, je dois aller travailler. Bonne journée à vous !

Bonsoir, je viens de continuer un peu ce que vous m'aviez conseillé mais c'est pas probant !

Hello

Tes essais sont toujours là ? http://shade45.free.fr/projet/accueil.html

Tu en es où ?
Modifié par mistike (12 May 2009 - 21:52)

Oui toujours la même page !

J'ai encore épuré mon code pour qu'il colle avec les normes.
J'ai essayer de faire le menu en liste comme conseillé mais c'est pas trop ça (voir le site)
J'ai aussi essayé de voir ce qui pose problème entre le logo et le panier (même après avoir mis un H1 pour le logo et un div pour le panier, comme conseillé également).

Mais pour le moment rien de bien probant !
Modifié par DKProject (12 May 2009 - 21:57)

mistike a écrit :
Tout ce qui est définition de style comme width, height, et même les images

Juste en passant : IMG fait partie des quelques éléments dont les dimensions ont leur place dans le code HTML. Voir par exemple ce sujet qui en parle.
Modifié par Heyoan (12 May 2009 - 23:29)

Heyoan a écrit :
Juste en passant : IMG fait partie des quelques éléments dont les dimensions ont leur place dans le code HTML. Voir par exemple ce sujet qui en parle.

Certes, et merci pour le lien, intéressante discussion ! Je suis d'accord sur le principe, mais en l'occurrence, même les images du menu devraient être dans le CSS, puisqu'elles ne sont là "que" pour la décoration.

Ceci dit pour le reste de la page, et certainement les photos des articles en vente, ça méritait d'être précisé... Je me garde ça dans un coin.

Ah OK : je croyais que tu parlais simplement des attributs width et height des images.

Bonjour,

J'arrive tard dans la bataille mais en voyant la page de test, je constate que:

1. Il manque un conteneur global dont on se servirait pour définir la largeur du site, le centrer grâce aux marges automatiques (margin: 0 auto), etc.
2. Le découpage de cette barre de menu est mauvais. Il ne faut pas découper des images bout par bout, mais utiliser une image de fond globale (barre bleue avec ses arrondis dans les coins, extensible en hauteur tant qu'à faire, et sans les textes et les séparateurs).
3. Le texte des items du menu gagnerait à être écrit dans le code HTML, et pas dans les images. C'est tout à fait envisageable ici.
4. Si on utilise une liste pour le menu, il faut un LI par élément du menu, et pas de LI vide pour y caser des images, des séparateurs, etc.
5. Tu définis une fonte Verdana sans indiquer de famille par défaut, tu définis une taille de texte en points (à priori pas adapté pour le Web, du moins à l'heure actuelle), etc. On a plusieurs articles sur la typographie web et la gestion du texte sur Alsacréations, je t'invite à les lire.
6. Si tu as une image-bouton sur laquelle on lit "Nous contacter", pourquoi ne pas avoir "Nous contacter" comme texte alternatif et pas "contact"? "Accueil" et pas "accueil", etc. (Bon bien sûr vu ma recommandation #3 il faudrait virer ces images et placer le texte directement dans le code HTML.)

Clair ? Oui vous l'êtes mais le problème c'est que je ne saurais pas faire tout çà sans votre aide. Malgré que je veuille apprendre à faire toutes ces démarches en lisant des sites, des cours, des aides, ... Je ne parviendrai jamais a faire tout ce que vous me dîtes.

Je commence déjà a me perdre dans mon code de base, j'imagine même pas si je dois me mettre a faire tout ça sans avoir la moindre idée de comment y parvenir.

C'est pour cela que j'aurais aimé avoir une personne qui aurais pu m'aider a réaliser cette page morceau par morceau (ça dois être assez rapide à faire j'en suis sur vu vos connaissances). C'est en aucun cas une demande pour qu'on fasse le travail à ma place puisque j'ai envie de comprendre comment cela fonctionne. Mais la je suis pas un débutant dans la matière mais un véritable nul !!! Cependant j'ai vraiment besoin de cette maquette pour ce week-end dernier délai et au vu des évènements je pense que je suis plutôt mal.

Je vais essayer de m'en sortir tout seul mais je pense vraiment pas y arriver.

PS : Pour le conteneur global, ça ressemble à ça ?

<div id="global">
	<div id="entete">...</div>
	<div id="navigation">...</div>
	<div id="contenu">...</div>
	<div id="pied">...</div>
</div>

Modifié par DKProject (13 May 2009 - 08:16)

Tu souhaites le faire en largeur fixe, ou extensible ?

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).