Images at top and bottom of sidebar missing

  • Resolved David Borrink

    (@davidborrink)


    15 years, 7 months ago

    Site under development: https://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.

Viewing 7 replies - 1 through 7 (of 7 total)

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

    Thread Starter David Borrink

    (@davidborrink)

    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?

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

    Thread Starter David Borrink

    (@davidborrink)

    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 https://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.

    Thread Starter David Borrink

    (@davidborrink)

    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.

    Thread Starter David Borrink

    (@davidborrink)

    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.

    you also might want to define a width…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images at top and bottom of sidebar missing’ is closed to new replies.