[CSS] Div en Inline

Div en Inline [CSS] - HTML/CSS - Programmation

Marsh Posté le 08-09-2008 à 19:22:07    

Bonjour tous !
N'ayant rien trouvé sur le net et sur ce forum, je fait appel à vous...
Pour un template web, je veux mettre 3 div sur la meme ligne...
Imaginez un drapeaux (français) !

Code :
  1. <div class = "drapeau">
  2.    <div class = "bleu"></div>
  3.    <div class = "blanc">
  4.    <div class = "rouge">
  5. </div>
 

je veux que la largeur du drapeau fasse 100% de ma fenetre, mais que la div du milieu (blanc) est une largeur fixe... le bleu et le rouge se partagerai donc l'espace restant...
Mon savoir théorique me dirait qu'il faut mettre ses 3 div en display:inline...  ici, on aura donc

Code :
  1. .drapeau {
  2. width:100%;
  3. }
  4. .bleu {
  5. display:inline;
  6. background-color:#0000FF;
  7. width:auto;
  8. }
  9. .blanc {
  10. display:inline;
  11. background-color:#FFFFFF;
  12. width:100px;
  13. }
  14. .rouge {
  15. display:inline;
  16. background-color:#FF0000;
  17. width:auto;
  18. }


Mais ça ne marche pas... j'ai vu des soluces à partir de float:left et <hr> mais incompatible avec ce que je veux....
je compte mettre des images en background dans "bleu" et "rouge" qui s'aligne au blanc... (donc, on ne peu pas jouer sur les emboitement et position absolue)...

 

Je sais pas si qq1 comprend mon problème, j'essaye de me convertir au DIV....j'aurais bien fait ça en Table (super simple), mais on me dit que c'est crade ! bref...


Message édité par abais le 08-09-2008 à 19:27:34

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 08-09-2008 à 19:22:07   

Reply

Marsh Posté le 08-09-2008 à 20:04:30    

Faut juste rajouter un div dans le blanc, mais sinon comme ça :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.  <title>test design</title>
  5.  <style type="text/css">
  6.   body {
  7.    background: #ccc;
  8.    margin: 0;
  9.    padding: 0;
  10.   }
  11.   #bleu {
  12.    background: #1C52AC;
  13.    float: left;
  14.    padding: 10px;
  15.    width: 80px;
  16.   }
  17.   #blanc {
  18.    float: left;
  19.    margin: 0 -100px;
  20.    width: 100%;
  21.   }
  22.   #blanc-content {
  23.    background: white;
  24.    margin: 0 100px;
  25.    padding: 10px;
  26.   }
  27.   #rouge {
  28.    background: #B01717;
  29.    float: right;
  30.    padding: 10px;
  31.    width: 80px;
  32.   }
  33.  </style>
  34. </head>
  35. <body>
  36.  <div id="wrap">
  37.   <div id="bleu">pouet</div>
  38.   <div id="blanc">
  39.    <div id="blanc-content">tagada</div>
  40.   </div>
  41.   <div id="rouge">suprax</div>
  42.  </div>
  43. </body>
  44. </html>


Bien-sûr tu metteras le CSS dans un fichier séparé ;)

Reply

Marsh Posté le 08-09-2008 à 20:10:10    

bon, je vais tester, si ça marche t'es un amour (enfin, j'suis pas payday hein :p)
Cependant, ça m'aide pas à comprendre le coup du Inline...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 08-09-2008 à 20:17:43    

euh, non ! pas bon, je veux justement que seule la div du milieu est une largeur prédéfinie, et non l'inverse :)
Oui je suis chiant... :p

Message cité 1 fois

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 08-09-2008 à 20:38:09    

Essaie ça alors. Il y a une bonne dose de bidouille pour contourner les "limitations" de CSS. Il faut absolument rajouter des divs à cause du modèle de boite W3C. Ironiquement, avec un modèle de boite "IE". il n'y en aurait pas eu besoin ...
 
Ah oui, et bienvenue dans le monde merveilleux du CSS positionning...
 
Edit: ah et oublie le display: inline. Ça transforme un div en span, avec word-wrapping, etc... L'attribut width n'a donc plus aucun sens.
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Bleurp</title>
  6. <style type="text/css">
  7. .drapeau {
  8. width:100%;
  9. height: 50px;
  10. position: relative;
  11. }
  12. .bleu {
  13. width:50%;
  14. background-color:#0000FF;
  15. float: left;
  16. height: 50px;
  17. text-align: right;
  18. }
  19. .blanc {
  20. background-color:#FFFFFF;
  21. width:100px;
  22. height: 50px;
  23. position: absolute;
  24. left: 50%;
  25. z-index: 1;
  26. margin-left: -50px;
  27. text-align: center;
  28. }
  29. .rouge {
  30. background-color:#FF0000;
  31. width:50%;
  32. height: 50px;
  33. position: absolute;
  34. right: 0;
  35. }
  37. .bleu div {
  38. padding: 5px 50px 5px 5px;
  39. }
  41. .blanc div {
  42. padding: 5px;
  43. }
  45. .rouge div {
  46. padding: 5px 5px 5px 50px;
  47. }
  49. body { background-color: #ccc; }
  50. </style>
  51. </head>
  52. <body>
  54. <div class = "drapeau">
  55.    <div class = "bleu"><div>Bleu</div></div>
  56.    <div class = "blanc"><div>Blanc</div></div>
  57.    <div class = "rouge"><div>Rouge</div></div>
  58. </div>
  60. </body>
  61. </html>


Message édité par tpierron le 08-09-2008 à 20:42:10
Reply

Marsh Posté le 08-09-2008 à 20:41:25    

abais a écrit :

euh, non ! pas bon, je veux justement que seule la div du milieu est une largeur prédéfinie, et non l'inverse :)
Oui je suis chiant... :p


Ah pardon, je revois ma copie alors :D

Reply

Marsh Posté le 08-09-2008 à 20:44:23    

Ok, le résultat est exactement celui que je souhaitais, maintenant, va falloir le comprendre ><
j'hésite à faire un tableau de 3 colonnes, et tant pis si c'est moche !
sauf si je capte... (c'était trop beau les display:inline)
 
Merci :)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 08-09-2008 à 20:57:38    

Franchement, je serais du même avis que toi. Tu perds sans doute un peu de flexibilité de mise en page et d'accessibilité avec le tableau, mais niveau prise de tête avec le code, il n'y a pas photo... Entre le quart d'heure qu'il m'a fallu pour torcher cette CSS et les 3 dixièmes de secondes pour le tableau, ça ne m'étonne qu'à moitié que certains choisissent le chemin de la moindre résistance.

Message cité 1 fois
Reply

Marsh Posté le 08-09-2008 à 21:00:06    

Ah les défaitistes :o Ils nous faudrait peut-être plus d'informations sur le design sûrement :/

Reply

Marsh Posté le 08-09-2008 à 21:13:25    

tpierron a écrit :

Franchement, je serais du même avis que toi. Tu perds sans doute un peu de flexibilité de mise en page et d'accessibilité avec le tableau, mais niveau prise de tête avec le code, il n'y a pas photo... Entre le quart d'heure qu'il m'a fallu pour torcher cette CSS et les 3 dixièmes de secondes pour le tableau, ça ne m'étonne qu'à moitié que certains choisissent le chemin de la moindre résistance.

Au départ wi, les tableaux sont plus utiles pour mettre en forme de l'info, faire du reporting d'information / administration toussa
Pour une mise en forme de page j'recommande plus de placer un align=left ou right sur les élements

Message cité 1 fois

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 08-09-2008 à 21:13:25   

Reply

Marsh Posté le 08-09-2008 à 21:47:07    

grosbin a écrit :

Pour une mise en forme de page j'recommande plus de placer un align=left ou right sur les élements


Rajoute une couche de n'importe quoi [:sadnoir]

Reply

Sujets relatifs:

Leave a Replay

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