[Damb34]

Bonjour,

je suis désolé, par ma question qui pourrait être bête, mais étant débutant et voulant apprendre le html/css, j'ai voulu faire ça :




Au début, j'ai utiliser le système de l'image-map (je crois que c'est comme ça qu'on dit) ce qui marche très bien, mais finalement mettre des images dans une div, c'est pas compliqué.

Du coup j'ai voulu le faire directement via Dreamweaver en html et css. Comment dois je procédé? D'abord, découper mon image? faire des ul ou li? (sachant que j'en ai jamais utilisé)?

Connaissez vous des sites qui explique mon incompétence?

Je vous remercie beaucoup

[Dudu]

Salut

Il y aura plusieurs blocs de ce genre sur ta page ? Si oui il faut d'abord construire l'HTML avec des listes imbriquées.
Typiquement ça donnera ça :

D'abord tu crée une liste avec les titres des blocs

• Nos packs
• Nos références

• Notre engagement
• Ce que tu veux
• Et caetera

Ensuite tu imbrique des listes dans cette liste

• Nos packs

• Blablabla
• Blabla

• Nos références

• Blablabla
• Blabla

• Notre engagement

• Blabla
• Blabla

• Ce que tu veux

• Blabla
• Blabla

• Et caetera

• et caetera
• et caetera

Pour cela, je te conseille cette page qui explique bien à construire des listes lorsqu'on est débutant : http://fr.selfhtml.o...exte/listes.htm


Ensuite vient le temps de mettre ça en forme en CSS.

Typiquement, il faut remplacer les textes de la première liste (les "Nos packs" et autres) par des images que tu auras préalablement créées. Car ce genre d'effet ne peut pas facilement se faire en HTML/CSS; ni le reflet, ni la gestion des polices non standards, encore moins les dégradés de couleurs.
Pour remplacer aisément un texte à une image, je te conseille ce lien : http://www.blog-and-...-titre-en-image

Le reste (les "blabla") peuvent rester tel quels, il faudra juste préciser en CSS qu'il faut des bordures rouges en bas de chaque item de la liste.
Pour ça, LE lien de référence, c'est http://css.maxdesign....au/listamatic/ tu regardes la partie "Vertical lists", tu compares les différents exemples, tu devrais vite comprendre la logique, c'est très simple (sinon tu reviens nous voir, on t'exliquera).

Le tout te donnera ce que tu veux faire... sauf que les bords seront carrés, pas arrondis.
Pour cela, il faudra utiliser la propriété CSS border-radius et, pour cela, je te renvoie à l'article de notre confrère (et membre du Hub mais on ne l'a pas vu depuis un bail ) Raphaêl: http://www.alsacreat...ans-images.html


Sur cette base, fais un premier jet et tiens-nous au courant ! Bon courage !