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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Aide CSS - encadrement

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Aide CSS - encadrement

n°2167795
andrei59
Posté le 12-12-2012 à 22:24:06  profilanswer
 

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

mood
Publicité
Posté le 12-12-2012 à 22:24:06  profilanswer
 

n°2167815
egege
Posté le 13-12-2012 à 09:38:25  profilanswer
 

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

n°2167841
andrei59
Posté le 13-12-2012 à 11:25:28  profilanswer
 

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?

n°2167903
egege
Posté le 13-12-2012 à 15:06:27  profilanswer
 

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
n°2167942
andrei59
Posté le 13-12-2012 à 16:51:07  profilanswer
 

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

n°2167976
andrei59
Posté le 13-12-2012 à 18:32:54  profilanswer
 

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

n°2168053
egege
Posté le 14-12-2012 à 10:07:11  profilanswer
 

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');}


n°2168218
andrei59
Posté le 16-12-2012 à 18:36:09  profilanswer
 

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


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

  Aide CSS - encadrement

 

Sujets relatifs
Besoin d'aide pour siteHTML Aide
CSS et tableaux multiplesAide algorithmique
aide pour algo : nombre de chiffres dans un nombre[PHP] Aide pour un preg_replace, caractère de fin ]
AIDE A LA PROGRAMMATIONBesoin d'aide svp!
Aide formulaire d'encodage de données[Résolu] VBA XLS Aide msgbox
Plus de sujets relatifs à : Aide CSS - encadrement

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

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