Probleme dans le centrage de mon site

Probleme dans le centrage de mon site - HTML/CSS - Programmation

Marsh Posté le 23-06-2005 à 16:37:54    

Bonjour, je souhaite centrer mon site horizontalement, j'ai lu les tuto sur alsacréation et sur openweb, mais je n'ai pas réussit a resoudre mon probleme, desolée de vous deranger une fois de plus pour une connerie, voici mon code :  
 
La css

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 0.6em;
  4. margin: auto;
  5. padding: auto;
  6. background-color:#F2F7F7;
  7. color:#1D6186;
  8. }
  10. #conteneur {
  11.      position: absolute;
  12. /* pour center le site */
  13.      width: 100%;
  14.      height : 100%;
  15.      margin-left: auto;
  16.      margin-right: auto;
  17.      text-align: left;
  18.      /*margin: 1em 15%;*/
  19. }
  21. #coinHautGauche {
  22. position : absolute;
  23. left : 10px;
  24. top : 10px;
  25. width : 210px;
  26. height : 150px;
  27. background-color : #F2F7F7;
  28. }
  29. .imageCoin {
  30. /*position: absolute;*/
  31. height: 140px; width: 210px;
  32. top : 15px;
  33. left : 15px;
  34. background-repeat: no-repeat;
  35. font-size:0px;
  36. background: url(logo_coin.JPG);
  37. }
  39. #menuGauche {
  40. position: absolute;
  41. left: 10px;
  42. top : 150px;
  43. width : 176px;
  44. background-color: #1D6186;
  45. /*padding-left:10px;*/
  46. padding-top:10px;
  47. height:expression(this.scrollHeight < 400? "400px" : "auto" );
  48. min-height: 400px;
  49. text-align : left;
  50. font-weight: bold;
  51. background: url(fondMenuGauche.JPG);
  53. }
  58. #menuHaut {
  59. position : absolute;
  60. left : 220px;
  61. top : 10px;
  62. width : 570px;
  63. height : 150px;
  64. background-color: #F2F7F7;
  65. font-weight: bold;
  66. /*padding-left:20px;
  67. padding-top:20px;*/
  68. }
  69. .menuHaut {
  70. height : 150px;width:580px;
  71. background-repeat : no-repeat;
  72. font-size:0px;
  73. background : url(haut_icones.JPG);
  74. padding-top:-10;
  75. }
  78. #centre {
  79. position:absolute;
  81. top : 220px;
  82. left : 200px;
  83. padding-top: 20px;
  84. padding-left: 20px;
  85. width : 600px;
  86. /* fixe une hauteur mini  !!TRES IMPORTANT!!*/
  87. height:expression(this.scrollHeight < 450? "450px" : "auto" );
  88. min-height: 100px;
  89. background-color:#F2F7F7;
  90. }
  92. #centre p {
  93. text-align: justify;
  94. }


et mon template :  
 

Code :
  1. <html>
  2. <head>
  3. <title>
  4. </title>
  5. <style type="text/css" media="screen">
  6.  @import url("style/style.css" );
  7. </style>
  8. </head>
  9. <body>
  10. <!--<div align="center">-->
  11. <div id="conteneur" align="center">
  12. <div id="coinHautGauche">
  13.  <div class="imageCoin">
  14.  </div>
  15. </div>
  16. <div id="menuHaut">
  17.  <div class="menuHaut">
  18.  </div>
  20.  <ul>
  21.   <li>....   </li>
  22.  </ul>
  26. </div>
  29. <div id="menuGauche">
  31.  <div class="menuGauche" name="mg">
  33.  <ul>
  34.       <li>.... </li>
  36.  </ul>
  38.  </div>
  40.  <div class="bas">
  41.  </div>
  43. </div>
  46. <div id="centre">
  47.            {centre}
  48. </div>
  50. </div>
  51. </body>
  52. </html>


Je n'ai rien passé en xhtml pour le moment, je le fais des que je regle ce probleme  :ange:  
Quelqu'un pourrait m'aider sur ce probleme???
Si vous voyez des trucs horribles dans mon code n'hésitez pas, je suis la pour apprendre
Merci par avance, Karine

Reply

Marsh Posté le 23-06-2005 à 16:37:54   

Reply

Marsh Posté le 23-06-2005 à 16:40:03    

Le résultat est visible quelquepart? C'est pas que j'aime pas lire du code, mais on voit tout de suite mieux le soucis...[:joce]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 16:40:45    

Je ne pense pas avoir vu un quelconque align="center" sur openweb ou alsacreation ;) C'est un attribut qui existe plus... Sinon, il faut virer le position: absolute sur #conteneur...

Reply

Marsh Posté le 23-06-2005 à 16:42:48    

l'attribut name n'est plus disponible sur les <div> non plus :o
 
et le nommage n'est pas sémantique :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-06-2005 à 16:43:21    

non desolée skeye, je fais un site Intranet donc je peux pas l'héberger a la rigeur je peux le metter sur mon compte free mais que ce soir

Reply

Marsh Posté le 23-06-2005 à 16:44:16    

karinou a écrit :

non desolée skeye, je fais un site Intranet donc je peux pas l'héberger a la rigeur je peux le metter sur mon compte free mais que ce soir


euh ben en attendant les remarques de florent et masklinn me paraissent judicieuses...;)


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 16:47:22    

J'ai virer vos remarques aucuns changements, mais par contre masklinn, je ne vois pas ce que tu veux dire par nommage non sémantique ???

Reply

Marsh Posté le 23-06-2005 à 16:50:29    

karinou a écrit :

J'ai virer vos remarques aucuns changements, mais par contre masklinn, je ne vois pas ce que tu veux dire par nommage non sémantique ???


 
tes ids/classes ont des noms relatifs à leur positionnement, plutôt qu'à leur fonction/leur sens. ;)
Mais c'est pas ça qui changera le résultat...:D


Message édité par skeye le 23-06-2005 à 16:50:57

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 16:52:35    

Tiens pourquoi le conteneur à un width 100% ? Ca va pas aider pour le centrage :(

Reply

Marsh Posté le 23-06-2005 à 16:54:08    

euh...oui.[:dawa]
les margin-x:auto servent plus à grand chose, là...[:dawa]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 16:54:08   

Reply

Marsh Posté le 23-06-2005 à 16:54:20    

karinou a écrit :

J'ai virer vos remarques aucuns changements, mais par contre masklinn, je ne vois pas ce que tu veux dire par nommage non sémantique ???


Le HTML est un langage de description de contenu: il explique ce que signifient les différentes zones du document.
 
On considère dans la création "moderne" des pages web qu'il faut séparer les données informationnelles des données présentationnelles (séparer le contenu et le contenant, séparer le fond et la forme): d'un côté on met l'information séparée en blocs logiques/sémantiques (le HTML) et de l'autre la manière dont on voudrait que l'information s'affiche (le CSS)
 
Dans ton document

Citation :

<div id="conteneur">


est très bien (en termes de nommage) mais

Citation :

<div id="coinHautGauche">
<div class="imageCoin">
<div id="menuHaut">
<div class="menuHaut">
<div id="menuGauche">
<div class="menuGauche" name="mg">
<div class="bas">
<div id="centre">


n'ont strictement aucun sens sémantique: ce sont des données de présentation, et de présentation uniquement.
 
Résultat, si un jour tu veux changer ton CSS pour modifier complètement l'allure du site, l'un des gros avantages de l'approche HTML+CSS avec séparation fond/forme (cf http://www.csszengarden.com pour la flexibilité du combo HTML+CSS) tu seras dans l'obligation... de refaire ton code HTML parce qu'il sera inutilisable, le document HTML ne correspondant plus à ce qui s'affiche à l'écran.
 
Accessoirement, tu nestes trop, il y a trop de divs pour rien.


Message édité par masklinn le 23-06-2005 à 16:54:54

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-06-2005 à 16:55:17    

skeye a écrit :

tes ids/classes ont des noms relatifs à leur positionnement, plutôt qu'à leur fonction/leur sens. ;)
Mais c'est pas ça qui changera le résultat...:D


oki oki :p

Reply

Marsh Posté le 23-06-2005 à 16:59:27    

ouep c sur :s pour le width, je viens de les mettre a 80% mais ca ne change pas grand chose pour l'istant
 
masklinn >> Merci pour ta remarque tres contructive, je vais mettre ca en application sur le champ (merci a FlorenG et à skeye aussi par la meme occasion :p)


Message édité par karinou le 23-06-2005 à 17:00:25
Reply

Marsh Posté le 23-06-2005 à 17:01:03    

karinou a écrit :

ouep c sur :s pour le width, je viens de les mettre a 80% mais ca ne change pas grand chose pour l'istant
 
masklinn >> Merci pour ta remarque tres contructive, je vais mettre ca en application sur le champ (merci a FlorenG et à skeye aussi par la meme occasion :p)


...et si tu spécifies pas de width, il se passe quoi? :??:


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:05:38    

Bouh, toujours rien,  
Enfin, vu que ca fait un petit moment que je bataille sur cette histoire, j'ai rajouté pleins de trucs (inutiles) qui doivent empechés les bons attributs de faire leur role de centrage :s

Reply

Marsh Posté le 23-06-2005 à 17:09:50    

Vous voulez que je vous remette le code modifié??

Reply

Marsh Posté le 23-06-2005 à 17:11:43    

karinou a écrit :

Vous voulez que je vous remette le code modifié??


je viens de faire un test con. Mon html :

Code :
  1. <html>
  2. <head><title></title>
  3. <link rel="stylesheet" href="test.css">
  4. </head>
  5. <body>
  6. <div id="conteneur">
  7. <p>Un paragraphe</p>
  8. </div>
  9. </body>
  10. </html>


 
Mon css :

Code :
  1. #conteneur{
  2.             margin:auto;
  3.             width:50%;
  4.             }


 
Ca marche, j'ai une marge de 25% de chaque coté de mon div...


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:20:30    

mais c'est fou ca, je viens de me mettre la meme chez moi et tout rese aligné sur la gauche

Reply

Marsh Posté le 23-06-2005 à 17:21:52    

karinou a écrit :

mais c'est fou ca, je viens de me mettre la meme chez moi et tout rese aligné sur la gauche


[:hide]
Ah oui, tiens, IE s'en fout...j'avais testé que sous firefox. ;)


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:23:39    

la solution serait je suppose de spécifier exactement la marge à appliquer plutôt que la mettre en auto...je teste.
 
[edit]
 
Ca marche. En mettant margin-left:25%; et margin-right:25%; à la place de margin:auto; dans l'exemple précédent.


Message édité par skeye le 23-06-2005 à 17:24:56

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:23:43    

skeye a écrit :

[:hide]
Ah oui, tiens, IE s'en fout...j'avais testé que sous firefox. ;)


Mais meme chez moi sous Fofox ca marche pas

Reply

Marsh Posté le 23-06-2005 à 17:25:22    

karinou a écrit :

Mais meme chez moi sous Fofox ca marche pas


[:urd]
C'est collé à gauche?[:mlc]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:25:29    

faut rajouter  
 
BODY{
text-align:center /*pour ce con de IE*/
}
 
c'est un des nombreux défauts de IE

Reply

Marsh Posté le 23-06-2005 à 17:26:08    

gatsusat a écrit :

faut rajouter  
 
BODY{
text-align:center /*pour ce con de IE*/
}
 
c'est un des nombreux défauts de IE


 
sans déconner, ça marche ça?[:joce]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:28:37    

Bon du coup, j'ai tout le texte de mon site centré :s c'est pas tres cool, je l'arrange
Et oui tout est encore collé a gauche

Reply

Marsh Posté le 23-06-2005 à 17:28:54    

Ah ben oui...obligé de remettre le text-align à left pour le #conteneur, évidemment, mais ça a l'air de marcher...[:moule_bite]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:29:29    

karinou a écrit :

Bon du coup, j'ai tout le texte de mon site centré :s c'est pas tres cool, je l'arrange
Et oui tout est encore collé a gauche


 
text-align à left pour le #conteneur ;)


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:30:45    

(au passage, c'est expliqué ici, tout ça :
http://openweb.eu.org/articles/initiation_centrage/ )


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:34:36    

Bon bah, j'ai encore tout aligné sur la gauche :'(
Je vous renvoie le code
 
la css :

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 0.6em;
  4. /*margin: auto;
  5. padding: auto;*/
  6. background-color:#F2F7F7;
  7. text-align:center; /*pour ce con de IE*/
  8. color:#1D6186;
  9. }
  10. #conteneur {
  11.      /*position: absolute;*/
  12. /* pour center le site */
  13.      /*width: 80%;*/
  14.     margin:auto;
  15.     width:50%;
  16.     text-align : left;
  17.      /*height : 100%;
  18.      margin-left: auto;
  19.      margin-right: auto;*/
  20.      /*text-align: left;*/
  21.      /*margin: 1em 15%;*/
  22. }
  24. #conteneurLogo {
  25. position : absolute;
  26. left : 10px;
  27. top : 10px;
  28. width : 210px;
  29. height : 150px;
  30. background-color : #F2F7F7;
  31. }
  32. .imageLogo {
  33. /*position: absolute;*/
  34. height: 140px; width: 210px;
  35. top : 15px;
  36. left : 15px;
  37. background-repeat: no-repeat;
  38. font-size:0px;
  39. background: url(logo_coin.JPG);
  40. }
  42. #menuRubriques {
  43. position: absolute;
  44. left: 10px;
  45. top : 150px;
  46. width : 176px;
  47. background-color: #1D6186;
  48. /*padding-left:10px;*/
  49. padding-top:10px;
  50. height:expression(this.scrollHeight < 400? "400px" : "auto" );
  51. min-height: 400px;
  52. text-align : left;
  53. font-weight: bold;
  54. background: url(fondMenuGauche.JPG);
  56. }
  61. #menuFonctions {
  62. position : absolute;
  63. left : 220px;
  64. top : 10px;
  65. width : 570px;
  66. height : 150px;
  67. background-color: #F2F7F7;
  68. font-weight: bold;
  69. /*padding-left:20px;
  70. padding-top:20px;*/
  71. }
  72. .menuFonctions {
  73. height : 150px;width:580px;
  74. background-repeat : no-repeat;
  75. font-size:0px;
  76. background : url(haut_icones.JPG);
  77. padding-top:-10;
  78. }
  81. #contenu {
  82. position:absolute;
  84. top : 220px;
  85. left : 200px;
  86. padding-top: 20px;
  87. padding-left: 20px;
  88. width : 600px;
  89. /* fixe une hauteur mini  !!TRES IMPORTANT!!*/
  90. height:expression(this.scrollHeight < 450? "450px" : "auto" );
  91. min-height: 100px;
  92. background-color:#F2F7F7;
  94. }
  96. #contenu p {
  97. text-align: justify;
  98. }


 
et le template

Code :
  1. <html>
  2. <head>
  3. <title>
  4. </title>
  5. <style type="text/css" media="screen">
  6.  @import url("style/style.css" );
  7. </style>
  8. </head>
  9. <body>
  10. <div id="conteneur">
  11. <div id="conteneurLogo">
  12.  <div class="imageLogo">
  13.  </div>
  14. </div>
  15. <div id="menuFonctions">
  16.  <div class="menuFonctions">
  17.  </div>
  19. </div>
  21. <div id="menuRubriques">
  23.  <div class="menuRubriques">
  25.     
  27.  </div>
  29.  <div class="bas">
  30.  </div>
  32. </div>
  35. <div id="contenu">
  36. {centre}
  38. </div>
  40. </div>
  41. </body>
  42. </html>

Reply

Marsh Posté le 23-06-2005 à 17:36:22    

dans la css heu ils mettent des classes et moi je met des id(#, je sais pas si ca s'appelle comme ca)Le prbleme peut-il venir de la???

Reply

Marsh Posté le 23-06-2005 à 17:37:44    

non, classes et id sont des choses différentes, mais peuvent être utilisés indifféremment (mis à part de nouveau des questions de sémantique) dans ton cas...


Message édité par skeye le 23-06-2005 à 17:38:51

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:38:27    

t'as vérifié dans le source de la page générée que ton css était bon? (je vois vraiment pas le pb, en fait...[:joce])


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:41:30    

c'est pas mieux les regles sémantiques, j'ai changé les noms ???

Reply

Marsh Posté le 23-06-2005 à 17:47:39    

karinou a écrit :

c'est pas mieux les regles sémantiques, j'ai changé les noms ???


 
Sisi, mais la différence entre id et classe est principalement sémantique, aussi...;)
http://css.alsacreations.com/Bases [...] e-et-un-id


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 17:47:46    

Bon bah écoute, on va laisser tomber ca pour aujourd'hui peut etre que demain quelqu'un trouvera une solution!!
Entout cas, merci bcp pour ton aide, a bientot

Reply

Marsh Posté le 23-06-2005 à 17:51:08    

Code :
  1. body {
  2. text-align:center; /*pour ce con de IE*/
  3. }
  5. #conteneur {
  6.     margin: 0 auto;
  7.     width:50%;
  8.     text-align : left;
  9. }


 
 [:cabri74]
 
Si tu fais margin: auto, le auto s'applique a gauche, droite, haut & bas. (alors que margin: 0 auto; ça fait 0 en haut et en bas, mais auto sur gauche et droite)


Message édité par zapan666 le 23-06-2005 à 17:52:08

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 23-06-2005 à 17:52:04    

skeye c'est pas principalement sémantique, c'est aussi technique
 
quand en JS tu fais un getElementById('LeIdDeMonElement')
 
s'il y a 2 id ça ne le fait vraiment pas.

Reply

Marsh Posté le 23-06-2005 à 18:22:14    

gatsusat a écrit :

skeye c'est pas principalement sémantique, c'est aussi technique


Je t'encourage à lire la définition de 'principalement'.[:klem3i1]
Et au passage, c'est justement pour une question de sens qu'il y a ces limitations techniques...[:dawa]


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 23-06-2005 à 20:30:55    

karinou a écrit :

mais c'est fou ca, je viens de me mettre la meme chez moi et tout rese aligné sur la gauche


Faut mettre un doctype strict, et pas de déclaration XML...

Reply

Marsh Posté le 24-06-2005 à 08:43:28    

FlorentG a écrit :

Faut mettre un doctype strict, et pas de déclaration XML...


 
C'est à dire? je dois mettre quel doctype?
 
 
Par contre meme avec margin: 0 auto; ca ne change rien  :??:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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