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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page avec des <div>

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mise en page avec des <div>

n°282740
souljacker
Posté le 09-01-2003 à 17:38:14  profilanswer
 

Bonjour,
 
J'ai un petit problème pour mettre un site en page avec des <div>. J'utilse le XHTML 1.1 strict. Non gm_superstar, ce n'est pas le même site que la dernière fois, cette fois, c'est pour mon boulot.
 
code xhtml:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <!-- Date de création: 9/01/2003 -->
  4. <head>
  5. <title>Open iT E-Direct</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <link rel="stylesheet" type="text/css" href="template.css"/>
  8. </head>
  10. <body>
  12. <div id="main">
  13. <!-- header -->
  14. <div id="header">
  15.  <div id="inheader">
  16.   <img src="../images/logo.gif" width="100" height="56" alt="logo"/> <a id="header" href="../asp/about.asp">E-Direct</a>
  17.   <form id="search" method="post" action="search.asp">
  18.   <input name="keywords" id="keywords" size="17" value=""/>
  19.   <input type="submit" id="submit_search" name="submit_search" value="search" class="buttonstyle"/>
  20.   </form>
  21.  </div>
  22. </div>
  23. <!-- upper menu -->
  24. <div id="uppermenu">
  25.  <div id="inuppermenu">
  26.   <a href="#" class="uppermenu">Accueil</a>
  27.    | 
  28.   <a href="#" class="uppermenu">Accueil</a>
  29.    | 
  30.   <a href="#" class="uppermenu">Accueil</a>
  31.    | 
  32.   <a href="#" class="uppermenu">Accueil</a>
  33.  </div>
  34. </div>
  35. <!-- body -->
  36. <div id="body">
  37.  <div id="leftcontent">
  38.   left
  39.  </div>
  40.  <div id="content">
  41.   middle
  42.  </div>
  43.  <div id="rightcontent">
  44.   right
  45.  </div>
  46. </div>
  47. <!-- lower menu -->
  48. <div id="lowermenu">
  49.  <div id="inlowermenu">
  50.   <a href="#" class="lowermenu">Accueil</a>
  51.    | 
  52.   <a href="#" class="lowermenu">Accueil</a>
  53.    | 
  54.   <a href="#" class="lowermenu">Accueil</a>
  55.    | 
  56.   <a href="#" class="lowermenu">Accueil</a>
  57.  </div>
  58. </div>
  59. <div id="footer">
  60.  (c) Open iT Data Management Team
  61. </div>
  62. </div>
  64. </body>
  65. </html>


 
J'ai 2 problèmes:
1/ je voudrais que le logo, le texte "E-Direct" et le formulaire de recherche soit sur la même ligne et centrer verticalement.
2/ Il faudrait que les 3 div rightcontent, content et leftcontent soit côte à côte au lieu d'un au dessous des autres.
 
Je me demandais aussi si il était possible de mettre une marge entre le bord d'un div et son contenu. Car pour le faire, j'ai du passer par un autre div et appliquer les margin à ce deuxième div.
 
code css:

Code :
  1. /* Date de création: 9/01/2003 */
  3. /* main design */
  4. body {
  5. margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
  6. background-color: #0099CC; background-image: url(../images/BGHR_336699_6699CC.gif);
  7. color: #000000;
  8. }
  10. div#main {
  11. width: 100%;
  12. text-align: left;
  13. }
  15. /* header design */
  16. div#header {
  17. width: 100%;
  18. background-color: #cccccc;
  19. vertical-align: middle;
  20. border-bottom-style: solid; border-bottom-width: 6px; border-bottom-color: #808080;
  21. }
  23. div#inheader {
  24. margin-top: 5px; margin-right: 20px; margin-bottom: 5px; margin-left: 20px;
  25. }
  27. form#search {
  28. float: right;
  29. }
  31. a#header:link {
  32. color: #ffffff;
  33. }
  35. a#header:hover {
  36. color: #0000ff;
  37. background: #ffffcc;
  38. }
  40. a#header:visited {
  41. color: #ffffff;
  42. }
  44. a#header {
  45. font-weight: bold; font-size: x-large; font-style: italic; text-decoration: underline;
  46. }
  48. /* upper menu */
  49. div#uppermenu {
  50. width: 100%;
  51. background-color: #003399;
  52. border-style: solid; border-width: 1px; border-color: #cccccc;
  53. text-align: center; color: #ff9900; font-size: 12px;
  54. margin-bottom: 10px;
  55. }
  57. div#inuppermenu {
  58. margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px;
  59. }
  61. a.uppermenu:link {
  62. font-weight: bold; text-decoration: underline; font-size: 12px;
  63. color: #ffffff;
  64. }
  66. a.uppermenu:hover {
  67. font-weight: bold; text-decoration: underline; font-size: 12px;
  68. color: #0000ff;
  69. background: #ffffcc;
  70. }
  72. a.uppermenu:visited {
  73. font-weight: bold; text-decoration: underline; font-size: 12px;
  74. color: #ffffff;
  75. }
  77. /* body */
  78. div#body {
  79. width: 100%;
  80. margin-bottom: 6px;
  81. }
  83. /* left content */
  84. div#leftcontent {
  85. width: 150px;
  86. background-color: #eeeeee;
  87. border-style: solid; border-width: 1px; border-color: #eeeeee;
  88. }
  90. /* middle content */
  91. div#content {
  92. background-color: #ffffff;
  93. border-style: solid; border-width: 1px; border-color: #ffffff;
  94. }
  96. /* right content */
  97. div#rightcontent {
  98. width: 150px;
  99. background-color: #eeeeee;
  100. border-style: solid; border-width: 1px; border-color: #eeeeee;
  101. }
  103. /* lower menu */
  104. div#lowermenu {
  105. width: 100%;
  106. background-color: #cccccc;
  107. text-align: center; color: #ff9900; font-size: 12px;
  108. margin-bottom: 6px;
  109. }
  111. div#inlowermenu {
  112. margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px;
  113. }
  115. a.lowermenu:link {
  116. font-weight: bold; text-decoration: underline; font-size: 12px;
  117. color: #0000ff;
  118. }
  120. a.lowermenu:hover {
  121. font-weight: bold; text-decoration: underline; font-size: 12px;
  122. color: #ff0000;
  123. }
  125. a.lowermenu:visited {
  126. font-weight: bold; text-decoration: underline; font-size: 12px;
  127. color: #0000ff;
  128. }
  130. /* footer */
  131. div#footer {
  132. width: 100%;
  133. text-align: center; font-family: Verdana,Arial,Helvetica; font-size: 10px; color: #ffffff;
  134. }
  136. /* other */
  137. .buttonstyle {
  138. font-family: Verdana,Arial,Helvetica; font-weight: bold; font-size: 10px; color: black;
  139. }


 
Le tout est visionnable à l'adresse http://guillaume.lesur.free.fr/openit/template.html (je n'ai pas uploader les images). Le tout doit ressembler à peu près à ça: http://www.openit.be/asp/ à part que j'aimerais que ça tienne sur toutes la largeur d'une page et adaptable selon la résolution.
 
Merci pour votre aide.

mood
Publicité
Posté le 09-01-2003 à 17:38:14  profilanswer
 

n°282814
souljacker
Posté le 09-01-2003 à 18:20:21  profilanswer
 

Merde, je l'avais oublier le padding.

n°282870
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2003 à 19:08:43  profilanswer
 

Bon on va corriger pas à pas le CSS :
 

SoulJacker a écrit :

Bonjour,
/* Date de création: 9/01/2003 */
 
/* main design */
body {  
 margin: 10px; /*C'est plus court*/
 background-color: #0099CC; background-image: url(../images/BGHR_336699_6699CC.gif);
 color: #000000;
}
 
div#main {
 width: 100%; /*Inutile, par défaut un DIV fait 100%*/
 text-align: left; /*Soit...*/
}
 
/* header design */
div#header {
 width: 100%; /*Idem*/
 position: relative; /*Pour pouvoir placer en position absolue le formulaire après*/
 background-color: #cccccc;
 vertical-align: middle; /*Ca ne marche que sur les TD et les éléments en-ligne*/
 border-bottom: solid 6px #808080; /*plus court*/
 padding: 5px 20px 5px 20px /*pour virer ton div#inheader*/
}

div#inheader {
 margin-top: 5px; margin-right: 20px; margin-bottom: 5px; margin-left: 20px;
}
 
/*Pour center verticalement le texte dans le header. Ajouter un id="logo" à l'image*/
img#logo {
  vertical-align: middle;  
}
 
form#search {
 float: right;
 position: absolute;
 height: 26px;
 right: 0;
 top: 20px; /*C'est une méthode pour pouvoir positionner le forumulaire au milieu du DIV et à droite.*/
}
 
/*Il est interdit d'avoir plusieur id="header" dans un document. Si tu veux modifier le style de liens qui se trouvent dans ton <div id="header"> fais comme ça :
a#header:link div#header a:link {
 color: #ffffff;
}
 
div#header a:hover {
 color: #0000ff;  
 background: #ffffcc;
}
 
div#header a:visited {
 color: #ffffff;
}
 
div#header a {
 font-weight: bold; font-size: x-large; font-style: italic; text-decoration: underline;
}
 
/* upper menu */
div#uppermenu {
 width: 100%;
 background-color: #003399;
 border-style: solid; border-width: 1px; border-color: #cccccc;
 text-align: center; color: #ff9900; font-size: 12px;
 margin-bottom: 10px;  
}
 
div#inuppermenu {
 margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px;
}
 
a.uppermenu:link {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #ffffff;
}
 
a.uppermenu:hover {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #0000ff;  
 background: #ffffcc;
}
 
a.uppermenu:visited {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #ffffff;
}
 
/* body */
div#body {
 width: 100%;
 margin-bottom: 6px;
 position: relative /*Comme pour le formulaire, ça va permettre de positionner les colonnes de gauche et de droite en absolu
}
 
/* left content */
div#leftcontent {
 position: absolute;
 top: 0;
 left: 0;
 width: 150px;
 background-color: #eeeeee;
 border-style: solid; border-width: 1px; border-color: #eeeeee;
}
 
/* middle content */
div#content {
 margin-left: 150px;
 margin-right: 150px;
 background-color: #ffffff;
 border-style: solid; border-width: 1px; border-color: #ffffff;
}
 
/* right content */
div#rightcontent {
 position: absolute;
 top: 0;
 right: 0;
 width: 150px;
 background-color: #eeeeee;
 border-style: solid; border-width: 1px; border-color: #eeeeee;
}
 
/* lower menu */
div#lowermenu {
 width: 100%;
 background-color: #cccccc;
 text-align: center; color: #ff9900; font-size: 12px;
 margin-bottom: 6px;
}
 
div#inlowermenu {
 margin-top: 2px; margin-right: 0px; margin-bottom: 2px; margin-left: 0px;
}
 
a.lowermenu:link {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #0000ff;
}
 
a.lowermenu:hover {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #ff0000;  
}
 
a.lowermenu:visited {
 font-weight: bold; text-decoration: underline; font-size: 12px;
 color: #0000ff;
}
 
/* footer */
div#footer {
 width: 100%;
 text-align: center; font-family: Verdana,Arial,Helvetica; font-size: 10px; color: #ffffff;
}
 
/* other */
.buttonstyle {  
 font-family: Verdana,Arial,Helvetica; font-weight: bold; font-size: 10px; color: black;
}


 
Les 3 colonnes c'est inspiré de http://www.glish.com/css/7.asp
 
Voili, voilou :)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°282871
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2003 à 19:09:50  profilanswer
 

Ah et bien sûr dans le CSS il faut virer le <div id="inheader">


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°282876
Profil sup​primé
Posté le 09-01-2003 à 19:14:16  answer
 

gm putain t malade, t'as vraiment rien de mieux à foutre que macher le boulot aux gars ? :/ Surtout que bon, comme disait un célèbre gars, vaut mieux apprendre à qqn à pecher que lui filer du poisson tout cuit...

n°282883
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2003 à 19:21:45  profilanswer
 

Indiana Jones a écrit :

gm putain t malade, t'as vraiment rien de mieux à foutre que macher le boulot aux gars ? :/ Surtout que bon, comme disait un célèbre gars, vaut mieux apprendre à qqn à pecher que lui filer du poisson tout cuit...


Bah j'avais 10 minutes à perdre avant de partir du boulot... Cela dit je ne sais pas si ça marche j'ai fait ça à l'aveugle :D
J'ai pas fait tout le boulot, il reste des erreurs de validation et d'autres nettoyages à faire. Les conseils donnés ici seront un point de départ pour lui ;)
 
Allez, c'est ma semaine de bonté.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°282885
Profil sup​primé
Posté le 09-01-2003 à 19:22:20  answer
 

Y a qu'une lettre de différence entre "trop bon" et...
 
 [:gugus2000]

n°282916
panchopa
le lama de Lima
Posté le 09-01-2003 à 19:44:20  profilanswer
 

Citation :

Les 3 colonnes c'est inspiré de http://www.glish.com/css/7.asp

 
 
Merciiiiiiiiiiiiiii  :love:  :love:  :love:  :love:  :love:
 
(ca fait un mois que je casse la tête a chercher comment reussir ca)


Message édité par panchopa le 09-01-2003 à 19:46:12
n°283134
souljacker
Posté le 09-01-2003 à 22:36:08  profilanswer
 

Merci  :jap:  gm_superstar  :love:  (tiens il convient bien le superstar). Grace a tous les commentaires, j'espère comprendre encore un peu plus.
 
Au fait, tu ne connaitrais pas un site où on expliquerait le xhtml en profondeur, cad, qui expliquerait pour la mise en page, les éléments de types blocs, les éléments de types en-ligne, ... (avec si possible des exemples)? Parce que j'ai déjà été voir sur le w3school, mais je trouve que cela manque car le principe, je l'ai compris, mais la mise en application n'est pas toujours évidente.
 
Indiana: ca serait pour un autre projet, ça ne me dérangerais pas de patauger et de chercher un bon coup, mais malheureusement (ou heureusement  :) ) c'est pour mon travail et mon patron risque de ne pas apprécier le fait que je cherche pendant 1 mois  :D .
 
Pancopha: je me disais aussi que je devais pas être le seul à chercher :lol: .

n°283137
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2003 à 22:39:58  profilanswer
 

Bah il y'a beaucoup de liens dans la FAQ...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
mood
Publicité
Posté le 09-01-2003 à 22:39:58  profilanswer
 

n°283150
souljacker
Posté le 09-01-2003 à 22:46:52  profilanswer
 

oui, mais généralement je les trouve pas assé complexe. Bah, je ferais le mien quand j'aurrais bien compris (dans 1 an  ;)  :lol: ).
 
Au fait, il serait possible de mettre la FAQ comme post-it, parce que tout à l'heure je ne l'ai pas trouvé et ca serait plus pratique de l'avoir comme 1er message en permanence.

n°283153
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2003 à 22:48:56  profilanswer
 

Bah non parce que c'est pas la seule FAQ du forum Progra (y'a aussi  Java, PHP, XML...). Par contre en haut à droite tu as un lien "Liens & sujets utiles" qui regroupe tous les topics intéressants


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°283162
souljacker
Posté le 09-01-2003 à 22:54:46  profilanswer
 

mici :jap:

n°283587
souljacker
Posté le 10-01-2003 à 15:18:23  profilanswer
 

Et bien non, je viens de passer la matiné et le début de l'après-midi à essayer de régler le problème d'alignement et ce n'est toujours pas bon. Je ne comprends pas trop, j'ai suivi le truc sur glish et rien.
 
J'ai un comportement différent selon les navigateurs:
- Mozilla et Netscape: le div de gauche mord sur celle du centre. Ou je devrais plutôt dire que le centre n'est pas bien placé car les deux colonnes ont la bonne dimensions. (http://www.iis.hrnet.fr/pluton/mozilla.jpg)
- IE6: Il m'aligne le div de gauche et celui du centre sur la même position (http://www.iis.hrnet.fr/pluton/ie6.jpg)
- IE5: apparement il ne prend pas en compte les div généraux (http://www.iis.hrnet.fr/pluton/ie5.jpg)
- Opera: toujours un problème avec la colonne de gauche et aussi avec le formulaire de recherche.
 
Le design est dispo à l'adresse: http://www.iis.hrnet.fr/pluton/template.html
 
et le css: http://www.iis.hrnet.fr/pluton/template.css
 

Code :
  1. /* Date de création: 9/01/2003 */
  3. /* main design */
  4. body {
  5. margin: 10px; padding: 0px;
  6. background-color: #0099CC; background-image: url(../images/BGHR_336699_6699CC.gif);
  7. color: #000000;
  8. }
  10. /* header design */
  11. div#header {
  12. position: relative;
  13. background-color: #cccccc;
  14. color: #000000;
  15. border-bottom: solid 6px #808080;
  16. padding: 5px 20px 5px 20px;
  17. }
  19. div#header a {
  20. font-weight: bold; font-size: x-large; font-style: italic; text-decoration: underline;
  21. position: absolute;
  22. height: 26px; left: 125px; top: 23px;
  23. }
  25. form#search {
  26. position: absolute;
  27. height: 26px; right: 20px; top: 23px;
  28. }
  30. /* upper menu */
  31. div#uppermenu {
  32. background-color: #003399;
  33. border: solid 1px #cccccc;
  34. text-align: center; color: #ff9900; font-size: 12px;
  35. margin-bottom: 10px;
  36. padding: 2px;
  37. }
  39. div#uppermenu a {
  40. font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; text-decoration: underline; font-size: 10px;
  41. }
  43. /* main content */
  44. div#maincontent {
  45. position: relative;
  46. margin-bottom: 6px;
  47. }
  49. div#leftcontent {
  50. position: absolute;
  51. top: 0px; left: 0px;
  52. width: 150px;
  53. padding: 2px;
  54. background-color: #eeeeee;
  55. color: #000000;
  56. border: solid 1px #000000;
  57. }
  59. div#centercontent {
  60. margin-left: 150px; margin-right: 150px;
  61. padding: 2px;
  62. background-color: #ffffff;
  63. color: #000000;
  64. border: solid 1px #000000;
  65. }
  67. div#rightcontent {
  68. position: absolute;
  69. top: 0px; right: 0px;
  70. width: 150px;
  71. background-color: #eeeeee;
  72. color: #000000;
  73. border: solid 1px #000000;
  74. padding: 2px;
  75. }
  77. /* lower menu */
  78. div#lowermenu {
  79. background-color: #cccccc;
  80. text-align: center; color: #ff9900; font-size: 12px;
  81. margin-bottom: 6px;
  82. padding: 2px;
  83. }
  85. div#lowermenu a {
  86. font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; text-decoration: underline; font-size: 10px;
  87. }
  89. /* footer */
  90. div#footer {
  91. text-align: center;
  92. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; color: #ffffff;
  93. background-color: inherit;
  94. }
  96. /* other */
  97. .buttonstyle {
  98. font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 10px; color: black;
  99. background-color: inherit;
  100. }
  102. /* link style */
  103. a.upper:link { color: #ffffff; background-color: inherit; text-decoration: underline; }
  104. a.upper:hover { color: #0000ff; background: #ffffcc; text-decoration: underline; }
  105. a.upper:visited { color: #ffffff; background-color: inherit; text-decoration: underline; }
  106. a.lower:link { color: #0000ff; background-color: inherit; text-decoration: underline; }
  107. a.lower:hover { color: #ff0000; background-color: inherit; text-decoration: underline; }
  108. a.lower:visited { color: #0000ff; background-color: inherit; text-decoration: underline; }


n°283607
gm_superst​ar
Appelez-moi Super
Posté le 10-01-2003 à 15:32:25  profilanswer
 

Bon il faut remettre width: 100%; à ton div#maincontent. Vu qu'il est en positionnement relatif, IE bugge s'il n'y a pas de largeur déclarée...
 
Pour le problème de chevauchement c'est sans doute parce que tu as ajouté une bordure à tes DIV, il font donc que tu ajustes les marges du DIV central.
 
Pour IE 5 il faudra peut-être appliquer le hack suivant : http://www.tantek.com/CSS/Examples/boxmodelhack.html


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°283677
souljacker
Posté le 10-01-2003 à 16:47:05  profilanswer
 

Oki merci.
 
Pour les marges du centre, il fallait que je compte le padding que j'avais ajouté de chaque côté (+ les bords).
 
Pour IE5, j'ai changé le code en:
 

Code :
  1. div#centercontent {
  2. margin-left: 150px; margin-right: 150px;
  3. padding: 2px;
  4. width: *;
  5. background-color: #ffffff;
  6. color: #000000;
  7. voice-family: "\"}\""; /* for the IE5 CSS bug */
  8. voice-family: inherit;
  9. margin-left: 154px;
  10. margin-right: 154px;
  11. }


 
Pour être sur d'avoir bien compris:
IE5, ne va interprété que:

Code :
  1. div#centercontent {
  2. margin-left: 150px; margin-right: 150px;
  3. padding: 2px;
  4. width: *;
  5. background-color: #ffffff;
  6. color: #000000;
  7. }


tandis que les autres navigateurs compatible CSS2 vont interprétés l'entièreté du code. Et donc ne prendre en compte que les deuxièmes valeurs. C'est bien ça?
 
Par contre pour Opera, c pas encore ça  :pt1cable: .
 
(j'y arriverais, j'y arriverais, j'y arriverais, ...
jes les aurais tous  :na:  ;) )

n°283690
gm_superst​ar
Appelez-moi Super
Posté le 10-01-2003 à 16:54:22  profilanswer
 

Non tu n'as pas compris, le hack pour IE 5 agit sur la largeur (et uniquement elle). Donc il ne doit concerner que tes colonnes de gauche et de droite pour lesquelles tu as spécifié une largeur. Ta colonne centrale n'a pas de largeur explicite donc elle n'est pas concernée.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°283700
souljacker
Posté le 10-01-2003 à 17:04:53  profilanswer
 

ah bon, pourtant ma solution fonctionne et sur glish, c'est comme ça qu'ils ont fait.
 

Code :
  1. #leftcontent {
  2. position: absolute;
  3. left:10px;
  4. top:50px;
  5. width:200px;
  6. background:#fff;
  7. border:1px solid #000;
  8. }
  10. #centercontent {
  11. background:#fff;
  12. margin-left: 199px;
  13. margin-right:199px;
  14. border:1px solid #000;
  15. voice-family: "\"}\"";
  16. voice-family: inherit;
  17. margin-left: 201px;
  18. margin-right:201px;
  19. }
  20. html>body #centercontent {
  21. margin-left: 201px;
  22. margin-right:201px;
  23. }
  25. #rightcontent {
  26. position: absolute;
  27. right:10px;
  28. top:50px;
  29. width:200px;
  30. background:#fff;
  31. border:1px solid #000;
  32. }


 
La, j'ai du mal à suivre alors  :??:

n°283708
gm_superst​ar
Appelez-moi Super
Posté le 10-01-2003 à 17:15:57  profilanswer
 

Ah oui effectivement, j'ai pas pris le temps de lire attentivement. Effectivement ça revient au même et c'est mieux d'ailleurs car ça évite d'appliquer la hack pour 2 colonnes.
Désolé c'est la fin de la semaine :sleep:  
 
Par contre tu devrais ajouter la deuxième partie du hack pour Opera  5 :
 
html>body div#centercontent {
...
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°283880
souljacker
Posté le 10-01-2003 à 22:16:34  profilanswer
 

Je vais craquer, je le sens  :cry: .
 
J'ai réussi à contourner le problème de l'header en mettant tous les éléments en position: absolute et en supprimant le padding pour le <div id="header"> (IE 5 est vraiment une grosse merde).
 
Par contre dans Opera, je m'en sors pas. J'essaye avec Opera 6.05 fr, mais les positions sont zarbi. Pour mon formulaire, il n'a pas l'air de prendre en compte le champ right: 20px. Et le div gauche est collé à mon menu alors que j'ai définit un écart de 6px en dessous du menu.
 
Screenshot: http://www.iis.hrnet.fr/pluton/opera.jpg
 
Quelqu'un a-t-il une idée???
 
Merci.

n°283890
antp
Super Administrateur
Champion des excuses bidons
Posté le 10-01-2003 à 22:32:13  profilanswer
 

Tu devrais faire tes screenshots en PNG, c'est mieux [:antpng]


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°283917
panchopa
le lama de Lima
Posté le 10-01-2003 à 23:10:59  profilanswer
 

d'un autre côté faire un site qui passe bien partout c'est pas gagné. Si déjà c'est bon sur IE et mozilla/netscape bin laisse tomber non ?

n°283919
souljacker
Posté le 10-01-2003 à 23:15:44  profilanswer
 

Chuis de genre perfectionniste. Puis ca dépend surtout de mon patron ;) , je lui en toucherais deux mots. Mais si c'était possible, j'aimerais que ca tourne sur Opera. Note que je n'ai pas tester sous Mac, ni sous Linux.

n°283951
antp
Super Administrateur
Champion des excuses bidons
Posté le 11-01-2003 à 01:02:12  profilanswer
 

HotShot a écrit :


 
<mode excuse bidon>
Ouais mais bon le Png c pas encore bien supporté partout...
</mode>
<mode vraie raison>
Ca te fait les pieds [:jergoku-2]
</mode>


 
Tu es sûr que tu ne veux pas que je bannisse ce pseudo-ci ? [:dawa]


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°283954
antp
Super Administrateur
Champion des excuses bidons
Posté le 11-01-2003 à 01:09:17  profilanswer
 

HotShot a écrit :

Motif ?


 
pas besoin de motif :p


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
n°284007
gm_superst​ar
Appelez-moi Super
Posté le 11-01-2003 à 11:50:08  profilanswer
 

SoulJacker a écrit :

Je vais craquer, je le sens  :cry: .
 
J'ai réussi à contourner le problème de l'header en mettant tous les éléments en position: absolute et en supprimant le padding pour le <div id="header"> (IE 5 est vraiment une grosse merde).
 
Par contre dans Opera, je m'en sors pas. J'essaye avec Opera 6.05 fr, mais les positions sont zarbi. Pour mon formulaire, il n'a pas l'air de prendre en compte le champ right: 20px. Et le div gauche est collé à mon menu alors que j'ai définit un écart de 6px en dessous du menu.
 
Screenshot: http://www.iis.hrnet.fr/pluton/opera.jpg
 
Quelqu'un a-t-il une idée???
 
Merci.


Bon ben sinon pour Opéra, tu mets le logo et le texte dans 1 DIV et le formulaire tu le mets en flottant à droite.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°284045
Profil sup​primé
Posté le 11-01-2003 à 12:32:16  answer
 

SoulJacker a écrit :

Bonjour,
 
J'ai un petit problème pour mettre un site en page avec des <div>. J'utilse le XHTML 1.1 strict. Non gm_superstar, ce n'est pas le même site que la dernière fois, cette fois, c'est pour mon boulot.


 
Juste pour savoir ça existe le xhtml 1.1 strict ?
Parce que moi j'ai entendu parler du xhtml 1.0 strict et du xhtml 1.1 ?
Alors c'est quoi la différence entre le xhtml 1.1 et le xhtml 1.1 strict ??
 :??:

n°284048
kadreg
profil: Utilisateur
Posté le 11-01-2003 à 12:35:55  profilanswer
 

ChiCOToS a écrit :


Parce que moi j'ai entendu parler du xhtml 1.0 strict et du xhtml 1.1 ?


 
Parceque le transitionnal sert pour la phase de transition (comme son nom l'indique). Pour le xhtml 1.1, on considère que la transition est terminée et il ne reste donc plus que le strict.


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
n°284052
Profil sup​primé
Posté le 11-01-2003 à 12:46:16  answer
 

kadreg a écrit :


 
Parceque le transitionnal sert pour la phase de transition (comme son nom l'indique). Pour le xhtml 1.1, on considère que la transition est terminée et il ne reste donc plus que le strict.


Donc xhtml 1.1 = xhtml 1.1 strict ??

n°284053
antp
Super Administrateur
Champion des excuses bidons
Posté le 11-01-2003 à 12:48:03  profilanswer
 
n°284249
souljacker
Posté le 11-01-2003 à 19:04:41  profilanswer
 

Bon, mon patron est d'accord pour laisser tomber Opera  :D [:pronucleus69] [:dams86] .
 
Merci pour votre aide  :jap: [:pronucleus69]


Message édité par souljacker le 11-01-2003 à 19:05:11
n°284258
souljacker
Posté le 11-01-2003 à 19:15:27  profilanswer
 

Citation :

Une baffe à ton patron, de la part de W3C Compliant :ange:


 
Pas compris???
 
Faudrait peut-être commencer par avoir des navigateurs W3C Compliant tel que Mozilla.
 
Quand je vois le merdier qu'il faut pour faire un site compatible avec la plupart des navigateurs (anciens surtout), j'ai presque envie d'arreter le développement web et me redirigier vers les applications stand alone ou en réseau.

n°284280
souljacker
Posté le 11-01-2003 à 19:57:12  profilanswer
 

Non non, je dois pas descendre en deca de IE5 et NS6. d'après ces stats, les autres navigateurs sont que très peu utilisé pour visiter son site.

n°285490
souljacker
Posté le 13-01-2003 à 19:19:08  profilanswer
 

J'ai encore un petit problème.
 
Dans le div de droite, j'ai mis plusieurs div imbriqués.
 

Code :
  1. <div id="mailinglistdiv">
  2. <div class="contentheader">
  3.  Lettre d'informations
  4. </div>
  5. <div id="mailinglistcontent">
  6.  Envoyez votre adresse Email pour vous inscrire:<br/>
  7.  <br/>
  8.  <form id="mailinglist" action="" method="post">
  9.  <input type="text" id="email" size="13" value=""/> <input type="submit" id="ok" value="ok" class="buttonstyle"/><br/>
  10.  <input type="checkbox" id="inhtml" value="html"/> Email en HTML.<br/>
  11.  <br/>
  12.  <input type="submit" id="" value="Se désabonner" class="buttonstyle"/>
  13.  </form>
  14. </div>
  15. </div>
  17. <br/>
  19. <div id="basketdiv">
  20. <div class="contentheader">
  21.  Votre panier
  22. </div>
  23. <div id="basketcontent">
  24.  <div class="basketnb">Nbre d'éléments: 0</div>
  25.  <div class="basketproduct">Votre panier est vide.</div>
  26.  <div class="baskettotal">total:  ?0.00</div>
  27.  <div class="basketttc">ttc:  ?0.00</div>
  28.  <a href="basket.asp?V=refresh"><img src="../images/basket_empty.gif" alt="Voir le contenu du panier" width="25" height="22"/>Voir le panier</a><br/>
  29.  <a href="save_basket.asp?callmode=recover"><img src="../images/savedisk.gif" alt="Recupérer un panier sauvegardé" width="25" height="22"/>Récupérer le panier</a><br/>
  30. </div>
  31. </div>


 
Pour qu'ils s'alignent correctment dans IE, j'ai fixé le width à 150px pour basketdiv et mailinglistdiv (qui me servent en plus à mettre un bord gris autour de l'ensemble). Malheureusement, avec Mozilla (et donc NS), au lieu de garder l'alignement qu'il devrait avoir, les div sont repoussé vers la droite (de 4 pixels).
 
J'ai fait deux screenshots pour illustrer le problème:
- IE: http://users.skynet.be/bk372655/ie.png
- NS: http://users.skynet.be/bk372655/ns.png
 
Si je ne mets pas de valeur au width, j'ai un espace entre les div latéraux et le div central.


Message édité par souljacker le 13-01-2003 à 19:32:38
n°285544
gm_superst​ar
Appelez-moi Super
Posté le 13-01-2003 à 20:48:26  profilanswer
 

Comment sont positionnés les DIVs ? Le BODY a-t-il une marge ? du padding ? Bref, donne un peu plus de code...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°285603
souljacker
Posté le 13-01-2003 à 22:11:48  profilanswer
 

ca ne va pas être bref, désolé:
 

Code :
  1. <body>
  2. <div id="main">
  3. <!-- header -->
  4.   <div id="headerdiv">
  5.   // logo + moteur recherche
  6.   </div>
  7. <!-- upper menu -->
  8.   <div id="uppermenu">
  9.   // generation menu
  10.   </div>
  11. <!-- main content -->
  12.   <div id="maincontent">
  13.     <div id="leftcontent">
  14.        <!--#include file="../includes/leftmenu.asp"-->
  15.     </div>
  16.     <div id="centercontent">
  17.     </div>
  18.     <div id="rightcontent">
  19.       <!--#include file="../includes/rightmenu.asp"-->
  20.     </div>
  21.   </div>
  22. <!-- lower menu -->
  23.   <div id="lowermenu">
  24.   // generation menu
  25.   </div>
  26.   <div id="footer">
  27.     (c) Open iT Data Management Team
  28.   </div>
  29. </div>
  30. </body>


 
rightmenu.asp

Code :
  1. <div id="mailinglistdiv">
  2.   <div class="contentheader">
  3.     Lettre d'informations
  4.   </div>
  5.   <div id="mailinglistcontent">
  6.   // formulaire d'inscription
  7.   </div>
  8. </div>
  10. <br/>
  12. <div id="basketdiv">
  13.   <div class="contentheader">
  14.     Votre panier
  15.   </div>
  16.   <div id="basketcontent">
  17.   // le panier
  18.   </div>
  19. </div>


 
pour leftmenu.asp, c'est la même idée
 
un exemple de contenu de la colonne du milieu

Code :
  1. <!-- Display the news -->
  2. <p class="default_contentheader">
  3. News
  4. </p>
  6. <div id="newslist">
  7. // generation via base de données
  8. </div>
  10. <!-- Display the categories -->
  11. <p class="default_contentheader">
  12. Catégories
  13. </p>
  15. <table cellpadding="0" cellspacing="0" id="default_categorylist">
  16. <tr><td id="default_categorylist_left">
  17. // generation via base de données
  18. </td><td id="default_categorylist_right">
  19. // generation via base de données
  20. </td></tr>
  21. </table>


 
Les css:

Code :
  1. /* main design */
  2. body {
  3. margin: 10px;
  4. padding: 0px;
  5. background-color: #0099CC; background-image: url(../images/BGHR_336699_6699CC.gif);
  6. color: #000000;
  7. }
  9. /* header design */
  10. div#headerdiv {
  11. position: relative;
  12. background-color: #cccccc;
  13. color: #000000;
  14. border-bottom: solid 6px #808080;
  15. height: 76px;
  16. }
  18. /* upper menu */
  19. div#uppermenu {
  20. background-color: #003399;
  21. border: solid 1px #cccccc;
  22. text-align: center; color: #ff9900; font-size: 12px;
  23. margin-bottom: 10px;
  24. padding: 2px;
  25. }
  27. /* main content */
  28. div#maincontent {
  29. position: relative;
  30. margin-bottom: 6px;
  31. width: 100%;
  32. }
  34. div#leftcontent {
  35. position: absolute;
  36. top: 0px; left: 0px;
  37. width: 150px;
  38. color: #000000;
  39. }
  41. div#centercontent {
  42. margin-left: 150px; margin-right: 150px;
  43. padding: 5px;
  44. background-color: #ffffff;
  45. color: #000000;
  46. voice-family: "\"}\""; /* for the IE5 CSS bug */
  47. voice-family: inherit;
  48. margin-left: 152px; margin-right: 154px;
  49. }
  50. html>body div#centercontent {
  51. margin-left: 154px;
  52. margin-right: 154px;
  53. }
  55. div#rightcontent {
  56. position: absolute;
  57. top: 0px; right: 0px;
  58. width: 150px;
  59. color: #000000;
  60. }
  62. /* lower menu */
  63. div#lowermenu {
  64. background-color: #cccccc;
  65. text-align: center; color: #ff9900; font-size: 12px;
  66. margin-bottom: 6px;
  67. padding: 2px;
  68. }
  70. /* footer */
  71. div#footer {
  72. text-align: center;
  73. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; color: #ffffff;
  74. background-color: inherit;
  75. }


 

Code :
  1. /* all */
  2. div.contentheader {
  3. padding: 2px;
  4. background-color: #003399;
  5. text-align: center;
  6. color: #ffffff; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 12px;
  7. }
  9. /* left content */
  10. div#categorylistdiv {
  11. border: 2px solid #eeeeee;
  12. }
  14. div#categorylistcontent {
  15. padding: 2px;
  16. background-color: #ffffcc;
  17. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px;
  18. }
  20. div#sendthispagediv {
  21. border: 2px solid #eeeeee;
  22. }
  24. div#sendthispage {
  25. padding: 2px;
  26. background-color: #99ccff;
  27. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;
  28. }
  30. /* right content */
  31. div#mailinglistdiv {
  32. border: 2px solid #eeeeee;
  33. }
  35. div#mailinglistcontent {
  36. padding: 2px;
  37. background-color: #99ccff;
  38. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;
  39. }
  41. div#basketdiv {
  42. border: 2px solid #eeeeee;
  43. }
  45. div#basketcontent {
  46. padding: 2px;
  47. background-color: #ffffcc;
  48. font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;
  49. }


 

Code :
  1. /* asp/default.asp content */
  2. div.default_contentheader {
  3. padding: 2px;
  4. background-color: #003399;
  5. text-align: center;
  6. color: #ffffff; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 12px;
  7. }
  9. table#default_catergorylist {
  10. width: 100%;
  11. border: 0px;
  12. }
  14. td#default_categorylist_left {
  15. width: 50%;
  16. vertical-align: top;
  17. padding-right: 5px;
  18. text-align: justify;
  19. border-right: 1px solid #c0c0c0;
  20. }
  22. td#default_categorylist_right {
  23. width: 50%;
  24. vertical-align: top;
  25. padding-left: 5px;
  26. text-align: justify;
  27. }


 
J'ai supprimé ce qu'il me semblait inutile pour le cas qui nous intéresse.


Message édité par souljacker le 13-01-2003 à 22:18:42
n°285752
souljacker
Posté le 14-01-2003 à 09:17:45  profilanswer
 

J'ai trouver, j'avais oublier de modifier les marges pour la colonnes du milieux alors que j'avais supprimer les bords ==> décalage.
 
Mais j'ai toujours un petit soucis, dans IE6 mes div ne sont pas tout à fait bien placé, ils devraient être 1 pixel plus à droite.
 
http://users.skynet.be/bk372655/iebug.png, je suppose vient du div englobant, mais je n'en suis pas sur.
 
pour la colonne de droite

Code :
  1. div#rightcontent {
  2. position: absolute;
  3. top: 0px; right: 0px;
  4. width: 150px;
  5. margin: 0px;
  6. padding: 0px;
  7. color: #000000;
  8. }


 
les deux div qui sont englobés dans la colonne de droite:

Code :
  1. div#mailinglistdiv {
  2. border: 2px solid #eeeeee;
  3. }
  5. div#basketdiv {
  6. border: 2px solid #eeeeee;
  7. }

n°285790
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2003 à 10:37:48  profilanswer
 

SoulJacker a écrit :

J'ai trouver, j'avais oublier de modifier les marges pour la colonnes du milieux alors que j'avais supprimer les bords ==> décalage.


Bah voilà tu as fini par trouver tout seul ;)

SoulJacker a écrit :

Mais j'ai toujours un petit soucis, dans IE6 mes div ne sont pas tout à fait bien placé, ils devraient être 1 pixel plus à droite.
 
http://users.skynet.be/bk372655/iebug.png, je suppose vient du div englobant, mais je n'en suis pas sur.


Essaye de faire apparaître les bordures des différents DIV afin de visualiser lequel n'est pas aligné avec les autres.


Message édité par gm_superstar le 14-01-2003 à 10:40:03

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°285844
souljacker
Posté le 14-01-2003 à 12:00:07  profilanswer
 

Pour moi, c'est toute la colonne de droite qui est mal placé. Si je fait right: -1px au lieu de right: 0px, l'alignement est correct dans IE, mais bien sur pas dans Mozilla/NS. Donc, il me semble que c'est elle qui pose problème.
 
Ah aussi, comme les colonnes sont en position: absolute, la hauteur de la page est défini par la colonne du mileu. Le problème s'est qu'il peut arriver que la colonne de gauche soit plus haute que celle du milieu (affichage en arbre que l'on cache en partie) et donc vient "écraser" le menu du bas, ce qui n'est pas très joli. Y a-t-il une solution pour que la hauteur de la page varie en même temps que celle de la colonne?


Message édité par souljacker le 14-01-2003 à 12:05:52
n°285944
souljacker
Posté le 14-01-2003 à 14:03:51  profilanswer
 

Ca me fait une belle jambe, 90% des utilisateurs utilisent IE.
 
Règle n°2: l'utilisateurs a toujours raison, ainsi que le patron  ;)  :D

mood
Publicité
Posté le   profilanswer
 


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

  Mise en page avec des <div>

 

Sujets relatifs
[HTML]Mise en page - DIV ?Mise en page de Code (Java)
[VISUAL] mise en page pour imprimer un document[CSS] mise en page d'un texte en 2 voire 3 colonnes
[HTML] Mise en page en TABLO ! PB tres bizar ! A l'aide !!Quoi de mieux pour cacher (caching - mise en cache !) une page
tri -> mise en page qui foire... [ resolu ][html / css] pb mise en page, div positionnés
Gros bleme de mise en page d un design :(Modifier une entrée dans un fichier. / Mise en page / Fonction Temps
Plus de sujets relatifs à : Mise en page avec des <div>

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

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