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 :

Centrer un diaporama


Sujet :

Centrer un élément en CSS

  1. #1
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Points : 1 839
    Points
    1 839
    Billets dans le blog
    2
    Par défaut Centrer un diaporama
    Bonjour,

    J'utilise la première version de http://www.guillaumevoisin.fr/ Il fonctionne très bien. Mais je n'arrive pas à center mes images dans ma page

    Code vb.net : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     <ul class="diaporama1">
        <asp:Repeater ID="rptImg" runat="server">
            <ItemTemplate>
                <li>
                    <div class="wrapper">
                        <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                            alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px;" />
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    J'ai essayé plein de trucs (mettre dans un div, jouer avec le display block, le text-align ... Mais rien
    De plus j'ai vu qu'il y a une nouvelle version mais les liens ne marches pas.
    Même s'il faut changer de composant, je m'en moque.
    Je veux un diaporama ou je peux cliquer sur l'image pour aller sur une autre page et pouvoir center mes images (width différents)

    Merci de votre aide
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    c'est le code HTML généré qu'il est intéressant de mettre, si en plus tu as le CSS que tu utilises cela sera vraiment génial pour pouvoir te fournir une aide efficace sans commencer à spéculer.

    Une page test est pal mal non plus

  3. #3
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Points : 1 839
    Points
    1 839
    Billets dans le blog
    2
    Par défaut
    Voici le code généré :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <div style="width:960px;">
    <ul class="diaporama1">
       <li>
          <div class="wrapper">
             <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9l4Be-g7PvpIdSrBkt_G9iZkUvj-dsR4VfELe4nYy12ibVXvo"  style="max-height: 320px;" />
           </div>
         </li>
         <li>
          <div class="wrapper">
             <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSa9o33IgU9JNNYUW-gHhs5V8XXCsbbBeN3_UAO9Am7KbxakMVAZw"  style="max-height: 320px;" />
           </div>
         </li>
        </ul>
    </div>
    et le css
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    .wrapper {
        margin:auto;
        width:900px;
        text-align:center;
    }
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Ton soucis vient visiblement de <div style="width:960px;"> qui n'est apparemment pas centré.

    Tu peux faire court
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <ul class="diaporama1">
      <li>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9l4Be-g7PvpIdSrBkt_G9iZkUvj-dsR4VfELe4nYy12ibVXvo" alt="">
      </li>
      <li>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSa9o33IgU9JNNYUW-gHhs5V8XXCsbbBeN3_UAO9Am7KbxakMVAZw" alt="">
      </li>
    </ul>
    avec le CSS suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ul {
      padding:0;
      width:60em;
      margin:0 auto;
      list-style:none;
      text-align:center;
    }
    ul img {
      max-height:20em;
    }

  5. #5
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Points : 1 839
    Points
    1 839
    Billets dans le blog
    2
    Par défaut
    Le problème est que le ul et le li sont sans arrêt réécrit par le compsant jquery de diaporama.
    J'ai trouvé se code qui améliore nettement le rendu
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div style="width:100%;">
            <div style="display: table;margin: 0 auto;">
                <ul class="diaporama1">
     
                            <li>
                                <div style="text-align: center;width:400px;">
                                    <div style="display: inline-block;">
                                        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9l4Be-g7PvpIdSrBkt_G9iZkUvj-dsR4VfELe4nYy12ibVXvo" alt="">
                                    </div>
                                </div>
                            </li>
                         <li>
                                <div style="text-align: center;width:400px;">
                                    <div style="display: inline-block;">
                                        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSa9o33IgU9JNNYUW-gHhs5V8XXCsbbBeN3_UAO9Am7KbxakMVAZw" alt="">
                                    </div>
                                </div>
                            </li>
                </ul>
            </div>
        </div>
    Le dernier souci est que comme jdiaporama au lancement me décale la première image trop à droite, puis la centre et après lance le slide et après plus aucun problème d'affichage
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Essaie de reporter les width, margin et même le text-align sur le conteneur.

  7. #7
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Points : 1 839
    Points
    1 839
    Billets dans le blog
    2
    Par défaut
    C'est ça ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <div style="display: table; margin: 0 auto; width: 400px;">
    et ça marche

    Merci
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

  8. #8
    Membre chevronné
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Points : 1 839
    Points
    1 839
    Billets dans le blog
    2
    Par défaut
    Et encore plus fort avec le centrage vertical...
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .SizePhoto-Accueil {
        width: 400px;
        height: 320px;
    }
     
    .center-Accueil {
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
     
    .CenterImg {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    Code vb.net : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
     <div class="center-Accueil SizePhoto-Accueil">
            <ul class="diaporama1">
                <asp:Repeater ID="rptImg" runat="server">
                    <ItemTemplate>
                        <li>
                            <div class="SizePhoto-Accueil">
                                <div class="CenterImg">
                                    <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                                        alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px; max-width: 400px;" />
                                </div>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    Si débugger est l'art d'enlever les bugs ... alors programmer est l'art de les créer

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

Discussions similaires

  1. Centrer horizontalement les img d'un diaporama ?
    Par Mister Paul dans le forum Mise en page CSS
    Réponses: 22
    Dernier message: 26/02/2012, 18h01
  2. [CSS 3] Centrer un diaporama et agrandir les vignettes à l'intérieur
    Par beegees dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 05/04/2010, 20h14
  3. centrer un diaporama fondu enchainé
    Par pseudodejautilis dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 11/09/2009, 11h19
  4. [CR9] Centrer verticalement le texte
    Par CDRIK dans le forum SAP Crystal Reports
    Réponses: 3
    Dernier message: 22/05/2009, 19h33
  5. Centrer un texte dans un string Grid
    Par christine dans le forum C++Builder
    Réponses: 5
    Dernier message: 22/10/2002, 22h33

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