Se connecter / S'enregistrer

Résolu Comment on fait pour augmenter la largeur d'une colonne ?

Solutions (3)
Tags :
  • Html
  • Blog
  • Arrière plan
  • Programmation
|
Bonjour,
voici mon problème :



L'espace mis en rouge : j'aimerais augmenter la largeur.
Le problème c'est que je ne sais pas comment faire.

J'ai ici le code html du modèle :

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  3. <html expr:dir='data:blog.languageDirection' xmlns='<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>' xmlns:b='<a href="http://www.google.com/2005/gml/b" rel="nofollow" target="_blank">http://www.google.com/2005/gml/b</a>' xmlns:data='<a href="http://www.google.com/2005/gml/data" rel="nofollow" target="_blank">http://www.google.com/2005/gml/data</a>' xmlns:expr='<a href="http://www.google.com/2005/gml/expr" rel="nofollow" target="_blank">http://www.google.com/2005/gml/expr</a>'>
  4. <head>
  5. <b:include data='blog' name='all-head-content'/>
  6. <title><data:blog.pageTitle/></title>
  7. <b:skin><![CDATA[/*
  8. * -----------------------------------------------
  9. * Blogger Template Style
  10. * Name: Mr. Moto Rising (Ellington style)
  11. * Designer: Jeffrey Zeldman
  12. * URL: <a href="http://www.zeldman.com" rel="nofollow" target="_blank">www.zeldman.com</a>
  13. * Date: 23 Feb 2004
  14. * Updated by: Blogger Team
  15. * Page : Pierre Gourvès
  16. * ----------------------------------------------- */
  17.  
  18.  
  19. /* Variable definitions
  20. ====================
  21. <Variable name="mainBgColor" description="Main Background Color"
  22. type="color" default="#ffffff" value="#ffffff">
  23. <Variable name="mainTextColor" description="Text Color"
  24. type="color" default="#555555" value="#4c4c4c">
  25. <Variable name="pageHeaderColor" description="Blog Title Color"
  26. type="color" default="#ffffee" value="#ffffee">
  27. <Variable name="blogDescriptionColor" description="Blog Description Color"
  28. type="color" default="#ffffee" value="#ffffee">
  29. <Variable name="linkColor" description="Link Color"
  30. type="color" default="#999988" value="#999988">
  31. <Variable name="hoverLinkColor" description="Link Hover Color"
  32. type="color" default="#bbbbaa" value="#000000">
  33. <Variable name="dateHeaderColor" description="Date Header Color"
  34. type="color" default="#555544" value="#555544">
  35. <Variable name="sidebarHeaderColor" description="Sidebar Title Color"
  36. type="color" default="#555544" value="#555544">
  37. <Variable name="sidebarTextColor" description="Sidebar Text Color"
  38. type="color" default="#555555" value="#555555">
  39.  
  40. <Variable name="bodyFont" description="Text Font" type="font"
  41. default="normal normal 100% 'tahoma Trebuchet MS', lucida, helvetica, sans-serif" value="normal normal 98% Trebuchet, Trebuchet MS, Arial, sans-serif">
  42. <Variable name="startSide" description="Start side in blog language"
  43. type="automatic" default="left" value="left">
  44. <Variable name="endSide" description="End side in blog language"
  45. type="automatic" default="right" value="right">
  46. */
  47.  
  48. /* Primary layout */
  49.  
  50. body {
  51. margin: 0;
  52. padding: 0;
  53. border: 0;
  54. text-align: center;
  55. color: $mainTextColor;
  56. background: #bba url(<a href="http://www.blogblog.com/moto_mr/outerwrap.gif" rel="nofollow" target="_blank">http://www.blogblog.com/moto_mr/outerwrap.gif</a>) top center repeat-y;
  57. font-size: small;
  58. }
  59.  
  60. img {
  61. border: 0;
  62. display: block;
  63. }
  64.  
  65. .clear {
  66. clear: both;
  67. }
  68. /* Wrapper */
  69.  
  70. #outer-wrapper {
  71. margin: 0 auto;
  72. border: 0;
  73. width: 692px;
  74. text-align: $startSide;
  75. background: $mainBgColor url(<a href="http://img185.imageshack.us/img185/9036/wrappernewqp7.png" rel="nofollow" target="_blank">http://img185.imageshack.us/img185/9036/wrappernewqp7.p...</a>) top $endSide repeat-y;
  76. font: $bodyFont;
  77. }
  78.  
  79. /* Header */
  80.  
  81.  
  82. }
  83.  
  84. #header h1 {
  85. text-align: $startSide;
  86. font-size: 200%;
  87. color: $pageHeaderColor;
  88. margin: 0;
  89. padding-top: 15px;
  90. padding-$endSide: 20px;
  91. padding-bottom: 0;
  92. padding-$startSide: 20px;
  93. background-image: url(<a href="http://www.blogblog.com/moto_mr/topper.gif" rel="nofollow" target="_blank">http://www.blogblog.com/moto_mr/topper.gif</a>);
  94. background-repeat: repeat-x;
  95. background-position: top $startSide;
  96. }
  97.  
  98. h1 a, h1 a:link, h1 a:visited {
  99. color: $pageHeaderColor;
  100. }
  101.  
  102. #header .description {
  103. font-size: 110%;
  104. text-align: $startSide;
  105. padding-top: 3px;
  106. padding-$endSide: 20px;
  107. padding-bottom: 10px;
  108. padding-$startSide: 23px;
  109. margin: 0;
  110. line-height:140%;
  111. color: $blogDescriptionColor;
  112. }
  113.  
  114.  
  115. /* Inner layout */
  116.  
  117. #content-wrapper {
  118. padding: 0 16px;
  119. }
  120.  
  121. #main {
  122. width: 400px;
  123. float: $startSide;
  124. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  125. overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  126. }
  127.  
  128. #sidebar {
  129. width: 226px;
  130. float: $endSide;
  131. color: $sidebarTextColor;
  132. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  133. overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
  134. }
  135.  
  136. /* Bottom layout */
  137.  
  138. #footer {
  139. clear: $startSide;
  140. margin: 0;
  141. padding: 0 20px;
  142. border: 0;
  143. text-align: $startSide;
  144. border-top: 1px solid #f9f9f9;
  145. }
  146.  
  147. #footer .widget {
  148. text-align: $startSide;
  149. margin: 0;
  150. padding: 10px 0;
  151. background-color: transparent;
  152. }
  153.  
  154. /* Default links */
  155.  
  156. a:link, a:visited {
  157. font-weight: bold;
  158. text-decoration: none;
  159. color: $linkColor;
  160. background: transparent;
  161. }
  162.  
  163. a:hover {
  164. font-weight: bold;
  165. text-decoration: underline;
  166. color: $hoverLinkColor;
  167. background: transparent;
  168. }
  169.  
  170. a:active {
  171. font-weight : bold;
  172. text-decoration : none;
  173. color: $hoverLinkColor;
  174. background: transparent;
  175. }
  176.  
  177. /* Typography */
  178.  
  179. .main p, .sidebar p, .post-body {
  180. line-height: 140%;
  181. margin-top: 5px;
  182. margin-bottom: 1em;
  183. }
  184.  
  185. .post-body blockquote {
  186. line-height:1.3em;
  187. }
  188.  
  189. h2, h3, h4, h5 {
  190. margin: 0;
  191. padding: 0;
  192. }
  193.  
  194. h2 {
  195. font-size: 130%;
  196. }
  197.  
  198. h2.date-header {
  199. color: $dateHeaderColor;
  200. }
  201.  
  202. .post h3 {
  203. margin-top: 5px;
  204. font-size: 120%;
  205. }
  206.  
  207. .post-footer {
  208. font-style: italic;
  209. }
  210.  
  211. .sidebar h2 {
  212. color: $sidebarHeaderColor;
  213. }
  214.  
  215. .sidebar .widget {
  216. margin-top: 12px;
  217. margin-$endSide: 0;
  218. margin-bottom: 13px;
  219. margin-$startSide: 0;
  220. padding: 0;
  221. }
  222.  
  223. .main .widget {
  224. margin-top: 12px;
  225. margin-$endSide: 0;
  226. margin-bottom: 0;
  227. margin-$startSide: 0;
  228. }
  229.  
  230. li {
  231. line-height: 160%;
  232. }
  233.  
  234. .sidebar ul {
  235. margin-$startSide: 0;
  236. margin-top: 0;
  237. padding-$startSide: 0;
  238. }
  239.  
  240. .sidebar ul li {
  241. list-style: disc url(<a href="http://www.blogblog.com/moto_mr/diamond.gif" rel="nofollow" target="_blank">http://www.blogblog.com/moto_mr/diamond.gif</a>) inside;
  242. vertical-align: top;
  243. padding: 0;
  244. margin: 0;
  245. }
  246.  
  247. .widget-content {
  248. margin-top: 0.5em;
  249. }
  250.  
  251.  
  252. /* Profile
  253. ----------------------------------------------- */
  254.  
  255. .profile-datablock {
  256. margin-top: 3px;
  257. margin-$endSide: 0;
  258. margin-bottom: 5px;
  259. margin-$startSide: 0;
  260. line-height: 140%;
  261. }
  262. .profile-textblock {
  263. margin-$startSide: 0;
  264. }
  265.  
  266. .profile-img {
  267. float: $startSide;
  268. margin-top: 0;
  269. margin-$endSide: 10px;
  270. margin-bottom: 5px;
  271. margin-$startSide: 0;
  272. border:4px solid #ccb;
  273. }
  274.  
  275. #comments {
  276. border: 0;
  277. border-top: 1px dashed #eed;
  278. margin-top: 10px;
  279. margin-$endSide: 0;
  280. margin-bottom: 0;
  281. margin-$startSide: 0;
  282. padding: 0;
  283. }
  284.  
  285. #comments h4 {
  286. margin-top: 10px;
  287. font-weight: normal;
  288. font-style: italic;
  289. text-transform: uppercase;
  290. letter-spacing: 1px;
  291. }
  292.  
  293. #comments dl dt {
  294. font-weight: bold;
  295. font-style: italic;
  296. margin-top: 35px;
  297. padding-top: 1px;
  298. padding-$endSide: 0;
  299. padding-bottom: 0;
  300. padding-$startSide: 18px;
  301. background: transparent url(<a href="http://www.blogblog.com/moto_mr/commentbug.gif" rel="nofollow" target="_blank">http://www.blogblog.com/moto_mr/commentbug.gif</a>) top $startSide no-repeat;
  302. }
  303.  
  304. #comments dl dd {
  305. padding: 0;
  306. margin: 0;
  307. }
  308.  
  309. .deleted-comment {
  310. font-style:italic;
  311. color:gray;
  312. }
  313.  
  314. .feed-links {
  315. clear: both;
  316. line-height: 2.5em;
  317. }
  318.  
  319. #blog-pager-newer-link {
  320. float: $startSide;
  321. }
  322.  
  323. #blog-pager-older-link {
  324. float: $endSide;
  325. }
  326.  
  327. #blog-pager {
  328. text-align: center;
  329. }
  330.  
  331. /** Page structure tweaks for layout editor wireframe */
  332.  
  333. body#layout #outer-wrapper {
  334. padding-top: 0;
  335. }
  336. body#layout #header,
  337. body#layout #content-wrapper,
  338. body#layout #footer {
  339. padding: 0;
  340. }
  341. ]]></b:skin>
  342. </head>
  343.  
  344. <body>
  345. <div id='outer-wrapper'><div id='wrap2'>
  346.  
  347. <!-- skip links for text browsers -->
  348. <span id='skiplinks' style='display:none;'>
  349. <a href='#main'>skip to main </a> |
  350. <a href='#sidebar'>skip to sidebar</a>
  351. </span>
  352.  
  353. <div id='header-wrapper'>
  354. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  355. <b:widget id='Header1' locked='true' title='Photobook (en-tête)' type='Header'/>
  356. </b:section>
  357. </div>
  358.  
  359. <div id='content-wrapper'>
  360.  
  361. <div id='crosscol-wrapper' style='text-align:center'>
  362. <b:section class='crosscol' id='crosscol' showaddelement='no'>
  363. <b:widget id='HTML3' locked='false' title='' type='HTML'/>
  364. </b:section>
  365. </div>
  366.  
  367. <div id='main-wrapper'>
  368. <b:section class='main' id='main' showaddelement='no'>
  369. <b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
  370. </b:section>
  371. </div>
  372.  
  373. <div id='sidebar-wrapper'>
  374. <b:section class='sidebar' id='sidebar' preferred='yes'>
  375. <b:widget id='Image1' locked='false' title='' type='Image'/>
  376. <b:widget id='HTML1' locked='false' title='' type='HTML'/>
  377. <b:widget id='BlogArchive2' locked='false' title='Archive de blog' type='BlogArchive'/>
  378. <b:widget id='Label1' locked='false' title='[Tags]' type='Label'/>
  379. <b:widget id='HTML4' locked='false' title='[Divertissons]' type='HTML'/>
  380. </b:section>
  381. </div>
  382.  
  383. <!-- spacer for skins that want sidebar and main to be the same height-->
  384. <div class='clear'> </div>
  385.  
  386. </div> <!-- end content-wrapper -->
  387.  
  388. <div id='footer-wrapper'>
  389. <b:section class='footer' id='footer'>
  390. <b:widget id='HTML2' locked='false' title='(c) exeworld' type='HTML'/>
  391. </b:section>
  392. </div>
  393.  
  394. </div></div> <!-- end outer-wrapper -->
  395. </body>
  396. </html>



Quelqu'un pourrait-il me dire quel élément modifier dans ce code pour augmenter la largeur de la colonne ?
Merci, c'est très important pour moi...
  • Meuniers a édité ce message
Contenus similaires
Meilleure solution
partage
|
# #outer-wrapper {
# margin: 0 auto;
# border: 0;
# width: 692px;

ici je pensse, mesure déja en pixel la largeur, et tu trouvera la valeur correspondante ou approximative dans le css pour pouvoir le modifier.
  • Commenter cette solution |
Score
0
òh
òi
|
J'ai finalement compris après avoir passé mon aprèm à observer tout ce texte ^^
J'ai donc agrandi ( avec les "width" ) Plusieurs balises "div", et j'ai tout réajusté.
Je vous remercie ;) 
  • Commenter cette réponse |
Score
0
òh
òi
, Programmation (collector) |
plop =)
regarde il doigt y avoir un fichier css avec , donne nous le code
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS