Aligner et coller header-content-footer (débutant)

Aligner et coller header-content-footer (débutant) - HTML/CSS - Programmation

Marsh Posté le 04-07-2006 à 23:34:45    

Bonjour!
 
Je débute vraiment en css, désolé si de poser une question con...
Je suis parti d'un CSS Blogger, que j'ai modifié légèrement à l'arrache, dira-t-on.  
 
J'arrive pas à faire coïncider les images de fond de mes blocs header/content/footer (en plus d'avoir un code qui ne respecte plus rien, j'en ai bien peur)
Ladite page est ici, et mon CSS ressemble à ça: (pas taper!)

Code :
  1. .cyril {
  2. }
  3. #b-navbar {
  4.    height:0px;
  5.    visibility:hidden;
  6.    display:none
  7.    }
  9. body{
  10. background-image: url(http://perso.wanadoo.fr/cyril-le/cyril-le/cyrille/images/bg.jpg);
  11. background-position: left top;
  12. background-repeat: repeat;
  13. background-color: #DAD8E3;
  14. background-attachment: fixed;
  15. text-align: center;
  16.     cursor: default;
  17. }
  18. #container{
  19. background-image: none;
  20. width: 900px;
  21. background-repeat: repeat-y;
  22. margin-left: 75px;
  23. margin-right: auto;
  24. text-align: left;
  25. }
  26. #header{
  27. float: top;
  28. background-image: url(http://perso.wanadoo.fr/cyril-le/cyril-le/cyrille/images/cadretop.jpg);
  29. background-repeat: no-repeat;
  30. background-position: right;
  31. height: 120px;
  32. width: 900px;
  34. }
  35. #content{
  36. float: right;
  37. display: inline;
  38. width: 550px;
  39. margin-right: 0px;
  40. background-image: url(http://perso.wanadoo.fr/cyril-le/cyril-le/cyrille/images/fenetre.jpg);
  41. background-repeat: repeat-y;
  42. border-width: 0px;
  43. border-style: solid;
  44. border-color: #3D393A;
  45. padding: 36px;
  46. color: #5C4040;
  47. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  48. font-size: 11px;
  49. filter:alpha(opacity=90);
  50.                -moz-opacity: 0.9;
  51.                opacity: 0.9;
  52. }
  54. #contentright{
  55. float: left;
  56. display: inline;
  57. width: 200px;
  58. margin-left: 0px;
  59. background-color: white;
  60. border-width: 1px;
  61. border-style: solid;
  62. border-color: #3D393A;
  63. color: #171611;
  64. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  65. font-size: 11px;
  66.     text-align: center;
  67. filter:alpha(opacity=90);
  68.                -moz-opacity: 0.9;
  69.                opacity: 0.9;
  70. }
  72. #footer{
  73. clear: both;
  74. background-image: url(http://perso.wanadoo.fr/cyril-le/cyril-le/cyrille/images/cadrebas.jpg);
  75. height: 200px;
  76. width: 900px;
  77. background-repeat: no-repeat;
  78. background-position: right;
  79. }
  80. a:link, a:visited{
  81. color: #44151B;
  82. text-decoration: none;
  83. }
  84. a:hover{
  85. color: #44151B;
  86. text-decoration: none;
  87. }
  88. a.opacity img {filter:alpha(opacity=50);
  89.                -moz-opacity: 0.5;
  90.                opacity: 0.5;}
  92. a.opacity:hover img {filter:alpha(opacity=100); 
  93.                      -moz-opacity: 1.0; 
  94.                      opacity: 1.0;}
  95. .sectiontitle{
  96. border-bottom: none;
  97. color: #3D3B2F;
  98. font-family: Times new roman, Times,serif;
  99. font-size: 13px;
  100. letter-spacing: 2px;
  101. font-weight: Bold;
  102. background-image: url(!mon ptit logo!);
  103. padding-left: 12px;
  104. background-repeat: no-repeat;
  105. background-position: left center;
  106. margin-bottom: 2px;
  107. text-transform: uppercase;
  108. }
  109. ul{
  110. list-style-type: none;
  111.    padding-left: 12px;
  112.  margin-left: 5px;
  113. line-height: 15px;
  114. color: #7A6E71;
  115. }
  116. textarea{
  117. background-color: #C0B7B4;
  118. border:1px solid #DED9D7;
  119. padding: 2px;
  120. color: Black;
  121. font-size: 1px;
  122. font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  123. width:80%;
  124. }
  125. input,select{
  126. background-color: #C0B7B4;
  127. border:1px solid #DED9D7;
  128. padding: 2px;
  129. color: Black;
  130. font-size: 11px;
  131. font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  132. margin: 2px 2px 5px 2px;
  133. }
  134. .divTitle3{
  135. background-color: #9F9EA3;
  136. border-bottom: 2px solid #87868C;
  137. margin-bottom: none;
  138. text-align: right;
  139. letter-spacing: 1px;
  140. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  141. font-size: 10px;
  142. padding: 2px;
  143. font-weight: bold;
  144. text-transform: lowercase;
  145. }
  146. td{
  147. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  148. font-size: 10px;
  149. color: #515155;
  150. }
  151. th{
  152. font-weight: bold;
  153. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  154. font-size: 10px;
  155. color: #802D49;
  156. }
  158. h2{
  159. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  160. font-size: 10px;
  161. font-weight: bold;
  162. letter-spacing: 2px;
  163. }
  164. h2.itemtitle{
  165. border-bottom: None;
  166. color: #3D3B2F;
  167. font-family: Times new roman, Times,serif;
  168. font-size: 15px;
  169. letter-spacing: 2px;
  170. font-weight: bold;
  171. background-image: url(!mon petit logo de fond!);
  172. padding-left: 12px;
  173. background-repeat: no-repeat;
  174. background-position: left center;
  175. margin-bottom: none;
  176. text-transform: uppercase;
  177. text-align: left <--- rajouté --->
  178. }
  179. .singolocommento{
  180. border: double #968389;
  181. padding: 5px;
  182. margin-bottom: none;
  183. }
  184. .post{
  185. font-size: 10px;
  186. color: #333128;
  187. }
  188. blockquote{
  189. border-left: 3px solid #968389;
  190. background-color: #4A4043;
  191. color: #DFDBDB;
  192. padding: 3px;
  193. }
  195. /* Profile */
  196. .profile-datablock {
  197.   margin:.5em 0 .5em;
  198.   }
  199. .profile-img {
  200.   display:inline;
  201.   }
  202. .profile-img img {
  203.   float:left;
  204.   padding:4px;
  205.   border:1px solid #968389;
  206.   margin:0 8px 3px 0;
  207.   }
  208. .profile-data {
  209.   margin:0;
  210.   font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  211.   text-transform:uppercase;
  212.   letter-spacing:.1em;
  213.   }
  214. .profile-data strong {
  215.   display:none;
  216.   }
  217. .profile-textblock {
  218.   margin:0 0 .5em;
  219.   }
  220. .profile-link {
  221.   margin:0;
  222.   font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  223.   text-transform:uppercase;
  224.   letter-spacing:.1em;
  225.   }
  226. /*  comments */
  227. .comments{
  228. margin: 10px 0px 10px 0px;
  229. border-bottom: 1px solid #968389;
  230. border-top: 1px solid #968389;
  231. color: #333128;
  232. font-family: Times new roman, Times,serif;
  233. font-size: 15px;
  234. font-weight: bold;
  235. letter-spacing: 1px;
  236. text-transform: none;
  237. padding:2px;
  238. }
  239. .commentsbody{
  240. border-bottom: 1px solid #968389;
  241. margin-bottom: 10px;
  242. color: #333128;
  243. padding: 5px;
  244. }
  245. .commentsData{
  246.  font-family: Arial, Helvetica, sans-serif;
  247. font-size: 10px;
  248. color: #333128;
  249. text-align: left;
  250. }
  251. .delete{
  252.  text-align: right;
  253. }
  254. .sidebar-title{
  255.  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  256. font-size: 10px;
  257. color:  #968389;
  258. text-align: center;
  259. }
  262. </style>
  263. <link href="test.css" rel="stylesheet" type="text/css">


 
Si quelqu'un peut m'aider à coller les images de cadres, en attendant que je progresse et mette le tout en ordre...
Merci d'avance, parceque je m'en sors pas, à force de triturer...

Reply

Marsh Posté le 04-07-2006 à 23:34:45   

Reply

Marsh Posté le 05-07-2006 à 09:34:24    

bah si on devrait taper et fort meme
et refuser de repondre a quelqu un qui vient se plaindre de dreamweaver :D
 

Spoiler :

va falloir creer un topic dreamweaver (quelqu un veut m aider ? :D)


 
donc apprends a bien te servir de ton logiciel
il t a couté tellement cher  :ange:  
c est vraiment dommage de voir que tu ne sais pas t en servir
donc premier truc tu appuies sur F1
tu fais les tutos avant de faire n importe quoi
 
quelques options sympas tu vas dans window>results (raccourci f7)
tu cliques sur l onglet validation
sur la gauche y a tout un tas d icones tu cliques sur le petite fleche verte>validate current document
la tu vois qu il a pas loin d une vingtaine d erreurs
tu les corrige et tu reviens poser tes questions apres
 
si tu veux pas trop te prendre la tete t as meme une option marrante
tu vas dans edit>preferences>code rewriting
dans la rubrique rewrite code
tu coches tout
apres tu vas dans commands>clean up xhtml
 
et tu essaies de reparer toi meme les fautes qui restent (du genre c est quoi ce doctype [:petrus dei]  
 
juste pour information voici la structure d une page web
 

Code :
  1. <!doctype>                                  un seul exemplaire
  2. <html>                                        un seul exemplaire
  3. <head>                                       un seul exemplaire
  4. <title>mon site</title>                   un seul exemplaire
  5. <meta />                                     pas de limite
  6. <link />                                       pas de limite
  7. <script>                                      pas de limite (mais rester raisonnable)
  8. <style>                                      pas de limite
  9. </head>
  10. <body>mon contenu</body>        un seul exemplaire
  11. </html>


 
l ordre est capital [:aloy]
(sauf pour les balises a l interieur de <head> )
 
maintenant tu peux nettoyer ton code tranquillement et quand tout cela sera propre tu pourras revenir nous poser tes questions  [:itm]

Reply

Marsh Posté le 06-07-2006 à 13:04:06    

Avec grand plaisir. Merci pour l'info, je vous ressoummettrai tout ca quand ce sera clean.
Et je me suis jamais plaint de Dreamweaver, au contraire. Il  faudrait que je sache m'en servir pour pouvoir le critiquer, et c'est looooin d'etre le cas.
 
Merci d'etre resté aimable, je sais que j'aurais mérité un tout autre chatiment. :D

Reply

Sujets relatifs:

Leave a Replay

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