Menu

Align. vert. div & textarea aux bords d'un tableau

GeGaX 83 Messages postés mardi 20 février 2018Date d'inscription 15 mai 2018 Dernière intervention - 14 mai 2018 à 10:44 - Dernière réponse : GeGaX 83 Messages postés mardi 20 février 2018Date d'inscription 15 mai 2018 Dernière intervention
- 15 mai 2018 à 08:12
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
<!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
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 ?
Afficher la suite 

Votre réponse

2 réponses

tyranausor 3241 Messages postés jeudi 6 août 2009Date d'inscription 22 mai 2018 Dernière intervention - 14 mai 2018 à 21:45
0
Utile
Bonjour, sous Chrome tu as des outils de développeur et si tu cherches, tu as des extensions comme "Web developer" téléchargeable ici pour tester ton extension.
GeGaX 83 Messages postés mardi 20 février 2018Date d'inscription 15 mai 2018 Dernière intervention - 15 mai 2018 à 08:12
Bonjour,
J'ai résolu ma problèmatique comme ceci
<!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
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);
}
Commenter la réponse de tyranausor