Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
583 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Div en Inline

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Div en Inline

n°1784151
abais
Posté le 08-09-2008 à 19:22:07  profilanswer
 

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.
mood
Publicité
Posté le 08-09-2008 à 19:22:07  profilanswer
 

n°1784155
FlorentG
Posté le 08-09-2008 à 20:04:30  profilanswer
 

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é ;)

n°1784157
abais
Posté le 08-09-2008 à 20:10:10  profilanswer
 

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.
n°1784161
abais
Posté le 08-09-2008 à 20:17:43  profilanswer
 

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.
n°1784168
tpierron
Posté le 08-09-2008 à 20:38:09  profilanswer
 

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
n°1784169
FlorentG
Posté le 08-09-2008 à 20:41:25  profilanswer
 

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

n°1784171
abais
Posté le 08-09-2008 à 20:44:23  profilanswer
 

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.
n°1784174
tpierron
Posté le 08-09-2008 à 20:57:38  profilanswer
 

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
n°1784177
FlorentG
Posté le 08-09-2008 à 21:00:06  profilanswer
 

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

n°1784179
grosbin
OR die;
Posté le 08-09-2008 à 21:13:25  profilanswer
 

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
mood
Publicité
Posté le 08-09-2008 à 21:13:25  profilanswer
 

n°1784186
FlorentG
Posté le 08-09-2008 à 21:47:07  profilanswer
 

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]


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Div en Inline

 

Sujets relatifs
[Résolu] Style Css Formulaire IE6[PHP] gzipper les fichiers CSS
CSS compatible Mozillapositionnement CSS [résolu]
[resolu]introduction d'un script php qui foire le CSSdéporter mon code CSS
Style CSS dans <option>Div & Height changement progressif
Image qui change en fonction position souris (Map Area + JS et/ou CSS)Choix automatique de CSS en fonction de la résolution du visiteur
Plus de sujets relatifs à : [CSS] Div en Inline

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.046 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR