Forcer un scrollbar horizontal dans un div

Résolu/Fermé
bou - 11 mars 2008 à 09:16
Papou81640 Messages postés 1 Date d'inscription lundi 9 mars 2015 Statut Membre Dernière intervention 9 mars 2015 - 9 mars 2015 à 12:43
Bonjour,

Je cherche la solution à ce problème !

Je suis dans un div, lui même dans une case d'un tableau. J'ai des images qui s'affichent à l'intérieur, et je voudrais qu'elles soient toutes sur une seule ligne avec un scrollbar horizontal. Allié à ce div un css qui définit "overflow: auto".

Le problème est que cet overflow fait apparaitre un scrollbar vertical, les images sont sur plusieurs lignes. J'ai essayé de changer mon overflow en overflow-x: scroll, mais ça ne marche pas.

Auriez-vous une solution, ou du moins des propositions à me faire par hasard ?

Merci !
A voir également:

12 réponses

Bon eh bien je m'auto réponds pour les gens qui auraient le même problème que moi, j'ai réussi à faire ce que je voulais en ajoutant à mon css la propriété "white-space:nowrap;".
Salut,
est ce que tu peux me montrer ton exemple, j'ai le même probleme et j'arrive pas a forcer le scroll horizontal.
merci
0
bou > duglha
17 mars 2008 à 09:17
en fait c'est tout simple depuis une case d'un tableau, j'ai un include qui appelle une page menu_photos.php dont voici le contenu :

<?php


//fonction qui retourne l'extension d'un fichier
function recupextension ($filename)
{
return substr(strrchr($filename, '.'), 1);
}

//fonction qui permet de compter le nombre d'images dans un dossier spécifié à l'appel de la fonction
function listeRep($rep)
{
if (is_dir($rep))
{
if ($rh = opendir($rep))
{
$i = 0;
while (($file = readdir($rh)) !== false)
{
if ($file != '.' && $file != '..')
{
if (!is_dir($rep.$file) && (recupextension($file)=="jpg" || recupextension($file)=="gif" || recupextension($file)=="png" || recupextension($file)=="jpeg" || recupextension($file)=="JPG" || recupextension($file)=="GIF" || recupextension($file)=="PNG" || recupextension($file)=="JPEG"))
{
//mise au bon format de l'affichage des vignettes (100 de haut)
$dim = getimagesize($_GET['fichier_photos'].'/'.$file);
if ($dim[1] > 100)

{ $coef = $dim[1]/100;
$hauteur = 100;
$largeur = $dim[0]/$coef;
}
else
{ $hauteur = $dim[0];
$largeur = $dim[1];
}

echo '<a href="affichage_photos.php?fichier_photos='.$_GET['fichier_photos'].'&id='.$file.'"><img src="'.$_GET['fichier_photos'].'/'.$file.'" width='.$largeur.'px height='.$hauteur.'px/> </a>';

}
}
}
}
}
}

?>


<?php
// affichage du bandeau fixe ou des vignettes correspondant à la bonne catégorie
if ($_GET['fichier_photos']==0)
{
echo '<div class="div-mh-sans-scroll" style="width:900px; height:125px margin=auto;"><img src="images/bandeau_photos.jpg">';
}
else
{
//affichage de mes photos, ici qu'il y avait un problème de scroll
echo '<div class="div-mh" style="width:900px;">';
listeRep($_GET['fichier_photos']);
}

?>
</div>




j'ai rajouté dans le css de ce div :

.div-mh {
width: 900px;
height: 125px;
overflow: auto;
white-space:nowrap;
overflow-y: hidden;
}

le white space, et il a résolu tout mon problème : il n'y a plus de retour à la ligne automatique ^^
0
keke21410 Messages postés 494 Date d'inscription mercredi 4 février 2009 Statut Membre Dernière intervention 21 janvier 2014 40
8 août 2010 à 12:58
Merci pour cette astuce, ça marche parfaitement !
0
Parfait , merci beaucoup
0
Merci, trés pratique.
kisscool387 Messages postés 260 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 20 août 2016 11
2 mars 2010 à 13:32
Merci "bou" pour t'as solution ;)
merci bien bou

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
J'espere que qqn pourra m'aider :

Bonjour à Tous,

J'ai un petit probleme pour afficher un scrolbar dans une cellule.

Je pense que le probleme vient de la premiere ligne ou il y a des colspan. Voici le code :

<TABLE cellspacing="0" BORDER="1">
<TR>
<TH> Jours -><br>Horaires </TH>
<TH colspan="4"> Lundi </TH>
<TH colspan="4"> Mardi </TH>
<TH colspan="4"> Mercredi </TH>

</TR>
<TR>
<TH>8h-10h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>

<TR>
<TH>10h-12h</TH>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
<td> Nomtreslong1 <br>et<br> nomtrestreslong2 </td>
</TR>

</table>



ET EN CSS :

table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 5px ;
font-size: 12px;
}
td {
width: 10px;
height: 10px;
overflow: scroll;
border: 0.1em solid #9DABCE;
}



Je voudrai que la taille des cellules avec les noms et prenom soit fixe et que si les noms sont trop grand, il apparaisse un scrollbar.

Merci d'avance pour votre aide.
super! merci
merci mon pote ;)
PErso, pour les libellé des colonne trop grand, je préféré les tooltips. attribut title de la balise th ou voir tooltips javascript pour le design.
Papou81640 Messages postés 1 Date d'inscription lundi 9 mars 2015 Statut Membre Dernière intervention 9 mars 2015
9 mars 2015 à 12:43
Merci beaucoup, j'ai gagné un temps précieux !!
merci, très utile :)
merci beaucoup!
Merci beaucoups pour vos explications, il m'a fallu du temps pour tomber sur ce forum,
j'avais le meme problème que la personne ayant fais le post, c'est juste pour vous remercier :-)