Aide CSS - encadrement

Aide CSS - encadrement - HTML/CSS - Programmation

Marsh Posté le 12-12-2012 à 22:24:06    

Bonjour,
Je suis propriétaire d'un site web et je voudrais un peu d'aide pour modifier mon CSS actuel.
Ca fait déjà un bon moment que je tourne en rond et je n'avance plus.  
J'aimerai modifier la page suivante (www.alidade.eu/italie/j3.php) en intégrant deux barres verticales de couleur sombres (une de chaque côté) pour pouvoir en quelque sorte encadrer mon travail actuel. Mais j'ai beau tester, je n'y arrive pas, sans doute que j'ai trop de div dans mon code.
Peut-être aussi que je n'ai pas les bons outils pour pouvoir facilement visualiser et modifier.
Si une âme charitable pouvait m'aider, j'en serais très reconnaissant.
Merci
 

Code :
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }
  8. body {
  9. background: #EAC99A url(images/img01.jpg);
  10. font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  11. color: #A38560;
  12. }
  14. h1, h2, h3 {
  15. font-weight: normal;
  16. color: #B27217;
  17. }
  19. h1 {
  20. }
  22. h2 {
  23. font-size: 2em;
  24. }
  26. h3 {
  27. font-size: 1.2em;
  28. font-weight: bold;
  29. }
  31. p, blockquote, ul, ol {
  32. margin-bottom: 2em;
  33. line-height: 180%;
  34. }
  36. p {
  37. }
  39. blockquote {
  40. }
  42. ul {
  43. list-style: none;
  44. }
  46. ul li {
  47. padding-left: 1em;
  48. background: url(images/img06.gif) no-repeat left center;
  49. }
  51. ol {
  52. margin-left: 3em;
  53. }
  55. ol li {
  56. }
  58. pre, code {
  59. }
  61. pre {
  62. }
  64. code {
  65. }
  67. a {
  68. color: #D65601;
  69. }
  71. a:hover {
  72. color: #D65601;
  74. }
  76. a:visited {
  77. }
  79. img {
  80. border:0;
  81. }
  83. input, textarea, select {
  84. }
  86. input {
  87. }
  89. textarea {
  90. }
  92. select {
  93. }
  95. .bg {
  96. background: url(images/img02.jpg) repeat-x;
  97. }
  99. /* Header */
  101. #header {
  102. width: 960px;
  103. height: 70px;
  104. margin: 0 auto;
  105. padding-top: 40px;
  106. }
  108. /* Logo */
  110. #logo {
  111. float: left;
  112. }
  114. #logo h1 {
  115. margin: 0;
  116. font-size: 2em;
  117. }
  119. #logo h2 {
  120. margin: 0;
  121. padding-left: .1em;
  122. font-size: 1em;
  123. font-weight: bold;
  124. }
  126. #logo a {
  127. text-transform: uppercase;
  128. text-decoration: none;
  129. color: #FFFFFF;
  130. }
  132. /* Menu */
  134. #menu {
  135. float: right;
  136. font-size: large;
  137. }
  139. #menu h2 {
  140. display: none;
  141. }
  143. #menu ul {
  144. margin: 0;
  145. padding-top: 2.35em;
  146. list-style: none;
  147. }
  149. #menu li {
  150. display: inline;
  151. padding-left: 2em;
  152. background: none;
  153. }
  155. #menu a {
  156. text-decoration: none;
  157. letter-spacing: -1px;
  158. color: #FFFFFF;
  159. }
  161. #menu a:hover {
  162. }
  164. /* Wrapper */
  166. #wrapper {
  167. width: 960px;
  168. margin: 0 auto;
  169. }
  170. #wrapperb {
  171. width: 650px;
  172. margin: 1 auto;
  173. }
  174. /* Sidebar */
  176. #sidebar {
  177. float: left;
  178. width: 230px;
  179. background: url(images/img04.jpg) repeat-y;
  180. }
  182. #sidebar .title {
  183. margin: 0;
  184. padding: 20px 20px 0 20px;
  185. background: url(images/img03.jpg) no-repeat;
  186. }
  188. #sidebar .content {
  189. padding: 20px;
  190. }
  192. #sidebar .bottom {
  193. height: 33px;
  194. background: url(images/img05.jpg) repeat-x left bottom;
  195. }
  197. /* Content */
  199. #content {
  200. float: right;
  201. width: 700px;
  202. }
  204. /* Splash */
  206. #splash {
  207. text-align: center;
  208. background: url(images/img09.jpg) repeat-y;
  209. }
  211. #splash .top {
  212. padding: 20px 20px 16px 20px;
  213. background: url(images/img08.jpg) no-repeat;
  214. }
  216. #splash .bottom {
  217. height: 33px;
  218. background: url(images/img05.jpg) repeat-x left bottom;
  219. }
  221. /* Welcome */
  223. #welcome {
  224. padding: 0 20px;
  225. }
  227. /* Samples */
  229. #samples {
  230. padding: 20px;
  231. background: url(images/img05.jpg) repeat-x;
  232. }
  234. /* Footer */
  236. #footer {
  237. width: 400px;
  238. margin: 0 auto;
  239. }
  241. #footer p {
  242. font-size: 10px;
  243.    text-align: center;
  244. }
  247. .truc1 {
  248.         background: #f00;
  249.         float: left;
  250.       }
  251. .truc2 {
  252.         background: #00f;
  253.         float: right;
  254.         text-align: right;
  255. }
  256. .truc1, .truc2 {
  257.         display: block;
  258.         width: 50%;
  259.       }
  260.  
  261.  
  262.  
  263.   #statsWrap {
  264. font-family: Arial, Helvetica, sans-serif;
  265. font-size: 10px;
  266. vertical-align: middle;
  267. }
  268. #statsDetailsWrap {
  269. background: #333333;
  270. float: left;
  271. padding: 1px 3px 1px 1px;
  272. border: #666666 1px inset;
  273. vertical-align: middle;
  274. }
  275. #statsCount {
  276. float: left;
  277. padding: 1px 3px;
  278. background: #999999;
  279. color: #FFFFFF;
  280. border: #666666 1px inset;
  281. width: 40px;
  282. height: 12px;
  283. vertical-align: middle;
  284. }
  285. #statsMetric {
  286. float: left;
  287. padding: 3px;
  288. color: #FFFFFF;
  289. width: 50px;
  290. height: 12px;
  291. vertical-align: middle;
  292. }
  295. #pied_de_page
  296. {
  297. background: url(images/img02_.jpg) repeat-x;
  298.    padding: 5px;
  299.    clear: both;
  301.    text-align: center;
  303. }
  305. #pied_de_page p {
  306. font-size: 10px;
  307.     text-align: center;
  308. }
  311. #link
  312. {
  313.    padding: 5px;
  314.    clear: both;
  316.    text-align: center;
  318. }
  320. #link p {
  321. font-size: 10px;
  322.     text-align: center;
  323. }
  325. table.map1 {
  326. font-family: Book Antiqua;
  327. font-size:100%;
  328. border:0px solid #A38560;
  329. padding:5px;
  330. text-align:left;
  331. background-color: #CEE5F3;
  332. width: 956px;
  333. }
  335. td.pre1 {
  336. font-family: Book Antiqua;
  337. font-size:100%;
  338. border:0px solid #A38560;
  339. padding:5px;
  340. text-align:left;
  341. background-color: #CEE5F3;
  342. width: 0px;
  343. height: 556px;
  344. }
  346. td.pre2 {
  347. font-family: Book Antiqua;
  348. font-size:100%;
  349. border:0px solid #A38560;
  350. padding:5px;
  351. text-align:left;
  352. background-color: #9DD3F5;
  353. width: 0px;
  354. height: 444px;
  355. }
  357. td.pre3 {
  358. font-family: Book Antiqua;
  359. font-size:100%;
  360. border:0px solid #A38560;
  361. padding:5px;
  362. text-align:left;
  363. background-color: #CEE5F3;
  364. width: 500px;
  365. height: 0px;
  366. vertical-align: middle;
  367. }
  369. td.pre4 {
  370. font-family: Book Antiqua;
  371. font-size:100%;
  372. border:0px solid #A38560;
  373. padding:5px;
  374. text-align:left;
  375. background-color: #CEE5F3;
  376. width: 440px;
  377. vertical-align: top;
  378. }
  380. table.voy1 {
  381. font-family: Book Antiqua;
  382. font-size:100%;
  383. border:0px solid #A38560;
  384. padding:5px;
  385. text-align:left;
  386. background-color: #CEE5F3;
  387. width: 882px;
  388. }
  390. td.voy2 {
  391. font-family: Segoe Print;
  392. color:#330066;
  393. font-size:100%;
  394. border:0px solid #A38560;
  395. padding:5px;
  396. text-align:left;
  397. background-color: #9DD3F5;
  398. height: 42px;
  399. }
  400. td.voy3 {
  401. font-family: Segoe Print;
  402. color:#330066;
  403. font-size:100%;
  404. border:0px solid #A38560;
  405. padding:5px;
  406. text-align:left;
  407. background-color: #9DD3F5;
  408. height: 5px;
  409. }

Reply

Marsh Posté le 12-12-2012 à 22:24:06   

Reply

Marsh Posté le 13-12-2012 à 09:38:25    

J'ai pas trop compris ou tu veux mettre tes barres. Tu veux encadrer ton site ou seulement la colonne de droite ?
 
Si c'est la colonne de droite il te suffit de rajouter des border-right et border-left sur ta div #content

Reply

Marsh Posté le 13-12-2012 à 11:25:28    

Merci pour ta réponse
Non, je souhaiterai encadrer tout le site et pas seulement la colonne de gauche.
En fait, je voudrai rajouter un cadre à l'extrême gauche de la page, et un autre à l'extrême droite de la page.  
Je mets cette image pour expliquer. Tout ce qui est en blanc (header, footer, sidebar) ets le site actuel. J'aimerai juste rajouter les deux cadres noirs sur toute la longueur de la page.
Merci
http://img141.imageshack.us/img141/331/clipboard02ph.jpg
 
Uploaded with ImageShack.us
 
Est-ce possible?

Reply

Marsh Posté le 13-12-2012 à 15:06:27    

ok, dans ce cas, il faut que tu mette un background noir sur ton body que tu créée une nouvelle div qui englobe ta div bg. Dans le css de cette nouvelle div tu lui donne une dimension de 960px que tu centre grace aux margin, tu lui mets ton background 'img01.jpg'.
 
Si je me suis pas embrouillé ca devrait marcher ;)

Message cité 1 fois
Reply

Marsh Posté le 13-12-2012 à 16:51:07    

Très bien compris, j'essaye dès ce soir.
Merci

Reply

Marsh Posté le 13-12-2012 à 18:32:54    

egege a écrit :

ok, dans ce cas, il faut que tu mette un background noir sur ton body que tu créée une nouvelle div qui englobe ta div bg. Dans le css de cette nouvelle div tu lui donne une dimension de 960px que tu centre grace aux margin, tu lui mets ton background 'img01.jpg'.
 
Si je me suis pas embrouillé ca devrait marcher ;)


 
Finalement ça ne marche pas, j'ai essayé , je n'arrive pas à ajouter les cadres, comme si les div déjà définies prenaient le dessus.
J'arrive à avoir du noir mais pas au bon endroit
http://img14.imageshack.us/img14/8020/clipboard02roy.jpg
 
Uploaded with ImageShack.us

Reply

Marsh Posté le 14-12-2012 à 10:07:11    

Tu as bien créée ta div qui englobe la div bg ?

Code :
  1. <body>
  2. <div id="site">
  3.   <div class="bg">
  4.    <!-- Ton site -->
  5. </div>
  6. </div>
  7. </body>


 
Et dans ton css tu dois avoir

Code :
  1. body{background:#000;}
  2. #site{width:960px; margin: 0px auto; background: url('img1.jpg');}


Reply

Marsh Posté le 16-12-2012 à 18:36:09    

Merci  :)  
Ca marche, j'avais mal fait mon boulot

Reply

Sujets relatifs:

Leave a Replay

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