Absolute et couleur de fond

[guilhem_mdg]

Bonjour,
Est-il possible de mettre un bloc en position absolute sur le coté gauche de l'écran avec une couleur de fond qui ne change pas même si l'utilisateur scrolle en bas ? (exemple le menu de gauche)
Merci !

[jv2759]

comme tout élément un bloc peux avoir un fond d'écrant. et comme tout fond d'écrant ce dernier peux être fixed :


background-attachment: fixed;

donc essais ceci pour voir, je pense que cela marcheras...

Sinon la solution c'est de fixed le bloc lui même...

[guilhem_mdg]

Non en fait, j'ai un bloc menu en position absolute. Je voudrais que sa hauteur verticale soit infinie... Enfin, qu'il descende tant que l'on scrolle la page de droite qui elle contient beaucoup de texte !

[stz]

une solution possible: c'est de définir cette image en fond d'écran sur la page entière, et de la répéter verticalement à gauche, exemple

Code : Tout sélectionner

body{
background-image: url(imagedefond.jpg); 
background-repeat: repeat-y;
}

[guilhem_mdg]

Non parce-que mon bloc menu se finit juste après la dernière ligne de mon menu... Je voudrais qu'il contenu bien plus bas ! J'ai mis en attendant une réponse: height=350%....

[stz]

c'est pour ça que si tu met cette image en fond de la page (body) au lieu d'en fond de ta boite div.menu (par exemple), ça s'affichera sur la longueur totale de la page.

J'ai mis en attendant une réponse: height=350%....

le problème avec une hauteur surevaluée, c'est que ça t'affiche eventuellement un ascensceur là ou il n'y en pas besoin... enfin c'est très approximatif comme methode.

(ps. vois sur mon site la skin "classique", c'est dans le même genre que tu veux faire? si oui, c'est bien la methode que j'ai employé, les pavé gris à gauche sont répétés en y en fond de page, balise "body" dans la css)

[jv2759]

essais que ton div soit juste en dessou de body,

ainsi tu peux faire un truc dans le genre :

html, body, .menu{
height:100%;
}

Ainsi la class menu devrait faire 100% de body qui fait bien 100% du html.

Attention à suprimer les marge ou padding dans body, sinon car body ferais alors 100% + xpx de marge, donc assenceur inutile.

[guilhem_mdg]

La solution est bonne mais le pb c'est que si je l'utilise je dois avoir un positinnement parfait entre le bloc menu et le bloc de droite... Or IE et Mz ne font pas la même chose !

[stz]

La solution est bonne mais le pb c'est que si je l'utilise je dois avoir un positinnement parfait entre le bloc menu et le bloc de droite... Or IE et Mz ne font pas la même chose !

exact, c'est tout le problème des css, enfin le challenge plutôt... c'est d'ailleurs à cause de cette différence d'affichage que j'ai opté pour le fond d'écran de la page 'body'.
pour le bloc de droite, tu peux éviter un bloc éventuellement, tu places ton contenu directement dans body avec un padding qui correspond à un peu plus que la largeur de ton menu gauche.

ou alors, tu peux t'aider de gabarits cléfs en main http://www.alsacreations.com/articles/modeles/
http://www.thenoodleincident.com/tutori ... boxes.html

le mieux c'est de conceoir tout soi-même mais ce n'est pas de tout repos, c'est sûr, on morfle entre les divers navigateurs. Si tu n'as pas envie de trop te casser, sur google tu trouves des tas de ressources sur les mises en pages css prêtes à l'emploi.

[DJiK]

html, body, .menu{
height:100%;
}

Ainsi la class menu devrait faire 100% de body qui fait bien 100% du html.

Ça marche pô.

Sauf en mettant "overflow: auto;" aussi. Mais à ce moment là le body a un ascenseur aussi...

[olab]

Ca marche pas parce que c'est "html body .menu" et pas avec des virgules

[bobo]

Ca marche pas parce que c'est "html body .menu" et pas avec des virgules

Ca dépend de ce que tu veux faire. Avec virgule, la règle s'applique aux balises HTML, BODY et à la classe menu. Sans virgule, la règle s'applique à la classe menu contenu dans un BODY, lui même contenu dans un HTML. C'est pas pareille.

[olab]

C'est ce que j'ai cru qu'il voulait faire c'est pour ça, mais oui tu as raison c'est valide aussi

[DJiK]

Moi ce que je veux c'est en effet que html, body, et .menu fasse tous les 3 la m^ hauteur.


Regardez c'est ici:
http://www.vendez-en-ligne.com/


Alors sous Moz et Opéra, pas de prob: le menu est fixe.

Mais sous I€... Le fond bleu du menu, à gauche s'arrête à 100% de la page et pas 100% du body.

[calimo]

Ben oui parce que 100% c'est la hauteur visible. Si tu l'avais mis en absolute ce serait pareil dans Mozilla.

Moi je mettrais le bleu uni en background sur body et l'image je la mettrais comme fond d'un div inutile entourant le contenu... tu vois ce que je veux dire ?