Dimensionnement et placement CSS

Dimensionnement et placement CSS - HTML/CSS - Programmation

Marsh Posté le 28-11-2022 à 20:59:11    

Bonjour,
 
J'essaye de placer des div en ayant pour but d'avoir 4 blocs de taille différente qui se touchent sans se recouvrir.
Les tailles sont relatives pour s'adapter à la taille de la fenêtre.
 

  • Haut-gauche : InfoWtitle, orange, 85% de large, 15% de haut (redimensionné à 10% pour tester)
  • Haut-droit : InfoWright, jaune, 15% de large, 15% de haut (redimensionné à 10% pour tester)
  • Bas-gauche : ControlsW, vert, 20% de large, 85% de haut
  • Bas-droit : MainW, bleu, 80% de large, 85% de haut


https://monorailc.at/hfr/22/11/css.png
 
Le bloc vert en bas à gauche ne fait pas ce que je veux, et c'est possible que les autres blocs ne soit pas exactement à leur place [:calimero].
 
J'ai hésité entre "position: fixed" et "position: absolute", en théorie ça ne devrait rien changer puisque tout doit tenir sur une page, mais "position: absolute" me place des trucs en dehors et permet de scroller.
 
Le positionnement par rapport au coin haut-gauche ou par rapport aux extrémités ne change pas le comportement.
 
Ai-je fait une erreur de débutant évidente ?
 
Y-a-t'il un moyen d'afficher une grille exacte avec un quadrillage tous les 10% ou tous les 10px pour comprendre plus facilement (LaTeX le fait :o) ?
 
J'ai simplifié le code le temps pour tester et essayer comprendre :  

Code :
  1. <style>
  2. * {
  3.  font-size: 20px;
  4. }
  5. #InfoWtitle {
  6.  font-weight: bold;
  7.  position: fixed;
  8.  display: block;
  9.  text-align: center;
  10.  left: 0;
  11.  top: 0;
  12.  width: 85%;
  13.  height: 10%;
  14.  background-color: orange;
  15. }
  16. #InfoTitle {
  17.  margin-top: 2%;
  18.  font-size: 30px;
  19. }
  20. #InfoClock {
  21.  margin-top: 2%;
  22. }
  23. #InfoWright {
  24.  position: fixed;
  25.  display: block;
  26.  right: 0;
  27.  top: 0;
  28.  width: 15%;
  29.  height: 10%;
  30.  background-color: yellow;
  31. }
  32. #ControlsW {
  33.  position: fixed;
  34. /*  top: 10%; */
  35.  bottom: 0;
  36.  left: 0;
  37.  width: 20%;
  38.  height: 85%;
  39.  background-color: green;
  40. }
  41. #ControlsW li {
  42.  padding: 15%;
  43. }
  44. .id {
  45.  display: none;
  46. }
  47. ul {
  48.  list-style: none;
  49. }
  50. #MainW {
  51.  position: fixed;
  52. /*  top: 10%; */
  53.  bottom: 0;
  54.  left: 20%;
  55.  width: 80%;
  56.  height: 85%;
  57.  background-color: blue;
  58. }
  59. </style>


 

Code :
  1. <body>
  2. <ul id="ControlsW">
  3. <li><img id="Menu" src="../img/go-home.png"></li>
  4. <li><img id="Prev" src="../img/media-skip-backward.png"></li>
  5. <li><img id="Play" src="../img/media-playback-pause.png"></li>
  6. <li><img id="Next" src="../img/media-skip-forward.png"></li>
  7. </ul>
  8. <!--<div id="InfoW"> -->
  9. <div id="InfoWtitle">
  10.  <div id="InfoTitle">Title</div>
  11. </div>
  12. <div id="InfoWright">
  13.  <div id="InfoClock">HH:MM</div>
  14.  <div id="InfoTemp">nan°C</div>
  15. </div>
  16. <div id="MainW">
  17. <div id="MainWFMradio">
  18.  <div class="id">fmradio</div>
  19.  <p>Freq: 99.5 MHz</p>
  20.  <button id="todo">-</button>
  21.  <input type="range" min="87.50" max="108" value="99.50" class="slider" id="freq">
  22.  <button id="todo">+</button>
  23.  <ul>
  24.  <li>089.50 Bayern 2</li>
  25.  <li><button id="todo">Scan</button></li>
  26.  </ul>
  27. </div>
  28. </div>
  29. </body>


---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 28-11-2022 à 20:59:11   

Reply

Marsh Posté le 29-11-2022 à 00:02:48    

Tu devrais utiliser un reset css (pour unifier / margin / padding et boxmodel), ça devrait aider.
https://meyerweb.com/eric/tools/css/reset/reset.css
 
Peut on savoir la destination de ton truc ?
Pacque si c'est destiné à un projet perso sur un écran dont tu connais la taille, ce sera sans doute plus simple de tout faire en pixel en position absolute top left avec une width / height en pixel.
 
Par contre si tu souhaites rester responsive (s'adapter à des tailles d'écran différente), tu aura plus de flexibilité avec Flexbox.


---------------
D3
Reply

Marsh Posté le 29-11-2022 à 05:25:18    

Merci, j'ai forcé les paramètres margin et padding à 0 dans le CSS, je pensais que c'était le cas par défaut :o.
 
Mon truc est un media-center. Je veux justement un responsive design parce que je trouve l'idée de tout forcer en dur pas très élégante :o.
 
Je note pour Flexbox :jap:. Ça ressemble pas mal aux QH/VBoxLayout de Qt, j'ai l'impression que Grid correspond mieux à mon cas :jap:.


---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 29-11-2022 à 15:26:14    

Je dirais surtout qu'il devrait utiliser les flexbox du CSS : https://developer.mozilla.org/fr/do [...] of_Flexbox
Ca va lui simplifier la vie plutôt que partir sur du position: fixed / absolute qui date des années 2000 :o
 
Edit : a pas vu le lien Flexbox posté par mechkurt :sleep:


Message édité par rufo le 29-11-2022 à 15:27:40

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 29-11-2022 à 15:36:16    

Ça dépend surtout du niveau technique de la personne et de la destination final de son rpojet...
 
Pour quelqu'un qui ne veut pas se prendre la tête et un résultat rapide sans trop d'effort, la simplicité du dimensionnement au pixel près avec avoir lut un paragraphe de doc et remplis 4 propriétés css (5 en contant le position:absolute; ^^) est juste imbattable. :o


---------------
D3
Reply

Marsh Posté le 30-11-2022 à 11:44:43    

Manisque a écrit :

Merci, j'ai forcé les paramètres margin et padding à 0 dans le CSS, je pensais que c'était le cas par défaut :o.
 
Mon truc est un media-center. Je veux justement un responsive design parce que je trouve l'idée de tout forcer en dur pas très élégante :o.
 
Je note pour Flexbox :jap:. Ça ressemble pas mal aux QH/VBoxLayout de Qt, j'ai l'impression que Grid correspond mieux à mon cas :jap:.


le truc va s'afficher sur quoi comme navigateurs ?  


---------------
Blablaté par Harko
Reply

Marsh Posté le 30-11-2022 à 13:02:28    

Je développe le bouzin sur un PC avec Firefox dont je trouve le debugger pratique.

 

La cible n'est pas clairement définie pour l'instant, j'hésite entre Firefox ou Konqueror/Webkit avec Linux et Firefox Mobile avec Android. Ça dépendra surtout des performances du bouzin.
Je peux faire des hacks moches en fonction de la taille de l'écran, mais j'aimerais éviter pour le moment :o.

 

Je plussoie le coup d'un système KISS, surtout ici où c'est relativement simple et hiérarchisé.
La partie en bleu a potentiellement du bordel dedans, mais pour l'instant ça rentre bien [:casediscute].


Message édité par Manisque le 30-11-2022 à 13:03:37

---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 30-11-2022 à 14:02:11    

bon du coup ton truc en positions absolute c'est plus ou moins la bonne chose à faire.
A la rigueur en flexbox c'était troché sans trop de bricolage.
 
Pour information quand tu utilises des margin-top ou margin-bottom (padding aussi), si tu mes des % dans les valeurs, ils dépendent de la largeur de leur parent, donc ce n'est pas une bonne idée.
Utilise, top, right, left et bottom pour placer tes éléments.@


---------------
Blablaté par Harko
Reply

Marsh Posté le 03-12-2022 à 18:06:15    

C'est vite torché avec grid aussi.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-12-2022 à 18:34:54    

MaybeEijOrNot a écrit :

C'est vite torché avec grid aussi.


ouais mais regarde son navigateur de destination


---------------
Blablaté par Harko
Reply

Marsh Posté le 03-12-2022 à 18:34:54   

Reply

Marsh Posté le 03-12-2022 à 19:08:47    

Konqueror ne supporte pas les grid css ou c'est la version du navigateur du media-center dont tu supposes qu'elle ne supportera pas les grid css ?
Parce que Konqueror est censé supporter le css3 et donc les grid (définies depuis css2, non?) sans utiliser le webkit.
 
J'ai quelques bières dans le pif donc je te fais confiance. xD


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 03-12-2022 à 20:12:06    

En théorie Konqueror supporte tout le bouzin :o.
 
Je crois bien que je vais utiliser Flexbox pour améliorer les trucs dans le bloc bleu et peut-être même le bloc vert :jap:.
 
D'ailleurs, j'ai découvert l'astuce height: 50vh; pour avoir un truc dépendant de la taille du "viewport".


---------------
Si tu bois froid juste après le potage chaud, ça va faire sauter l'émail de tes dents - Monorailcat iz ohverin
Reply

Marsh Posté le 03-12-2022 à 22:43:58    

MaybeEijOrNot a écrit :

Konqueror ne supporte pas les grid css ou c'est la version du navigateur du media-center dont tu supposes qu'elle ne supportera pas les grid css ?
Parce que Konqueror est censé supporter le css3 et donc les grid (définies depuis css2, non?) sans utiliser le webkit.
 
J'ai quelques bières dans le pif donc je te fais confiance. xD


CSS grid c'est ultra récent et ce n'est pas CSS2, mais CSS3 et implémenté depuis 1 ou 2 ans maxi.
 
Donc flexbox ou alors comme il a fait mais en foutant un overflow:auto sur son div qui contient le contenu de sa page.


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-05-2023 à 15:27:55    

Le flottement à droite peut être réglé.


Message édité par ellis13 le 21-05-2023 à 15:28:59
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed