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

HTML Discussion :

Effet secondaire non désiré de "float"


Sujet :

HTML

  1. #1
    Membre expérimenté Avatar de davcha
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    1 258
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 258
    Points : 1 539
    Points
    1 539
    Par défaut Effet secondaire non désiré de "float"
    J'ai un petit problème de positionnement.
    En gros, j'ai un menu et un contenu, vous pouvez voir une ancienne version qui fonctionne ici : http://www.swgbase.net/dev/ , pour vous donner une idée.

    A présent le contenu (anciennement coucou<br><br>...<br>pouet) est un tableau, toujours pour la mise en forme, ça n'est évidemment pas définitif.

    Sur cette image, le menu est vertical, car j'ai supprimé la ligne : "float: left;" du style attaché à <li>.

    Si je remets "float: left;" voici ce que j'obtiens :


    Pour plus de clarté, j'ai supprimé l'ensemble des styles, excepté les quelques styles qui entrent en jeu dans ce "bug", et voilà ce que j'obtiens :
    sans "float: left;" :

    avec "float: left;" :


    Vous pouvez voir dans ces images deux zones bordurées (une rouge en haut et une noire en bas).
    La rouge correspond à la balise <ul id="menu">, quant à la noire, elle correspond à la balise <div id="workspace">.
    Il semblerait que "float: left;" réduise la hauteur de la zone délimitée par <ul id="menu">, à tel point que cette zone ne contienne plus le menu, provoquant le bug.

    Voici un extrait (celui qui nous intéresse) du code html de la page :
    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
    <ul id="menu">
        <li><a href="">menu item #1</a>
            <ul class="sousMenu">
                <li><a href="">sous-item #1</a></li>
                <li><a href="">sous-item #2</a></li>
                <li><a href="">sous-item #3</a></li>
            </ul>
        </li>
        <li><a href="">menu item #2</a>
            <ul class="sousMenu">
                <li><a href="">sous-item #1</a></li>
                <li><a href="">sous-item #2</a></li>
                <li><a href="">sous-item #3</a></li>
            </ul>
        </li>
        <li><a href="">menu item #3</a>
            <ul class="sousMenu">
                <li><a href="">sous-item machin bidule truc #1</a></li>
                <li><a href="">sous-item #2</a></li>
                <li><a href="">sous-item #3</a></li>
            </ul>
        </li>
        <li><a href="">menu item #4</a>
            <ul class="sousMenu">
                <li><a href="">sous-item #1</a></li>
                <li><a href="">sous-item #2</a></li>
                <li><a href="">sous-item #3</a></li>
            </ul>
        </li>
        <li id="logout"><a href="logout.php">Déconnexion</a></li>
    </ul>
    <div id="workspace">
        <div>
            <table>
                <tr class="first">
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                </tr>
                <tr>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                </tr>
                <tr>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                </tr>
                <tr>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                    <td>toto</td>
                </tr>
            </table>
        </div>
    </div>
    Et voici le code CSS minimal mettant le problème en évidence :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    #menu li &#123;
        float&#58; left;
    &#125;
    C'est ballot, mais je peux supprimer l'ensemble du CSS excepté ces 3 lignes, et j'ai exclusivement le bug..

    Le CSS complet :
    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
    body &#123;
        background&#58; url&#40;bg_bottomright.png&#41; no-repeat bottom right;
        font&#58; 10pt arial,sans-serif;
        margin&#58; 0;
        padding&#58; 0;
        border&#58; 0;
        height&#58; 100%;
    &#125;
     
    #bgtopleft &#123;
        position&#58; absolute;
        z-index&#58; 0;
        background&#58; transparent url&#40;bg_topleft.png&#41; no-repeat top left;
        top&#58; 0;
        left&#58; 0;
        width&#58; 800px;
        height&#58; 500px;
        padding&#58; 50px 0 0 0;
    &#125;
     
    #logo h1 &#123;
        position&#58; absolute;
        top&#58; 0;
        right&#58; 0;
        margin&#58; 0;
        background&#58; url&#40;logo.png&#41; no-repeat top right;
        width&#58; 229px;
        height&#58; 30px;
    &#125;
    #logo h1 span &#123;
        display&#58; none;
    &#125;
    #menu li ul &#123; display&#58; none; &#125;
    #menu li&#58;hover > ul &#123; display&#58; block; &#125;
    #menu &#123;
        list-style&#58; none;
        position&#58; relative;
        z-index&#58; 2;
        margin&#58; 0;
        padding&#58; 10px 25px 0;
        border&#58; 1px solid red;
    &#125;
    #menu li &#123;
        text-align&#58; center;
        float&#58; left;              <=== Ligne posant problème ici
        margin&#58; 5px 10px;
        padding&#58; 0;
        width&#58; 150px;
    &#125;
    #menu li ul &#123;
        position&#58; absolute;
        margin&#58; 0;
        padding&#58; 5px 0 0;
        list-style&#58; none;
    &#125;
    #menu li ul li &#123;
        float&#58; none;
        margin&#58; 1px 0 0;
        padding&#58; 0;
    &#125;
    #menu a &#123;
        display&#58; block;
        background&#58; #ddf;
        border&#58; 1px solid #99f;
        color&#58; #00f;
        text-decoration&#58; none;
    &#125;
    #menu a&#58;hover &#123;
        background&#58; #99f;
        color&#58; #fff;
    &#125;
    #logout a &#123;
        color&#58; #f00;
        border&#58; 1px solid #f99;
        background&#58; #fdd;
    &#125;
    #logout a&#58;hover &#123;
        background&#58; #f99;
    &#125;
     
    #workspace &#123;
        position&#58; relative;
        top&#58; 0;
        z-index&#58; 1;
        margin&#58; 0;
        padding&#58; 0;
        border&#58; 1px solid;
    &#125;
    #workspace div &#123;
        margin&#58; 45px 25px 25px;
        padding&#58; 10px;
        text-align&#58; center;
    &#125;
    #workspace table &#123;
        width&#58; 100%;
        margin&#58; 0;
        padding&#58; 0;
        background&#58; #eef;
    &#125;
    #workspace tr &#123;
        margin&#58; 0;
        padding&#58; 0;
    &#125;
    #workspace tr.first &#123;
        background&#58; #99f;
    &#125;
    #workspace td &#123;
        margin&#58; 0;
        padding&#58; 0;
        border&#58; 1px solid blue;
    &#125;
    #workspace tr&#58;hover &#123;
        background&#58; #ccf;
    &#125;
    #workspace td&#58;hover &#123;
        background&#58; #fff;
    &#125;

  2. #2
    Membre expérimenté Avatar de davcha
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    1 258
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 258
    Points : 1 539
    Points
    1 539
    Par défaut
    J'ai trouvé : j'ai ajouté "clear: both;" dans le style attaché à workspace.

    Ca m'apprendra à faire des longs posts... :p

  3. #3
    Membre actif Avatar de Ricou13
    Inscrit en
    Août 2002
    Messages
    292
    Détails du profil
    Informations forums :
    Inscription : Août 2002
    Messages : 292
    Points : 224
    Points
    224
    Par défaut
    Si tu veux que tes menus soient l'un à coté de l'autre, ce n'est pas float: left; qu'il faut mettre sur les <li> mais display: inline;

    il ne faut pas de tout pour faire un monde. Il faut du bonheur et rien d'autre. Paul Eluard
    Des fois ça malche, des fois ça malche pas. Garcimore

  4. #4
    Membre expérimenté Avatar de davcha
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    1 258
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 258
    Points : 1 539
    Points
    1 539
    Par défaut
    En fait je voulais que ça soit exactement comme ça l'est maintenant (puisque le dernier problème du menu, jusqu'à nouvel ordre, est résolu), donc :p

    display: inline;, ça aurait pour effet de faire un menu sur une seule ligne, même s'il sort de la fenêtre, non ?

  5. #5
    Membre actif Avatar de Ricou13
    Inscrit en
    Août 2002
    Messages
    292
    Détails du profil
    Informations forums :
    Inscription : Août 2002
    Messages : 292
    Points : 224
    Points
    224
    Par défaut
    Non, cela donne un affichage comme les éléments de type inline (<a>,<em>,<img>...)
    Donc, en fin de ligne, ça passe à la ligne suivante...
    il ne faut pas de tout pour faire un monde. Il faut du bonheur et rien d'autre. Paul Eluard
    Des fois ça malche, des fois ça malche pas. Garcimore

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

Discussions similaires

  1. Mise à jour affichage dans Thread=Effet troboscope non désiré..
    Par frafra49 dans le forum Interfaces Graphiques en Java
    Réponses: 3
    Dernier message: 19/02/2014, 11h15
  2. [SWING][Dessin] Effet de répétition non désiré
    Par Invité dans le forum AWT/Swing
    Réponses: 18
    Dernier message: 11/12/2006, 11h23

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