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 :

Pb positionnement dans un div


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    54
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 54
    Par défaut Pb positionnement dans un div
    Salut à tous,
    voila j'ai un problème sur la mise en page d'un nouveau site, je souhaite créer des des blocs à l'intérieur d'un block.
    A voir ici

    Voici le code utilisé :
    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
    .actu_center { 
        width: 600px; 
        text-align: center; 
        margin-bottom: 10px;
        border-left: 1px #d9dada solid; 
        border-right: 1px #d9dada solid; 
        border-bottom: 1px #d9dada solid;
    } 
    .case { 
        width: 150px; 
        height: 150px; 
        margin: 7px; 
        text-align: center;
        border: 1px #b2b1b1 solid; 
        background-color: #e9e9e9; 
        float: left; 
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <div class="actu_center"> 
        <div class="case"> 
        </div> 
    </div>
    Si je ne mets pas le float: left sur .case, les blocks sont les uns en dessous des autres...
    On constate que les blocks .case ne sont pas à l'intérieur de actu_center lorsque je mets float: left.

    Merci pour votre aide

  2. #2
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    salut,

    Le comportement est normal.
    Quand un élément est en float, alors, il est sorti du flux normal de la page. La conséquence est que le bloc parent ne les prends plus en compte pour déterminer ses dimensions (d'où le débordement).

    Soit tu ajoutes a la suite de tes éléments floattants (dans le même block parent), un élément avec la propriété clear:both, Soit tu évites les float.

    Un élément avec clear reste dans le flux mais se place sous les éléments flottants, donc ca force le bloc parent à s'adapter.

    Si tu ne veux mettre que des images dans ton bloc, alors tu n'as pas forcément besoin de div. Si tu mets directement img (qui est un element inline par défaut, alors, tes images se placeront comme du texte => retour a la ligne quand il n'y a plus de place.

    Si tu as forcément besoin des blocs, alors essaye display: inline-block, sur tes cases.

    Le but de tout ce que je raconte, est d'éviter si possible l'utlilisation des float car ils ne sont pas bien pris en charge sous IE.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    54
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 54
    Par défaut
    Et bien tout d'abord, merci beaucoup pour la rapidité de ton message.

    Ton message et ta facilité me consterne car je vois que j'ai encore énormément de travail avant d'arriver a un vrai petit niveau ^^ (ca faisait deux jours que j'étais sur ce problème...).
    Biensur, ta solution marche, j'ai ajouté un div en clear: both et le tour est joué .

    Encore merci pour ton aide

  4. #4
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Le coup du float qui dépasse, c'est un problème de base sur lequel on s'est tous cassé les dents un jour ...

    Il faut y être confronté au moins une fois!

    Bon courage dans ton apprentissage!
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

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

Discussions similaires

  1. positionnement dans la div
    Par GPZ{^_^} dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 12/03/2007, 21h32
  2. [CSS]positionnement dans une div
    Par graphicsxp dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 10/07/2006, 11h01
  3. [CSS] Positionner 2 tableaux dans une div
    Par Rei Itchido dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/05/2006, 18h27
  4. positionner le focus dans un div
    Par bat dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 12/10/2005, 11h46

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