WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Images at top and bottom of sidebar missing (8 posts)

  1. David Borrink
    Member
    Posted 5 years ago #

    Site under development: http://dev.brightideaspress.com

    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.

    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.

    Perhaps someone can see if I've overlooked something.

    My sidebar.php structure is as follows:

    <div id="sidebar-wrap">
    	<div id="sidebar-top">
       	</div>
    		<div id="sidebar">
    
    			[content]
    
    		</div>
        	<div id="sidebar-bottom">
       	</div>
    </div>

    Here's the complete CSS for the sidebar:

    /* Begin Sidebar */
    
    #sidebar-wrap {
    	float: left;
    	margin: 0px 0px 24px 24px;
    	width: 184px;
    	}
    
    #sidebar-top {
    	background: url('images/sidebar-top.gif') no repeat top center;
    }
    
    #sidebar {
    	background: #a87c4c;
    	padding: 24px 24px 10px 0px;
    	width: 160px;
    	}
    
    #sidebar-bottom {
    	background: url('images/sidebar-bottom.gif') no repeat top center;
    }
    
    #sidebar form {
    	margin: 0;
    	}
    /* End Sidebar */

    The divs and images are not showing up. I remove the image divs and the content is at the same location.

  2. chaoskaizer
    Member
    Posted 5 years ago #

    The divs and images are not showing up

    there is no fixed height on sidebar-top and sidebar-bottom div. try

    #sidebar-top{
        background: url('images/sidebar-top.gif') no repeat top center;
        height: 10px /* change the value base on your image height */
    }
    
    #sidebar-bottom {
        background: url('images/sidebar-bottom.gif') no repeat top center;
        height: 10px
    }
  3. David Borrink
    Member
    Posted 5 years ago #

    Ah, height definitions. Of course. It needs space.

    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.

    Any ideas why they wouldn't be there?

  4. chaoskaizer
    Member
    Posted 5 years ago #

    try clear your browser cache. I tested the code online, It should render nicely.

  5. David Borrink
    Member
    Posted 5 years ago #

    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

    I even tried a background color of #fff in there to put something in the space, but nothing happened. It's still empty.

    You can see it on the dev site at http://dev.brightideaspress.com. 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).

    Here's the sidebar code in it's current form:

    '/* Begin Sidebar */

    #sidebar-wrap {
    float: left;
    margin: 0px 0px 24px 24px;
    width: 184px;
    }

    #sidebar-top {
    background: #fff url('images/sidebar-top.gif') no repeat top center;
    height: 13px;
    }

    #sidebar {
    background: #a87c4c;
    padding: 24px 24px 10px 0px;
    width: 160px;
    }

    #sidebar-bottom {
    background: #fff url('images/sidebar-bottom.gif') no repeat top center;
    height: 13px;
    }

    #sidebar form {
    margin: 0;
    }
    /* End Sidebar */'

    Thanks, again for your time.

  6. David Borrink
    Member
    Posted 5 years ago #

    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.

  7. David Borrink
    Member
    Posted 5 years ago #

    I FIGURED IT OUT.

    I copied another line of code with a background and image and pasted it below the line in question to compare.

    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.

    Chaoskaizer, Thank YOU again. You've helped me before.

  8. brettlewis
    Member
    Posted 5 years ago #

    you also might want to define a width...

Topic Closed

This topic has been closed to new replies.

About this Topic