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

 
 


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

Probleme dans le centrage de mon site

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

Reprise du message précédent :

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 24-06-2005 à 08:43:28  profilanswer
 

n°1129442
j_lecruel
☀ ☁ ☂
Posté le 24-06-2005 à 08:54:39  profilanswer
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

n°1129459
karinou
Posté le 24-06-2005 à 09:02:45  profilanswer
 

oki merci, ca ne change toujours rien au niveau de la position les div sont toujours alignés sur la gauche, par contre maintenant, le style de mes liens n'est plus reconnu, je me trouve un validateur xHTML et je repasse

n°1129468
skeye
Posté le 24-06-2005 à 09:09:12  profilanswer
 

http://validator.w3.org/


---------------
Can't buy what I want because it's free -
n°1129485
karinou
Posté le 24-06-2005 à 09:28:43  profilanswer
 

Code :
  1. body {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 0.6em;
  4. background-color:#F2F7F7;
  5. text-align:center; /*pour ce con de IE*/
  6. color:#1D6186;
  7. }
  8. tr, td {
  9. font-size : 0.8em;
  10. }
  11. h1 {
  12. font-size : 12px;
  13. font-family :  Verdana, Arial, Helvetica, sans-serif;
  14.    color : #FFAC42;
  15. font-weight: bold;
  16. text-align: center;
  17.   }
  18.  
  19. h2 {
  20. font-size : 10px;
  21. font-family :  Verdana, Arial, Helvetica, sans-serif;
  22.    color : #1D6186;
  23. font-weight: bold;
  24. text-decoration: underline;
  26. }
  28. h3 {
  29. font-size : 11px;
  30. font-family :  Verdana, Arial, Helvetica, sans-serif;
  31.    color : #FFAC42;
  32. font-weight: bold;
  33. text-decoration: none;
  34. text-align: center;
  35. }
  37. #conteneur {
  38.     margin: 0 auto;
  39.     width:50%;
  40.     text-align : left;
  41. }
  43. #conteneurLogo {
  44. position : absolute;
  45. left : 10px;
  46. top : 10px;
  47. width : 210px;
  48. height : 150px;
  49. background-color : #F2F7F7;
  50. }
  51. .imageLogo {
  52. height: 140px; width: 210px;
  53. top : 15px;
  54. left : 15px;
  55. background-repeat: no-repeat;
  56. font-size:0px;
  57. background: url(logo_coin.JPG);
  58. }
  60. #menuRubriques {
  61. position: absolute;
  62. left: 10px;
  63. top : 150px;
  64. width : 176px;
  65. background-color: #1D6186;
  66. padding-top:10px;
  67. min-height: 400px;
  68. text-align : left;
  69. font-weight: bold;
  70. background: url(fondMenuGauche.JPG);
  71. }
  75. #menuRubriques a {
  76. display: block;
  77. color:#A8D1E7;
  78. text-decoration:none;
  79. Margin-top : 15px;
  80. }
  81. #menuRubriques a:hover {
  82. text-decoration: none;
  83. color : #FFAC42;
  84. }
  86. #menuRubriques a:active{
  87. text-decoration: none;
  88. color : #FFAC42;
  89. }
  91. /*Item du menu de gauche*/
  92. #menuRubriques ul {
  93. list-style-type: none;
  94. text-align : center;
  95. }
  97. /*position des puces*/
  99. #menuRubriques li {
  100. background-image: url(bouton.JPG);
  101. background-repeat: no-repeat ;
  102. padding-left: 40px;
  103. margin-left: -30px;
  104. margin-top: 0px;
  105. text-align : center;
  106. background-position:0% 50%;
  107. }
  109. #menuFonctions {
  110. position : absolute;
  111. left : 220px;
  112. top : 10px;
  113. width : 570px;
  114. height : 150px;
  115. background-color: #F2F7F7;
  116. font-weight: bold;
  117. }
  118. .menuFonctions {
  119. height : 150px;width:580px;
  120. background-repeat : no-repeat;
  121. font-size:0px;
  122. background : url(haut_icones.JPG) repeat;
  123. }
  125. #menuFonctions ul,li {
  126. display: inline;
  127. margin : 0px;
  128. padding : 10px;
  129. text-align : center;
  130. list-style-type: none;
  131. float : left;
  132. }
  134. #menuFonctions a {
  136. color:#1D6186;
  137. Margin-top : 15px; /*espace entre les rubriques*/
  138. }
  140. #menuFonctions a:hover {
  141. text-decoration: none;
  142. color : #FFAC42;
  143. }
  145. #menuFonctions a:active {
  146. text-decoration: none;
  147. color : #FFAC42;
  148. }
  150. #contenu {
  151. position:absolute;
  152. top : 220px;
  153. left : 200px;
  154. padding-top: 20px;
  155. padding-left: 20px;
  156. width : 600px;
  157. min-height: 100px;
  158. background-color:#F2F7F7;
  160. }
  162. #contenu p {
  163. text-align: justify;
  164. }
  165. .textecentre{
  166. text-align:center;
  167. }
  168.  
  169. .retour{
  170. text-decoration: underline overline;
  171. font-size : 12px;
  172.    font-family :  Verdana, Arial, Helvetica, sans-serif;
  173.    color : #A8D1E7;
  174.    text-align:center;
  175. }
  177. .lienCR {
  178. text-decoration: underline;
  179. font-family :  Verdana, Arial, Helvetica, sans-serif;
  180.    color : #1D6186;
  181.    font-weight: bold;
  182. }
  183. a {
  184. text-decoration: underline;
  185. font-family :  Verdana, Arial, Helvetica, sans-serif;
  186.    color : #1D6186;
  187. }
  188. a:hover{
  189. text-decoration: none;
  190. }


 
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>
  6. </title>
  7. <style type="text/css" media="screen">
  8.  @import url("style/style.css" );
  9. </style>
  10. </head>
  11. <body>
  12. <div id="conteneur">
  13. <div id="conteneurLogo">
  14.  <div class="imageLogo">
  15.  </div>
  16. </div>
  17. <div id="menuFonctions">
  18.  <div class="menuFonctions">
  19.  </div>
  21.  ...
  24. </div>
  26. <div id="menuRubriques">
  28.  <div class="menuRubriques">
  30.        ...
  32.  </div>
  34.  <div class="bas">
  35.  </div>
  37. </div>
  40. <div id="contenu">
  41. {centre}
  43. </div>
  45. </div>
  46. </body>
  47. </html>


 
Voila, je suis vraiment désolée de vous souler avec ce truc, mais je ne sais pas du tout comment faire et je n'ai aps trop le choix, il faut que j'y arrive  :??:  
 
 
 
 
 

n°1129496
skeye
Posté le 24-06-2005 à 09:42:02  profilanswer
 

Bon, pour (re-)commencer, est-ce que ta feuille de style est bien importée, là?
Tu disais tester sous firefox, as-tu installé l'extension web developper, qui est bien pratique?


---------------
Can't buy what I want because it's free -
n°1129499
karinou
Posté le 24-06-2005 à 09:48:56  profilanswer
 

Je viens de l'installer, qu'est ce que je dois tester avec ? (je ne l'ai jamais utilisée)

n°1129504
skeye
Posté le 24-06-2005 à 09:53:07  profilanswer
 

karinou a écrit :

Je viens de l'installer, qu'est ce que je dois tester avec ? (je ne l'ai jamais utilisée)


 
Tu as l'outil "outline", qui est pratique, pour ton problème actuel...par exemple  tu fais outline->outline custom elements et dans une des cases, tu mets div#conteneur.
Ca te montrera exactement ce que donne ton css...


---------------
Can't buy what I want because it's free -
n°1129511
karinou
Posté le 24-06-2005 à 10:00:27  profilanswer
 

En fait, je pense avoir trouver l'erreur, l'outil me detecte tous mes divs sauf le div #conteneur!!!
 
Par contre je ne sais absolument pas comment résoudre ce probleme. En tout cas merci pour l'extension elle est bien pratique

n°1129516
skeye
Posté le 24-06-2005 à 10:05:06  profilanswer
 

karinou a écrit :

En fait, je pense avoir trouver l'erreur, l'outil me detecte tous mes divs sauf le div #conteneur!!!
 
Par contre je ne sais absolument pas comment résoudre ce probleme. En tout cas merci pour l'extension elle est bien pratique


 
Utilise firefox pour afficher le code source de la page générée (ctrl+u, ou view source dans web developper), tu devrais voir le problème...


---------------
Can't buy what I want because it's free -
mood
Publicité
Posté le 24-06-2005 à 10:05:06  profilanswer
 

n°1129519
karinou
Posté le 24-06-2005 à 10:09:50  profilanswer
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>
  6. </title>
  7. <style type="text/css" media="screen">
  8.  @import url("style/style.css" );
  9. </style>
  10. </head>
  11. <body>
  12. <div id="conteneur">
  13. <div id="conteneurLogo">
  14.  <div class="imageLogo">
  15.  </div>
  17. </div>
  18. <div id="menuFonctions">
  19.  <div class="menuFonctions">
  20.  </div>
  23.   ...
  25. </div>
  27. <div id="menuRubriques">
  29.  <div class="menuRubriques">
  31.         ...
  33.  </div>
  35.  <div class="bas">
  36.  </div>
  38. </div>
  41. <div id="contenu">
  42.  ...........
  43. </div>
  45. </div>
  46. </body>
  47. </html>


 
Je suis désolée mais je ne vois aps ce qu'il vas pas, j'ai cc le code que ma donner le wiew source de fox
 
 

n°1129520
skeye
Posté le 24-06-2005 à 10:12:40  profilanswer
 

Et css->edit css te donne bien le bon css?


---------------
Can't buy what I want because it's free -
n°1129522
karinou
Posté le 24-06-2005 à 10:14:12  profilanswer
 

oui oui, c'est bien le bon aussi

n°1129524
skeye
Posté le 24-06-2005 à 10:15:17  profilanswer
 

karinou a écrit :

oui oui, c'est bien le bon aussi


...et le outline ne te surligne pas ton conteneur? [:wam]


---------------
Can't buy what I want because it's free -
n°1129526
karinou
Posté le 24-06-2005 à 10:15:52  profilanswer
 

non :( il me souligne mes 4 autres div mais pas celui la

n°1129532
skeye
Posté le 24-06-2005 à 10:22:20  profilanswer
 

[:pingouino]
Bon, je teste ton code, parce-que là je comprends pas.:o


---------------
Can't buy what I want because it's free -
n°1129538
skeye
Posté le 24-06-2005 à 10:26:09  profilanswer
 

Bon, chez moi ça outline bien quand je fais un outline custom elements et que je rentre div#conteneur.
Par contre ça prend toute la largeur, je regarde de plus près.


---------------
Can't buy what I want because it's free -
n°1129541
karinou
Posté le 24-06-2005 à 10:27:12  profilanswer
 

roooh mais c'est fou ca!!! :'(:'(:'(:

n°1129557
skeye
Posté le 24-06-2005 à 10:35:35  profilanswer
 

Bon, j'ai repris ton code, viré tous les position:absolute, et ça a l'air de faire ce que tu veux... ;)


---------------
Can't buy what I want because it's free -
n°1129565
karinou
Posté le 24-06-2005 à 10:39:43  profilanswer
 

heuuuuuuuu y'a du mieux disons que mainteant les éléments bougent en focntion du redimmensionnement de la fenetre, mais par contre tous les div sont en bazard et se baladent partout dans ma page. Mais deja ya du mieux!!! :):)
 
Respect jeune homme  :jap:  :jap:  :jap:  
 
Et ecore un grand gran merci


Message édité par karinou le 24-06-2005 à 10:40:15
n°1129579
skeye
Posté le 24-06-2005 à 10:48:03  profilanswer
 

De rien, j'ai aussi beaucoup galéré à mes débuts dans les css...[:joce]
Conseil : vas-y progressivement, en vérifiant à chaque étape que tes dernières modifs font ce que tu veux, et si ce n'est pas le cas efface bien le code incorrect... ;)


---------------
Can't buy what I want because it's free -
n°1129582
karinou
Posté le 24-06-2005 à 10:49:25  profilanswer
 

Par contre maintenant, il faut que je raligne tout par rapport a mon conteneur et du coup je ne fais pas comment faire.
Par exemple en haut a gauche, j'ai mon div #conteneurLogo, je voudrais que le div #MenuFonctions soit colé a sa droite.
J'ai l'impression que maintenant, il ne me respecte plus du tout les attributs top et left :??:

n°1129584
karinou
Posté le 24-06-2005 à 10:50:11  profilanswer
 

skeye a écrit :

De rien, j'ai aussi beaucoup galéré à mes débuts dans les css...[:joce]
Conseil : vas-y progressivement, en vérifiant à chaque étape que tes dernières modifs font ce que tu veux, et si ce n'est pas le cas efface bien le code incorrect... ;)


Merci du conseil  :D  :D

n°1129600
karinou
Posté le 24-06-2005 à 11:06:09  profilanswer
 

Donc nouvelle question à mon probleme. Comment position des div à l'interrieur d'une grosse balise div contenant tout les autres?
 
Merci par avance

n°1129603
skeye
Posté le 24-06-2005 à 11:09:36  profilanswer
 

karinou a écrit :

Donc nouvelle question à mon probleme. Comment position des div à l'interrieur d'une grosse balise div contenant tout les autres?
 
Merci par avance


 
De la même manière...
Tu peux considérer que ton #conteneur remplace ton body, puisque finalement c'est lui qui va tout contenir.


---------------
Can't buy what I want because it's free -
n°1129612
karinou
Posté le 24-06-2005 à 11:16:31  profilanswer
 

Ben dans ce cas la alors pour tous mes div sont-ils alignés en colonne au lieu de respecter mes positions????
 
Je suis désolée je suis trop une merde, incapble de me debrouillée tte seule :'(
 
EDIT Est ce que les positions réelles sont-elles encore valables, parce que pour l'instant les divs étaient placés grâce à des top:50px; left:250px;??


Message édité par karinou le 24-06-2005 à 11:19:37
n°1129618
skeye
Posté le 24-06-2005 à 11:22:01  profilanswer
 

je crois que le mieux que je puisse faire, là, c'est te conseiller très vivement les articles ici:
http://openweb.eu.org/css/
 
Et tout particulièrement les 3 articles qui parlent du positionnement CSS :
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/
 
Ca devrait répondre à la plupart de tes questions, et mieux que je ne le ferais. ;)


---------------
Can't buy what I want because it's free -
n°1129666
karinou
Posté le 24-06-2005 à 11:57:20  profilanswer
 

Comment ca se fait que Firefox et IE aient une 50 aine de pixels de différence en hauteur, ca commence à faire beaucoup

n°1135149
pilou88
r.a.s.
Posté le 29-06-2005 à 19:58:05  profilanswer
 

A tu essayer ceci :

Code :
  1. #conteneur {
  2. position: absolute;
  3. width: 760px;
  4. left: 50%;
  5. margin-left: -380px;
  6. background-color:#FFFFFF;
  7. }


 
tu met la moitier de ton width en margin-left, et 50% en left, ce qui a pour effect de mettre a 50% du centre de ton #conteneur... C'est ptetre pas trés clair ce que je dis, mais j'ai vu cette technique sur alsacreations  :)


---------------
Pilouweb.info et Pilou Web Blog
mood
Publicité
Posté le   profilanswer
 

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

Aller à :
Ajouter une réponse
 

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

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