[RESOLU] Design box avec scroll

Eléphanteau du PHP | 26 Messages

28 mars 2017, 00:56

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

Mammouth du PHP | 1967 Messages

28 mars 2017, 08:56

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.
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube

Eléphanteau du PHP | 26 Messages

28 mars 2017, 21:17

Merci,

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