Css scrollbar horizontale indésirable
Remixed
-
a70m Messages postés 2763 Date d'inscription Statut Contributeur Dernière intervention -
a70m Messages postés 2763 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je suis actuellement en train de réaliser un site, avec une page html ayant principalement une large colonne centrale pour tout le contenu.
la partie de mon contenu ressemble à ça :
#site {
width : 981px;
text-align : left ;
margin: 20px auto 15px auto;
border-top: 1px solid #000;
}
en plein écran, l'affichage du site au centre de ma page html est niquel, mais lorsque je réduis la fenêtre du navigateur, une scrollbar horizontale apparaît alors que la fenêtre de mon navigateur dépasse encore largement la colonne de mon contenu...
Mon problème est que j'aimerais que cette scrollbar horizontale n'apparaisse qu'à partir du moment où la fenêtre du navigateur devient moins large que la colonne de mon contenu, et pas avant !
Cela éviterait de faire apparaitre un bout du background indésirable.
A noter que cela n'arrive que sous IE, sous Firefox je n'ai pas ce problème.
Si quelqu'un a une solution je lui en serait reconnaissant..
Merci par avance !
Je suis actuellement en train de réaliser un site, avec une page html ayant principalement une large colonne centrale pour tout le contenu.
la partie de mon contenu ressemble à ça :
#site {
width : 981px;
text-align : left ;
margin: 20px auto 15px auto;
border-top: 1px solid #000;
}
en plein écran, l'affichage du site au centre de ma page html est niquel, mais lorsque je réduis la fenêtre du navigateur, une scrollbar horizontale apparaît alors que la fenêtre de mon navigateur dépasse encore largement la colonne de mon contenu...
Mon problème est que j'aimerais que cette scrollbar horizontale n'apparaisse qu'à partir du moment où la fenêtre du navigateur devient moins large que la colonne de mon contenu, et pas avant !
Cela éviterait de faire apparaitre un bout du background indésirable.
A noter que cela n'arrive que sous IE, sous Firefox je n'ai pas ce problème.
Si quelqu'un a une solution je lui en serait reconnaissant..
Merci par avance !
A voir également:
- Css ligne horizontale
- Ligne horizontale word - Guide
- Partager photos en ligne - Guide
- Insérer une ligne horizontale avec Word 2010 - Guide
- Mètre en ligne - Guide
- Aller à la ligne excel - Guide
2 réponses
Salut,
Tout d'abord, dit à ton body de s'étendre à 100% :
Ensuite, tu vas définir un conteneur qui aura une largeur de 100% et un alignement au centre
Et enfin, un "contenu" qui aura la largeur souhaitée
Normalement, tout devrait marcher, et tu ne devrais plus avoir le scroll horizontal :)
Cordialement
a70m
Tout d'abord, dit à ton body de s'étendre à 100% :
body
{
margin:0px;
padding:0px;
}
Ensuite, tu vas définir un conteneur qui aura une largeur de 100% et un alignement au centre
#conteneur
{
width:100%;
text-align:center;
}
Et enfin, un "contenu" qui aura la largeur souhaitée
#contenu
{
width:981px;
}
Normalement, tout devrait marcher, et tu ne devrais plus avoir le scroll horizontal :)
Cordialement
a70m
Le problème ne vient donc pas de là ....
Ce code marche parfaitement chez moi :
Cordialement--
Si un jour, l'envie de travailler te prends, assied-toi et attends que ca passe ...
Les boulets, on ne les aime que dans les quotes ! Merci
Ce code marche parfaitement chez moi :
<html>
<body>
<style>
body
{
margin:0px;
padding:0px;
background-color:#c4c4c4;
}
#conteneur
{
width:100%;
text-align:center;
}
#contenu
{
margin-left: auto;
margin-right: auto;
width:820px;
background-color:#ffffff;padding-top:25px;
padding-bottom:25px;
}
</style>
<div id="conteneur">
<div id="contenu">
test
</div>
</div>
</body>
</html>
Cordialement--
Si un jour, l'envie de travailler te prends, assied-toi et attends que ca passe ...
Les boulets, on ne les aime que dans les quotes ! Merci
Merci de nouveau, j'ai essayé ton code et il marche très bien chez moi aussi dans une nouvelle page html..
Mais pour mon site je crois que j'ai trouvé la soluce, cela semble venir de mon css :
#header h1 {
position : absolute ;
bottom : 18px ;
left : 250px ;
margin : 0;
padding : 0 ;
font-size : 150% ;
font-weight : bold;
font-style : italic;
letter-spacing: 0.1em;
}
c'est le left qui met le bordel, pourtant je veux que mon titre soit placé à cet endroit, mais je sais pas pourquoi IE considère que les 250px sont à prendre en compte avec la scrollbar alors que Firefox gère ça très bien.
Donc la solution que j'ai trouvé pour l'instant c'est de rajouter dans mon #header h1 la propriété
overflow-x:hidden ;
Et ça marche !
Cela dit je sais pas si cette propriété est "propre"...
Mais pour mon site je crois que j'ai trouvé la soluce, cela semble venir de mon css :
#header h1 {
position : absolute ;
bottom : 18px ;
left : 250px ;
margin : 0;
padding : 0 ;
font-size : 150% ;
font-weight : bold;
font-style : italic;
letter-spacing: 0.1em;
}
c'est le left qui met le bordel, pourtant je veux que mon titre soit placé à cet endroit, mais je sais pas pourquoi IE considère que les 250px sont à prendre en compte avec la scrollbar alors que Firefox gère ça très bien.
Donc la solution que j'ai trouvé pour l'instant c'est de rajouter dans mon #header h1 la propriété
overflow-x:hidden ;
Et ça marche !
Cela dit je sais pas si cette propriété est "propre"...
Ben bizarrement je peux aller à droite de la page, même quand la fenêtre de mon navigateur est toute petite ; je peux parcourir toute la largeur de mon contenu sans problème car la barre horizontale apparaît quand même, mais au BON endroit/moment :p
Donc je ne vois pas trop d'alternative pour l'instant ! ^^
A propos de la propriété si ça t'intéresse, c'est pas mal expliqué ici :
http://www.css-faciles.com/liste-proprietes/overflow-x.php
Donc je ne vois pas trop d'alternative pour l'instant ! ^^
A propos de la propriété si ça t'intéresse, c'est pas mal expliqué ici :
http://www.css-faciles.com/liste-proprietes/overflow-x.php
Je voulais le positionner par rapport au coin gauche de mon conteneur, de sorte qu'il apparaisse à un droit spécifique de mon header.
Et en fait je viens de me rendre compte qu'un simple
#header h1 {
overflow:hidden
}
suffit, pas besoin de spécifier l'axe horizontal avec le -x... le plus lourd était de savoir d'où ça venait, mais en testant la suppresion du header j'ai vu que ça venait de là :)
Le tout est que ça fonctionne maintenant =D
Merci de m'avoir foré à perséverer ;)
Bonne soirée :)
Et en fait je viens de me rendre compte qu'un simple
#header h1 {
overflow:hidden
}
suffit, pas besoin de spécifier l'axe horizontal avec le -x... le plus lourd était de savoir d'où ça venait, mais en testant la suppresion du header j'ai vu que ça venait de là :)
Le tout est que ça fonctionne maintenant =D
Merci de m'avoir foré à perséverer ;)
Bonne soirée :)
Merci pour ta réponse rapide.
Je viens d'essayer mais le problème reste présent ;
Mon body avait bien
{
margin : 0;
padding : 0;
}
J'ai ensuite rajouté dans mon css un
#conteneur {
width:100%;
text-align:center;
}
dans mon code html j'ai donc placé un <div id="conteneur"> qui englobe mon <div id="site"> mais rien n'y fait :/
J'ai toujours cette scrollbar horizontale qui permet de faire glisser mon site vers la gauche, (chose que j'aimerais éviter tant que le navigateur n'est pas moins large que mon contenu)
R.