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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme dans le centrage de mon site

 
 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Probleme dans le centrage de mon site

n°1128923
karinou
Posté le 23-06-2005 à 16:37:54  profilanswer
 

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

mood
Publicité
Posté le 23-06-2005 à 16:37:54  profilanswer
 

n°1128927
skeye
Posté le 23-06-2005 à 16:40:03  profilanswer
 

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 -
n°1128930
FlorentG
Posté le 23-06-2005 à 16:40:45  profilanswer
 

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

n°1128931
masklinn
í dag viðrar vel til loftárása
Posté le 23-06-2005 à 16:42:48  profilanswer
 

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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1128932
karinou
Posté le 23-06-2005 à 16:43:21  profilanswer
 

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

n°1128933
skeye
Posté le 23-06-2005 à 16:44:16  profilanswer
 

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 -
n°1128937
karinou
Posté le 23-06-2005 à 16:47:22  profilanswer
 

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

n°1128940
skeye
Posté le 23-06-2005 à 16:50:29  profilanswer
 

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 -
n°1128943
FlorentG
Posté le 23-06-2005 à 16:52:35  profilanswer
 

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

n°1128946
skeye
Posté le 23-06-2005 à 16:54:08  profilanswer
 

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


---------------
Can't buy what I want because it's free -
mood
Publicité
Posté le 23-06-2005 à 16:54:08  profilanswer
 

n°1128948
masklinn
í dag viðrar vel til loftárása
Posté le 23-06-2005 à 16:54:20  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°1128952
karinou
Posté le 23-06-2005 à 16:55:17  profilanswer
 

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

n°1128962
karinou
Posté le 23-06-2005 à 16:59:27  profilanswer
 

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
n°1128965
skeye
Posté le 23-06-2005 à 17:01:03  profilanswer
 

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 -
n°1128977
karinou
Posté le 23-06-2005 à 17:05:38  profilanswer
 

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

n°1128985
karinou
Posté le 23-06-2005 à 17:09:50  profilanswer
 

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

n°1128986
skeye
Posté le 23-06-2005 à 17:11:43  profilanswer
 

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 -
n°1128992
karinou
Posté le 23-06-2005 à 17:20:30  profilanswer
 

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

n°1128998
skeye
Posté le 23-06-2005 à 17:21:52  profilanswer
 

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 -
n°1129001
skeye
Posté le 23-06-2005 à 17:23:39  profilanswer
 

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 -
n°1129003
karinou
Posté le 23-06-2005 à 17:23:43  profilanswer
 

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

n°1129005
skeye
Posté le 23-06-2005 à 17:25:22  profilanswer
 

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 -
n°1129006
gatsusat
Posté le 23-06-2005 à 17:25:29  profilanswer
 

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

n°1129007
skeye
Posté le 23-06-2005 à 17:26:08  profilanswer
 

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 -
n°1129010
karinou
Posté le 23-06-2005 à 17:28:37  profilanswer
 

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

n°1129011
skeye
Posté le 23-06-2005 à 17:28:54  profilanswer
 

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 -
n°1129017
skeye
Posté le 23-06-2005 à 17:29:29  profilanswer
 

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 -
n°1129019
skeye
Posté le 23-06-2005 à 17:30:45  profilanswer
 

(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 -
n°1129025
karinou
Posté le 23-06-2005 à 17:34:36  profilanswer
 

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>

n°1129027
karinou
Posté le 23-06-2005 à 17:36:22  profilanswer
 

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

n°1129030
skeye
Posté le 23-06-2005 à 17:37:44  profilanswer
 

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 -
n°1129031
skeye
Posté le 23-06-2005 à 17:38:27  profilanswer
 

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 -
n°1129037
karinou
Posté le 23-06-2005 à 17:41:30  profilanswer
 

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

n°1129041
skeye
Posté le 23-06-2005 à 17:47:39  profilanswer
 

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 -
n°1129042
karinou
Posté le 23-06-2005 à 17:47:46  profilanswer
 

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

n°1129045
zapan666
Tout est relatif
Posté le 23-06-2005 à 17:51:08  profilanswer
 

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 !
n°1129048
gatsusat
Posté le 23-06-2005 à 17:52:04  profilanswer
 

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.

n°1129071
skeye
Posté le 23-06-2005 à 18:22:14  profilanswer
 

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 -
n°1129157
FlorentG
Posté le 23-06-2005 à 20:30:55  profilanswer
 

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

n°1129431
karinou
Posté le 24-06-2005 à 08:43:28  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Suivante
Page Précédente
Haut de page 

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

  Probleme dans le centrage de mon site

 

Sujets relatifs
Problème de clef etrangèreDonnez moi vos avis sur mon site
Probleme d'affichage a cause des annonces de googleProbleme avec FIREFOX et EBAY
Une idée pour créer un site populaire?Probleme d'affichage css (retour a la ligne)
probleme de timersite elastique
Besoin d'aides pour un siteProblème champ texte firefox
Plus de sujets relatifs à : Probleme dans le centrage de mon site

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

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)