Css scrollbar horizontale indésirable
Fermé
Remixed
-
19 nov. 2010 à 19:11
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 - 19 nov. 2010 à 21:01
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 - 19 nov. 2010 à 21:01
A voir également:
- Css ligne horizontale
- Aller à la ligne excel - Guide
- Ligne horizontale - Guide
- Partager photos en ligne - Guide
- Site de vente en ligne particulier - Guide
- Apparaitre hors ligne instagram - Guide
2 réponses
a70m
Messages postés
2763
Date d'inscription
jeudi 21 mai 2009
Statut
Contributeur
Dernière intervention
2 février 2014
217
19 nov. 2010 à 19:16
19 nov. 2010 à 19:16
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
a70m
Messages postés
2763
Date d'inscription
jeudi 21 mai 2009
Statut
Contributeur
Dernière intervention
2 février 2014
217
19 nov. 2010 à 19:56
19 nov. 2010 à 19:56
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"...
a70m
Messages postés
2763
Date d'inscription
jeudi 21 mai 2009
Statut
Contributeur
Dernière intervention
2 février 2014
217
19 nov. 2010 à 20:41
19 nov. 2010 à 20:41
Non cette propriété n'est pas propre ! Pour la simple et bonne raison que si ton navigateur est une petite fenêtre, il te sera impossible d'aller à droite de la page ... Avec les flèches du clavier seulement.
Je te conseille de trouver une solution alternative pour ton titre
Je te conseille de trouver une solution alternative pour ton titre
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
a70m
Messages postés
2763
Date d'inscription
jeudi 21 mai 2009
Statut
Contributeur
Dernière intervention
2 février 2014
217
19 nov. 2010 à 20:51
19 nov. 2010 à 20:51
Pour ton titre, tu veux faire quoi exactement ?
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 :)
19 nov. 2010 à 19:39
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.