28220 sujets

CSS et mise en forme, CSS3

CSS / Image dégradé

Bonjour,

J'ai une image qui se nomme degrade.jpg et qui a une longeur de 200px. Par ailleurs, la zone que vous pouvez voir ci dessous, a une longeur de 350 px, ce qui pose le pb suivant :

Comme j'ai fait un background-repeat:repeat dans ma css pour mes différents titre et le fond de mon menu, cela pose un problème au niveau de la jonction puisque le dégradé n'est plus du tout respecté.

Il y a t-il un moyen de régler ce problème proprement ? J'entends par proprement le fait que j'aimerais éviter de redimensionner mes images pour les mettres à la taille exact de mon cadre.

Voici le style css rattaché au fond bleuté et l'appel dans le code HTML :


.MenuBar
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 1em;
    BACKGROUND-IMAGE: url(MenuBar.gif);
    background-repeat:repeat;
    COLOR: white;
    FONT-FAMILY: Verdana, Arial, 'MS Sans Serif';
    TEXT-DECORATION: none;
    width:100%;
    margin-top:4px;
    margin-bottom:3px;
    margin-left:0px;
}



<div class="QuickLinks">
   <div class="Titre_QuickLinks">Quick Links</div>
   <ul>
      <li class="MenuBar">Applying for Funding</li>
      ...
   </ul>
</div>


Merci par avance

Slyv

http://ffadventure.free.fr/si2.jpg
Modifié par slyv (13 Oct 2005 - 15:10)
Salut,

en fait j'ai changé de méthode et ça marche tout aussi bien :


.MenuBar
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 1em;
    BACKGROUND-IMAGE: url(MenuBar.gif);	
    background-repeat: no-repeat;
    background-color:#9c9dcb;
    COLOR: white;
    FONT-FAMILY: Verdana, Arial, 'MS Sans Serif';
    TEXT-DECORATION: none;
	width:100%;
	margin-top:4px;
	margin-bottom:3px;
	margin-left:0px;
}

c'est dire ne pas répéter mon motif mais mettre une couleur de fond pour la partie non remplie par l'image ... couleur de fond correspond à mon bleu que j'ai dans ma partie droite donc après le dégradé.

Merci beaucoup pour ton aide

slyv
Modifié par slyv (13 Oct 2005 - 15:51)
Sujet clos
Aller à