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 :

[CSS] div l'un en dessous de l'autre


Sujet :

Positionnement en CSS avec z-index

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé

    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    133
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 133
    Par défaut [CSS] div l'un en dessous de l'autre
    bonjour, j'ai un petit problème de css, j'ai déjà recherché sur le net et d'après ce que j'ai pu lire, lorsqu'on place 2 blocs div, il se placent de manière naturelle l'un en-dessous de l'autre car ils occupent 100% de la largeur de l'espace qui leur est fourni et si on veut les mettre l'un à côté de l'autre il faut utiliser la propriété float

    pourquoi mes 6 mots dans le code suivant sont-ils tous dans la même ligne ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        <div>
          <div style="float: left; width: 100px;">mot1</div>
          <div style="float: left; width: 100px;">mot2</div>
        </div>
        <div>
          <div style="float: left; width: 100px;">mot3</div>
          <div style="float: left; width: 100px;">mot4</div>
        </div>
        <div>
          <div style="float: left; width: 100px;">mot5</div>
          <div style="float: left; width: 100px;">mot6</div>
        </div>
    je précise que le tout est contenu dans un div de largeur supérieure à 600px.

    je schématise : je voulais que l'affichage se fasse ainsi :

    # #
    # #
    # #

    et non ainsi :

    # # # # # #

    merci d'avance

  2. #2
    Rédacteur/Modérateur
    Avatar de troumad
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2003
    Messages
    5 607
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Novembre 2003
    Messages : 5 607
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div>
          <div style="float: left; width: 100px;">mot1</div>
          <div style="float: left; width: 100px;">mot2</div>
    </div>
    à remplacer par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div style="width: 100px;">
          <div style="float: left;">mot1</div>
          <div style="float: left;">mot2</div>
    </div>
    Ça sera peut-être mieux
    Modérateur Mageia/Mandriva Linux
    Amicalement VOOotre
    Troumad Alias Bernard SIAUD à découvrir sur http://troumad.org
    Mes tutoriels : xrandr, algorigramme et C, xml et gtk...

  3. #3
    Membre confirmé

    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    133
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 133
    Par défaut
    en effet si je spécifie les width pour chaque div ça fonctionne mais je ne comprends pas le principe, ça marche c'est bien mais j'aimerai comprendre pourquoi avant il revenait pas à la ligne, vu que la théorie dit que les div se mettent toujours l'un en dessous de l'autre sauf si l'on précise le contraire avec float :/

  4. #4
    Membre chevronné
    Profil pro
    Étudiant
    Inscrit en
    Décembre 2005
    Messages
    273
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2005
    Messages : 273
    Par défaut
    ou sans spécifier la largeur:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
      <div style="float: left; width: 100px;">mot1</div>
      <div style="float: left; width: 100px;">mot2</div>
    </div>
    <div style="clear:left;">
      <div style="float: left; width: 100px;">mot3</div>
      <div style="float: left; width: 100px;">mot4</div>
    </div>
    <div style="clear:left;">
      <div style="float: left; width: 100px;">mot5</div>
      <div style="float: left; width: 100px;">mot6</div>
    </div>
    car tu as mis des float.
    Une fois un float mis sur un élément, l'élément suivant suit la règle des float pour l'alignement (pas très clair je sais).
    En gros qi tu as mis un float:left, tu l'annule (pour retrouver le comportement normal avec clear:left, clear:right pour annuler un float:right, clear:both annule les float:left et float:right en même temps (pour être sûr tu peux utiliser celui là)

    et pour ta question:
    Citation Envoyé par Michel_57
    j'aimerai comprendre pourquoi avant il revenait pas à la ligne, vu que la théorie dit que les div se mettent toujours l'un en dessous de l'autre sauf si l'on précise le contraire avec float :/
    Quand tu met float:left; tu dit au navigateur que l'élément sur lequel est appliqué le float va se comporter comme un "caractère aligné à gauche" et donc l'élement suivant va se placer à sa droite...
    Donc si tu as mi 2 div avec un float:left; pour les mettre les 2 à la suite de l'autre, il faut ensuite annuler le float et lui dire que la div doit retrouver son comportement normal (les une en dessous des autres) avec clear, comme expiqué plus haut

  5. #5
    Membre confirmé

    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    133
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 133
    Par défaut
    je ne vois pas pourquoi je dois l'annuler vu que c'est l'enfant qui hérite du parent et non l'inverse (si il y a hérédité pour ça).
    le float: left; est imbriqué dans le div sans float donc je pensais que les 2 éléments allaient s'aligner à gauche mais à l'intérieur du div parent.
    mais bon, je vais faire avec !

    merci pour l'astuce

  6. #6
    Rédacteur/Modérateur
    Avatar de troumad
    Homme Profil pro
    Enseignant
    Inscrit en
    Novembre 2003
    Messages
    5 607
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Novembre 2003
    Messages : 5 607
    Par défaut
    Merci... Comme un petit coup de main apporte beaucoup ! J'ai cru aider et j'ai appris pleins de choses
    Modérateur Mageia/Mandriva Linux
    Amicalement VOOotre
    Troumad Alias Bernard SIAUD à découvrir sur http://troumad.org
    Mes tutoriels : xrandr, algorigramme et C, xml et gtk...

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

Discussions similaires

  1. Div passant en-dessous d'une autre (z-index, css)
    Par youna dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 28/08/2008, 23h21
  2. [CSS][DIV]Superposer des DIV
    Par loverdose dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/12/2005, 17h50
  3. [CSS] div et float
    Par zan001 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 20/12/2005, 14h36
  4. [CSS] div et de table imbriquées
    Par Gwipi dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 21/11/2005, 14h06

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