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 ?
Partager