28172 sujets

CSS et mise en forme, CSS3

[Résolu] Volet à droite du site

bonjour,

Je réalise actuellement un site web et j'ai 3 volets déroulants en js les uns au dessus des autres sur le coté droit du site.

Ils sont dans un div qui avait : {position:fixed; top:50px; right:0px;}

Le soucis c'est que sur les notebook et autres petits écrans le volet le plus bas n'était pas visible et à cause du fixed, même en scrollant la page il restait inaccessible.

J'ai donc remplacé le fixed par un absolute qui m'a résolu ce problème vertical.

SAUF QUE je me retrouve avec un nouveau problème horinzontal cette fois-ci :

Quand taille de la fenêtre devient trop étroite et nécessite un scroll horizontal, les 3 onglets ne se décalent plus avec le scrolling et restent au milieu du site à l'emplacement du bord droit de quand la barre de scroll est tout à gauche.

J'en déduis que le "right:0px" s'applique à la largeur de la fenêtre et non la largeur du document, mais comment faire pour résoudre mon problème?

J'ai cherché sur le net sans succés et je vous appelle donc au secours Smiley cligne

Merci d'avance du temps passé et à lire ce message.
Modifié par Scynn (16 Nov 2011 - 17:54)
Salut !

Aurais tu une url à nous fournir ?
Un positionnement "absolu" se fait toujours par rapport au parent positionné. Donc si tu veux positionner tes blocs en absolu par rapport à ton bloc "document" il faut positionné ce dernier en utilisant l'attribut "position:relatif".
Malheureusement je ne peux pas fournir de captures d'écran ni de liens car c'est un développement professionnel dans une agence web et non un truc perso (je suis en stage).

Mon bloc est directement dans le body (il n'a pas de parents intermédiaires) comme ça les 3 onglets dans le bloc sont en colonne le long du bord droit de la fenêtre.

Le problème survient en cas de fenêtre très étroite : tant que la barre de scroll horizontale est tout à gauche, les onglets sont bien au bord droit de la fenêtre.

Mais si on scroll, à cause du absolute ils ne bougent pas et restent au milieu du site

SI je passe en mode fixed, la se déplacent avec le scroll pour rester au bord mais du coup ne scrollent pas verticalement on ne peut pas accéder à celui du bas.

Il me faudrait une solution pour faire en sorte que la position horizontale soit en fixed et la position verticale en absolute en gros ou quelque chose qui fasse la même chose.
Ca risque d'être délicat sans avoir d'aperçu concret.
Mais je pense comprendre ton souci.
Voici la solution à ton problème, j'ai pas le temps de faire ça proprement mais voici un exemple de code qui serait adapté à ta situation, avec les contraintes mentionnés je ne vois pas comment faire mieux :

CODE CSS :
body {margin:0;width:100%;min-width:960px;position:relative;}
#bloc_volets {position:absolute;top:10px;right:0; width:200px; background-color:#F00;}
#content {background-color:#0F0; width:960px; margin:0 auto;}


CODE HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="bloc_volets">BLOCS AVEC VOLETS</div>
<div id="content">TON CONTENU</div>
</body>
</html>

L'important et ce qui change tout c'est le "min-width:960px;" sur ton body. Smiley cligne
Modifié par Spacedementia (17 Nov 2011 - 12:28)
La solution de Spacedementia me semble bonne. Par contre, mettez un Doctype à vos pages, même vos pages et codes de test boudiou! Smiley sweatdrop

Une explication rapide (et je ne suis pas sûr à 100% qu'elle soit vraie):
- L'élément BODY va prendre la largeur disponible dans le viewport (zone d'affichage du navigateur). Si le viewport fait 600px, bah ça donne 600px de large.
- Si contenu à l'intérieur de BODY a une largeur fixe supérieure à 600px, il va déborder à droite (pour une page en Left-To-Right).
- Si le plus proche ancêtre positionné de ton élément positionné en absolu est BODY, alors le bord droit de ton élément sera placé à 600px du bord gauche de la page.

Le min-width sur BODY permet de régler ce problème.
Effectivement Florent, tu as raison, j'ai juste fais ce bout de code en 30s en mangeant mon sandwich et vu que j'étais à le méga bourre entre midi et deux j'ai fais vraiment au plus vite (css inline, balisage succinct...).
J’espère que tu me pardonnera ! Smiley cligne
Je vais essayer d'éditer le poste dès que j'ai quelques minutes pour faire ça plus proprement.
A+
Super, ça fonctionne parfaitement avec le min-width! Smiley lol

Merci beaucoup à tous les deux pour votre rapidité et votre efficacité Smiley biggrin

A bientôt,

Scynn
Sujet clos
Aller à