Div sous forme de barre à droite : plus d'affichage au scroll
hexomon
Messages postés
60
Date d'inscription
Statut
Membre
Dernière intervention
-
hexomon Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
hexomon Messages postés 60 Date d'inscription Statut Membre Dernière intervention -
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 :)
A voir également:
- Div sous forme de barre à droite : plus d'affichage au scroll
- Mise en forme conditionnelle excel - Guide
- Windows 11 barre des taches a gauche - Guide
- Barre droite mac ✓ - Forum MacOS
- Barre droite clavier - Forum Clavier
- Svp faire une barre verticale avec clavier - Forum Clavier
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 :)
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....
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 ^^
«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 :
Voilà le css correspondant à la div de droite :
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à ;) .
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 :
J'ai pensé que ça pouvait servir :). Ca permet de voir comme s'insère mon élément "barredroite" avec le reste
.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