Partage
  • Partager sur Facebook
  • Partager sur Twitter

scrollbar choisir quand l'afficher

Sujet résolu
maxtrident
15 septembre 2021 à 13:30:10

bonjour

je voudrais savoir si il y a une methode pour déclencher le scrool.

car dans le block cuisine, j'ai rien après plat de resistance et il m'affiche le scrool...je ne veut pas augmenter la hauteur du block...il y a une solution ?

.col_0 {
	width:153px;
	height:80px;
	overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #014f73 #d3d3d3;
  overflow-x: hidden; 
  display:inline;
	float: left;
	position: relative;
	margin: 5px 5px 0 5px;
	background: #EEEEEE;
	box-shadow:2px 2px 2px gray;
	border-radius: 2px;
	padding-left: 7px;
	}



  • Partager sur Facebook
  • Partager sur Twitter
Lord Morpheus
  • HTML / CSS
15 septembre 2021 à 16:06:20

Bonjour,

Il faut que tu nous montres ton HTML et TOUS ton CSS lié à tes listes.

Si tu vois une scrollbar alors qu'il n'y a aucun item derrière, c'est simplement que la somme des hauteurs de tes items est plus grand que la hauteur de ton bloc.

En gros, la somme des hauteurs (height) de Astuce, Dessert, Entrée, Plat de resistance est plus grande que 80px (la hauteur de col_0).

  • Partager sur Facebook
  • Partager sur Twitter

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

maxtrident
15 septembre 2021 à 17:49:00 

.col_0 {
	width:153px;
	height:80px;
	overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #014f73 #d3d3d3;
  overflow-x: hidden; 
  display:inline;
	float: left;
	position: relative;
	margin: 5px 5px 0 5px;
	background: #EEEEEE;
	box-shadow:2px 2px 2px gray;
	border-radius: 2px;
	padding-left: 7px;
	}
.titcateg{
	height:18px;
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
	text-align:center;
	margin: 0 0 0 -7px;
}
la pour cuisine ça doit faire un petit 70px (12px pour le text des  4 lignes asctuce etc... +  18px du titre)
en gros le html c'est le vrais bordel dans un menu.
 <div class="col_0">
   <?php 
  
   
    $elements = $requete->fetchAll();
     
    foreach( $elements as $element ) {
        // Si c'est une catégorie non encore traitée
        if( $categoriePrecedente != $element['categ'] ) {
        // Si ce n'est pas la première ligne
            if( !$premiereLigne ) {
                // On ferme le ul précédent
        echo "</div> <div class='col_0'>"; 
			}
  $categnom = $element['categ']; 
    echo "<div class='titcateg'>".substr($categnom, 0, 40)."</div><ul>";
  
		}
		$socateg = $element['sous_categ'];
		$idcateg = $element['id'];

?>

<li><a href="Recherche-Astuce-Tuto-<?php echo $idcateg;?>/<?php echo $info;?>" ><?php echo substr($socateg, 0, 34); ?></a>
<?php
    $premiereLigne = false;
    $categoriePrecedente = $element['categ'];
$num++;	
	}
 ?>
        
   </div><!-- End 5 columns container -->
   </li><!-- End 5 columns Item -->
si je ne trouve pas j'avais pensé de compter le nb de ligne et avec une condition... si ça dépasse:  forcer overflow-y a hidden
  • Partager sur Facebook
  • Partager sur Twitter
Lord Morpheus
  • HTML / CSS
15 septembre 2021 à 22:15:32

En fait, il faut l'intégralité de ton CSS, le problème peu venir de plusieurs endroit.

Pour l'HTML ça peu aller même si je pense que tu pourrai mieux indenter ton code pour plus de lisibilité! De plus, tu sembles fermer ta div.col_0 avant ton li? o_O Essaye de revoir ton php...

En l'état avec un peu de retouche mais en suivant tes instructions, voici ce que j'obtiens : https://jsfiddle.net/o4n12ywd/

-
Edité par Lord Morpheus 15 septembre 2021 à 22:17:14

  • Partager sur Facebook
  • Partager sur Twitter

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

maxtrident
16 septembre 2021 à 10:07:58

merci c'est ok.

j'ai récupéré se script pour le menu il y a 10 ans et fait des modifs, c'est les li qui commande  l'ouverture, le div est bien avant le li.

voila le css du menu  mais je ne vois pas ou ça peut faire montrer le scrool avant ta modif.

#menu {
	list-style:none;
	width:980px;
	margin:0px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */
	
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	
	/* Borders */
	
	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 4px 4px 4px;
	margin-right:10px;
	margin-top:7px;
	border:none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	
	z-index: 11; 
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right:21px;
	background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns,
.dropdown_6columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 340px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_6columns {width: 1024px; margin-left:-100px; border-radius: 5px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns,
#menu li:hover .dropdown_6columns {
	left:-1px;
	top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5,
.col_6 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.col_1 {width:130px;}
.col_2 {width:330px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
.col_6 {width:1024px;}

.col_0{
  width: 153px;
  height: 80px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #014f73 #d3d3d3;
  overflow-x: hidden;
  display: inline;
  float: left;
  margin: 5px 5px 0 5px;
  background: #EEEEEE;
  box-shadow: 2px 2px 2px gray;
  border-radius: 2px;
  padding-left: 7px;
}
.titcateg{
  height: 18px;
  background: #014464;
  background: -moz-linear-gradient(top, #0272a7, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  font-family:Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #EEEEEE;
  display: block;
  outline: 0;
  text-decoration:none;
  text-shadow: 1px 1px 1px #000;
  text-align: center;
  margin: 0 0 0 -7px;
}
.col_0 ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.col_0 ul li a{
  text-decoration: none;
  color: #013953;
  font-size: 12px;
  display: block;
  height: 12px;
}

::-webkit-scrollbar {
  width: 5px; /* width of the entire scrollbar */
}
	
::-webkit-scrollbar-track {
  background: transparent; /* color of the tracking area */
}	
	::-webkit-scrollbar-thumb {
  background-color: #014f73; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 1px solid #014f73; /* creates padding around scroll thumb */
}

#menu .menu_right {
	float:right;
	margin-right:0px;
}
#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:10px;
	font-size:13px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
	font-size:16px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	font-size:14px;
	margin:1px 0 1px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}


.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}

.imgshadow { /* Better style on light background */
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}

#menu li .black_box {
	background-color:#333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 10px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:16px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
	}

#menu li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}



  • Partager sur Facebook
  • Partager sur Twitter