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 :

Alignement de Div imbriqués


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 2
    Par défaut Alignement de Div imbriqués
    Bonjour à tous,

    Dans le cadre d'un petit projet, je me heurte à un problème de Css/Html qui est le suivant:

    J'ai créé un div qui contient 3 autres div que je dois positionner horizontalement à l'intérieur du premier, qui doivent occupé 100% de la hauteur du parent et un pourcentage de la largeur. La somme de la largeur des 3 représente 100% de la largeur du parent. J'ai ensuite ajouté à ces div une bordure et un padding. Le problème est que 100% + padding + border me fais sortir le dernier div de son parent. Voici mon code ca sera plus clair:

    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
     
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>test (X)HTML et CSS</title>
        <style type="text/css">
    div.parent{
    	background: red;
    	border:thin solid black;
    	padding:5px;
     
    }
    div.fils{
    	background: pink;
    	border:thin solid black;
    	padding:5px;
    	float: left;
    }
         </style>
    </head>
    <body>
    <div class="parent" style="width:100%; height:100%">
    	<div class="fils" style="width:50%; height:100%;"></div>
    	<div class="fils" style="width:35%; height:100%;"></div>
    	<div class="fils" style="width:15%; height:100%;"></div>
    </div>
    </body>
    </html>
    Les attributs width et height sont placé directement dans le code html et non en css car je calcul les pourcentages avec du code php que je ne vous présente pas.

    Pour les problème de débordement du au padding j'avais pensé utiliser :Mais la c'est tout un div qui sort du premier

    Merci d'avance pour votre aide.

    Cordialement.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Essaie de réduire le pourcentage de la largeur de tes 3 div pour qu'elles ne fassent que 96 ou 97% de la largeur de la div parent.

  3. #3
    Membre émérite Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Par défaut
    Est-ce que ce que tu veux ne serait pas typiquement une mise en page en tableau ?

    En général, je ne prêche pas les mises en page en tableau mais quand on veut des mises en page qui fassent 100% de hauteur et que l'on souhaite que les div se comportent comme des tableaux, ça peut aider :

    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
     
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>test (X)HTML et CSS</title>
        <style type="text/css">
    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    .parent{
    	border: 1px solid red;
        width: 100%;
        height: 100%;
     
    }
    .bordure {
        border: 1px solid black;
    }
     
    .w50 {
        width:50%;
    }
     
    .w15 {
        width:15%;
    }
     
    .w35 {
        width:35%;
    }
         </style>
    </head>
    <body>
    <table class="parent">
        <tr>
            <td class="bordure w50"></td>
            <td class="bordure w35"></td>
            <td class="bordure w15"></td>
        </tr>
    </table>
    </body>
    </html>

  4. #4
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 2
    Par défaut
    Merci pour votre aide, j'ai opté pour les tableaux et je n'ai plus de problème de bordure.

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

Discussions similaires

  1. [CSS] marge interne dans des div imbriqués
    Par Stitchover dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 26/04/2006, 15h23
  2. Centrer une page avec des DIV imbriqués
    Par emstar dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 25/04/2006, 18h42
  3. [Débutant] Aligner deux divs sur une ligne avec inline
    Par Braz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/03/2006, 10h52
  4. Beaucoup de div imbriqués => rendu très lent
    Par vivine10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 18/10/2005, 17h00
  5. [CSS]Aligner les div suivant la résolutation d'écran
    Par nebule dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/09/2005, 11h00

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