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 :

[XHTML] problème avec les float:left


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre actif Avatar de glloq8
    Inscrit en
    Novembre 2002
    Messages
    298
    Détails du profil
    Informations personnelles :
    Âge : 44

    Informations forums :
    Inscription : Novembre 2002
    Messages : 298
    Points : 255
    Points
    255
    Par défaut [XHTML] problème avec les float:left
    Bonjour, je suis sur un site qui me pose problème :

    pour faire un menu, j'ai utilisé le code suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="sous_menu">
        <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
        <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
        <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
        <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
        <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
    </div>
    avec le css :
    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
     
    .sous_menu {
    float: left;
    display: block;
    color: #666;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    }
    .sous_menu_over {
    float: left;
    display: block;
    color: #FE690F;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    background: url(images/triangle_repere_orange.gif) bottom center no-repeat;
    }
    Mais si je mets un autre p ou div après celui ci-dessus, le texte contenu dedans se mets à côté du précédent (commi si il avait un float:left lui aussi.

    Comment faire pour le mettre en dessous ???

    Récap de mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <div id="sous_menu">
        <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
        <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
        <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
        <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
        <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
    </div>
    <p>-----------------------------------------------------</p>
    Je voudrais que mon p avec les --------------- vienne sous le menu !!

    Merci d'avance !

  2. #2
    Expert éminent sénior
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    Avril 2002
    Messages
    13 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2002
    Messages : 13 938
    Points : 23 190
    Points
    23 190
    Billets dans le blog
    1
    Par défaut
    Salut,


    Il faut que tu spécifies une propriété clear: left; ou clear: both; sinon c'est normal puisque ton menu est placé à gauche du paragraph :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="menu">
        <div class="sous_menu">&nbsp;FEMME&nbsp;</div>
        <div class="sous_menu">&nbsp;LINGERIE&nbsp;</div>
        <div class="sous_menu">&nbsp;ENFANT&nbsp;</div>
        <div class="sous_menu_over">&nbsp;SPORT&nbsp;</div>
        <div class="sous_menu">&nbsp;HOMME&nbsp;</div>
    </div>
    <br style="clear: both;"/>
    <p>-----------------------------------------------------</p>
    Tu peux bien sûr utiliser un style pour cela...





    Sinon pour le menu tu peux faire la même chose sans avoir à déclarer à chaque fois la class des éléments, par exemple en utilisant une liste :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <ul class="menu">
    	<li>&nbsp;FEMME&nbsp;</li>
    	<li>&nbsp;LINGERIE&nbsp;</li>
    	<li>&nbsp;ENFANT&nbsp;</li>
    	<li class="over">&nbsp;SPORT&nbsp;</li>
    	<li>&nbsp;HOMME&nbsp;</li>
    </ul>
    Avec le style suivant :
    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
    ul.menu {
    	margin: 0;
    	padding: 0;
    }
     
    .menu li {
    	float: left; 
    	display: block;
    	color: #666;
    	height: 20px;
    	line-height: 20px;
    	font-weight: bold;
    }
    .menu li.over {
    	color: #FE690F;
    	background: url(images/triangle_repere_orange.gif) bottom center no-repeat;
    }
    C'est plus court et plus lisible

    a++

  3. #3
    Membre actif Avatar de glloq8
    Inscrit en
    Novembre 2002
    Messages
    298
    Détails du profil
    Informations personnelles :
    Âge : 44

    Informations forums :
    Inscription : Novembre 2002
    Messages : 298
    Points : 255
    Points
    255
    Par défaut
    Merci beaucoup, j'avais pas pensé à ça !

    C'est vrai que pour le menu, ça peut aller plus vite comme ça... en plus, j'ai un autre menu dans cette page, et j'ai utilisé cette méthode !

    Merci encore !!

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

Discussions similaires

  1. Css problème avec les floats
    Par scoubi74 dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 21/04/2010, 22h21
  2. [XHTML] Problèmes avec les formulaires et les liens sur Firefox ( xhtml / css / php )
    Par sibile dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 26/05/2009, 15h50
  3. Réponses: 2
    Dernier message: 07/04/2007, 12h29
  4. [XHTML] Problème avec les champs obligatoires d'un formulaire
    Par elodie13 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 26/09/2006, 15h45
  5. Problème avec les float
    Par sandytarit dans le forum Requêtes
    Réponses: 8
    Dernier message: 03/08/2006, 22h04

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