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 vertical div et textarea aux bordures d'un tableau


Sujet :

Positionnement en CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut Alignement vertical div et textarea aux bordures d'un tableau
    Bonjour,
    J'ai "développé" une extension Google Chrome qui ouvre une popup pour me lister des instructions sous cette forme :



    J'aimerais pouvoir aligner verticalement la checkbox à la bordure de gauche du tableau et aligner verticalement la version à la bordure de droite.
    De même pour les bords gauche et droite de la textarea.

    Le tableau est "dynamique" faut comprendre par là, que ça largeur évolue à chaque extraction de données.

    Je suis débutant et ne maitrise pas du tout le CSS, d'ou mon post ..., j'ai lu beaucoup de chose sur le CSS mais je m'y perds assez rapidement ...

    Ce que je sais, c'est que la popup, d'une extension Chrome, est limitée à 800px en largeur max et qu'il me faut "jouer" sur la taille de police pour que tout le tableau "rentre" dans cette largeur.

    Comment mettre en oeuvre les alignements verticaux ?

    popup.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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <body>
    <table border="1" align="center">
        <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th title="Timezone">TZ</th>
            <th>Position</th>
            <th title="Time To Waypoint">TTW</th>
            <th title="Distance To Waypoint">DTW</th>
            <th title="Distance To Go">DTG</th>
            <th title="True Wind Direction">TWD</th>
            <th title="True Wind Speed">TWS</th>
            <th title="True Wind Angle">TWA</th>
            <th title="Bearing To Waypoint - Heading">BTW</th>
            <th>Sail</th>
            <th title="Speed Through Water - Boat speed">STW</th>
            <th title="Average True Wind Angle">ATWA</th>
            <th title="Average Bearing To Waypoint">ABTW</th>
        </tr>
        </thead>
        <tbody id="pointsTable" align="center">
        </tbody>
    </table>
    <br>
    <div id="localtimeDiv">
        <input type="checkbox" id="localtime" tabindex="-1">
        <label>Local Time</label>
    </div>
    <div id="versionDiv">
        <label>Version</label>
        <label id="version"></label>
    </div>
    <div id="gpxDiv">
        <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
    </div>
    <br>
    <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
    Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
    </html>

    popup.css
    Code css : 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
    body {
        height: auto;
        width: 800px;
        /*font-size: 11px;*/
    }
     
    #localtimeDiv {
        float: left;
    }
     
    #versionDiv {
        float: right;
    }
     
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
     
    #gpxOutput {
        width: 100%;
    }

    Merci pour vos conseils

    Edit: Y'a t'il un moyen de connaitre la longueur en px de ce tableau ?

  2. #2
    Membre averti Avatar de pasdechances
    Homme Profil pro
    Alternant, Ingénieur en systèmes Informatiques et Industriels
    Inscrit en
    Septembre 2015
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Alternant, Ingénieur en systèmes Informatiques et Industriels
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Septembre 2015
    Messages : 218
    Points : 403
    Points
    403
    Par défaut
    bonjour,
    ton tableau doit avoir des propriétés css de base, je te propose dont de reset les propriétés de l’élément table.

    ce que tu as fait me parais bon dans l'ensemble.
    Je pense que les principaux soucis que tu rencontre viennent des propriétés par défauts des élément css.
    le résultat avec la correction de l’élément table :
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style media="screen">
        body {
            height: auto;
            width: 800px;
            /*font-size: 11px;*/
        }
        table{
            margin: 0;
            width: 100%;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: 100%;
        }
    </style>
    <body>
    <table border="1" align="center">
        <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th title="Timezone">TZ</th>
            <th>Position</th>
            <th title="Time To Waypoint">TTW</th>
            <th title="Distance To Waypoint">DTW</th>
            <th title="Distance To Go">DTG</th>
            <th title="True Wind Direction">TWD</th>
            <th title="True Wind Speed">TWS</th>
            <th title="True Wind Angle">TWA</th>
            <th title="Bearing To Waypoint - Heading">BTW</th>
            <th>Sail</th>
            <th title="Speed Through Water - Boat speed">STW</th>
            <th title="Average True Wind Angle">ATWA</th>
            <th title="Average Bearing To Waypoint">ABTW</th>
        </tr>
        </thead>
        <tbody id="pointsTable" align="center">
        </tbody>
    </table>
    <br>
    <div id="localtimeDiv">
        <input type="checkbox" id="localtime" tabindex="-1">
        <label>Local Time</label>
    </div>
    <div id="versionDiv">
        <label>Version</label>
        <label id="version"></label>
    </div>
    <div id="gpxDiv">
        <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
    </div>
    <br>
    <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
    Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
    </body>
    <script src="bundle.js"></script>
    </html>
    N'oublier pas de cliquer sur quand vous avez trouvé une solution qui vous convient.
    Si mon intervention vous a été utile un petit serait sympatique.
    Et si vous avez du temps à consacrer, pensez a venir aider sur le forum.
    C'est en aidant que l'on découvre certaines choses

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bonjour et merci pour ta réponse

    Si j'ai bien compris ton code (que j'ai testé et qui fonctionne), c'est d'adapter le tableau aux div et à textarea ?

    Si je veux faire l'inverse, la popup sera plus petite, comment je fais ça ?

  4. #4
    Membre averti Avatar de pasdechances
    Homme Profil pro
    Alternant, Ingénieur en systèmes Informatiques et Industriels
    Inscrit en
    Septembre 2015
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Alternant, Ingénieur en systèmes Informatiques et Industriels
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Septembre 2015
    Messages : 218
    Points : 403
    Points
    403
    Par défaut
    Pour faire l'inverse pas de soucis il faut juste récupérer le margin par défaut du tableau et le faire hérité a tes div.
    j'ai un peut modifier le code :
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style media="screen">
        body {
            height: auto;
            width: 800px;
            /*font-size: 11px;*/
        }
        .ligne,
        table{
            margin: 0px 70px;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: 99%;
        }
    </style>
    <body>
        <table border="1" align="center">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th title="Timezone">TZ</th>
                <th>Position</th>
                <th title="Time To Waypoint">TTW</th>
                <th title="Distance To Waypoint">DTW</th>
                <th title="Distance To Go">DTG</th>
                <th title="True Wind Direction">TWD</th>
                <th title="True Wind Speed">TWS</th>
                <th title="True Wind Angle">TWA</th>
                <th title="Bearing To Waypoint - Heading">BTW</th>
                <th>Sail</th>
                <th title="Speed Through Water - Boat speed">STW</th>
                <th title="Average True Wind Angle">ATWA</th>
                <th title="Average Bearing To Waypoint">ABTW</th>
            </tr>
            </thead>
            <tbody id="pointsTable" align="center">
            </tbody>
        </table>
        <br>
        <div class="ligne">
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
            Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>
    N'oublier pas de cliquer sur quand vous avez trouvé une solution qui vous convient.
    Si mon intervention vous a été utile un petit serait sympatique.
    Et si vous avez du temps à consacrer, pensez a venir aider sur le forum.
    C'est en aidant que l'on découvre certaines choses

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Merci, je viens de tester ce nouveau code

    et voici le résultat



    Les alignements sont comme je le souhaite, c'est donc parfait
    En revanche le tableau passe sur 2 lignes par cellules , pourquoi ?
    Comment dois je faire pour qu'il repasse sur 1 seule ligne ?

    Autre question, le css est intégré au code html maintenant donc je dois supprimer mon fichier popup.css ainsi que cette ligne dans le fichier html ?
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" type="text/css" href="popup.css">

  6. #6
    Membre averti Avatar de pasdechances
    Homme Profil pro
    Alternant, Ingénieur en systèmes Informatiques et Industriels
    Inscrit en
    Septembre 2015
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Alternant, Ingénieur en systèmes Informatiques et Industriels
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Septembre 2015
    Messages : 218
    Points : 403
    Points
    403
    Par défaut
    oui il passe sur 2 lignes
    avec les changements que j'ai réalisé le tableau n'a pas une taille de 800px mais 800-70px gauche - 70px droite donc 660px
    si tu veux que le tableau soit de 800px, mais les marges a 0px.
    N'oublier pas de cliquer sur quand vous avez trouvé une solution qui vous convient.
    Si mon intervention vous a été utile un petit serait sympatique.
    Et si vous avez du temps à consacrer, pensez a venir aider sur le forum.
    C'est en aidant que l'on découvre certaines choses

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Ok merci
    J'viens de mettre toutes les marges à 0px

    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="popup.css">-->
    </head>
    <style media="screen">
        body {
            height: auto;
            width: 800px;
            font-size: 11px;
        }
        .ligne,
        table{
            margin: 0px;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: 99%;
        }
    </style>
    <body>
        <table border="1" align="center">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th title="Timezone">TZ</th>
                <th>Position</th>
                <th title="Time To Waypoint">TTW</th>
                <th title="Distance To Waypoint">DTW</th>
                <th title="Distance To Go">DTG</th>
                <th title="True Wind Direction">TWD</th>
                <th title="True Wind Speed">TWS</th>
                <th title="True Wind Angle">TWA</th>
                <th title="Bearing To Waypoint - Heading">BTW</th>
                <th>Sail</th>
                <th title="Speed Through Water - Boat speed">STW</th>
                <th title="Average True Wind Angle">ATWA</th>
                <th title="Average Bearing To Waypoint">ABTW</th>
            </tr>
            </thead>
            <tbody id="pointsTable" align="center">
            </tbody>
        </table>
        <br>
        <div class="ligne">
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
            Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>

    donne





    Si je comprends bien ...

    je "force" un popup à 800px avec "width: 800px", mon tableau en fait moins mais comme il peut s'élargir je ne peux pas lui attribuer une valeur inférieur sinon je prends le risque qu'il passe sur 2 lignes ...

    gpxOutput a pour valeur 99% mais, je pense, qu'il se base sur la taille de la popup ... d'où le faite qu'il dépasse du tableau au même titre que la div "version".


    Ce qui m'amène à cette réflexion, est il possible que la taille de la popup soit définie en fonction de la taille du tableau ? ( ce qui résoudrait tous mes soucis, nan ? )

    J'ai trouvé sur le forum, un modo qui parle de la méthode "offsetHeight, offsetWidth du conteneur puis resizeTo" ici , est ce que ça colle avec ma problématique ?

    Si oui, comment je dois le mettre en oeuvre ?

  8. #8
    Membre averti Avatar de pasdechances
    Homme Profil pro
    Alternant, Ingénieur en systèmes Informatiques et Industriels
    Inscrit en
    Septembre 2015
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Alternant, Ingénieur en systèmes Informatiques et Industriels
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Septembre 2015
    Messages : 218
    Points : 403
    Points
    403
    Par défaut réponse suplémentaire
    la taille est fixée par le body qui est de 800px.
    Si vous voulez une zone plus large utiliser la variable width de body en % ou px.
    Apres oui il est toujours possible de donner la taille au tableau directement, mais il me semble que la taille vous était imposée non ?
    Dans le cas ou la taille n'est plus une contrainte alors il vous faut enlever les règles css qui sont sur le body, cette action donnera directement la main a la classe container qui prendra 100% de la fenêtre et le tableau hérite de cette taille.

    J'ai fixé les alignements dans le code si dessous :
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style media="screen">
        body {
            height: auto;
            width: 800px;
            /*font-size: 11px;*/
        }
        .container{
            width:100%
        }
     
        .container table {
            margin: 0px;
            text-align: center;
            width: 100%;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: calc(100% - 7px);
        }
    </style>
    <body>
        <div class="container">
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th title="Timezone">TZ</th>
                    <th>Position</th>
                    <th title="Time To Waypoint">TTW</th>
                    <th title="Distance To Waypoint">DTW</th>
                    <th title="Distance To Go">DTG</th>
                    <th title="True Wind Direction">TWD</th>
                    <th title="True Wind Speed">TWS</th>
                    <th title="True Wind Angle">TWA</th>
                    <th title="Bearing To Waypoint - Heading">BTW</th>
                    <th>Sail</th>
                    <th title="Speed Through Water - Boat speed">STW</th>
                    <th title="Average True Wind Angle">ATWA</th>
                    <th title="Average Bearing To Waypoint">ABTW</th>
                </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
            <br>
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
            Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>

    Édit : inutile d'ajouter du javascript. se que vous souhaitez faire n'as rien de "dynamique" c'est plus "adaptatif" le CSS3 est optimisé pour se genre d'adaptation de taille, inutile de passer par un développement supplémentaire en JS.

    Édit 2 : si vous voulez que votre tableau garde une taille minimum ou maximum les propriétés CSS max-height/max-width et min-height/min-width vous permettrons de répondre a d'autres contraintes de taille.
    N'oublier pas de cliquer sur quand vous avez trouvé une solution qui vous convient.
    Si mon intervention vous a été utile un petit serait sympatique.
    Et si vous avez du temps à consacrer, pensez a venir aider sur le forum.
    C'est en aidant que l'on découvre certaines choses

  9. #9
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Merci

    Je dois mal m'exprimer pour définir ce que je souhaiterais obtenir, désolé

    Je vais essayé de le faire différemment

    Je ne souhaite pas que ma popup soit tout le temps à 800px , qui effectivement est la taille maximale qu'elle peut prendre.
    Si je le lui attribue 800px, c'est le tableau qui s'adapte à la popup et enfaite je souhaite que ce soit l'inverse (la popup qui s'adapte au tableau).
    De ce faite, elle sera sous les 800px donc il restera quelques px dont j'ai besoin j'vais expliquer pourquoi.

    Dans le tableau, il y a une colonne TZ (=TimeZone) qui à l'extraction peut prendre 3 valeurs (UTC, CET ou CEST) lorsque la checkbox "Localtime" est cochée CET devient UTC+1 et CEST devient UTC+2, donc peu d'impact sur la largueur du tableau. En revanche lorsque TZ à l'extraction est égale à UTC, si on coche la checkbox, j'ai une fonction qui détermine UTC±HH:MM d'ou la nécessité d'avoir de la marge en px car la largeur du tableau augmente.

    Pour en revenir au sujet, il faut que je trouve comment déterminer la taille du tableau en px, qui sera la valeur de la popup de ce faite si le tableau change, la popup aussi
    Je ne trouve pas d'exemple concret (surtout que je comprends) de mise en oeuvre ou body n'a pas de taille fixe et qui s'adapte a son contenu ( pour moi c'est un tableau)

    Ce rendu au niveau des marges haut et gauche est juste parfait


    le rendu de la marge bas est également parfait, en revanche ça craque complet pour la droite (due à la taille fixe de body)



    Est ce que j'ai réussi à mieux définir ce qui me pose problème ?

    En tout cas merci de m'aider à résoudre ma problématique, c'est cool

  10. #10
    Membre averti Avatar de pasdechances
    Homme Profil pro
    Alternant, Ingénieur en systèmes Informatiques et Industriels
    Inscrit en
    Septembre 2015
    Messages
    218
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Alternant, Ingénieur en systèmes Informatiques et Industriels
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Septembre 2015
    Messages : 218
    Points : 403
    Points
    403
    Par défaut
    voila l'adaptation :
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style media="screen">
        body {
            height: auto;
            /*font-size: 11px;*/
        }
        .container{
            width:100%; /*a éditer*/
            /*
            min-width : 600px;
            max-width: 900px;
            */
        }
     
        .container table {
            margin: 0px;
            text-align: center;
            min-width : 100%;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: calc(100% - 7px);
        }
    </style>
    <body>
        <div class="container">
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th title="Timezone">TZ</th>
                    <th>Position</th>
                    <th title="Time To Waypoint">TTW</th>
                    <th title="Distance To Waypoint">DTW</th>
                    <th title="Distance To Go">DTG</th>
                    <th title="True Wind Direction">TWD</th>
                    <th title="True Wind Speed">TWS</th>
                    <th title="True Wind Angle">TWA</th>
                    <th title="Bearing To Waypoint - Heading">BTW</th>
                    <th>Sail</th>
                    <th title="Speed Through Water - Boat speed">STW</th>
                    <th title="Average True Wind Angle">ATWA</th>
                    <th title="Average Bearing To Waypoint">ABTW</th>
                </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
            <br>
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
            Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>


    Le code que je vous fournis avec une légère modification, devra donner le rendu souhaité.
    Comme expliqué dans les edits du post ci-dessus, j'ai donc pris le soin d’intégrer se coup ci les règles énoncées.

    edit : en relisant votre dernier post, je constate effectivement que la modification de taille peut être importante cela dit c'est toujours possible en CSS3 grâce aux règles min/max-width
    je vous propose donc le code ci-dessous :
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="popup.css">
    </head>
    <style media="screen">
        body {
            height: auto;
            /*font-size: 11px;*/
        }
        .container{
            /*width:100%; a éditer*/
     
            min-width : 800px;
            max-width: 90%;
     
        }
     
        .container table {
            margin: 0px;
            text-align: center;
            min-width : 100%;
        }
     
        #localtimeDiv {
            float: left;
        }
     
        #versionDiv {
            float: right;
        }
     
        #gpxDiv {
            margin: 0 auto;
            text-align: center;
        }
     
        #gpxOutput {
            width: calc(100% - 7px);
        }
    </style>
    <body>
        <div class="container">
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Time</th>
                    <th title="Timezone">TZ</th>
                    <th>Position</th>
                    <th title="Time To Waypoint">TTW</th>
                    <th title="Distance To Waypoint">DTW</th>
                    <th title="Distance To Go">DTG</th>
                    <th title="True Wind Direction">TWD</th>
                    <th title="True Wind Speed">TWS</th>
                    <th title="True Wind Angle">TWA</th>
                    <th title="Bearing To Waypoint - Heading">BTW</th>
                    <th>Sail</th>
                    <th title="Speed Through Water - Boat speed">STW</th>
                    <th title="Average True Wind Angle">ATWA</th>
                    <th title="Average Bearing To Waypoint">ABTW</th>
                </tr>
                </thead>
                <tbody id="pointsTable" align="center">
                </tbody>
            </table>
            <br>
            <div id="localtimeDiv">
                <input type="checkbox" id="localtime" tabindex="-1">
                <label>Local Time</label>
            </div>
            <div id="versionDiv">
                <label>Version</label>
                <label id="version"></label>
            </div>
            <div id="gpxDiv">
                <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
            </div>
            <br>
            <textarea id="gpxOutput" readonly tabindex="-1">                       .: Click on GPX button for generate file :.
            Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
        </div>
    </body>
    <script src="bundle.js"></script>
    </html>
    N'oublier pas de cliquer sur quand vous avez trouvé une solution qui vous convient.
    Si mon intervention vous a été utile un petit serait sympatique.
    Et si vous avez du temps à consacrer, pensez a venir aider sur le forum.
    C'est en aidant que l'on découvre certaines choses

  11. #11
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bonjour,

    Ceci te semble t'il correct ?

    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="popup.css">
        </head>
        <body>
            <div id="containerDiv">
                <table border="1" align="center">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Time</th>
                            <th title="Timezone">TZ</th>
                            <th>Position</th>
                            <th title="Time To Waypoint">TTW</th>
                            <th title="Distance To Waypoint">DTW</th>
                            <th title="Distance To Go">DTG</th>
                            <th title="True Wind Direction">TWD</th>
                            <th title="True Wind Speed">TWS</th>
                            <th title="True Wind Angle">TWA</th>
                            <th title="Bearing To Waypoint - Heading">BTW</th>
                            <th>Sail</th>
                            <th title="Speed Through Water - Boat speed">STW</th>
                            <th title="Average True Wind Angle">ATWA</th>
                            <th title="Average Bearing To Waypoint">ABTW</th>
                        </tr>
                    </thead>
                    <tbody id="pointsTable" align="center">
                    </tbody>
                </table>
                <br>
                <div id="localtimeDiv">
                    <input type="checkbox" id="localtime" tabindex="-1">
                    <label>Local Time</label>
                </div>
                <div id="versionDiv">
                    <label>Version</label>
                    <label id="version"></label>
                </div>
                <div id="gpxDiv">
                    <input type="button" id="gpxExport" value=".GPX" tabindex="-1">
                </div>
                <br>
                <textarea id="gpxOutput" readonly tabindex="-1">                       ..:: Click on GPX button for generate file ::..
    Select All | Copy selection | Paste on your text editor | Save the file with the .gpx extension</textarea>
            </div>
        </body>
        <script src="bundle.js"></script>
    </html>

    popup.css
    Code css : 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
    body {
        height: auto;
        font-size: 11px;
    }
     
    #containerDiv {
        width:100%;
    }
     
    #containerDiv table {
        margin: 0px;
        text-align: center;
        width: 785px;
    }
     
    #localtimeDiv {
        float: left;
    }
     
    #versionDiv {
        float: right;
    }
     
    #gpxDiv {
        margin: 0 auto;
        text-align: center;
    }
     
    #gpxOutput {
        width: calc(100% - 5px);
    }

  12. #12
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
      .container table {
            margin: 0;
            text-align: center;
            width : 100%;
            border-collapse:collapse;
        }
    Ton tableau est censé être lisible uniquement sur PC ?
    Ou aussi sur tablette et smartphone ?

    Car alors une d'utiliser est peut-être de fixer la largeur du tableau (et/ou des td),
    et d'ajouter à son conteneur overflow:auto;

  13. #13
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bonjour,
    C’est une extension Google Chrome donc uniquement sur PC / Mac

    Je serais curieux de connaître la méthode pour déterminer la largeur du tableau
    ( j’ai vu sur le net quelque chose comme .offsetWidth() ) mais je suis incapable de le mettre en œuvre ...

    Ce qui m’aiderais grandement à déterminer dans #container table la valeur de width: xxxpx;

    Il doit être possible d’attribuer le résultat d’une variable directement à width, nan ?

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    lu la discussion en diagonale mais je me demande quand même pourquoi ne pas mettre l'empied dans une balise <tfoot>, l'alignement serait de ce fait automatique !

  15. #15
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bonjour,
    Je connais pas la balise <tfoot> j’regarde ça ce midi
    Merci pour le conseil

  16. #16
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Je me trompe peut être mais <tfoot> doit être utilisé dans <table> or ce que je souhaite c’est d’aligner les <div> et le <textarea> sous ce tableau
    Il me faudrait incorporer les <div> et le <textarea> dans <table> via <tfoot> si je comprends bien ?
    Si oui c’est une solution à laquelle je n’avais pas pensé
    J’testerais ce midi

    En renvanche cette histoire de .offsetWidth() si vous en savez plus je suis preneur d’info

    Merci en tout cas

  17. #17
    Invité
    Invité(e)

  18. #18
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Merci pour le lien

    <tfoot> est un échec ... il me place les <div> et <textarea> au dessus du tableau ...

  19. #19
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Voilà une solution, qui permet d'afficher le tableau quelle que soit la largeur du conteneur : https://codepen.io/jreaux62/pen/erPOpX

    1- Il faut ajouter un <div> autour de la <table> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="table-wrap">
    <table>
    .....
    </table>
    </div>
    2- et ajouter au CSS :
    Code css : 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
    .table-wrap {
      position:relative;
      overflow-y:hidden;
      overflow-x:auto;
    }
    .table-wrap table {
      position:relative;
      width:100%;
      text-align:center;
      font-family:arial,sans-serif;
      font-size:12px;
    }
    .table-wrap table th, .table-wrap table td {
      border:1px solid #ccc;
      padding:2px;
      white-space: nowrap; /* pas de passage à la ligne dans les cellules */
    }
    Dernière modification par Invité ; 28/05/2018 à 13h37.

  20. #20
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    @jreaux62
    Merci pour ce code et les commentaires (j'viens d'apprendre pleins de choses utiles), j'vais mettre tout ça en oeuvre des que j'peux (là niveau taf c'est beyrouth ...)
    J'reviens ici dès que ça sera en place.
    Merci encore ça à l'air de coller à ce que j'souhaite

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 3 123 DernièreDernière

Discussions similaires

  1. alignement vertical DIV
    Par madmax54 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/11/2008, 19h11
  2. Alignement vertical de div en float
    Par sulletf dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 17/08/2007, 12h39
  3. [div] problème d'alignement vertical
    Par xenos dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 29/11/2006, 13h36
  4. [CSS] alignement vertical d'un texte dans un div
    Par alexfrere dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/07/2006, 19h07
  5. [DIV][CSS] Alignement vertical
    Par pmartin8 dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 02/11/2005, 15h50

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