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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  J'arrive pas à mettre deux div en inline

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

J'arrive pas à mettre deux div en inline

n°866910
Profil sup​primé
Posté le 07-10-2004 à 10:24:00  answer
 

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 :(
 

mood
Publicité
Posté le 07-10-2004 à 10:24:00  profilanswer
 

n°866913
Azzazel
Posté le 07-10-2004 à 10:33:59  profilanswer
 

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.

n°866914
zbang
Posté le 07-10-2004 à 10:34:05  profilanswer
 

.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;
}

n°866918
Profil sup​primé
Posté le 07-10-2004 à 10:46:44  answer
 

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 :(

n°866924
Profil sup​primé
Posté le 07-10-2004 à 10:51:59  answer
 

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

n°866932
zbang
Posté le 07-10-2004 à 10:58:44  profilanswer
 

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>

n°866936
simogeo
j'ai jamais tué de chats, ...
Posté le 07-10-2004 à 11:02:03  profilanswer
 

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
n°866994
Profil sup​primé
Posté le 07-10-2004 à 12:20:12  answer
 

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 :/

n°866996
zbang
Posté le 07-10-2004 à 12:25:30  profilanswer
 

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

n°866997
Profil sup​primé
Posté le 07-10-2004 à 12:26:08  answer
 

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

mood
Publicité
Posté le 07-10-2004 à 12:26:08  profilanswer
 

n°867238
Profil sup​primé
Posté le 07-10-2004 à 17:42:39  answer
 

up pour le centrage

n°867282
Hermes le ​Messager
Breton Quiétiste
Posté le 07-10-2004 à 18:29:59  profilanswer
 

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...)
 

n°867352
Profil sup​primé
Posté le 07-10-2004 à 19:49:25  answer
 

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 :/

n°867364
simogeo
j'ai jamais tué de chats, ...
Posté le 07-10-2004 à 20:04:09  profilanswer
 

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
n°867369
Profil sup​primé
Posté le 07-10-2004 à 20:07:46  answer
 

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

n°867372
Profil sup​primé
Posté le 07-10-2004 à 20:09:00  answer
 

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

n°867374
Profil sup​primé
Posté le 07-10-2004 à 20:10:17  answer
 

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

n°867390
Hermes le ​Messager
Breton Quiétiste
Posté le 07-10-2004 à 20:32:07  profilanswer
 

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...

n°867442
simogeo
j'ai jamais tué de chats, ...
Posté le 07-10-2004 à 21:06:08  profilanswer
 

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
n°867446
Profil sup​primé
Posté le 07-10-2004 à 21:08:01  answer
 

je veux pas [:mmmfff]

n°883056
Profil sup​primé
Posté le 26-10-2004 à 14:18:10  answer
 

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

n°883148
Profil sup​primé
Posté le 26-10-2004 à 15:48:50  answer
 

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
n°883159
ratibus
Posté le 26-10-2004 à 16:07:43  profilanswer
 

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
n°883165
Profil sup​primé
Posté le 26-10-2004 à 16:18:54  answer
 

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.

n°883179
ratibus
Posté le 26-10-2004 à 16:31:38  profilanswer
 

T'as mis le prologue XML ?


---------------
Mon blog
n°883180
Profil sup​primé
Posté le 26-10-2004 à 16:32:15  answer
 

ah oué.
 en 1.0 et encoding iso west


Message édité par Profil supprimé le 26-10-2004 à 16:32:41
n°883188
ratibus
Posté le 26-10-2004 à 16:35:27  profilanswer
 

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


---------------
Mon blog
n°883190
Profil sup​primé
Posté le 26-10-2004 à 16:37:05  answer
 

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

n°883196
Profil sup​primé
Posté le 26-10-2004 à 16:40:06  answer
 

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

n°883200
ratibus
Posté le 26-10-2004 à 16:43:54  profilanswer
 

Donc normalement ça doit marcher sur les 2 :)


---------------
Mon blog
n°883787
Profil sup​primé
Posté le 27-10-2004 à 11:58:30  answer
 

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
mood
Publicité
Posté le   profilanswer
 


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

  J'arrive pas à mettre deux div en inline

 

Sujets relatifs
Mettre une base ACCESS sur internet?[PHP] commande qui permet de mettre à jour le cache ?
[REGEXP]Mettre en valeur des mots dans du HTMLmettre l'HEURE SYSTEME ds une zone numeric sous db2(as400)
comment mettre la date[Java] Mettre une image en background + boutons par-dessus.
delphi : ds un Edit comme quell commande pour mettre le texte a droitej'aimerais cree un site mais j'y arrive pas
Mettre a jour 2 champs en meme temps[sql] condition que je n'arrive pas à exprimer
Plus de sujets relatifs à : J'arrive pas à mettre deux div en inline

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

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