Sujet Précédent Sujet Suivant

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
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 !



2 réponses

Réponse 1 / 2
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
Salut,

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
0
Remixed
19 nov. 2010 à 19:39
Salut a70m,

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.
0
Réponse 2 / 2
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
Le problème ne vient donc pas de là ....

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
0
Remixed
19 nov. 2010 à 20:39
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"...
0
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
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
0
Remixed
19 nov. 2010 à 20:50
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
0
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
Pour ton titre, tu veux faire quoi exactement ?
0
Remixed
19 nov. 2010 à 20:58
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 :)
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
mamybigoud68 -

9 réponses
Statut « en ligne » alors que non
GgBono -
Slickk -

1 réponse
Ligne occupée : pourquoi mon téléphone sonne occupé ?
nanou -
Tiguet -

29 réponses