28172 sujets

CSS et mise en forme, CSS3

Bonjour,
je n'arrive pas à appliquer un dégradé à plusieurs DIV...
Je penses que ce n'est pas la bonne méthode, pourriez-vous me dire comment faire ?
Merci d'avance Smiley cligne

J'ai créer 2 div :


<div class="div1"></div>
<div class="div2"></div>


Et en CSS ceci :


.div1 {
width: 629px;
height: 124px;
}
	
.div2 {
width: 306px;
height: 124px;
}


/* et ici j'essaye d'appliquer le dégradé au 2 div mais je n'y arrive pas, ce n'est sans doute pas la bonne méthode ? */


.div1 .div2 {
background: #999999 url("images/gradient_bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Navigateurs récents */
background: -webkit-gradient(
linear,
left top, left bottom,
from(#eeeeee),
to(#999999)
);
background: -webkit-linear-gradient(
top,
#eeeeee,
#999999
);
background: -moz-linear-gradient(
top,
#eeeeee,
#999999
);
background: -o-linear-gradient(
top,
#eeeeee,
#999999
);
background: linear-gradient(
top,
#eeeeee,
#999999
);
}
Merci pour ta réponse mais trop compliqué car en réalité j'ai 9 DIV sur ma pages, ce sont des bloques qui contiennent des informations et qui se trouve à différents endroit sur ma page. Il n'existe donc pas de solution mise à par ajouter ces longues lignes de code pour chaque DIV ?
Bonjour,
darsanha a écrit :
Il n'existe donc pas de solution mise à par ajouter ces longues lignes de code pour chaque DIV ?

Si si. Smiley smile On n'aurait pas remplacé les attributs HTML de mise en forme par des styles CSS si ces derniers devaient être répétés pour chaque élément de la page.

darsanha a écrit :
Je penses que ce n'est pas la bonne méthode, pourriez-vous me dire comment faire ?

La solution consiste à apprendre à écrire des sélecteurs CSS 2.1, en sachant ce qu'on fait plutôt qu'en bidouillant des trucs en se disant que peut-être ça veut dire ce qu'on souhaite. Smiley smile

On peut par exemple lire cet article.

Il y a sans doute plusieurs manières d'écrire un sélecteur qui vise l'ensemble de tes 9 éléments. N'hésite pas à nous proposer tes solutions pour commentaire.
Modifié par fvsch (09 Oct 2011 - 16:29)