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 :

Balise margin et padding


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut Balise margin et padding
    Bonjour,
    voila j'ai un site de voyage http://passiondesvoyages.fr fait en htlm et java script, j'ai lu que les balises que j'utilisais allaient devenir obsolètes et donc je suis en train de refaire mon site avec du css mais là ou je bute, sachant que je suis jardinier donc complétement néophyte et que c'est mes voyages que je met en ligne sur l'utilisation des balises margin et paddin, j'ai lu des tutos sur différents sites et je pige rien.
    Je voudrais m'en servir pour placer des légendes sous les photos sans recourir à &nbsp en pagaille et que cela correspondent bien.
    Merci d'avance.
    Pour info des modifs ont été faites mais pas encore en ligne notamment des doctypes ont été rajouté, les balises center et i notamment ont été changées enfin soyez indulgent
    Mandragore

  2. #2
    Membre habitué
    Homme Profil pro
    sans emploi
    Inscrit en
    Février 2014
    Messages
    365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Maine et Loire (Pays de la Loire)

    Informations professionnelles :
    Activité : sans emploi
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2014
    Messages : 365
    Points : 131
    Points
    131
    Par défaut
    moi j'utilise les balises <figure> <img> et <figcaption>

    à voir

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    mais mais cela ne place pas la légende dessous aussi

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,



    Pour ta question (image + légende centrés) :
    • les englober dans une "boite" <div> et centrer le contenu avec, en CSS : text-align:center;.
    • <div style="text-align:center">...</div> remplace <center>...</center> qui est obsolète.
    • Pour centrer une "boite" (<div> ou autre) : margin:0 auto;.

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    Je n'arrive pas à lire un tutos aussi alors d'ailleurs je cherche un bouquin sur le sujet, je suis d'une génération papier et sinon oui je connais la balise align center je suis d'ailleurs en train de les mettre en place au lieu de la balise center mais pour les légendes cela ne vas pas aussi il faut voir par exemple dans le menu afrique et aller dans soudan pour comprendre mon soucis parce que j'ai par exemple 4 photos et donc 4 légendes correspondantes alors avec la balise align center cela ne va pas aussi

  6. #6
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par mandragore69 Voir le message
    Je n'arrive pas à lire un tutos aussi alors d'ailleurs je cherche un bouquin sur le sujet, je suis d'une génération papier et sinon oui je connais la balise align center je suis d'ailleurs en train de les mettre en place au lieu de la balise center mais pour les légendes cela ne vas pas aussi il faut voir par exemple dans le menu afrique et aller dans soudan pour comprendre mon soucis parce que j'ai par exemple 4 photos et donc 4 légendes correspondantes alors avec la balise align center cela ne va pas aussi
    C'est par hasard que tu as mis UNE SEULE virgule ?
    Sinon... on respire quand ??

  7. #7
    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,
    il serait bon de commencer par supprimer "l'interdiction" sur le click droit, ce n'est vraiment pas utile, si tu ne veux pas de copie ne poste rien sur le web c'est la meilleure garantie.

    Ceci dit ta page restant de conception simple tu ne devrais pas trop souffrir de la mise à jour, c'est le CSS qui pourra te permettre dans un premier temps d'avancer.

    Jérôme à oublié
    FAQ CSS

  8. #8
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    C'est par hasard que tu as mis UNE SEULE virgule ?
    Sinon... on respire quand ??
    désolé

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    il serait bon de commencer par supprimer "l'interdiction" sur le click droit, ce n'est vraiment pas utile, si tu ne veux pas de copie ne poste rien sur le web c'est la meilleure garantie.

    Ceci dit ta page restant de conception simple tu ne devrais pas trop souffrir de la mise à jour, c'est le CSS qui pourra te permettre dans un premier temps d'avancer.

    Jérôme à oublié
    FAQ CSS

    ben j'ai lu la faq mais j'ai rien capté aussi,
    étant jardinier de métier j'ai fait un site me correspondant et donc ayant appris que mes balises en htlm allaient devenir obsolètes je voudrais les changer pour faire évoluer mon site et qu'il soit toujours visible par tout le monde et ainsi partager mes voyages

  10. #10
    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
    ben j'ai lu la faq mais j'ai rien capté aussi,(...)
    il faudra pourtant que tu t'y mettes
    (...)ayant appris que mes balises en htlm allaient devenir obsolètes(...)
    ce sont essentiellement tes balises de mise en forme <font>, <center> qui le sont.

    Je te mets une trame qui pourrait te servir de base, le CSS a été supprimé des balises et reporté dans la partie style de la page, cela sera plus facile ensuite de l'exporter, mais ce sera pour plus tard
    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
    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>http://passiondesvoyages.fr</title>
    <style>
    html, body{
      padding:0;
      margin:0;
      font:1em/1.25em Verdana;
      background:turquoise;
      text-align:center;
    }
    a{
      color:#000;
    }
    #header{
    }
    .article{
      display:inline-block;
      margin:1em;
      text-shadow: 1px 1px 0px #fff;
    }
    .article img{
      display:block;
      width:100px;
      height:100px;
      margin:1em auto;
      border:3px solid #fff;
      box-shadow: 0px 2px 4px 2px #888;
    }
    #footer{
      font-size:1em;
    }
    #footer ul{
      display:inline-block;
      margin:1em;
      padding:0;
      list-style:none;
    }
    #footer ul li{
      display:inline-block;
      margin:0 1em;
    }
    </style>
    <script>
    /* mettre les script ici */
    </script>
    </head>
    <body>
    <div id="header">
      <h1>Passion des Voyages</h1>
      <p>Découvrez des voyages faits par un amateur pour des amateurs(trices)</p>
      <p>BON VOYAGE</p>
    </div>
    <div class="article">
       <h2>Afrique</h2>
          <img src="http://passiondesvoyages.fr/imagecompsoudan85.jpg" id="test0" alt="">
          <select size="1" OnChange="namosw_goto_byselect(this, 'self')">
            <option selected>Selectionnez votre destination  </option>
            <option value="zanzibar/photoskenya.htm">Kenya</option>
            <option value="soudan/photossoudan.htm">Soudan</option>
            <option value="zanzibar/photostanzanie.htm">Tanzanie</option>
          </select>
    </div>
    <div class="article">
       <h2>Amérique</h2>
          <img src="http://passiondesvoyages.fr/imagecompquateur80.jpg" id="test1" alt="">
          <select size="1" OnChange="namosw_goto_byselect(this, 'self')">
            <option selected>Selectionnez votre destination  </option>
            <option value="argentine/photosargentine.htm">Argentine</option>
            <option value="bolivie/photosbolivie.htm">Bolivie</option>
            <option value="chili/photoschili.htm">Chili</option>
            <option value="equateur/photosequateur.htm">Equateur</option>
            <option value="guatemala/photosguatemala.htm">Guatemala</option>
            <option value="mexique/photosmexique.htm">Mexique</option>
            <option value="usa/photosouestusa.htm">Ouest Américain</option>
            <option value="perou/photosperou.htm">Perou</option>
          </select>
    </div>
    <div>
      <marquee>
        Cliquez sur une destination pour commencer le voyage, nouveautées 2013 : cambodge dans le menu asie
      </marquee>
    </div>
    <div id="footer">
      <ul>
        <li>
          <a href="mailto:mandragore69@voila.fr?subject=Une remarque sur le site">Email</a>
        </li>
        <li>
          <a href="javascript:window.external.addfavorite('http://www.carnetsdevoyages.eu/', 'Voyages de par le monde...')" >Site en favori</a>
        </li>
        <li>
          <a href="http://www.livre-dor.net/livre.php?livredor=121763">Livre d'or</a>
        </li>
      </ul>
      <p>
        N'oubliez pas avant de partir de consulter<br>le site du ministère des affaires étrangères<br>la liste des pays à risques et leurs recommandations
      </p>
      <p>
        <a href="http://www.diplomatie.gouv.fr/fr/conseils-aux-voyageurs_909/index.html" target="_blank">Cliquez ici pour le lien</a>
      </p>
    </div>
    </body>
    </html>
    jette y un oeil et essaie de voir ce que tu peux en tirer.

  11. #11
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    très gentil de ta part mais je parlais pas de ma page d'accueil pour moi le java script est toujours bon non ?
    en fait je parlais plutôt des pays ou j'ai mis des &nbsp en pagaille pour placer les légendes sous les photos

  12. #12
    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
    Le code mis ci dessus peut également te servir dans tes autres pages, l'essentiel a était mis.

  13. #13
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    mais les autres pages ne ressemblent pas à tout à ma page d’accueil, voila un exemple :



    et c'est pour ces pages là, page d'accueil de tous les pays que je cherche de l'aide avec du css et sans avoir moult &nbsp

  14. #14
    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
    mais les autres pages ne ressemblent pas à tout à ma page d’accueil, voila un exemple :
    certes je compatis mais globalement c'est la même chose
    ...que je cherche de l'aide avec du css et sans avoir moult &nbsp
    c'est exactement ce que je t'ai proposé dans l'exemple, mais il fallait bien sûr faire un minium d'adaptations simples.

    Je te fournis un façon de faire, sur base du premier exemple pour te montrer le CSS n'a pratiquement pas changé donc pourrait ce mettre dans un fichier à part quant à la structure, même si pas optimum et sémantiquement pas top, elle devrait survivre encore quelques années.
    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
    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>http://passiondesvoyages.fr/soudan</title>
    <style>
    html, body{
      padding:0;
      margin:0;
      font:1em/1.25em Verdana;
      background:sandybrown;
      text-align:center;
    }
    a{
      color:#000;
    }
    #header{
    }
    .article{
      float:left;
      margin:1em;
      text-shadow: 1px 1px 0px #fff;
      max-width:9em;
      width:9em;
      height:10em;
      vertical-align:top;
    }
    .article img{
      display:block;
      width:100px;
      height:100px;
      margin:1em auto;
      border:3px solid #fff;
      box-shadow: 0px 2px 4px 2px #888;
    }
    .article p{
    }
    #footer{
      font-size:1em;
      clear:both; /* force le retour à la igne */
    }
    #footer ul{
      display:inline-block;
      margin:1em;
      padding:0;
      list-style:none;
    }
    #footer ul li{
      display:inline-block;
      margin:0 1em;
    }
    </style>
    <script>
    /* mettre les script ici */
    </script>
    </head>
    <body>
    <div id="header">
      <h1>Galerie photos SOUDAN 2003</h1>
    </div>
    <div class="article">
      <a href="photosbayuda.htm" target="_self"><img src="imagecompsoudan33.jpg" alt=""></a>
      <p>Désert de Bayuda</p>
    </div>
    <div class="article">
      <a href="photosnubie.htm" target="_self"><img src="imagecompsoudan45.jpg" alt=""></a>
      <p>Désert de Nubie</p>
    </div>
    <div class="article">
      <a href="photosdoscha.htm" target="_self"><img src="imagecompsoudan63.jpg" alt=""></a>
      <p>Doscha</p>
    </div>
    <div class="article">
      <a href="photoselkurru.htm" target="_self"><img src="imagecompsoudan41.jpg" alt=""></a>
      <p>El Kurru</p>
    </div>
    <div class="article">
      <a href="photoskerma.htm" target="_self"><img src="imagecompsoudan83.jpg" alt=""></a>
      <p>Kerma</p>
    </div>
    <div class="article">
      <a href="photoskerma.htm" target="_self"><img src="imagecompsoudan83.jpg" alt=""></a>
      <p>Kerma</p>
    </div>
    <div class="article">
      <a href="photoskhartoum.htm" target="_self"><img src="imagecompsoudan5.jpg" alt=""></a>
      <p>Khartoum</p>
    </div>
    <div class="article">
      <a href="photosmeroe.htm" target="_self"><img src="imagecompsoudan19.jpg" alt=""></a>
      <p>Méroé</p>
    </div>
     
    <div id="footer">
      <ul>
        <li>
          <a href="mailto:mandragore69@voila.fr?subject=Une remarque sur le site">Email</a>
        </li>
        <li>
          <a href="javascript:window.external.addfavorite('http://www.carnetsdevoyages.eu/', 'Voyages de par le monde...')" >Site en favori</a>
        </li>
        <li>
          <a href="http://www.livre-dor.net/livre.php?livredor=121763">Livre d'or</a>
        </li>
      </ul>
    </div>
    </body>
    </html>
    maintenant à toi de bosser un petit peu

  15. #15
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    ok merci je vais m'y mettre alors
    mais comment faire pour que les images soient sur la même ligne aussi ? en faite sur deux lignes plus exactement ?

  16. #16
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Citation Envoyé par NoSmoking Voir le message
    maintenant à toi de bosser un petit peu
    Si tu avais essayé le code de NoSmoking, tu te rendrais compte que les photos+texte passent automatiquement à la ligne quand on réduit la taille de la fenêtre.

    Si tu veux aller plus loin, il faudra y mettre du tien, et BOSSER.

    Tu trouveras des tutoriels et FAQ qui répondront, au moins, aux questions basiques...

    Voici une variante, qui permet de centrer les photos+texte :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .article{
      display:inline-block;
      margin:1em;
      text-shadow: 1px 1px 0px #fff;
    }
    N.B. display:inline-block; au lieu de float:left;.

    [EDIT] Vu pour ta question "aligner les photos" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .article{
      display:inline-block;
      margin:1em;
      text-shadow: 1px 1px 0px #fff;
      width:110px;
      vertical-align:top;
    }
    vertical-align:top;.
    Dernière modification par Invité ; 10/05/2015 à 08h57.

  17. #17
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    alors j'ai copié le code de no smoking et c'est comme ça que j'ai vu que c'était pas sur une ligne mais en vertical
    ok merci pour le nouveau code, je vais m'y mettre alors
    alors j'ai essayé mais cela me les centre en vertical aussi au lieu qu'il soit sur deux lignes, pas ce que je veux aussi

  18. #18
    Invité
    Invité(e)
    Par défaut
    Difficile de te corriger si tu ne montres pas ton propre code (ou ta page de test).

  19. #19
    Nouveau Candidat au Club
    Homme Profil pro
    jardinnier
    Inscrit en
    Avril 2015
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : jardinnier

    Informations forums :
    Inscription : Avril 2015
    Messages : 13
    Points : 1
    Points
    1
    Par défaut
    le voici :


    Code : 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
    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
    <title>photossoudan</title>
    <style>
    html, body{
      padding:0;
      margin:0;
      font:1em/1.25em Verdana;
      background:sandybrown;
      text-align:center;
    }
    a{
      color:#000;
    }
    #header{
    }
     
    .article{
      display:inline-block;
      margin:1em;
      text-shadow: 1px 1px 0px #fff;
      width:110px;
      vertical-align:top;.
     
    }
    .article img{
      display:block;
      width:100px;
      height:100px;
      margin:1em auto;
      box-shadow: 0px 2px 4px 2px #888;
    }
    .article p{
    }
    #footer{
      font-size:1em;
      clear:both; /* force le retour à la ligne */
    }
    #footer ul{
      display:inline-block;
      margin:1em;
      padding:0;
      list-style:none;
    }
    #footer ul li{
      display:inline-block;
      margin:0 1em;
    }
    </style>
    <meta name="generator" content="Namo WebEditor v5.0">
    </head>
    <body>
     
    <script language="JavaScript">
     
    function ejs_nodroit()
    	{
    	alert('Clic droit interdit');
    	return(false);
    	}
     
    document.oncontextmenu = ejs_nodroit;
    </script>
     
    <SCRIPT LANGUAGE="JavaScript">
     
    texteAff = "bienvenue au soudan";
    place = 0;
    tempoLong = 100;
    function EJSAnimEtat2()
    	{
    	texteTemp1 = texteAff.substring(0,place);
    	texteTemp2 = texteAff.substring(place,place+1);
    	texteTemp2 = texteTemp2.toUpperCase();
    	texteTemp3 = texteAff.substring(place+1,texteAff.length);
    	window.status = texteTemp1 + texteTemp2 + texteTemp3;
    	if (place>texteAff.length)
    		{
    		place=0;
    		tempoLong=1000;
    		}
    	if (place==0)
    		tempoLong=100;
    	place++;
    	tempoAnimEtat2 = setTimeout("EJSAnimEtat2()",tempoLong)
    	}
    function EJSAnimEtat2Break()
    	{
    	window.status = "";
    	clearTimeout(tempoAnimEtat2);
    	}
    window.onload = EJSAnimEtat2;
    window.onunload = EJSAnimEtat2Break;
    </SCRIPT>
     
    <div id="header">
      <br><h1><u>Galerie photos SOUDAN 2003</u></h1>
      </div>
    <div class="article">
      <a href="photosbayuda.htm" target="_self"><img src="imagecompsoudan33.jpg"></a>
      <p><i>Désert de Bayuda</i></p>
     <a href="photosnubie.htm" target="_self"><img src="imagecompsoudan45.jpg"></a>
      <p><i>Désert de Nubie</i></p>
      <a href="photosdoscha.htm" target="_self"><img src="imagecompsoudan63.jpg"></a>
      <p><i>Doscha</i></p>
     <a href="photoselkurru.htm" target="_self"><img src="imagecompsoudan41.jpg"></a>
     <p><i>El Kurru</i></p>
     <a href="photoskerma.htm" target="_self"><img src="imagecompsoudan83.jpg"></a>
      <p><i>Kerma</i></p>
      <a href="photoskhartoum.htm" target="_self"><img src="imagecompsoudan5.jpg"></a>
      <p><i>Khartoum</i></p>
     <a href="photosmeroe.htm" target="_self"><img src="imagecompsoudan19.jpg"></a>
     <p><i>Méroé</i></p>
     <a href="photosnaga.htm" target="_self"><img src="imagecompsoudan7.jpg"></a>
      <p><i>Naga</i></p>
       <a href="photosdongola.htm" target="_self"><img src="imagecompsoudan85.jpg"></a>
      <p><i>Old Dongola</i></p>
      <a href="photossedinga.htm" target="_self"><img src="imagecompsoudan66.jpg"></a>
      <p><i>Sedinga</i></p>
      <a href="photossessibi.htm" target="_self"><img src="imagecompsoudan72.jpg"></a>
      <p><i>Sessibi</i></p>
     <a href="photossoleb.htm" target="_self"><img src="imagecompsoudan55.jpg"></a>
      <p><i>Soleb</i></p>
      <a href="photostombos.htm" target="_self"><img src="imagecompsoudan76.jpg"></a>
      <p><i>Tombos</i></p>
     
    </div>

  20. #20
    Invité
    Invité(e)
    Par défaut
    Compare ton code HTML avec celui fourni par NoSmoking...

    indice : les balises <div class="article"> ... </div> :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    sont présentes combien de fois ?
    et placées où/comment ?

Discussions similaires

  1. margin et padding
    Par romson2 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/02/2013, 08h13
  2. un margin et/ou un padding venu de null part
    Par LaDeveloppeuse dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/02/2008, 11h34
  3. problème margin ou padding
    Par mattrou dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/08/2007, 12h54
  4. Différence IE / Firefox avec Padding et Margin à 0
    Par gb-ch dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 02/02/2007, 22h40
  5. Problème de margin et padding
    Par Fleuretta dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 05/01/2007, 15h33

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