Page 1 sur 1

Design box avec scroll

Posté : 28 mars 2017, 00:56
par Rickways
Bonjour à tous,

j'ai réalisé il y a quelques temps un design CSS que j'aimerai amélioré...
je ne suis plus très au point avec le code, mais je m'y replonge.

J'ai donc fait des "box" en css, dont une qui contient beaucoup de texte (une liste de poèmes)

je souhaite dans cette box pouvoir scroller si les informations dépassent une certaine taille.

j'ai donc mis dans mon CSS un overflow:scroll avec un height à 250, mais ça ne marche pas...

CSS bigbox :
#inline-table .bigbox {
    display:inline-table;
}

/* Essai pour la box derniers envois sur le site inline-table */

.bigbox {
  vertical-align:top;
  height:250px;
  overflow: scroll;
  min-width:400px;
  max-width:500px;
  text-align:left;
  background-color: #F0F7EF;
  margin-top:30px;
  margin-left:2%;
  margin-right:2%;
}
.bigbox:hover {background:white;}

.bigbox h1 {
  	background: url('images7/backgroundmenu.png');
	margin:0;
	font-size: 1.0em;
	font-weight: bold;
	text-align:center;
	text-transform: uppercase;
	line-height:30px;
}

.bigbox ul
{
    list-style-type: none;
	padding:0px;
	}

.bigbox li
{
    font-size: 0.8em;
	padding-left: 10px;
	padding-right: 10px;
}

/* Liens */
.bigbox a {
	color: black;
	text-decoration: none;
}
.bigbox a:hover, a:focus {
	color: #C0C0C0;
}
.bigbox a img {
	border: none; /* -> 10 */
}
Ah oui le lien vers la page pour comprendre :
http://www.lespoetes.net/accueil7.php

Merci pour vos conseils

Re: Design box avec scroll

Posté : 28 mars 2017, 08:56
par Spols
Hello,

C'est parceque tu utilise inline-table plutot que inline-block. avec inline -table, le navigateur prend la boite la plus grande et align toutes les autres dessus sans tenir compte de restriction de hauteur.

Re: Design box avec scroll

Posté : 28 mars 2017, 21:17
par Rickways
Merci,

j'ai mis un display : inline-block et sa fonctionne parfaitement.