[Résolu] Image sur texte et fixer taille image

Salut à tous,

Je suis débutant, et je crée actuellement mon premier site web.

J'ai 2 questions à propos d'un menu :

J'ai fini mon menu et il me plaît ainsi, mais il est fait en images (au lieu de CSS). Et question légèreté, je préférerais si possible le faire en CSS. Mais pour ça j'ai absolument besoin d'une technique, et je sais pas si ça se fait :
Peut-on mettre une image (png transparent) au dessus du texte ?
(et plus précidément un background-color sous le texte, le texte, et une image transparente au-dessus - une texture-repeat)

Et deuxième question, toujours à propos de cette image que je mets au-dessus du texte :
Elle est composée de petits pixels, qui rendent très bien, l'effet que je veux à 100%, mais si l'utilisateur passe le zoom navigateur à 110% ou +, ça donne des effets d'optique un peu bizarre, la couleur est moins nette, c'est vraiment pas terrible, par contre dès qu'on revient à 100% c'est très net. (forcément, je fais le nécessaire côté taille des polices pour que l'utilisateur ne soit pas tenté d'agrandir la page), mais s'il le fait :
-Peut-on empêcher le resize d'une image ?

En l’occurrence, une texture en mode repeat, si je le fais en CSS. Les cases de mon menu, et les textes seraient alors agrandis, mais il faudrait que ma texture reste toujours à la même échelle (100%) pour rester bien nette.

Je suppose qu'on ne peut pas, mais sait-on jamais…

Merci d'avance.

Bonjour,

Mint75 a écrit :
J'ai fini mon menu et il me plaît ainsi, mais il est fait en images (au lieu de CSS). Et question légèreté, je préférerais si possible le faire en CSS.

Sauf si chacune de tes image pèse une centaine de ko, il n'y a pas de problème à utiliser des images (qui doivent, bien entendu, être insérées dans le code HTML, avec un alt qui va bien).

Mint75 a écrit :
Peut-on mettre une image (png transparent) au dessus du texte ?
(et plus précidément un background-color sous le texte, le texte, et une image transparente au-dessus - une texture-repeat)

Il y a moyen de bricoler ça avec du positionnement absolu, mais j'ai un peu peur du résultat niveau accessibilité.

Mint75 a écrit :
Peut-on empêcher le resize d'une image ?

Non, et heureusement.

Bonjour Laurie-Anne, et merci.

a écrit :
il n'y a pas de problème à utiliser des images (qui doivent, bien entendu, être insérées dans le code HTML, avec un alt qui va bien)

Oups, problème, en html j'ai juste ma liste :

<div id="category-content">
          <ul id="menu">
            <li class="item"><a href="#" class="tag-fruits">Fruits</a></li>

Et les url des images se trouvent dans le css, une ligne par case, ainsi qu'un :hover

Et je ne vois pas pourquoi il fallait mettre les images dans le html ?

Ah, et j'oubliais :
Je me suis aperçu que ce menu me renvoyait des erreurs, avec l'outil w3c validator - html.

Il me met ces 2 lignes là * en évidence à tous les menus de 1er niveau :

<div id="category-content">
          <ul id="menu">
            <li class="item"><a href="#" class="tag-légumes">légumes</a></li>

            <li class="sub"><a href="#" class="tag-fruits">fruits</a></li>
             *<ul>
                <li class="sousitem"><a href="#" class="tag-oranges">Oranges</a></li>
                <li class="sousitem"><a href="#" class="tag-kiwis">kiwis</a></li>
                <li class="sousitem"><a href="#" class="tag-bananes">Bananes</a></li>
                <li class="sousitem"><a href="#" class="tag-citron">Citron</a></li>
                <li class="sousitem"><a href="#" class="tag-cerise">Cerise</a></li>
              </ul>
          *</li>

Il y a sans doute pleins des erreurs, mais voilà tout ce que je sais faire.

Merci encore.
Modifié par Mint75 (23 May 2012 - 19:03)

Bonsoir
Pour les erreurs tu as une balise li fermante en trop et il manque la balise de fermeture ul

<ul id="menu">
     <li class="item"><a href="#" class="tag-légumes">légumes</a></li>
     <li class="sub"><a href="#" class="tag-fruits">fruits</a>
         <ul>
           <li class="sousitem"><a href="#" class="tag-oranges">Oranges</a></li>
           <li class="sousitem"><a href="#" class="tag-kiwis">kiwis</a></li>
           <li class="sousitem"><a href="#" class="tag-bananes">Bananes</a></li>
           <li class="sousitem"><a href="#" class="tag-citron">Citron</a></li>
           <li class="sousitem"><a href="#" class="tag-cerise">Cerise</a></li>
         </ul>
      </li>
</ul>

Pour les images, Laurie-Anne parlait d'images porteuses de contenus, là je pense que tes images sont décoratives, tu peux donc les laisser dans le CSS.
Modifié par cilou (24 May 2012 - 02:08)

Impossible d'être sûre que ce sont des images décorative sans les voir et sans voir le CSS appliqué sur le menu (même si ça y ressembe fort).

Bonjour et merci pour vos réponses.

@cilou : désolé j'ai été bête de ne pas mettre le code en entier, sachant que l'erreur était au début. Mon problème était bien la balise </li> en trop, et même avec la correction sous les yeux j'ai eu du mal à la voir

À Laurie-Anne : Je crois que j'avais dû trouver une aide sur un site quelconque pour réaliser ce menu avec des images, alors décorative ou faisant partie du contenu, je te demanderais de bien vouloir m'expliquer la différence (dans le cas, comme ici, d'un menu de navigation)

Je mets donc un screen de mon menu de navigation. Il est entièrement déroulé car je n'ai pas encore attaqué la partie javascript, je vais essayer de faire un truc sympa… Et si je dois mettre les images dans le code html, je vous demanderai de bien vouloir m'expliquer comment.

http://img15.hostingpics.net/pics/777452Sanstitre1.png

Un extrait du CSS :

#menu li .tag-web{
  background:transparent url(img/sprite-tags.png) left top no-repeat;background-position:0 0px;width:284px;height:33px;}
#menu li .tag-web:hover{
  background:transparent url(img/sprite-tags.png) left top no-repeat;background-position:-284px 0px;width:284px;height:33px;}

(ps : le fait que ce soit traité en images n'est plus du tout un problème, car après optimisation j'arrive à un sprite de 568px x 1518px de moins de 10ko )

Par contre, toujours le même souci, mettez le zoom navigateur à 110%, vous allez voir comment ça fait crado
Modifié par Mint75 (24 May 2012 - 09:38)

Quelles sont les images insérée en CSS ?

Si l'image comporte du texte, alors elle est porteuse de contenu et doit être insérée dans le code HTML (avec l'élément img).

Si l'image ne comporte pas de texte, elle est généralement décorative, mais pas toujours ; ça dépends du contexte et de l'image.

Bonjour,

Comme les images comportent du texte, si je dois les insérer dans le html plutôt que dans le CSS, pouvez-vous me dire comment je gère le :hover ?

Merci.

En javascript.

Ok, alors je verrai plus tard, je connais pas encore le js.

Merci !