28172 sujets

CSS et mise en forme, CSS3

Problème de mise en page avec le Jquery Hcaptions

Bonjour à tous,

J'ai un petit souci de mise en page avec le jQuery Hcaptions (Voir ici ou ici). C'est un "plugin" jquery qui permet de faire défiler un bandeau contenant des infos et/ou des liens sur une images lorsqu'on passe la souris par dessus celle-ci. Sur le site de démo du créateur tout est parfait et il réagi même au redimensionnement de l'image.

Par contre, je n'arrive pas à l'intégrer correctement à mon site.. Le problème est que le bandeau dépasse sur la droite et sous l'image.

Je me suis dit que c'était peut être mes feuilles de style qui posaient problèmes, j'ai donc essayé le jquery sur un page html vierge en reprenant le code du créateur mais sa a donné les même résultats.. J'ai essayé différentes "combinaisons" de css mais rien a faire, je n'y arrive pas...

Vous pouvez accéder à ma page de test ici pour voir par vous même.

Et voila le code de la page:

<!DOCTYPE html>

<html>
<head>
    <title>Test Hcaptions</title>
    
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/jquery.hcaptions.js"></script>
    
    <link rel="stylesheet" href="./css/34gs.css" type="text/css"/>
        
</head>

<body>
    <h1>Test Hcations</h1>
    
    <a href="#myToggle1" class="panel">
        <img src="./img/600par500.jpg" style="max-width: 100%; height: auto;">
    </a>
    <div id="myToggle1" class="cap-overlay hide">
        <h5>Cupcakes</h5>
        <div class="content">
            Name: cupcakes.png<br />
            Photography: Ryun Shofner<br />
            <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
            <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
        </div>
    </div>
    
    <div class="container">
        <div class="col_2">
            <a href="#myToggle2" class="panel">
                <img src="./img/600par500.jpg" style="max-width: 100%; height: auto;">
            </a>
            <div id="myToggle2" class="cap-overlay hide">
                <h5>Cupcakes</h5>
                <div class="content">
                    Name: cupcakes.png<br />
                    Photography: Ryun Shofner<br />
                    <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
                    <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a>
                </div>
            </div>
        </div>
        <div class="col_2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus ipsum quis augue mattis pharetra. Ut luctus venenatis velit sed semper. Pellentesque non sollicitudin felis. Cras placerat tortor ac libero gravida vehicula. In purus orci, condimentum quis tellus eu, pellentesque iaculis augue. Nulla massa nisl, viverra ac dictum a, gravida viverra nulla. Vivamus nec mauris felis. Integer id ultrices nibh. Phasellus in accumsan sapien, nec fringilla tortor.</p>
        </div>
    </div>

</body>
</html>




.cap-overlay .button { margin-top:10px}
.cap-overlay{width: 100%; color:#fff; background: rgba(0, 0, 0, 0.43);left:0;padding:12px; line-height: 1.4em;font-size:14px}
.cap-overlay h5 {color:#fff;}
a[data-toggle="drop-panel"] {display: block;}




$(window).load(function(){
     $('.panel').hcaptions();
});


Avez vous une idée ?

Merci d'avance et bonne soirée !
Modifié par frinz (26 Mar 2014 - 19:01)
Bonjour,

Je n'ai pas regardé en détail votre souci, la page de l'auteur et/ou l'auteur lui même devrait être à même de fournir le "service après-vente", non ?
Cependant, il me semble qu'il n'est pas réellement nécessaire de sortir l'artillerie lourde (un librairie, un plugin, du CSS, du JS intrusif,...) pour produire ce type d'effet, CSS (et la version 3 en particulier) parvient à faire de forts jolies choses, ici par exemple Smiley cligne

Bon courage.
Merci, je vais tester celui ci. Par contre je ne sais pas si je vais pouvoir le rendre responsive.

Et j'ai ouvert un sujet sur le github de l'auteur.

Je vous tiens au courant.

Bonne journée.
Sujet clos
Aller à