Votre question

Overflow n'apparaissant pas sous Tumblr.

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
19 Décembre 2011 01:18:41

Bonsoir ou Bonjour selon à quelle heure vous lirez ce message. J'ai récemment créer un journal tumblr, j'ai pris un thème de base que j'ai ensuite personnalisé. Malheureusement il y a un problème que je viens à peine de déceler. La barre que nous avons par défaut sur notre ordinateur (http://tinypic.com/r/del6wl/5) a disparu sur mon journal. Voilà donc un screen de ce que je vois http://i42.tinypic.com/jfulc9.jpg. Il est impossible de voir les post que j'ai précédemment posté, j'ai regardé plusieurs fois mon code entièrement, en vain. J'ai déjà codé, sous forumactif, et même si cela reste du HTML et du CSS sous Tumblr j'avoue avoir été un peu perdue au début donc il est possible que j'ai manqué plusieurs choses. Merci d'avance aux personnes qui répondront, en espérant que quelqu'un trouvera la solution à mon problème.

Cordialement.

Autres pages sur : overflow apparaissant tumblr

a c 232 L Programmation
19 Décembre 2011 09:02:52

Salut,

Peut-être un overflow:hidden quelque part ?
Sinon, sans avoir un lien vers ton site, pour voir ce qui bloque, c'est difficile...
19 Décembre 2011 09:19:03

Aah je suis désolé, j'oublie toujours l'adresse! http://cruel-connection.tumblr.com/ et peut être le code non ?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--Baby BY dyaRENESIS-->
  6. <!--you can edit some code if you want-->
  7. <!--just don't remove credits, or else-->
  8.  
  9. <head>
  10.  
  11. <title> 【 c r u e l ✖ c o n n e c t i o n 】</title>
  12.  
  13.  
  14. <!-- DEFAULT VARIABLES -->
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17.  
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21.  
  22. <!-- THIS CAN BE EDITED IN THE 'APPEARANCE' TAB) -->
  23.  
  24. <meta name="color:Background" content="#DDDCD6"/>
  25. <meta name="color:Title" content="#B3B1B1"/>
  26. <meta name="color:Text" content="#949191"/>
  27. <meta name="font:Body" content="Verdana"/>
  28. <meta name="color:Posts" content="#000000"/>
  29. <meta name="color:Sidebar" content="#000000"/>
  30. <meta name="color:SidebarTitle" content="#313131"/>
  31. <meta name="color:Navigation" content="#777777"/>
  32. <meta name="color:Nav Hover 1" content="#E24141"/>
  33. <meta name="color:Post Details" content="#363636"/>
  34. <meta name="color:Nav Hover Bottom" content="#bead1b"/>
  35.  
  36. <meta name="color:Link" content="#B16F7F"/>
  37. <meta name="color:Link Hover" content="#ADADAD"/>
  38.  
  39. <meta name="if:Enable Image Opacity" content="1"/>
  40.  
  41.  
  42. <meta name="image:300pxPortrait" content=""/>
  43. <meta name="text:Background Image Position" content="none"/>
  44. <meta name="if:Background Image Not Repeat" content="0"/>
  45. <meta name="if:Background Image Fixed" content="1"/>
  46.  
  47.  
  48. <meta name="color:Link" content="#7BA3A9"/>
  49. <meta name="color:Link Hover" content="#ADADAD"/>
  50.  
  51.  
  52. <meta name="text:Link 1 Name" content=""/>
  53. <meta name="text:Link 1 URL" content=""/>
  54.  
  55. <meta name="text:Link 2 Name" content=""/>
  56. <meta name="text:Link 2 URL" content=""/>
  57.  
  58. <meta name="text:Link 3 Name" content=""/>
  59. <meta name="text:Link 3 URL" content=""/>
  60.  
  61. <meta name="text:Link 4 Name" content=""/>
  62. <meta name="text:Link 4 URL" content=""/>
  63.  
  64. <meta name="text:Link 5 Name" content=""/>
  65. <meta name="text:Link 5 URL" content=""/>
  66.  
  67. <style type="text/css">
  68.  
  69. body {
  70. background-color:{color:Background};
  71. background-image:url(http://i42.tinypic.com/rr6xs3.png);
  72. background-position:{text:Background Image Position};
  73. {block:IfBackgroundImageNotRepeat}background-repeat:no-repeat;{/block:IfBackgroundImageNotRepeat}
  74. {block:IfBackgroundImageFixed}background-attachment: fixed;{/block:IfBackgroundImageFixed}
  75. color:{color:Text};
  76. font-size:11px;
  77. line-height:18px;
  78. font-family:{font:body};
  79. }
  80.  
  81. a, a:visited, a:active {
  82. color:{color:Link};
  83. text-decoration: none;
  84. }
  85.  
  86. a:hover {
  87. color:{color:link hover};
  88. text-decoration:none;
  89. }
  90.  
  91. p {
  92. margin: 2px 2px 2px 2px;
  93. line-height:10px;
  94. padding: 5;
  95. }
  96.  
  97. ol.notes {
  98. padding: 0px;
  99. margin: 25px 0px;
  100. list-style-type: none;
  101. border-bottom: dotted 1px {color:text};
  102. }
  103.  
  104. ol.notes li.note {
  105. border-top: dotted 1px {color:text};
  106. padding: 10px;
  107. }
  108.  
  109. ol.notes li.note img.avatar {
  110. margin-right: 10px;
  111. width: 20px;
  112. height: 20px;
  113. }
  114.  
  115. blockquote{padding:0px; padding-left:5px; margin:5px; border-left:5px dotted {color:text};}
  116. blockquote img{display:block;}
  117. blockquote p{padding:0px; margin:0px;}
  118. blockquote blockquote{position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
  119. a img{border:none;}
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126. #content{
  127. position:absolute;
  128. top:55px;
  129. width:520px;
  130. left:400px;
  131. padding:0px;
  132. margin:auto;
  133. }
  134.  
  135.  
  136.  
  137.  
  138.  
  139. #sidebar{
  140. top:0px;
  141. width:300px;
  142. height: 100%;
  143. position:fixed;
  144. left:0px;
  145. overflow:shown;
  146. padding:10px;
  147. background-image:url(http://i43.tinypic.com/35id2x4.png);
  148. }
  149.  
  150.  
  151.  
  152.  
  153. #post{
  154. padding:10px;
  155. margin-bottom:10px;
  156. background-color:{Color:Posts};
  157. text-align: justify;
  158. text-shadow: #ffffff 1px 1px 1px;
  159. }
  160.  
  161.  
  162.  
  163. h1 {
  164. font-size:24px;
  165. font-weight:normal;
  166. font:{font:title};
  167. color:{color:Title};
  168. text-transform:none;
  169. line-height:20px;
  170. letter-spacing:0px;
  171. }
  172.  
  173.  
  174. .h2 {
  175. font-size:11px;
  176. font:{font:text};
  177. color:{color:text};
  178. background-color: {color:post details};
  179. text-align: right;
  180. text-transform:uppercase;
  181. padding:1px;
  182. font-weight:normal;
  183. }
  184.  
  185.  
  186. h3 {
  187. margin-top:10px;
  188. margin-bottom:10px;
  189. font-size:28px;
  190. font-weight:normal;
  191. font:{font:title};
  192. color:{color:Title};
  193. text-transform:none;
  194. line-height:20px;
  195. letter-spacing:0px;
  196. }
  197.  
  198. h4 {
  199. font-size:30px;
  200. font:{font:title};
  201. color:{color:Title};
  202. text-transform:none;
  203. line-height:20px;
  204. letter-spacing:0px;
  205. font-weight:normal;
  206. }
  207.  
  208. .name {
  209. font-size:28px;
  210. font:{font:title};
  211. text-transform:lowercase;
  212. line-height:25px;
  213. letter-spacing:0px;
  214. font-weight:normal;
  215. }
  216.  
  217. #credit{
  218. padding-top:5px;
  219. text-align:center;
  220. width:500px;
  221. }
  222.  
  223.  
  224. .album-art {
  225. float: left;
  226. width: 100px;
  227. height: 100px;
  228. overflow: hidden;
  229. }
  230.  
  231. .about {
  232. font-size:35px;
  233. font-family : STHeiti;
  234. color:#e9e9e9;
  235. text-align: left;
  236. text-transform:uppercase;
  237. padding:1px;
  238. margin-bottom:-15px;
  239. letter-spacing:-6px;
  240. }
  241.  
  242.  
  243. div.navi1gation a{
  244. color: #FFFFFF; display:block; width: 146px; height: 15px; text-align: center; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; text-transform: uppercase; z-index:1; font-weight: regular; display: inline-block;
  245. }
  246. div.navi1gation a:hover{
  247. background: {color:Nav Hover 1}; color: #ffffff; letter-spacing:3px; text-transform: lowercase;
  248. }
  249.  
  250.  
  251.  
  252. div.botright{
  253. -moz-border-radius:10px; border-radius:10px;
  254. z-index:9;
  255. font-size:9px;
  256. display:block;
  257. position: fixed;
  258. left:-14px;
  259. bottom:0px;
  260. padding:6px;
  261. padding-left:20px;
  262. background-image:url(http://i42.tinypic.com/2lvzbsi.jpg);
  263. background-color: transparent;}
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270. img, a img {
  271. border: 0px !important;
  272. }
  273.  
  274. .pimg {
  275. {block:IfEnableImageOpacity}
  276. opacity: 0.8; filter:alpha(opacity=85);
  277. {/block:IfEnableImageOpacity}
  278. -webkit-transition-duration: 0.8s;
  279. max-width: 500px;
  280. }
  281.  
  282. .pimg:hover {
  283. {block:IfEnableImageOpacity}
  284. opacity:1; filter:alpha(opacity=99);
  285. {/block:IfEnableImageOpacity}
  286. }
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293.  
  294. {CustomCSS}
  295. </style>
  296. </head>
  297. <body>
  298.  
  299.  
  300.  
  301. <div id="sidebar">
  302. {block:If300pxPortraitImage}<a href="/"><img src={image:300pxPortrait} width=300"></a><br><p>{/block:If300pxPortraitImage}
  303. <div class="about">❝NAVIGATE</div><br><p>
  304. <div class="navi1gation">
  305. <a href="/">«Home Sweet Home»</a>
  306. <a href="/archive">«Old Things»</a>
  307. <a href="/ask">«Ask Me»</a>
  308. <a href="/rss">«Feed My Dog»</a>
  309.  
  310. {block:IfLink1Name}<a href="{text:link 1 url}">{text:link 1 name}</A>{/block:IfLink1Name}
  311. {block:IfLink2Name}<a href="{text:link 2 url}">{text:link 2 name}</A>{/block:IfLink2Name}
  312. {block:IfLink3Name}<a href="{text:link 3 url}">{text:link 3 name}</A>{/block:IfLink3Name}
  313. {block:IfLink4Name}<a href="{text:link 4 url}">{text:link 4 name}</A>{/block:IfLink4Name}
  314. {block:IfLink5Name}<a href="{text:link 5 url}">{text:link 5 name}</A>{/block:IfLink5Name}
  315. </div><p>
  316. <div class="about">❝ABOUT ME</div><br>
  317. {Description}<font color=#FFFFFF><span style="letter-spacing:0px; text-shadow: #c6c6c6 1px 1px 1px;"><div align="justify">Camille <font color=#d0d0d0></font> 15 <font color=#d0d0d0></font> f r e n c h. No, i'm not eating frog and snails. This journal is specially for anime and manga, edits and maybe gifs. So. Enjoy. <font color=#d0d0d0>(″・ิ_・ิ)っ</font> Guilty Crown — Air Gear — Mawaru Penguidrum — Code Geass — Fairy Tail — Game of Thrones — The Borgia — Samukawa Yahirooooo.</div></span></font>
  318.  
  319.  
  320.  
  321. <div id="content">
  322.  
  323. {block:Posts}
  324.  
  325.  
  326.  
  327. <div id="post">
  328.  
  329. {block:Text}
  330. {block:Title}
  331. <h3><a href="{Permalink}">{Title}</a></h3>
  332. {/block:Title}
  333. {Body}
  334. {/block:Text}
  335.  
  336. {block:Photo}
  337. {LinkOpenTag}<img class="pimg" src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px"/>{LinkCloseTag}
  338. {block:Caption}
  339. {Caption}
  340. {/block:Caption}
  341. {/block:Photo}
  342.  
  343. {block:Photoset}
  344. <center>{Photoset-500}</center>
  345. {block:Caption}
  346. {Caption}
  347. {/block:Caption}
  348. {/block:Photoset}
  349.  
  350. {block:Quote}
  351. <h3>"{Quote}"</h3>
  352. {block:Source}
  353. -{Source}
  354. {/block:Source}
  355. {/block:Quote}
  356.  
  357. {block:Link}
  358. <a href="{URL}" class="link" {Target}><h3>{Name}</h3></a>
  359. {block:Description}
  360. {Description}
  361. {/block:Description}
  362. {/block:Link}
  363.  
  364.  
  365. {block:Chat}
  366. {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
  367. {block:Lines}
  368. {block:Label}<b>{Label}</b>{/block:Label}
  369. {Line}<br>
  370. {/block:Lines}
  371. {/block:Chat}
  372.  
  373.  
  374. {block:Video}
  375. <center>{Video-500}</center>
  376. {block:Caption}
  377. {Caption}
  378. {/block:Caption}
  379. {/block:Video}
  380.  
  381.  
  382. {block:Audio}<br/>
  383. {block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" height="90px"></div>{/block:AlbumArt}
  384. {AudioPlayerWhite}
  385. {block:Caption}
  386. {Caption}
  387. {/block:Caption}
  388. {PlayCountWithLabel}<br><br>
  389. {/block:Audio}<br>
  390.  
  391. <div class="h2">
  392. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{ReblogURL};" target="_blank">Reblog</a> | {/block:NoteCount}
  393. <a href="{Permalink}">
  394. {TimeAgo}{/Block:NoteCount}</a>
  395. {block:HasTags} Tagged as: {block:Tags}<a href="{TagURL}">{Tag} ▶ </a>{/block:Tags}<br> {/block:HasTags}
  396. </div>
  397.  
  398. {block:PermalinkPage}
  399. <center>{Block:NoteCount}Posted on {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}{/Block:NoteCount}
  400. <br>
  401. {block:RebloggedFrom}
  402. Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  403. Originally posted by: <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}
  404. </center>
  405. {block:PostNotes}{PostNotes}{/block:PostNotes}
  406. {/block:PermalinkPage}
  407.  
  408. </div>
  409. {/block:Posts}
  410.  
  411.  
  412.  
  413. <div id="post">
  414. <div id="credit">
  415. <font size="5">
  416. <center>{block:Pagination}
  417. {block:PreviousPage}
  418. <a href="{PreviousPage}">«</a>
  419. {/block:PreviousPage}
  420.  
  421. {block:JumpPagination length="5"}
  422. {block:CurrentPage}
  423. {PageNumber}
  424. {/block:CurrentPage}
  425.  
  426. {block:JumpPage}
  427. <a href="{URL}">{PageNumber}</a>
  428. {/block:JumpPage}
  429. {/block:JumpPagination}
  430.  
  431. {block:NextPage}
  432. <a href="{NextPage}">»</a>
  433. {/block:NextPage}
  434. {/block:Pagination}</center>
  435. </font></div></div>
  436.  
  437.  
  438. <div class="botright">
  439. <b>Theme By:</b> <a href="http://dyarenesis.tumblr.com"><font color="ffffff">dyarenesis</font></a>
  440. </div>
  441.  
  442. </div>
  443. </div>
  444. </div>
  445. </body>
  446. </html>


Merci d'avance et cordialement (:
a c 232 L Programmation
19 Décembre 2011 11:10:01

On peut voir le code directement dans la source HTML, ça suffit généralement ;) 

Mais tu as plein de soucis dans ton code HTML :

  • Tu as un soucis de fermeture de balise vu que ta <div id="content"> est à l'intérieur de ta <div id="sidebar">, tu ne fermes pas la div sidebar.
  • Tu as plein de <p> tout seul. Les paragraphes doivent être ouverts et fermés... Si tu veux mettre un paragraphe vide, c'est <p></p>

    19 Décembre 2011 11:22:07

    Merci. (: Je vais corriger ça et si j'ai encore un soucis je reviendrais quémander un peu d'aide.
    19 Décembre 2011 11:27:43

    Pardonnez le double post mais je voulais prévenir que mon problème était résolu et remercier OmaR pour son aide. (: Merci de votre aide!

    Cordialement;
    a c 232 L Programmation
    19 Décembre 2011 11:35:53

    Bonne continuation :) 
    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