Petit affichage "fancy" dans un scrolling

**Bloby** · 29/03/2014, 13h26

Hello !

Une petite (en faite deux petites) questions à propos d'un scroll que j'ai placé sur les pages de mon site web perso.

Voisic le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="height:480px;width:850px;overflow-x: hidden; overflow-y: scroll;background-color=#111111;   ">

Déja première question, si je change la couleur ici...bin il ne ce passe rien du tout. Pourquoi ?

Ensuite il y a quelque chose que j'aimerais faire avec cette scroll mais je ne sait pas du tout comment m'y prendre !
JE voudrais séparer chaque articles que je poste dans ce scroll avec une variante de gris diférente. Par exemple J1 gris foncé, j2 gros claire, j3 gris foncé... etc pour bien séparer visuelement chaques post... COmment pourrait je faire ça ? Y aurait t'il une petite simple balise me permétant d'encadrer mes article qui pourrait me permetre de faire ça très simplement ?

Merci beaucoup !
Bloby

**NoSmoking** · 29/03/2014, 15h42

Bonjour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="height:480px;width:850px;overflow-x: hidden; overflow-y: scroll;background-color=#111111;">

que viens faire le = dans ton style inline, il te serait plus judicieux de passer par une déclaration de style indépendante.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.la_class{
    height:480px;
    width:850px;
    overflow-x:hidden;
    overflow-y:scroll;
    background-color:#111111;
}

**Bloby** · 29/03/2014, 16h47

Merci... mais je saurais pas du tout coment utiliser ce code... le miens c'est simple entre cette ligne et une autre balise </div> , c'est mon scroll... trouvé sur le net. Je ne sait pas du tout pourquoi il y a un égale, je l'ai trouvé comme ça...

**Muchos** · 30/03/2014, 00h20

Envoyé par Bloby

JE voudrais séparer chaque articles que je poste dans ce scroll avec une variante de gris diférente. Par exemple J1 gris foncé, j2 gros claire, j3 gris foncé...

Les sélecteurs pairs (EVEN) et impairs (ODD) en CSS3 peuvent vous aider. Ex:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Alterner couleurs sur articles</title>
  <style type="text/css">
article {
  padding: 1em 0;
  border-bottom: medium solid #333;
}
article:nth-of-type(odd) {
/* S'applique à un article sur 2 */
  border-bottom: medium solid #CCC;
}
  </style>
</head>
<body>
  <article>article 1</article>
  <article>article 2</article>
  <aside>PUB</aside>
  <article>article 3</article>
  <article>article 4</article>
</body>
</html>

**Bloby** · 30/03/2014, 00h37

Super, merci

Ca me crée une fine ligne gris claire à la fin de l'article que je balise. Est ce le resultat voulu ? Ou alors tout le background de l'article devrait être gris claire comme la ligne ?

merci ! : )

**NoSmoking** · 30/03/2014, 12h03

Est ce le resultat voulu ? Ou alors tout le background de l'article devrait être gris claire comme la ligne ?

as tu eu la curiosité d'ajouter une couleur de fond dans le code proposé par Muchos?

**Bloby** · 30/03/2014, 12h23

Je me suis dit que la petite ligne devait en faite être étirée sur toute la longueur de l article ou alors que c était juste une normal délimitation. Enfin à aucun moment il m'est venu à l idée qu il fallait rajouter en plus un autre bout de code. Je pourrait copy/past le bout "background" de mon scroll mais il marche pas! Pour le background de ma page j ai un code si mmilaire,(juste légèrement différent)qui lui marche... Mais une fois copier dans le bout de code su scroll il marche plus...
Je suis pas habitués à ces codes dont la syntaxe n est pas "fixe"...

Et pour tout dire je serait totalement incapable de dire ou placer un bout de code pour la couleur du background...

**NoSmoking** · 30/03/2014, 17h06

Dans le code de Muchos il suffit de rajouter une propriété background

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
article:nth-of-type(odd) {
  /* S'applique à un article sur 2 */
  border-bottom: medium solid #CCC;
  background:#DDD;  /* couleur pour exemple /**/
}

Je pense que le lien ci dessous ne sera pas superflu

Les meilleurs cours et tutoriels CSS

**Bloby** · 30/03/2014, 17h18

Je vois, tout marche bien. Merci encore pour l'aide.
Je suis allé voir le liens, en effet ce n'est pas superflu

Merci !

Petit affichage "fancy" dans un scrolling

HTML

Partager

Partager