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 :

Tableau qui dépasse du div


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Femme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2015
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 41
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Avril 2015
    Messages : 3
    Par défaut Tableau qui dépasse du div
    Bonjour!

    J'ai chercher sur le forum et un peu sur google, mais je n'ai rien trouvé qui puisse réglé mon problème. J'ai un tableau à l'intérieur d'un div le problème c'est qu'il dépasse à droite. Voici le résultat et les codes. Pouvez-vous m'aider à trouver d'où vient mon problème?

    Nom : CSS.jpg
Affichages : 685
Taille : 34,1 Ko

    FICHIER 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
    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
    /*--------------------------------------------------------*/
    /*---------------------HTML-------------------------------*/
    /*--------------------------------------------------------*/
    html {
      height: 100%;
    }
    /*--------------------------------------------------------*/
    /*---------------------BODY-------------------------------*/
    /*--------------------------------------------------------*/
    body 
    {
    	margin-bottom : 0px;
    	margin-left: 0px;
    	margin-right :0px;
    	margin-top : 0px;
    	height:100%;
    }
    /*--------------------------------------------------------*/
    /*---------------------CONTAINER--------------------------*/
    /*--------------------------------------------------------*/
    #container
    {
    	height:100%;
     
    }
     
    #primary {
        float: left;
        width:15%;
        height:100%;
        background-color :White;
        background-image : url('../images/side_left.png');
        background-repeat: no-repeat;
        background-position: right 80px; 
    }
     
    #content {
        float:left;
        width:70%;
        height:100%;
        max-width : 1200px;
        background-color :White;
    }
     
    #secondary {
        float:left;
        width:15%;
        height:100%;
        background-color :Yellow;
        background-color :White;
        background-image : url('../images/side_right.png');
        background-repeat: no-repeat;
        background-position: left 80px; 
    }
    FICHIER HTML
    Code html : 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
    <html>
    <body>
        <div id="container">
            <div id="primary">
            </div>
     
            <div id="content">
                <table cellspacing=0 cellpadding=0 border=1 style="margin-top:40px;margin-left:40px;margin-right:40px;table-layout:fixed;width:100%">
                    <!--*******************************************-->
                    <!--************LOGO ET PANIER*****************-->
                    <!--*******************************************-->
                    <tr>
                        <td style="width:250px;"><img src="images/logo.png" style="width:250px" /></td>
                        <td align=right>
     
                            <form id="frmPanier" runat="server" >
                                <asp:Label ID="lblNbItemsPanier" runat="server" Text="0"></asp:Label>ITEMS
                                **<asp:Label ID="lblTest" runat="server" Text="Label">**</asp:Label>
                            </form>
                        </td>
                    </tr>
                     <!--*******************************************-->
                     <!--*****************CONTENU*******************-->
                     <!--*******************************************-->
                    <tr>
                        <td valign=top width=100% colspan=2>
                        <asp:ContentPlaceHolder id="contenuprincipal" runat="server">
     
                        </asp:ContentPlaceHolder>
                        </td>
                    </tr>
                </table>
            </div>
     
            <div id="secondary">
            </div>
        </div>
    </body>
    </html>

    Soyez indulgent tout n'est pas mis en CSS encore, j'essaie juste de corriger pour tout cela prenne sa place ;-)

    Merci de votre coup de main! :-)

  2. #2
    Invité
    Invité(e)
    Par défaut
    bonjour,
    le code ASP n'a aucun intérêt ici.
    Il nous faut le code HTML généré (en tout cas "suffisant et nécessaire*") pour pouvoir tester.

    * du "faux contenu" convient, du moment que ça reproduit la même erreur.

    [EDIT]
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
                <table cellspacing=0 cellpadding=0 border=1 style="margin-top:40px;margin-left:40px;margin-right:40px;table-layout:fixed;width:100%">
    • margin-left:40px; margin-right:40px;
    • width:100%

    Une largeur de 100% est incompatible avec des marges "extérieures" !
    A moins d'utiliser :
    • tout en % : margin-left:5%; margin-right:5%; width:90%; /* 5 + 90 + 5 = 100% */
    • ou box-sizing:border-box; ...

  3. #3
    Candidat au Club
    Femme Profil pro
    Développeur .NET
    Inscrit en
    Avril 2015
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 41
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Avril 2015
    Messages : 3
    Par défaut
    Merci pour les informations. Et désolée de ne pas avoir posté du "vrai" contenu... ;-)

    J'ai finalement réussis à trouver une solution, mais je n'ai pas eu le temps de venir mettre à jour les informations sur le forum. La solution va un peu dans le sens de ce que tu me dis : % et PX non compatible.

    J'ai donc simplement créé un "div" de plus qui contient mes margins. J'ai laissé mon width=100% sur le tableau, mais je l'ai encadré avec le div qui contient mes margins à 40px.

    Voilà!

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

Discussions similaires

  1. Texte qui dépasse une div + footer décalé
    Par idate dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 16/02/2013, 06h15
  2. Div avec overflow: contenu qui dépasse sous FF
    Par cortex024 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/10/2010, 13h30
  3. tableau sous latex qui dépasse les marges
    Par hassen62 dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 3
    Dernier message: 11/03/2009, 12h55
  4. Tableau qui dépasse de l'écran (barre de défilement nécessaire)
    Par dream_of_australia dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/07/2007, 10h05
  5. Image qui dépasse d'un div
    Par vny dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 09/03/2007, 21h08

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