Tirette
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Tirette
Je me permets de vous adresser ce message car on m'avait répondu à ma requête concernant les tirettes. https://forum.forumactif.com/t369377-texte-depliant-au-passage-souris
Le truc c'est que je n'arrive pas totalement à faire ce que je souhaite.
J'aimerais supprimer l'espace vide qui semble correspondre à la taille de la boite tirette cachée. Je pense que l'illustration ci-jointe vous aidera à mieux comprendre ce que je veux dire.
Je voudrais aussi pouvoir dans ce cas agrandir la boite du texte cachée car mon texte est trop long (savoir si on peut aussi adapter la taille de la tirette en fonction du texte, ça serait l'idéal) et il faudrait donc que la boite puisse chevaucher les images afin de ne pas laisser cet espace vide précédemment cité.
J'espère que vous comprendrez mes demandes et que vous trouverez le temps de m'y répondre.
Le truc c'est que je n'arrive pas totalement à faire ce que je souhaite.
J'aimerais supprimer l'espace vide qui semble correspondre à la taille de la boite tirette cachée. Je pense que l'illustration ci-jointe vous aidera à mieux comprendre ce que je veux dire.
Je voudrais aussi pouvoir dans ce cas agrandir la boite du texte cachée car mon texte est trop long (savoir si on peut aussi adapter la taille de la tirette en fonction du texte, ça serait l'idéal) et il faudrait donc que la boite puisse chevaucher les images afin de ne pas laisser cet espace vide précédemment cité.
J'espère que vous comprendrez mes demandes et que vous trouverez le temps de m'y répondre.
Dernière édition par frederique-rko le Lun 21 Juil 2014 - 19:16, édité 1 fois
Re: Tirette
(re) bonjour ^^
L'effet est un peu moins beau et il n'y a pas l'effet de transition, mais voilà ce que j'ai réussi à faire, essayez de remplacer le css par celui là :
le code html est le même :
http://jsfiddle.net/eVqH9/
mais quelqu'un arrivera peut être à faire mieux =s
L'effet est un peu moins beau et il n'y a pas l'effet de transition, mais voilà ce que j'ai réussi à faire, essayez de remplacer le css par celui là :
- Code:
/*cadre effet tirette*/
.tirette {
height:52px;
margin: 5px;
width: 175px;
position: relative;
border-bottom:1px solid black;
display: inline-block;
}
.tirette .contenu {
height:40px;
width:150px;
padding: 5px;
border: 1px solid black;
background-color: yellow;
overflow: hidden;
position:absolute;
z-index:10;
bottom:0;
left:5px;
border-bottom:0;
box-shadow: 0 0 10px black;
}
.tirette:hover .contenu {
height:auto;
min-height:50px;
}
/*fin cadre effet tirette*/
le code html est le même :
- Code:
<div class="tirette">
<div class="contenu">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et arcu semper, ornare lorem ut, volutpat elit.
</div>
</div>
http://jsfiddle.net/eVqH9/
mais quelqu'un arrivera peut être à faire mieux =s
Dernière édition par MlleAlys le Lun 21 Juil 2014 - 13:15, édité 1 fois
MlleAlys- Membre actif
- Messages : 5793
Inscrit(e) le : 12/09/2012
Re: Tirette
bonsoir,
le mieux est de déplacer la "tirette" vers le bas , et non e "contenu" vers le haut ...
http://jsfiddle.net/UPYG5/1/
le mieux est de déplacer la "tirette" vers le bas , et non e "contenu" vers le haut ...
- Code:
<div class="tirette">
<div class="contenu">
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
blablabla<br/>
</div>
</div>
- Code:
.tirette {
border-bottom: 1px solid black;
padding : 0 10px;
margin:0 5px;
width:150px;
height:50px;
position:relative;
overflow:hidden;
transition: all 0.8s ease-out;
}
.contenu {
height:200px;
width:146px;
box-shadow: 0 0 3px black;
border:1px solid black;
padding:2px;
position: absolute;
top:5px;
left:10px;
overflow:auto;
}
.tirette:hover {
height:230px;
}
http://jsfiddle.net/UPYG5/1/
Re: Tirette
mais dans ce cas on aura le même soucis vers le bas, non ?
MlleAlys- Membre actif
- Messages : 5793
Inscrit(e) le : 12/09/2012
Re: Tirette
Bonjour,
Merci pour votre aide précieuse.
L'effet vers le bas est sympa, néanmoins je n'aime pas l'effet ascenseur pour lire le texte. N'y a-t-il pas moyen de faire afficher la totalité du texte ?
Merci pour votre aide précieuse.
L'effet vers le bas est sympa, néanmoins je n'aime pas l'effet ascenseur pour lire le texte. N'y a-t-il pas moyen de faire afficher la totalité du texte ?
Re: Tirette
pour afficher la totalité du texte, il faut soit mettre toutes les tirettes à la longueur du plus grand texte, soit passer par une hauteur automatique, et dans ce cas cela s'adapte à n'importe quelle longueur, mais on perd l'effet de transition, comme par exemple dans le code que j'ai donné =/
EDIT : l'effet n'est pas vers le bas, mais voilà mon code précédent avec un bidouillage pour un semblant de transition (en travaillant non pas sur la propriété height, mais sur max-height en fait, ça maintient l'illusion à peu près, même s'il ya a quand même une hauteur maximale), avec la taille qui se règle en fonction du contenu ^^ :
html :
css :
apperçu : http://jsfiddle.net/n5Zbv/3/
EDIT : l'effet n'est pas vers le bas, mais voilà mon code précédent avec un bidouillage pour un semblant de transition (en travaillant non pas sur la propriété height, mais sur max-height en fait, ça maintient l'illusion à peu près, même s'il ya a quand même une hauteur maximale), avec la taille qui se règle en fonction du contenu ^^ :
html :
- Code:
<div class="tirette">
<div class="contenu">
Nullam nec arcu ut urna pharetra ultrices sed vitae lorem. Nulla ac iaculis libero. Praesent ac enim id ligula ornare lobortis vitae vitae diam. Morbi id velit felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
css :
- Code:
/*cadre effet tirette*/
.tirette {
height:52px;
margin: 5px;
width: 175px;
position: relative;
border-bottom:1px solid black;
display: inline-block;
}
.tirette .contenu {
max-height:40px;
min-height:40px;
transition: max-height 2s ease-out;
width:150px;
padding: 5px;
border: 1px solid black;
background-color: yellow;
overflow: hidden;
position:absolute;
z-index:10;
bottom:0;
left:5px;
border-bottom:0;
box-shadow: 0 0 10px black;
}
.tirette:hover .contenu {
min-height:50px;
max-height:500px;
}
/*fin cadre effet tirette*/
apperçu : http://jsfiddle.net/n5Zbv/3/
MlleAlys- Membre actif
- Messages : 5793
Inscrit(e) le : 12/09/2012
Re: Tirette
MlleAlys c'est juste génial
Sincèrement je te remercie beaucoup
Merci également à Scoubifitz
Vous êtes super.
Sincèrement je te remercie beaucoup
Merci également à Scoubifitz
Vous êtes super.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum