J'arrive pas à mettre deux div en inline

J'arrive pas à mettre deux div en inline - HTML/CSS - Programmation

Marsh Posté le 07-10-2004 à 10:24:00    

Voila j'essaye de faire une structure en Div, mais le bordel refuse de marcher :(
 
j'ai un div en haut de 750*106, puis deux div l'un à coté de l'autre, le tout contenu dans un grand div conteneur de 750*550
 

Code :
  1. "<div class=\"site\">".
  2. "<div class=\"site1\">\n&nbsp;</div>\n".
  3. "<div class=\"site2\">\n&nbsp;</div>\n".
  4. "<div class=\"site3\">\n&nbsp;</div>\n".
  5. "</div>";


avec le css

Code :
  1. .site {
  2. position:fixed;
  3. width:750px;
  4. height:auto;
  5. border:1px solid purple;
  6. }
  7. .site1 {
  8. position:relative;
  9. width:750px;
  10. height:106px;
  11. background-color:red;
  12. }
  13. .site2 {
  14. position:relative;
  15. width:160px;
  16. background-color:blue;
  17. }
  18. .site3 {
  19. position:relative;
  20. border:1px solid green;
  21. width:590px;
  22. padding:5px;
  23. }


 
J'ai essayer de mettre un display:inline dans site 3 et 2, de mettre site 3 en fixed...
mais rien ne marche, ca reste en dessous de mon div .site2 :(
 

Reply

Marsh Posté le 07-10-2004 à 10:24:00   

Reply

Marsh Posté le 07-10-2004 à 10:33:59    

Tu as le choix en fait ... soit en absolut soit en float ... en inline tu ne peux pas indiquer de largeur vu que justement c'est le contenu qui fait la largeur du block.
Donc soit ton site2 flotte à gauche (ou le 3 à droite) soit tu les positionnes par rapport au bord.
chaque méthode a ses inconvénients.

Reply

Marsh Posté le 07-10-2004 à 10:34:05    

.site2    {
position:absolute;
left:0;
top:106px;
width:160px;
background-color:blue;
}
 
.site3    {
position:absolute;
border:1px solid green;
left: 160px;
top: 106px;
width:590px;
padding:5px;
}

Reply

Marsh Posté le 07-10-2004 à 10:46:44    

zbang a écrit :

.site2    {
position:absolute;
left:0;
top:106px;
width:160px;
background-color:blue;
}
 
.site3    {
position:absolute;
border:1px solid green;
left: 160px;
top: 106px;
width:590px;
padding:5px;
}

j'avais egalemen fait ca, mais le padding fait tout merder sous Firefox
 
screen :  
http://if-faw.com/forum/test.jpg
 
sous IE, ca ne depasse pas :(

Reply

Marsh Posté le 07-10-2004 à 10:51:59    

bon j'ai resolu ca en mettant un div dans le div.site3 avec un magin:5px
 
c'est un peu crade quoi :/

Reply

Marsh Posté le 07-10-2004 à 10:58:44    

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css" media="screen">
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. width: 100%;
  9. height: 100%
  10. }
  11. #conteneur {
  12. margin: 0;
  13. padding: 0;
  14. width: 750px;
  15. }
  16. #top {
  17. margin: 0;
  18. padding: 5px;
  19. width: 750px;
  20. height: 106px;
  21. background-color: blue;
  22. }
  23. #left {
  24. position: absolute;
  25. left: 0;
  26. top: 106px;
  27. margin: 0;
  28. padding: 5px;
  29. width: 160px;
  30. background-color: green;
  31. }
  32. #center {
  33. position: absolute;
  34. left: 160;
  35. top: 106px;
  36. margin: 0;
  37. padding: 5px;
  38. width: 590px;
  39. background-color: red;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="conteneur">
  45. <div id="top">top</div>
  46. <div id="left">left</div>
  47. <div id="center">center</div>
  48. </div>
  49. </body>
  50. </html>

Reply

Marsh Posté le 07-10-2004 à 11:02:03    

en float :
 
 

Code :
  1. .site {
  2. width:750px;
  3. height:auto;
  4. border:1px solid purple;
  5. }
  6. .site1 {
  7. width:750px;
  8. height:106px;
  9. background-color:red;
  10. }
  11. .site2 {
  12. background-color:blue;
  13. width:160px;
  14. float:left;
  15. }
  16. .site3 {
  17. float:right;
  18. border:1px solid green;
  19. width:575px;
  20. padding:5px;
  21. }


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 07-10-2004 à 12:20:12    

les float ca va pas, il se mettrent inline, mais pas cote à cote.
 
En gros ca fait
 

o
 o


 
et pas  
 
oo
 
sinon en absolute ca marchait, mais je peu pas centrer ma page du coup :/

Reply

Marsh Posté le 07-10-2004 à 12:25:30    

chacal_one333 a écrit :

les float ca va pas, il se mettrent inline, mais pas cote à cote.
 
En gros ca fait
 

o
 o


 
et pas  
 
oo
 
sinon en absolute ca marchait, mais je peu pas centrer ma page du coup :/


 
si ... centre le conteneur

Reply

Marsh Posté le 07-10-2004 à 12:26:08    

le conteneur de contient que les div en relatif, pas absolut

Reply

Marsh Posté le 07-10-2004 à 12:26:08   

Reply

Marsh Posté le 07-10-2004 à 17:42:39    

up pour le centrage

Reply

Marsh Posté le 07-10-2004 à 18:29:59    

chacal_one333 a écrit :

les float ca va pas, il se mettrent inline, mais pas cote à cote.
 
En gros ca fait
 

o
 o


 
et pas  
 
oo
 
sinon en absolute ca marchait, mais je peu pas centrer ma page du coup :/


 
Laisse tomber les floats, c'est buggés. [:spamafote]
 
http://forum.hardware.fr/forum2.ph [...] =0&subcat=
 
ça t'amuse d'utiliser des technos buggées ? Moi pas... J'attend qu'IE6 disparaisse avant d'utiliser ça.
 
C'est soit tout en absolute (possibilités limitées) soit tables + div + listes... (un mix quoi...)
 

Reply

Marsh Posté le 07-10-2004 à 19:49:25    

le fameux 3px bug :D
 
tout en absolute ca me gave, car je peu pas centrer, et les table..ben c'est justement les remplacer que j'utilise les div :D
 
Apres de la à foutre une table conteuneur il n'y a qu'un pas :/

Reply

Marsh Posté le 07-10-2004 à 20:04:09    

chacal_one333 a écrit :


Apres de la à foutre une table conteuneur il n'y a qu'un pas :/


 
que tu ne franchiras pas [:dawacube]
 
 
d'ailleurs en float .. il s'alignent sur le même plan horizontal donc je vois pas ou est le problème  [:canth]  
 
 
http://simogeo.free.fr/hfr/test_chacal.html
 


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 07-10-2004 à 20:07:46    

j'ai tapé exactement le meme code tout à l'heure et ca ne marchait pas [:autobot]

Reply

Marsh Posté le 07-10-2004 à 20:09:00    

ah si voila, j'a retrouvé :D
 
site et site1 : 750px width
site2 : 160px
donc logiquement site 3 : 750-160 = 590
 
fait le test :D

Reply

Marsh Posté le 07-10-2004 à 20:10:17    

et de toute maniere je pourrait toujours pas centrer vu que .site n'englobe pas .site2 et 3 [:boulax]

Reply

Marsh Posté le 07-10-2004 à 20:32:07    

simogeo a écrit :

que tu ne franchiras pas [:dawacube]
 
 
 


 
Que moi en tous cas j'ai franchi.
 
J'ai passé quasi deux ans à chercher dans tous les sens pour tout faire avec des divs...  
J'en ai retiré ENORMEMENT, en particulier une grande connaissance des CSS, le fait de  faire les menus avec des listes, de placer le maximum d'éléments fixe en absolut dans des div etc...
 
Mais quand on veut faire un site dynamique avec menus et contenu variable, le tout-div-css, ça pue très fort ou ça limite considérablement les possibilités.
 
Oh bien sûr, on peut se branler avec quarante hacks + des structures de divs au final plus compliquées qu'une pauv' table égarée... Très peu pour moi...

Reply

Marsh Posté le 07-10-2004 à 21:06:08    

chacal_one333 a écrit :

ah si voila, j'a retrouvé :D
 
site et site1 : 750px width
site2 : 160px
donc logiquement site 3 : 750-160 = 590
 
fait le test :D


 
uiui .. mais ca, ca ne fonctionne pas on est d'accord.
Enfin si tu veux bien conceder qq pixels ca roulaize [:extazaille]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 07-10-2004 à 21:08:01    

je veux pas [:mmmfff]

Reply

Marsh Posté le 26-10-2004 à 14:18:10    

up [:dawa]
 
ptin ya pas moyen c'est obligé que ca soit faisable

Reply

Marsh Posté le 26-10-2004 à 15:48:50    

bon j'ai reussi à force de suer [:tartalap]  
 
mon CSS
 

/* Global container */
#mainsite {
 width:750px;
 height:auto;
 border:1px solid red;
 margin-left:auto;
 margin-right:auto;
 text-align:left;  
}
 
/* second container for the left and right layers */
#main2 {
 width:750px;  
}
 
/* the banner layer */
#banner {
 width:750px;
 border:1px solid green;
 height:160px;  
}
 
/* the menu */
#leftcell {
 position:absolute;
 width:110px;
 height:auto;
 background-color:#eee;  
 vertical-align:top;  
}
/* the main cell containing the content */
#rightcell {
 width:640px;
 background-color:red;
 float:right;
}
 
/* where everything is written */
#content {
 margin:7px;
 border:1px solid orange  
}


 
html
 

<div id="mainsite">
 <div id="banner">banner</div>
 <div id="main2">
  <div id="leftcell">left <br />cell<br />bla</div>
  <div id="rightcell">
   <div id="content">
    right cell<br />right cell<br />right cell
   </div>
  </div>
  <div style="clear:both"></div>
 </div>
</div>


 
galere mais ca marche [:klem3i1]


Message édité par Profil supprimé le 26-10-2004 à 15:49:03
Reply

Marsh Posté le 26-10-2004 à 16:07:43    

chacal_one333 a écrit :

j'avais egalemen fait ca, mais le padding fait tout merder sous Firefox
 
screen :  
http://if-faw.com/forum/test.jpg
 
sous IE, ca ne depasse pas :(

Ton problème de taille sous Firefox (qui n'en n'est pas un en fait) vient de là : http://openweb.eu.org/articles/dimensions_boites_css/


---------------
Mon blog
Reply

Marsh Posté le 26-10-2004 à 16:18:54    

merci.
 
mais c'est marrant, car j'ai un DTD en xhtml 1.1
 

Citation :

le modèle Standard en présence d'une DTD  HTML  strict


 
ca devrait donc prendre le modele standard de boite sous IE 6, tout comme FF ou autre.

Reply

Marsh Posté le 26-10-2004 à 16:31:38    

T'as mis le prologue XML ?


---------------
Mon blog
Reply

Marsh Posté le 26-10-2004 à 16:32:15    

ah oué.
 en 1.0 et encoding iso west


Message édité par Profil supprimé le 26-10-2004 à 16:32:41
Reply

Marsh Posté le 26-10-2004 à 16:35:27    

Avec le prologue XML, IE 6 rebascule en mode Microsoft :spamafote:


---------------
Mon blog
Reply

Marsh Posté le 26-10-2004 à 16:37:05    

wai j'ai passé le charset en meta
 
 
 
 
du coup FF me fait de la merde [:ddr555]

Reply

Marsh Posté le 26-10-2004 à 16:40:06    

ah non, voila :)
 
merci bien, j'ai appris quelque chose sur IE tient

Reply

Marsh Posté le 26-10-2004 à 16:43:54    

Donc normalement ça doit marcher sur les 2 :)


---------------
Mon blog
Reply

Marsh Posté le 27-10-2004 à 11:58:30    

bon allez dernier probleme :)
 
j'ai reussi à avoir tout le truc correctement sauf le div de gauche
 
http://if-faw.com/test/xhtml/test.php
 
j'essaye de la faire descendre au meme niveau de celui de droite mais il veut pas :D
 
j'ai essayer de jouer sur le height:100%, le margin-bottom mais il veut pas :o
 
à savoir que quand je met un height à xx pixel, il en tient compte
 
http://if-faw.com/test/xhtml/css.css pour ma css
et la source pour le reste, ya que du html :o


Message édité par Profil supprimé le 27-10-2004 à 11:58:42
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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