[RESOLU] Design box avec scroll

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Design box avec scroll

Re: Design box avec scroll

par Rickways » 28 mars 2017, 21:17

Merci,

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

Re: Design box avec scroll

par Spols » 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.

Design box avec scroll

par Rickways » 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