[Résolu] Placer des liens par rapport à une image de fond

(reprise du message précédent)

Leslie a écrit :
Par contre pour ce que tu me dis sur mon image d'arrière plan je n'avais pas du tout compris que j'avais ce genre de solution.
En fait tu me proposes de séparer mon image en plusieurs pour les insérer une a une dans mon html au lieu du css, c'est bien ca ? je n'aurais pas a écrire mes coordonnées etc en "vrai texte" n'est-ce pas ?

Eh bien comme il faut partir des éléments html (c'est le B.A.BA de l'accessibilité) et que tu souhaites mettre du contenu en images oui c'est bien ça : il faut utiliser des éléments IMG directement dans le code HTML.

Leslie a écrit :
Pour le reste de tes conseils dans ton ancien post, j'ai l'impression de pas avoir fait d'erreur... à part en effet pour la hauteur du bloc conteneur, que j'enlèverai.

Euh... oui : si on oublie qu'en l'état les éléments ne sont pas dans le code html... et donc qu'il n'y a aucune structure (notamment au niveau des titres)... et donc aucune sémantique.

Leslie a écrit :
Je tiens a faire un site bien et correct, qui respecte un maximum de règles, mais d'un site a l'autre, ou d'une personne a l'autre, on te conseille jamais la meme chose, c'est pas toujours évident.

Eh bien sur les sites qui "prêchent" le respect des standards et de l'accessibilité (Alsacréations, Openweb, etc.) il y a peu de chances que tu trouves d'énormes différences. Pour reprendre la notion de s'appuyer sur le code html et pas sur la présentation c'était déjà ce qui était dit dans le tuto que tu as cité dans ton premier post : Réalisation d'un design complet (XHTML / CSS) en 5 étapes.

Pour ce qui est de ne pas tout comprendre du premier coup je suis bien placé pour savoir que ça n'est pas évident et qu'il faut lire et relire, puis faire des tests et refaire des tests un bon nombre de fois avant d'avoir une vue d'ensemble à peu près cohérente.
Modifié par Heyoan (09 Jun 2009 - 13:40)

Heyoan a écrit :
j'ai un peu l'impression d'avoir parlé dans le vide dans ce post

Heyoan : Oupss.... C'est vrai que c'est beaucoup mieux comme tu le propose désolé. J'avais pas fait attention au positionnement des images et leurs utilitées, mais plus au problème qu'elle posait.
Donc effectivement, c'est beaucoup mieux comme tu le préconise.

a écrit :

En fait tu me proposes de séparer mon image en plusieurs pour les insérer une a une dans mon html au lieu du css, c'est bien ca ? je n'aurais pas a écrire mes coordonnées etc en "vrai texte" n'est-ce pas ?

C'est pas tout à fait ce que Heyoan voudrait
En faite, ce qu'il te propose de faire c'est d'insérer ton image de fond en plusieurs morceau dans le HTML. Mais ce n'est pas ça la raison car ce serait ce compliquer la vie pour rien.
En faite si tu regarde l'exemple qu'il ta donner il y as par exemple cette ligne:
<h1><img src="nomprenom.jpg" alt="Nom Prénom" /></h1>

Ici l'important c'est principalement le alt de la balise img. Car actuellement, si ton image de fond qui est positionné en css n'est pas accessible, elle n'est remplacé par aucun contenu.
L'internaute, n'aura donc ni ton nom, ni ton numero, ni rien d'autre de ce que ton image apporte. Avec la balise alt tu résout ce problème. La balise alt est en faite le texte alternatif à l'image.
C'est pour ça qu'il parlait que le contenu se trouve dans le code HTML et le design dans le css.
La balise h1 et ses soeurs h2, h3, h4... sont aussi importante car elle organise l'information du contenu. Dans la ligne ci-dessus, la balise h1, montre que le plus important de la page est l'image qui contient comme contenu ton nom et prénom.

Sinon

Leslie a écrit :
sauf pour le "ul" a remplacer parce que j'ai pas tout tout compris.

Alors je la refait :
La balise ul contient des listes li (il y en as d'autres). La balise ul ne sert donc pas seulement à faire un menu. Par exemple, si tu veux voir ce que donne une liste tu peut aller dans la rubrique apprendre de ce site. Les trois premiers points (tutoriel, article, astuce) ont la même forme HTML que ton menu et pourtant ce n'est pas un menu, c'est une liste descriptive.

Donc la raison pour laquelle il faudrait que tu définisse un id (identifiant) pour la balise ul de ton menu est la suivante.
Tu a ton menu (ul li li li ul)qui nécessite certaine marge padding,... mais ensuite dans ton contenu si tu réutilise encore la balise ul pour faire une liste (par exemple pour ton CV, car c'est un listing de tes compétences), et bein il reprendra le même css que pour ton menu. A savoir les marges, padding,... chose que tu ne souhaitera pas forcément.

En appliquant un id a l'ul de ton menu dans le code html :
par exemple : avant <ul><li></li><li></li>...</ul>
après <ul id="menu"><li></li><li></li>...</ul>
Que tu fait ensuite correspondre avec le css :
avant ul {margin:... padding:....}
après ul#menu {margin:... padding:...}

Cela te permet de définir précisément le style css de l'ul du menu. Tu pourras donc utiliser d'autres ul sans avoir le style du menu.

J'espère que j'ai été claire car je crois que je peux pas mieux faire.

Enfin, pour ton problème persistant, chez moi tout fonctionne à merveille avec

ul#menu_horizontal{
float: right;/* Positionne le menu à droite de son conteneur qui est la div site*/
margin: 70px 120px 0px 0px;
font-weight: bold;
text-align: right;
} 

J'avais oublier de préciser qu'il n'est pas utile de préciser la largeur (width) de la balise ul puisque celle-ci s'adaptera automatiquement à sont contenu et fera la largeur maximum que sont conteneur lui permet.

Pour finir, finalement j'ai un doute sur ce qui est mieux entre margin et padding pour ton cas. Heyoan mon grand ma***ou ou quelqu'un d'autre, pourront peut être me reprendre.


[EDIT] Oups j'arrive trop tard
Modifié par Dim (08 Jun 2009 - 19:48)

Hello,

pour te donner une idée j'ai fait une petite page de test à cette adresse. Je t'invite à installer l'extension webdeveloper pour Firefox et à désactiver successivement les images puis les css pour bien comprendre l'intérêt d'utiliser des éléments IMG (Firebug est également très utile).

Bonjour a tous,

après plusieurs jours de missions freelance, me voilà de nouveau libre pour m'occuper de mon site.

J'avoue que je suis super perplexe. J'ai bien compris le principe de Heyoan de séparer mon image de fond en morceaux que j'intègre dans le html et aussi le principe des "alt". Par contre quand je regarde la page de Heyoan et que j'étudie le code, je ne vois pas et ne comprends pas ce qui fait que mes liens s'affichent par dessus le header et non pas en dessous ?! qu'est-ce que je n'ai pas vu ?

De plus, quand je crée une image jpeg que j'appelle "nomprenom" pour qu'elle devienne un header, rien ne s'affiche... En fait je comprends pas où sont les découpes de mon image et je ne capte pas non plus ce qu'est l'image "hautcadre" qui se trouve dans le css...

Enfin je bosse sur IE, donc je n'ai pas Firefox et n'est donc pas d'intéret a télécharger webdeveloper...

Ah oui et encore une chose, vous semblez tenir a ce que je mette des titres et sous-titres, mais sur ma page est un portfolio, donc il y a aura des images en vignettes sur lesquelles on cliquera pour les voir en grand, et a ce moment là un commentaire de l'image apparaitra, mais ce sera le seul texte de la page..


Leslie
Modifié par Leslie (17 Jun 2009 - 11:45)

Bonjour,

en fait je suis trop perdue, je ne sais plus par quoi commencer...

Leslie a écrit :
Enfin je bosse sur IE, donc je n'ai pas Firefox et n'est donc pas d'intéret a télécharger webdeveloper...

Je suppose que tu parles d'IE8 puisque les versions inférieures n'implémentent pas correctement les standards css.

Quoi qu'il en soit il faut toujours vérifier le rendu d'une page sur plusieurs navigateurs et donc tu as tout intérêt à installer Firefox. Les extensions web developper et Firebug deviennent d'ailleurs très vite indispensables même si elles ont désormais leur "équivalent" dans d'autres navigateurs.

Bonjour tout le monde et notamment Heyoan,

je suis contente de t'apprendre que j'ai bien suivi tes conseils et j'ai téléchargé Firebug et Firefox pour tester mon site, grâce à lui (et de nombreuses heures de visionnage de tuto) j'ai compris ce que tu as fais sur http://www.heyoan.com/tests/leslie/ surtout sur la séparation de mon image de fond, cependant il me reste plein de questions !

D'abord sur ton code dans le body il y a "color: black" et je ne comprends pas pourquoi, surtout que ca n'apparait pas a l'écran.

Ensuite dans la div "cadre" il est marqué "transparent" et je ne comprends pas non plus pourquoi.

Enfin, je n'ai pas du tout compris comment tu as séparé l'image du milieu appelée "hautcadre", j'ai fait plein d'essai dans succès, j'ai bien vu sa taille "935 par 1000 px" mais je ne sais pas quel montage tu as fais car j'ai eu beau essayé de mettre chaque coté du cadre sur un même fichier jpeg de la taille indiquée, ca n'a pas marché...

Ensuite, je souhaite insérer un portfolio en javascript mais je ne sais pas où le positionner. C'est une div "galerie" qui contient toutes mes images mais elle ne se superpose pas a la div "cadre" (normal) alors que je voudrais qu'elle le fasse. Tu peux voir la mauvais résultat a cette adresse: http://leslie.vidal.free.fr

Et vraiment en tout dernier je souhaite que mes liens en haut soir légèrement plus espacés, ils ont un écart de 2px mais avec 3px ils débordent, je voudrais qu'ils se déplacent a peine + sur la gauche...

Pfiou, pardon pour ce long mail, j'espère que quelqu'un sera susceptible de répondre a certaines de mes interrogations !

merci !

Leslie
Modifié par Leslie (22 Jun 2009 - 17:26)

Bonjour,

Leslie a écrit :
D'abord sur ton code dans le body il y a "color: black" et je ne comprends pas pourquoi, surtout que ca n'apparait pas a l'écran.

Euh... non. Il y a

body {
	color: #333;
	background: #fff;
	...
}

#fff correspondant à white.

Leslie a écrit :
Ensuite dans la div "cadre" il est marqué "transparent" et je ne comprends pas non plus pourquoi.

C'est Firebug qui le précise automatiquement mais en fait cela signifie que je n'ai pas défini de couleur de fond (background-color) pour #cadre mais seulement une image de fond (background-image). Voir Propriétés de couleur et de fond.

Leslie a écrit :
Enfin, je n'ai pas du tout compris comment tu as séparé l'image du milieu appelée "hautcadre", j'ai fait plein d'essai dans succès, j'ai bien vu sa taille "935 par 1000 px" mais je ne sais pas quel montage tu as fais car j'ai eu beau essayé de mettre chaque coté du cadre sur un même fichier jpeg de la taille indiquée, ca n'a pas marché...

J'ai utilisé la technique expliquée ici et dont je t'avais déjà donné le lien.

Pour mieux comprendre il faut également voir comment sont faites les images (avec web developper c'est Images / Informations sur les images).

Leslie a écrit :
Ensuite, je souhaite insérer un portfolio en javascript mais je ne sais pas où le positionner. C'est une div "galerie" qui contient toutes mes images mais elle ne se superpose pas a la div "cadre" (normal)

Tout le contenu doit être dans la div #cadre comme c'est le cas dans la page d'exemple (juste après l'élément UL).

Pour le reste il faut jouer avec les padding et margin...


PS : tes liens ne fonctionnent pas. Il faudrait relire l'Aide.
Modifié par Heyoan (22 Jun 2009 - 15:39)

Re !

Merci pour ton aide précieuse !

J'ai tout compris ! et ca semble marcher.

Deux dernières interrogations. D'abord, je préfèrerai que le cadre ne s'agrandisse pas en fonction du contenu, est-ce que c'est pourtant conseillé ? car même si pour l'instant mes images d'essai sont de tailles différentes et que plus tard elles seront de la même taille, je souhaite que rien ne bouge a l'arrière-plan.

Le second souci c'est que j'ai beau tout tenté, je ne n'arrive pas a mettre ma div galerie juste sous mon nom, pourtant il y a de l'espace entre ma div cadre et le début de la galerie, mais je ne vois aucun margin ou padding...c'est un vrai mystère.

Merci pour tout en tous cas !

Leslie