Tirette

[frederique-rko]

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.

[MlleAlys]

(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à :

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>

La taille du cadre s'adapte à celle du contenu (mais du coup on perd l'effet de transition), et passer par dessus le reste grâce à la position absolue.

http://jsfiddle.net/eVqH9/

mais quelqu'un arrivera peut être à faire mieux =s

[Scoubifitz]

bonsoir,

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/

[MlleAlys]

mais dans ce cas on aura le même soucis vers le bas, non ?

[frederique-rko]

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 ?

[MlleAlys]

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 :

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/

[frederique-rko]

MlleAlys c'est juste génial   

Sincèrement je te remercie beaucoup  
Merci également à Scoubifitz   

Vous êtes super.