Tirette

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tirette

Message par frederique-rko le Dim 20 Juil 2014 - 21:08

Je me permets de vous adresser ce message car on m'avait répondu à ma requête concernant les tirettes. http://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.



Dernière édition par frederique-rko le Lun 21 Juil 2014 - 19:16, édité 1 fois

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par MlleAlys le Dim 20 Juil 2014 - 23:01

(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


Dernière édition par MlleAlys le Lun 21 Juil 2014 - 13:15, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par Scoubifitz le Lun 21 Juil 2014 - 2:34

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/

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par MlleAlys le Lun 21 Juil 2014 - 13:16

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par frederique-rko le Lun 21 Juil 2014 - 17:54

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 ?

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par MlleAlys le Lun 21 Juil 2014 - 18:07

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/

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tirette

Message par frederique-rko le Lun 21 Juil 2014 - 19:13

MlleAlys c'est juste génial  Yes 

Sincèrement je te remercie beaucoup Like a Star @ heaven 
Merci également à Scoubifitz  thumright 

Vous êtes super.

 résolu 

frederique-rko
*

Messages : 32
Inscrit(e) le : 01/03/2012

http://wwc-life.forumperso.com/
frederique-rko a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum