Damb34 Posté 27 Octobre 2011 Posté 27 Octobre 2011 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 Posté 27 Octobre 2011 Posté 27 Octobre 2011 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 !
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant