pb css

pb css - HTML/CSS - Programmation

Marsh Posté le 27-07-2005 à 08:40:14    

Bonjour à tous,  
 
J'ai un ptit souci avec les CSS.  
J'ai fait un ptit site tout en CSS. Le pb c'est que mon code CSS se trouve sur ma page index.php.  
 
Voici mon code de la page index.php :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <title>.:: Bienvenue sur A Vos Souhait ::. </title>
  4. <head>
  5. <style type="text/css">
  6. /* Définition des paramétres pour la balise body */
  7. body {
  8. margin-left: 0px;
  9.   margin-top: 0px;
  10.   margin-right: 0px;
  11.   margin-bottom: 0px;
  12. text-align: center;
  13. font: 0.8em "Trebuchet MS", helvetica, sans-serif;
  14. background-color: #fbcfb8;
  15. }
  17. .champs_form {
  18. border-width : 1px; 
  19. border-color : #000000;
  20. background-color : #FFFFFF;
  21. }
  23. .bouton {
  24.   color:#AD0000;
  25.   background-color:#FBCFB8;
  26.   font-size:11px;
  27.   font-family:arial;
  28.   font-weight:bold;
  29.   border-width:1px;
  30.   width:85px;
  31.   text-align:center;
  32.   border-color:#000000;
  33. }
  35. .font_form {
  36.   font-family: 0.8em "Trebuchet MS", helvetica, sans-serif;
  37. font-size: small;
  38. color: #AD0000;
  39. font-weight: bold;
  40. text-decoration:none;
  41. }
  42. /* Définition des paramétres pour le conteneur principal*/
  43. div#conteneur
  44. {
  45. width: 760px ;
  46. margin: 0 auto ;
  47. text-align: left ;
  48. border: 1px solid #ad907e ;
  49. background: #fff ;
  50. }
  51. /* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
  52. /* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
  53. /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
  55. div#header1
  56. {
  57. height: 131px ;
  58. background: url(images/images/avossouhait2_01.gif) no-repeat left top;
  59. }
  61. div#header2
  62. {
  63. height: 66px ;
  64. width: 626px;
  65. margin-left: 135px;
  66.   background: url(images/images/avossouhait2_02.gif) no-repeat;
  67. }
  69. div#header3
  70. {
  71. height: 66px ;
  72. width: 626px;
  73. margin-left: 135px;
  74.   background: url(images/images/avossouhait2_03.gif) no-repeat;
  75. }
  76. /* On définit la hauteur de la partie header, contenant le titre du site */
  78. div#contenu
  79. {
  80. padding-left: 120px ;
  81. padding-right: 60px ;
  82. }
  84. div#contenu h2
  85. {
  86. padding-left: 38px ;
  87. line-height: 25px ;
  88. font-size: 1.4em ;
  89. color: #AD0000 ;
  90. border-bottom: 1px solid #DA0A71 ;
  91. background: url(images/petite_fleur.gif) no-repeat left center ;
  92. background-color: #FCEFD4;*/
  93. }
  95. div#contenu h3
  96. {
  97. margin-left: 30px ;
  98. padding-left: 5px ;
  99. color: #AD0000 ;
  100. font-size: small ;
  101. }
  103. div#contenu p
  104. {
  105.  text-align: justify ;
  106. text-indent: 2em ;
  107. line-height: 1.7em ;
  108. }
  110. div#contenu a
  111. {
  112. color: #AD0000 ;
  113. text-decoration: none;
  114. }
  116. div#contenu a:hover
  117. {
  118. color: #000;
  119. text-decoration: none;
  120. }
  121. /* On met en forme les liens contenu dans la page */
  123. p#footer
  124. {
  125.   margin: 0;
  126. height: 60px ;
  127. background: url(images/avossouhait_10.gif) no-repeat left bottom;
  128. }
  129. /* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
  131. pre
  132. {
  133. font-size: x-small;
  134. color:000;
  135. }
  136. /*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
  138. * html pre
  139. {
  140. width: 636px ;
  141. }
  143. pre span
  144. {
  145. color: #560 ;
  146. }
  147. /* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */
  149. pre span.comment
  150. {
  151. color: #b30000 ;
  152. }
  153. /* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
  155. ul#menu
  156. {
  157. height: 65px ;
  158. width: 625px;
  159. margin-left: 0px;
  160. margin-top: 0px;
  161. list-style-type: none ;
  162. }
  163. /* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
  164. ul#menu li
  165. {
  166. float: left ;
  167. text-align: center ;
  168. }/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */
  170. ul#menu li a
  171. {
  173.   width: 110px ;
  174. line-height: 25px ;
  175. font-size: small ;
  176. font-weight: bold ;
  177. letter-spacing: 1px ;
  178. color: #AD0000 ;
  179. display: block ;
  180. text-decoration: none ;
  181. border-right: 2px solid #DA0A71 ;
  183. }/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
  185. ul#menu li a:hover
  186. {
  187. background: url(images/images/avossouhait2_03.gif) repeat-x 0 0 ;
  188.   font-size: small ;
  189. font-weight: bold ;
  190. letter-spacing: 1px ;
  191. color: #AD0000 ;
  192. }/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */
  195. </style>
  197. </head>
  198. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  199. <meta http-equiv="Content-Style-Type" content="text/css" />
  200. <meta http-equiv="Content-Language" content="fr" />


Or, dès que je mets tous le code CSS dans une page "design.css" et que je l'appel par un lien  
 
<link rel="stylesheet" type="text/css" href="css/design.css">  
 
et bien je perds tout mes CSS, plus rien ne fonctionne que ce soit sur IE, firefox, mozilla !  
c'est à dire que je n'ai plus mes couleurs, les traits fins, ma police, les images sont bien présentss par contre...
Pourquoi ???  
 
Merci de m'éclairer sur ce point !!!

Reply

Marsh Posté le 27-07-2005 à 08:40:14   

Reply

Marsh Posté le 27-07-2005 à 08:53:25    

tu es sur ke tu appelle bien la bonne page?
verifie

Reply

Marsh Posté le 27-07-2005 à 08:54:53    

gatsusat a écrit :

tu es sur ke tu appelle bien la bonne page?
verifie


ok, je refais un essai avec le code css à part et je te dis ça.
 
merci !

Reply

Marsh Posté le 27-07-2005 à 09:02:02    

gatsusat a écrit :

tu es sur ke tu appelle bien la bonne page?
verifie


 
J'ai refais l'essai et voici ce qui ne passe pas (IE, Firefox, Mozilla) :
 
- je perds ma couleur de fond page (body)  
- mon "div conteneur" ne va pas tout en haut de la page, il y a un espace, une sorte de blanc
 
Pour le reste, ça va, la police est maintenue, les images sont bien présentes, les traits sont bien positionnés, bref mise à part ce que j'ai indiqué plus haut, tout va bien. C'est déjà ça !
 
Peux-tu m'aider ?
Merci !

Reply

Marsh Posté le 27-07-2005 à 09:21:53    

et ta cSS ya aucun code <style></style> dedand j'espère.
 
normalement ca devrait fonctionner a merveille
tu as du avoir un coup de polio
 
colle le putain de code HTML entier de ta page index, et le putain de code CSS entier de ta feuille de style CSS

Reply

Marsh Posté le 27-07-2005 à 09:28:56    

Et gatsu il a le putain d'énervement la :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 27-07-2005 à 10:04:01    

gatsusat a écrit :

et ta cSS ya aucun code <style></style> dedand j'espère.
 
normalement ca devrait fonctionner a merveille
tu as du avoir un coup de polio
 
colle le putain de code HTML entier de ta page index, et le putain de code CSS entier de ta feuille de style CSS


 
 
Merci de t'énerver, ça fait plaisir.
Je vais me débrouiller tout seul car je vois que ça te prends la tête, putain de merde !
 

Reply

Marsh Posté le 27-07-2005 à 10:09:22    

t'es sur que c'est pas une histoire de ../design.css dans l'appel, ou autre erreur dans l'appel de la feuille de style?

Reply

Marsh Posté le 27-07-2005 à 10:26:13    

Onesque a écrit :

t'es sur que c'est pas une histoire de ../design.css dans l'appel, ou autre erreur dans l'appel de la feuille de style?


 
Ce n'est pas ça.
en faite j'avais mis les balises <style> et </style> dans mon CSS !
 
Merci quand même

Reply

Marsh Posté le 27-07-2005 à 10:30:27    

gatsusat a écrit :

et ta cSS ya aucun code <style></style> dedand j'espère.
 
normalement ca devrait fonctionner a merveille
tu as du avoir un coup de polio
 
colle le putain de code HTML entier de ta page index, et le putain de code CSS entier de ta feuille de style CSS


 
Tu avais raison j'ai eu un coup de polio ! sans les balises que tu indiques dans le css, ça fonctionne très bien, donc merci, mais la prochaine fois soit plus indulgent car ce n'est vraiment pas sympa de t'énerver comme tu la fais.  
Je suis venu ici pour avoir un coup de main, pas pour me faire engueuler !
 
@+

Reply

Marsh Posté le 27-07-2005 à 10:30:27   

Reply

Marsh Posté le 27-07-2005 à 10:52:16    

Ne t'inquiètes pas, il n'est pas comme ca pour toi il est comme ca tout le temps.
 
Il se sert du forum pour déstresser et se détendre quand il est au boulot :p


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

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