http://wordpress.org/support/ WordPress › Support Topic: Images at top and bottom of sidebar missing en Tue, 24 Nov 2009 03:01:29 +0000 http://wordpress.org/support/topic/260249#post-1059530 Wed, 29 Apr 2009 02:52:53 +0000 brettlewis 1059530@http://wordpress.org/support/ <p>you also might want to define a width... </p> http://wordpress.org/support/topic/260249#post-1041911 Thu, 09 Apr 2009 23:50:55 +0000 DavidBorrink 1041911@http://wordpress.org/support/ <p>I FIGURED IT OUT.</p> <p>I copied another line of code with a background and image and pasted it below the line in question to compare.</p> <p>I found that "no repeat" needed a hyphen in there. Sheesh. Unbelievable what one character can do to mess up the code. I'm all set.</p> <p>Chaoskaizer, Thank YOU again. You've helped me before. </p> http://wordpress.org/support/topic/260249#post-1041892 Thu, 09 Apr 2009 23:26:48 +0000 DavidBorrink 1041892@http://wordpress.org/support/ <p>Addendum: I just added a background color of #ffffff to the "sidebar-wrap" div and it does fill the space, so you can see the full sidebar area now marked with white in the top and bottom divs. </p> http://wordpress.org/support/topic/260249#post-1041889 Thu, 09 Apr 2009 23:18:47 +0000 DavidBorrink 1041889@http://wordpress.org/support/ <p>Hmmm... clearing the browser cache doesn't work, and I also viewed it on other computers. All I have is a 13px open space in the top div, then the content div with the brown background. The bottom div is empty, too, of course</p> <p>I even tried a background color of #fff in there to put something in the space, but nothing happened. It's still empty.</p> <p>You can see it on the dev site at <a href="http://dev.brightideaspress.com." rel="nofollow">http://dev.brightideaspress.com.</a> Go to a page other than the front to see the sidebar content 13px lower than the main content. (Front page is a custom template under development).</p> <p>Here's the sidebar code in it's current form:</p> <p>'/* Begin Sidebar */</p> <p>#sidebar-wrap {<br /> float: left;<br /> margin: 0px 0px 24px 24px;<br /> width: 184px;<br /> }</p> <p>#sidebar-top {<br /> background: #fff url('images/sidebar-top.gif') no repeat top center;<br /> height: 13px;<br /> }</p> <p>#sidebar {<br /> background: #a87c4c;<br /> padding: 24px 24px 10px 0px;<br /> width: 160px;<br /> }</p> <p>#sidebar-bottom {<br /> background: #fff url('images/sidebar-bottom.gif') no repeat top center;<br /> height: 13px;<br /> }</p> <p>#sidebar form {<br /> margin: 0;<br /> }<br /> /* End Sidebar */'</p> <p>Thanks, again for your time. </p> http://wordpress.org/support/topic/260249#post-1041367 Thu, 09 Apr 2009 13:42:41 +0000 chaoskaizer 1041367@http://wordpress.org/support/ <p>try clear your browser cache. I tested the code online, It <em>should </em> render nicely. </p> http://wordpress.org/support/topic/260249#post-1041363 Thu, 09 Apr 2009 13:38:04 +0000 DavidBorrink 1041363@http://wordpress.org/support/ <p>Ah, height definitions. Of course. It needs space.</p> <p>I made that change, and there is now a 13px "gap" there, but no image is in place. The content div is 13px lower than it was. So now I need to figure out why my images aren't showing up. They're in the "images" folder in my theme folder, so they should be showing up.</p> <p>Any ideas why they wouldn't be there? </p> http://wordpress.org/support/topic/260249#post-1040203 Wed, 08 Apr 2009 11:31:22 +0000 chaoskaizer 1040203@http://wordpress.org/support/ <blockquote><p>The divs and images are not showing up</p></blockquote> <p>there is no fixed height on sidebar-top and sidebar-bottom div. try<br /> <pre><code>#sidebar-top{ background: url(&#39;images/sidebar-top.gif&#39;) no repeat top center; height: 10px /* change the value base on your image height */ } #sidebar-bottom { background: url(&#39;images/sidebar-bottom.gif&#39;) no repeat top center; height: 10px }</code></pre> http://wordpress.org/support/topic/260249#post-1039858 Wed, 08 Apr 2009 00:46:43 +0000 DavidBorrink 1039858@http://wordpress.org/support/ <p>Site under development: <a href="http://dev.brightideaspress.com" rel="nofollow">http://dev.brightideaspress.com</a></p> <p>I've looked and looked at the code. I must be missing something. At the top and bottom of the sidebar should be rounded cornered "cap" images. The end look should be a rounded cornered sidebar, brown with tan background.</p> <p>I have a wrapper div around the sidebar with 3 divs inside: a top image in one, the contents of the sidebar in the next, and the bottom image last.</p> <p>Perhaps someone can see if I've overlooked something.</p> <p>My sidebar.php structure is as follows:</p> <pre><code>&lt;div id=&quot;sidebar-wrap&quot;&gt; &lt;div id=&quot;sidebar-top&quot;&gt; &lt;/div&gt; &lt;div id=&quot;sidebar&quot;&gt; [content] &lt;/div&gt; &lt;div id=&quot;sidebar-bottom&quot;&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> <p>Here's the complete CSS for the sidebar:</p> <pre><code>/* Begin Sidebar */ #sidebar-wrap { float: left; margin: 0px 0px 24px 24px; width: 184px; } #sidebar-top { background: url(&#39;images/sidebar-top.gif&#39;) no repeat top center; } #sidebar { background: #a87c4c; padding: 24px 24px 10px 0px; width: 160px; } #sidebar-bottom { background: url(&#39;images/sidebar-bottom.gif&#39;) no repeat top center; } #sidebar form { margin: 0; } /* End Sidebar */</code></pre> <p>The divs and images are not showing up. I remove the image divs and the content is at the same location. </p>