Div sous forme de barre à droite : plus d'affichage au scroll
hexomon
Messages postés
65
Statut
Membre
-
hexomon Messages postés 65 Statut Membre -
hexomon Messages postés 65 Statut Membre -
Bonjour,
J'essaie de faire un petit site qui utilise une base sql, du php et du html avec du css. Le seul souci : je ne suis pas très bon :).
Mon souci principal pour l'instant, c'est plutôt l'affichage. Je m'explique :
Je veux en gros faire deux div qui séparent l'écran ainsi :
- A gauche, des données diverses (du texte) qui dépasseront le bas de la page (donc l'utilisateur scrollera pour voir la suite). Le fond est blanc.
- A droite, un fond coloré (background-color) avec des boutons. Ces boutons sont en fait des options destinés à agir sur le texte écrit à gauche (pour le supprimer par exemple).
=> C'est cette dernière div qui me pose souci...
Je veux qu'elle s'affiche à 100% de la hauteur, ce qui est le cas actuellement... Jusqu'au moment où on scrolle. Et là, paf, le drame => le background color ne suit plus sur cette partie de droite (en fait la div s'arrête à 100% de la page affichée, et ne va pas plus loin si on scrolle).
D'où ma question : quelle méthode simple puis-je utiliser pour que la partie droite continue d'afficher le background color de ma partie droite si je scrolle, comment faire pour que la div se prolonge avec le scroll ? Existe-t'il une propriété css magique :) ?
Merci à vous :)
J'essaie de faire un petit site qui utilise une base sql, du php et du html avec du css. Le seul souci : je ne suis pas très bon :).
Mon souci principal pour l'instant, c'est plutôt l'affichage. Je m'explique :
Je veux en gros faire deux div qui séparent l'écran ainsi :
- A gauche, des données diverses (du texte) qui dépasseront le bas de la page (donc l'utilisateur scrollera pour voir la suite). Le fond est blanc.
- A droite, un fond coloré (background-color) avec des boutons. Ces boutons sont en fait des options destinés à agir sur le texte écrit à gauche (pour le supprimer par exemple).
=> C'est cette dernière div qui me pose souci...
Je veux qu'elle s'affiche à 100% de la hauteur, ce qui est le cas actuellement... Jusqu'au moment où on scrolle. Et là, paf, le drame => le background color ne suit plus sur cette partie de droite (en fait la div s'arrête à 100% de la page affichée, et ne va pas plus loin si on scrolle).
D'où ma question : quelle méthode simple puis-je utiliser pour que la partie droite continue d'afficher le background color de ma partie droite si je scrolle, comment faire pour que la div se prolonge avec le scroll ? Existe-t'il une propriété css magique :) ?
Merci à vous :)
5 réponses
-
Bonsoir,
Je crois que ce serait plus simple avec le code source de voir ce qui cloche. Utilisez 0bin.net ou autre pour nous partager de longs fichiers :)
-
Bonsoir,
TU veux redimensionner ta div de droit ou tu veux qu'elle devienne "flottante" et qu'elle suive la scrollbar ??
Par exemple : https://desgeeksetdeslettres.com/web/menu-fixe-mais-flottant-selon-la-scrollbar-js-css
PS : Si tu postes du code sur le forum, merci d'utiliser les balises de code.
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Et évites autant que possible de passer par des sites tiers pour nous montrer ton code....
-
Au risque de faire un hors-sujet :
«Et évites autant que possible de passer par des sites tiers pour nous montrer ton code.... »
Pourquoi ?
CCM est déjà un site tiers entre lui et toi. L'avantage de 0bin, c'est que tout est chiffré !
Et c'est tout de même plus lisible que dans un espace de ~500px comme ici ^^
-
-
Ok :) !
Je veux redimensionner la div, et pas qu'elle suive la scrollbar.
Merci à vous, voilà une partie du code où l'on voit l'intégration de la div :
<html> <HEAD> <LINK rel="stylesheet" type="text/css" href="Css/Style.css"> <title> LISTE </title> </head> <body> <div id="barredroite" > </div> <br> <br>
Voilà le css correspondant à la div de droite :#barredroite { position:absolute; overflow:visible; z-index: 1; left:1200px; width:20%; min-height:100%; background-color:#F5F5F5; }
Si je zoom/dézoome => la div de droite remplit bien tout l'ensemble à 100%. Mais en cas de scroll, la div est coupée au niveau du bas de l'écran.
J'ai tout d'abord cru à une intervention diabolique et j'ai fait exorciser ma feuille de style par un prêtre spécialisé en démonologie numérique. Mais ça n'a pas fonctionné :) J'ai donc supposé que ma démarche était erronée, plus simplement, et le problème vient plus sûrement de là ;) . -
Un ajout => J'alimente la page avec des données qui dépendent de ses éléments css :
.Conteneur1 { position:relative; width:70%; top:10px; left:10px; bottom:0%; overflow:hidden; word-wrap: break-word; font-size: medium; text-align: justify; background-color : white; } .Conteneur2 { position:absolute; z-index: 2; display:inline; left :1200px; }
J'ai pensé que ça pouvait servir :). Ca permet de voir comme s'insère mon élément "barredroite" avec le reste -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
