IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Série d'images avec boutons en dessous


Sujet :

Positionnement en CSS avec z-index

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Janvier 2009
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2009
    Messages : 11
    Points : 12
    Points
    12
    Par défaut Série d'images avec boutons en dessous
    Bonjour,

    Je débute avec bootstrap v3 et le mode responsive, et j'ai quelques difficultés à me séparer de tableaux pour afficher une série de thumbnails avec des boutons en dessous.

    Avant j'avais ceci :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <td style="width:130px;">
    <img src="xxx.jpg" width="120px" />
    <form action="#" method="post" >
    <button ... >-</button>
    &nbsp;&nbsp;<div id="nb_xxx" style="display:inline">1</div>&nbsp;&nbsp;
    <button ...>+</button>
    </form>
    </td>
    Le principe c'est qu'en dessous de chaque image, il y avait 2 boutons pour ajouter/retrancher. Marche bien sauf pas pratique sur tablette.

    Je ne vois pas trop comment faire pour être en mode responsive, sans tableau, tout en gardant le même aspect.
    Afficher les images les unes après les autres : ok.
    Mais dès que je veux mettre les boutons, je ne sais quelle combinaison de <div>, <span>, style css, ou autre utiliser : soit les boutons se positionnent à côté, soit j'ai une image par ligne.

    Si quelqu'un a déjà eu ce problème ou si il sait comment le résoudre, merci d'avance.

    JP

  2. #2
    Membre à l'essai
    Profil pro
    Inscrit en
    Janvier 2009
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2009
    Messages : 11
    Points : 12
    Points
    12
    Par défaut
    Ne jamais faire un post le soir !
    Ne jamais faire un post après 2 heures de codage frustrant !

    Une erreur de copier/coller (comment est-ce possible?!?) fait qu'il y avait une erreur dans le width. Le boulet.
    Corrigé.
    Pour info, le code maintenant :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="container-fluid"><div class="row cards">
    <div class="col-xs-12" style="width:130px; " >
    <img src="xxx.jpg" width="120px" />
    <button ... >-</button>
    &nbsp;&nbsp;<div id="nb_xxx" style="display:inline">1</div>&nbsp;&nbsp;
    <button ... >+</button>
    </div>
    <div class="col-xs-12" style="width:130px; " >...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire défiler 3 images avec boutons suivant/précédent
    Par Skkkd dans le forum Composants graphiques
    Réponses: 15
    Dernier message: 25/03/2011, 12h51
  2. Diaporama images avec bouton
    Par ranell dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 14/03/2011, 12h28
  3. [HTML] Probleme boutons-images avec firefox
    Par baba_star dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/07/2006, 18h49
  4. test champs email avec une image pour bouton de validation
    Par becouet dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 08/06/2006, 00h17
  5. Image avec texte à droite puis en dessous
    Par StarNab dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/05/2005, 18h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo