18010 sujets

Questions générales et questions de débutants

[Résolu] CSS overflow personnalisé

Bonjour tout le monde,

Je fais un tchat dont le client sera en HTML/CSS/JS et j'ai vraiment besoin de votre aide car je suis assez nul en CSS.

J'ai une DIV contenant des blocs (photos de chatteurs) que je fais défiler grâce à du javascript.

Pour ça, la DIV conteneur a la propriété overflow:hidden;

Toutefois, je souhaite qu'en cliquant sur la photo d'un tchatteur, un dialogue s'ouvre (de bas en haut) et que cette boîte de dial (une autre dIV) dépasse/sorte du conteneur.

Quand je clique le dialogue s'ouvre bien mais reste dans le conteneur à cause d'overflow. Quand j'enlève overflow, ça sort bien mais me défilement ne fonctionne plus, et toutes les DIV photos chatteurs apparaissent sur la même ligne.

J'ai joint une photo avec overflow:hidden et overflow:visible.

Je souhaite donc, si c'est faisable, que le dépassement ne soit possible que par le haut du conteneur.

Je vous remercie sincèrement pour votre aide.
upload/54938-alsa1.jpg upload/54938-alsa2.jpg
Bonsoir,

Merci pour la réponse rapide !

overflow-x et overflow-y visible ont pour effet de mettre des barres de défilement au lieu d'autoriser le dépassement du conteneur par le haut.

Ça ne marche donc pas ou peut-être que j'applique mal la consigne.
Tu peut essayer en réservant l'espace, en hauteur, a l'aide des marges , une négative (pour avaler la marge positive) et une positive. Il faut qu'il y est au dessus du contenu ou un espace suffisant .
http://codepen.io/gc-nomade/pen/qwabn il y a un slider vite fait en bas de page pour la demo avec 2 image de taille différente, survol la petite pour afficher la grosse.
Bonsoir Gc-nomade,

Merci pour ta réponse.

Voici mon CSS :

.scroll {
	width : 96%;
	margin-top:2px;
	border:solid 1px #CCCCCC;
	overflow:visible;	
}

.scroll .conteneurChatteur {
	overflow:hidden;
	white-space : nowrap;
	border:solid 1px #666666;
	height:90px;
}

/* IE6 */
* html .scroll .conteneurChatteur {
	width : 570px;
}

.scroll .left {
	float:left;
	width : 20px;
}

.scroll .right {
	float:right;
	width : 20px;
}


.blocChatteur{
	position:relative;
	width:140px;
	display: -moz-inline-stack;
	display: inline-block;
	*display: inline;
	margin:5px;
	line-height:100px;
	height:auto;*
	
}
.blocPhotoChatteur{
	position: relative;
	width: 50px;
	height: 45px;
	border: solid 1px #000;
	margin-left:auto;
	margin-right:auto;
}
.blocDialChatteur{
	width:140px;
	height:150px;
	padding:2%;
	margin-left:auto;
	margin-right: auto;
	background-color:#999;
	behavior: url(/js/pie/PIE.htc);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #F00;
}


Pa rapport à ce que tu as préconisé, comment ferais-tu pour que quand blocDialChatteur s'ouvre (comme un slide) il déborde sur le conteneur conteneurChatteur par le haut ?

Merci encore.
Dans mon exemple je te parle de marges.

une premier marge positive par le haut sur le conteneur qui affiche la barre de defilement, cette marge peut-être interne au coteneur des images.Cette marge dégage l'espace d'affichage necessaire a l'element caché.

une seconde marge de même hauteur, mais en valeur négative, de façon a reduire l'ecart imposée a zero.

Si la méthode te convient, il te suffit de distribué ces deux marges sur 1 ou 2 de tes conteneurs, éventuellement en ajoutant un conteneur neutre qui te servira de tampon entre le slider et le contenu qui le précède.

Même exemple ,mais avec les 200px reservé et deduis de la zone d'affichage a partir du paragraphe contenant les images: http://codepen.io/gc-nomade/pen/AtCsf Même principe, les marges positives et négatives sont distribuées autrement et sur un seul élément .
Modifié par gc-nomade (30 May 2014 - 22:05)
gc-nomade,

Smiley clapclap Tu es un génie ! Je croyais ne rien comprendre à ce que tu disais mais....franchement, en lisant et relisant ce que tu as dit, j'ai appliqué ça a résolu mon problème.

Bravo et merci beaucoup ! Ça faisait "15 ans" que j'étais dessus et ça m’empêchait de dormir et de continuer à faire ce que je sais faire le mieux : continuer le développement de mon serveur de Chat en Jwebsocket (Java) ! Je suis vraiment nul en CSS ou tu es trop fort !

Mille mercis encore !
Anzo a écrit :
Je voulais marquer le sujet comme résolu !
Comment faire ?

En cochant la checkbox lorsque tu réponds au sujet :
Résolu -->  Marquer ce sujet comme résolu
Smiley cligne
Modifié par 6l20 (31 May 2014 - 14:34)
Sujet clos
Aller à