[XHTML][CSS] Probleme d'intentation dans un div

Probleme d'intentation dans un div [XHTML][CSS] - HTML/CSS - Programmation

Marsh Posté le 16-06-2003 à 18:35:56    

J'ai comme un petit probleme d'alignement
de mes divs
 
mon 2e div dans mon middle est tjrs un peu indenté vers la droite, et jtrouve pas la cause de ca
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  3.    <head>
  4.       <title>Organisation Sherby</title>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.       <link rel="stylesheet" type="text/css" href="css/test.css" />
  7.    </head>
  8.    <body>
  9.       <!-- Left ========================= -->
  10.       <div id="left">
  11.          <!-- Logo ========================= -->
  12.          <div id="logo">
  13.             <img src="images/logo.jpg" alt="" />
  14.          </div>
  15.          <br />
  16.          <div id="menu_title">
  17.             Organisation
  18.          </div>
  19.          <div id="menu_body">
  20.             <div id="menu_element">
  21.                Équipe
  22.                <br />Historique
  23.                <br />Nous contacter
  24.             </div>
  25.          </div>
  26.       </div>
  27.       <!-- Right ========================= -->
  28.       <div id="right">
  29.          <div id="rcolumn1">
  30.            
  31.          </div>
  32.       </div>
  33.       <!-- Middle ========================= -->
  34.       <div id="middle">
  35.          <!-- Banner ========================= -->
  36.          <div id="banner">
  37.             <img src="images/banner.jpg" alt="" />
  38.          </div>
  39.          <div id="body">
  40.             <div id="page">
  41.                Bonjour les amis
  42.             </div>
  43.          </div>
  44.       </div>
  45.    </body>
  46. </html>


 

Code :
  1. * {
  2. font-family : Arial;
  3. font-size : 12px;
  4. color : #F2D825;
  5. }
  7. body {
  8. background-color : #504D67;
  9. margin-left : 10px;
  10. margin-right : 10px;
  11. margin-top : 10px;
  12. margin-bottom : 10px;
  13. }
  15. div#left {
  16. position : relative;
  17. float : left;
  18. width : 128px;
  19. }
  21. #menu_title {
  22. position : relative;
  23. background-color : #423E5B;
  24. text-align : center;
  25. font-size : 14px;
  26. font-weight : bolder;
  27. border : 2px groove #FF7E00;
  28. }
  30. #menu_body {
  31. position : relative;
  32. background-color : #423E5B;
  33. border : 2px groove #FF7E00;
  34. }
  36. #menu_element {
  37. position : relative;
  38. margin-left : 8px;
  39. margin-top : 5px;
  40. margin-bottom : 5px;
  41. }
  43. #logo {
  44. position : relative;
  45. }
  47. div#middle{
  48. position : relative;
  49. margin-left : 148px;
  50. margin-right : 192px;
  51. border : 1px solid #FF7E00;
  52. }
  54. #banner {
  55. position : relative;
  56. text-align : center;
  57. border : 2px groove #FF7E00;
  58. }
  60. #body {
  61. position : relative;
  62. background-color : #423E5B;
  63. height : 380px;
  64. border : 2px groove #FF7E00;
  65. }
  67. #page {
  68. position : relative;
  69. margin-left : 10px;
  70. margin-right : 10px;
  71. margin-top : 10px;
  72. margin-bottom : 10px;
  73. }
  75. #bottom {
  76. position : relative;
  77. background-color : #423E5B;
  78. height : 40px;
  79. border : 2px groove #FF7E00;
  80. }
  82. div#right {
  83. position : relative;
  84. float : right;
  85. width : 172px;
  86. }
  88. #rcolumn1 {
  89. position : relative;
  90. height : 131px;
  92. }


Message édité par burgergold le 16-06-2003 à 18:49:08

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 18:35:56   

Reply

Marsh Posté le 16-06-2003 à 18:40:55    

HotShot a écrit :

URL ? :D


 
jsuis un peu biaisé pour te répondre :D
 
jdéveloppe sur easyphp chez moi et mon foutu internet gateway a pas l'air d'apprécier les connexions web extérieur
 
edit: jvais tenter de débloquer le port rapidement


Message édité par burgergold le 16-06-2003 à 18:42:16

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 18:45:03    

HotShot a écrit :

Nan c bon j'ai recopié dans Composer...
 
Je vois pas de problème... le texte (en recopiant à l'infini "bonjour les amis" ) est bien disposé en une belle colonne...
 
Tu testes avec quel browser ?


 
IE6
 
le probleme c pas le texte lui meme, c vrai la section "plus foncé" qui est plus indenté vers la droite que celle du logo
 
edit: modifie la section Middle par celle ci et tu vas voir une différence
 

Code :
  1. <!-- Middle ========================= -->
  2.       <div id="middle">
  3.          <!-- Banner ========================= -->
  4.          <div id="banner">
  5.             <img src="images/banner.jpg" alt="" />
  6.          </div>
  7.          <div id="body">
  8.             <div id="page">
  9.                Bonjour les amis
  10.             </div>
  11.          </div>
  12.          <div id="body">
  13.             <div id="page">
  14.                Bonjour les amis
  15.             </div>
  16.          </div>
  17.       </div>


Message édité par burgergold le 16-06-2003 à 18:46:07

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 18:58:39    

HotShot a écrit :

A nouveau, aucun problème.
 
par contre je me souviens que IE5 a un léger problème, quand un bloc est situé à côté d'un autre bloc ayant une propriété "float" : le contenu est décalé de qq pixels, en face du bloc floaté... bug de MSIE... pas super gênant, un décalage de 3 pixels vers la droite pour les qq premières lignes d'un texte...


 
mouep c pas mal ca
 
c pas trop genant si c du texte, mais là moi jai une boite de couleur plus foncé pour chaque section, donc ca parait plutot


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 19:00:17    

sous mozilla ca passe #1
 
hum kess que jfais avec ca...
 
selon vous ca risque d'etre corriger dans IE ?


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 19:01:33    

HotShot a écrit :

Me semble que c possible de corriger le problème, mais je sais plus comment  :sweat: sûrement en jouant avec des dimensions... fixées ou % ou relatives ou...


 
les dimensiosn de ma section central me sont inconnu, c'est l'espace restant entre ma section left et ma section right
 
lorsque je fixe width: 100%; dans mon css pour #banner, #body, #bottom, jme retrouve avec un gros espace libre au dessus de #banner


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 19:02:21    

HotShot a écrit :

Non, le développement de IE est arrêté :D ça restera définitivement plein de bugs :D


 
 :lol:  
 
 :sweat:  
 
 :cry:


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 19:06:13    

jcommence tout juste en xhtml, avec quelques chose qui me parait quand meme tres simple, le MSIE a un bug juste à cet endroit
 
pas très sympa comme 1er expérience


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 19:27:20    

jviens de trouver que si je n'ai pas de section gauche, le probleme ne se présente pas


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 20:14:35    

HotShot a écrit :

Ben oui, c ce que je t'ai dit plus haut...


 
 :D


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 20:14:35   

Reply

Marsh Posté le 16-06-2003 à 20:15:19    

Reply

Marsh Posté le 16-06-2003 à 21:13:39    

gm_superstar a écrit :

Ouaip, bug de IE : http://forum.hardware.fr/forum2.ph [...] 221&cat=10
 
Et si tu mets ton "middle" en flottant aussi ?


 
float quoi? float ya que left ou right comme parametre?
 
alors quelque chose comme
 
left float left
middle float right
right float right?


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 21:29:08    

Nan, quand on met 2 blocs consécutifs en flottant il se mettent cote à cote (s'il y a de la place) Donc tu mets le div de gauche et middle en "float: left;"


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-06-2003 à 21:35:25    

mouep bien là mon middle prends seulement la largeur du logo et non toute la largeur disponible


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 16-06-2003 à 21:46:31    

vais devoir survivre avec le bug alors


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Sujets relatifs:

Leave a Replay

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