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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1400748
mulaan
Posté le 04-07-2006 à 23:34:45  profilanswer
 

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

mood
Publicité
Posté le 04-07-2006 à 23:34:45  profilanswer
 

n°1400857
mIRROR
Chevreuillobolchévik
Posté le 05-07-2006 à 09:34:24  profilanswer
 

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]

n°1401925
mulaan
Posté le 06-07-2006 à 13:04:06  profilanswer
 

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


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

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

 

Sujets relatifs
Grand débutant a besoin de petite aide mysql_result[Résolu][PHP] Problème avec header()
svp un peu d'aide pour un bougre debutantProbleme sur petit programme de débutant
Problème headerDebutant: poster une variable
date et php : extraire le mois d'une date SQL (debutant)[shell] débutant : test sur la présence de fichiers
div header et pied de pageHeader foireux (warning)
Plus de sujets relatifs à : Aligner et coller header-content-footer (débutant)

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

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