Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 8 sur 8
  1. #1
    Débutant
    Homme Profil pro Laurent
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    4 221
    Détails du profil
    Informations personnelles :
    Nom : Homme Laurent
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 4 221
    Points : 1 931
    Points
    1 931

    Par défaut images alignées horizontalement avec légende centrée en-dessous

    Bonjour,

    mon besoin est résumé dans le titre. J'ai repris le code de jreaux62 d'ici mais les images sont à la verticale...

    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <style type="text/css">
    #ul_liste li { /* liste */
    list-style-type:none; list-style-position:inside;
    display:inline-block;
    width:85px;
    padding:5px;
    text-align:center;
    vertical-align:top;
    }
    #ul_liste li img { /* image */
    width:85px;
    }
    #ul_liste li span { /* texte */
    width:85px;
    font-size:0.9em;
    color:blue;
    }
    </style>
    <ul id="ul_liste">
      <li> <img src="g---.jpg"></li>
      <li><span>xxx</span></li>
      <li> <img src="g---.jpg"></li>
    ...</ul>
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    Vous n'avez pas dû lire tout le sujet, car il donne la solution.

    Si vous êtes en html5, vous pouvez reprendre son code et utiliser la balise FIGURE :
    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="UTF-8" />
    	<title>Alignement horizontal image + légende</title>
    	<style type="text/css">
    body {
    	text-align: center; /* Pour la démo ;) */
    }
    ul {
    	list-style: none;
    	padding: 0;
    }
    li {
    	display: inline-block;
    	width: 25%; /* Jouez avec la width ou le zoom ! */
    	min-width: 218px; /* L'image ne débordera pas de la boîte \o/ */
    	margin: 1ex; padding: 1ex;
    	border: thin solid #333;
    }
    figure {
    	margin: 0;
    	text-align: center;
    }
    	</style>
    </head>
    <body>
    <ul>
    	<li>
    		<figure>
    			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    		</figure>
    	</li>
    	<li>
    		<figure>
    			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    		</figure>
    	</li>
    	<li>
    		<figure>
    			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    		</figure>
    	</li>
    </ul>
    </body>
    </html>
    NOTA: les smileys dans les commentaires ne sont PAS obligatoires

    En outre, si l'usage d'une liste n'est pas pertinent dans votre contexte, vous pouvez vous contenter de :
    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="UTF-8" />
    	<title>Alignement horizontal image + légende</title>
    	<style type="text/css">
    body {
    text-align: center;
    }
     
    figure {
    display: inline-block;
    width: 25%;
    min-width: 218px;
    margin: 1ex;
    border: thin solid #333;
    }
    	</style>
    </head>
    <body>
    	<figure>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    	</figure>
     
    	<figure>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    	</figure>
     
    	<figure>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
    	</figure>
    </body>
    </html>

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Débutant
    Homme Profil pro Laurent
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    4 221
    Détails du profil
    Informations personnelles :
    Nom : Homme Laurent
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 4 221
    Points : 1 931
    Points
    1 931

    Par défaut

    Alors pourquoi ça reste vertical ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #4
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 110
    Points
    83 110

    Par défaut

    CTRL + F5 ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Débutant
    Homme Profil pro Laurent
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    4 221
    Détails du profil
    Informations personnelles :
    Nom : Homme Laurent
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 4 221
    Points : 1 931
    Points
    1 931

    Par défaut

    Pareil
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  6. #6
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    Mais dites-moi, dites-moi… Ne serait-ce pas un problème de support de la propriété display:inline-block ?
    Vous utilisez quel navigateur, laurentSc ?

    À défaut de support, vous pourriez vous tourner vers un code comme ça (ici, j'ai mis des div : ça passe aussi) :
    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="UTF-8" />
    	<title>Alignement horizontal image + légende</title>
    	<style type="text/css">
    div {
    float: left;
    width: 25%;
    min-width: 218px;
    margin: 1ex;
    padding: 0.5ex 0;
    border: thin solid #333;
    text-align: center;
    }
    	</style>
    </head>
    <body>
    	<div>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
    	</div>
     
    	<div>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
    	</div>
     
    	<div>
    		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
    		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
    	</div>
    </body>
    </html>

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  7. #7
    Débutant
    Homme Profil pro Laurent
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    4 221
    Détails du profil
    Informations personnelles :
    Nom : Homme Laurent
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 4 221
    Points : 1 931
    Points
    1 931

    Par défaut

    Parfait Muchos.
    Navigateur=IE8.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  8. #8
    Débutant
    Homme Profil pro Laurent
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    4 221
    Détails du profil
    Informations personnelles :
    Nom : Homme Laurent
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 4 221
    Points : 1 931
    Points
    1 931

    Par défaut

    Je voulais préciser que pour utiliser ton code, j'ai du le modifier un peu :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <style type="text/css">
    div.trombi {
    float: left;
    width: 4%;
    min-width: 100px;
    margin: 1ex;
    padding: 0.5ex 0;
    border: 0;
    text-align: center;
    }
    p {
    font-family:Arial;
    }
      </style>
    <div class="trombi">
    <img style="width: 79px; height: 105px;" alt=""
     src="---.jpg">
    <p>bla bla</p>
    </div>
    <div class="trombi">
    <img src="---.jpg">
    <p>bla bla</p>
    ...
    car il ne faut pas que ça touche toutes les divs...et ça a servi à faire un trombinoscope, d 'où le nom de la classe...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •