Petit affichage "fancy" dans un scrolling

Version imprimable

29/03/2014, 13h26
Bloby

Petit affichage "fancy" dans un scrolling

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:

<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
29/03/2014, 15h42
NoSmoking
Bonjour

Code:

<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:

1 2 3 4 5 6 7 .la_class{ height:480px; width:850px; overflow-x:hidden; overflow-y:scroll; background-color:#111111; }
29/03/2014, 16h47
Bloby

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...

Citation:

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:

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>

30/03/2014, 00h37
Bloby

Super, merci :D 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 ! : )
30/03/2014, 12h03
NoSmoking

Citation:

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?
30/03/2014, 12h23
Bloby

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...
30/03/2014, 17h06
NoSmoking
Dans le code de Muchos il suffit de rajouter une propriété background
Code:

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
:fleche: Les meilleurs cours et tutoriels CSS
30/03/2014, 17h18
Bloby

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