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 :

comment enlever la superposition de blocs div inline ?


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    347
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 347
    Par défaut comment enlever la superposition de blocs div inline ?
    Bonjour,

    Je ne comprends pas pourquoi mes blocs DIV inline se superposent :



    je voudrais qu'ils se mettent l'un à côté de l'autre, comme ça :



    Ma CSS est là suivante :
    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
    .bloc_produit {
     display:inline;
     width:244px;
     height:90px;  
    }
    .bloc_produit_image {
     display:inline;
     width:107px;
     height:90px;
     float:left;
    }
    .bloc_produit_details { 
     display:inline;
     width:137px;
     height:90px;
     vertical-align:top;
     text-align:left;
     overflow:hidden
    }
    .bloc_produit_nom {
     display:block;
     width:137px;
     height:45px;
    }
    .bloc_produit_btn {
     display:block;
     width:137px;
     height:45px;
    }
    quelqu'un voit-il mon erreur ?

    voilà le code HTML d'appel :
    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
     <div class="bloc_produit">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
            </div>
    j'ai beau cherché, je ne vois rien d'évident.

    pouvez-vous m'aider s'il vous plaît ?

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    Salut
    la propriété in-line est propre au célulle de tableau et ne se comporte pas de la même façon sur une div ou un span ...

    Pour combler cela j'ai modifier tes inline en display:block et float:left :

    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
     
    <HTML>
    <HEAD>
    <title>Morne Plaine. Le classement.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
     
    .bloc_produit {
     display:block;
     float:left;
     width:244px;
     height:90px; 
      background-color:yellow; 
    }
    .bloc_produit_image {
     display:block;
     float:left;
     width:107px;
     height:90px;
     float:left;
    }
    .bloc_produit_details { 
      display:block;
     float:left;
     width:137px;
     height:90px;
     vertical-align:top;
     text-align:left;
     overflow:hidden;
    }
    .bloc_produit_nom {
     display:block;
     width:137px;
     height:45px;
    }
    .bloc_produit_btn {
     display:block;
     width:137px;
     height:45px;
    }
    </style>
     
    </HEAD>
    <BODY>
    <div class="bloc_produit">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
    </div>
    <div class="bloc_produit" style="background-color:red">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
    </div>
    <div class="bloc_produit">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
    </div>
    <div class="bloc_produit" style="background-color:red">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
    </div>
    <div class="bloc_produit">
                <div class="bloc_produit_image">
                    <img src="../../gfx/catalogue/exemple_pdoduit.gif" width="50px" height="40px">
                </div>
                <div class="bloc_produit_details">
                    <div class="bloc_produit_nom">
                        &gt; Enduit pour joints de plaques de  pl&acirc;tre cartonn&eacute;es<br>
                    </div>
                    <div class="bloc_produit_btn">
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../../gfx/catalogue/btn_fiche_produit2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_produit.gif" alt="Fiche produit" name="Image65"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../../gfx/catalogue/btn_fiche2.gif',1)"><img src="../../gfx/catalogue/btn_fiche.gif" alt="Fiche d'utilisation" name="Image66"  border="0"></a>
                        <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image67','','../../gfx/catalogue/btn_fiche_donnees_securite2.gif',1)"><img src="../../gfx/catalogue/btn_fiche_donnees_securite.gif" alt="Fiche de données de sécurité" name="Image67" border="0"></a>
                    </div>
                </div>
    </div>
    </BODY>
    </HTML>
    coordialement

  3. #3
    Membre éclairé Avatar de mLk92
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 527
    Par défaut
    Il me semble que tu as déja créer un topic pour ca ...

Discussions similaires

  1. [HTML 4.0] Probleme de superposition indésiré de bloc (div)
    Par dedemotard dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 23/04/2010, 18h51
  2. Comment assembler mes blocs div ?
    Par shubakas dans le forum Débuter
    Réponses: 0
    Dernier message: 13/05/2008, 10h24
  3. [DBGRID] Comment enlever les ascenseurs H et V
    Par kase74 dans le forum Bases de données
    Réponses: 6
    Dernier message: 16/09/2004, 18h33
  4. Réponses: 10
    Dernier message: 31/07/2003, 00h35

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