Background expandable div

Question

jrock2004 0 Light Poster

16 Years Ago

I am trying to make an expandable div that has a background image. Below is the code I am using. I am just trying to make a quick example of this.

Attached is a screenshot. In the bottom right corner of the div you see that white is outside the box. Thanks for the help

<html>
	<head>
		<title>Something</title>
		<style type="text/css">
			body {background-color: #fff; background-color: blue;}
		
			#rBox {width: 735px; margin: 0px;}
			
			#rBox h3 {background-image: url('rBoxTop.gif'); background-repeat: no-repeat;
			background-position: left top; margin: 0px; padding: 15px 0px 0px 15px;}
			
			#rBoxMiddle {background-image: url('rBoxMiddle.png'); background-repeat: repeat-y; 
			background-position: right; margin: 0px; padding: 0px;}
			
			p {margin: 0px; padding: 0px 5px 15px 5px; width: 650px;}
			
			#bottom {width: 735px; background-image: url('rBoxBottom.png');
			background-repeat: no-repeat; background-position: left bottom;}
		</style>
	</head>
	<body>
		<div id="rBox">
			<h3>Something Goes here</h3>
			<div id="rBoxMiddle">
				<p>
					All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my 
				</p>
				
			</div>
			<div id="bottom">
				&nbsp;
			</div>
		</div>
	</body>
</html>

html-css user-interface web-design

Screen_shot_2010-07-01_at_11.06_.15_AM_.png 20.9 KB

3 Contributors
5 Replies
178 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by jrock2004

Dani AI

Generated 6 Months Ago

Quick diagnosis and a low-friction fix

The white patch in the screenshot almost always comes from a width/position mismatch between your top/middle/bottom slices or from the bottom graphic not sitting visually under the expanded content. ’s three-element approach works, but is fragile: if the top is left-aligned and the middle is right-aligned (or their image widths don’t match the container) a gap will appear as the box grows.

A simpler, more robust pattern is to use one container with the repeat-y “middle” image and place the top and bottom graphics as absolutely-positioned pseudo-elements. That keeps alignment inside the same element and avoids sibling-height timing issues.

Example (adjust image heights and padding to match your assets):

.panel {
  width: 735px;
  position: relative;
  padding: 40px 15px;               /* reserve room for top/bottom slices */
  background: url("rBoxMiddle.png") right repeat-y;
  box-sizing: border-box;
}

.panel::before, .panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;                     /* set to your top/bottom image height */
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.panel::before { top: 0; background-image: url("rBoxTop.gif"); }
.panel::after  { bottom: 0; background-image: url("rBoxBottom.png"); }

Notes, alternatives and troubleshooting

Make sure the pseudo-element heights match the actual image heights and that padding reserves that space; otherwise the images will overlap content.
Use background-position: center (or consistent left/right) so slices line up; mixing left and right alignment invites gaps.
For modern layouts consider CSS border-image or using border-radius + box-shadow (no images). For legacy IE, load an IE-only stylesheet via conditional comments or serve the image-based rules as a fallback — this is exactly what ended up doing, and it’s a reasonable progressive-enhancement path.
If something still looks off, temporarily add a colored outline to the container and each pseudo-element to see where widths/heights diverge.

Credit: ’s “nifty corners” idea and ’s reminder about CSS3 are good reminders — prefer native CSS (box-shadow, border-radius) where browser support allows, and fall back to images only for older browsers.

All 5 Replies

helioptra 1 Light Poster

16 Years Ago

<html>
<head>
<title>Alessandro Fulciniti wrote this code</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>

<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

You could do as this gentleman has done...css is good and just keeps getting better!

gaurang4 1 Newbie Poster

16 Years Ago

You may also use CSS3 as below :

for <div id="box">...</div>

to make rounded corners

#box
{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

But it won't work in IE so be carefull.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jrock2004 0 Light Poster · Answer 1 · 2010-07-01T23:57:11+00:00

This code is nice. If I want to do that I can do this

CSS

.shadow {
				background-color: #fff;
				border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
				-moz-box-shadow: 3px 3px 4px #000;
				-webkit-box-shadow: 3px 3px 4px #000;
				box-shadow: 3px 3px 4px #000;
				/* For IE 8 */
				-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='#000000')";
				/* For IE 5.5 - 7 */
				filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
			}

HTML

<div class="shadow">
			All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my
		</div>

jrock2004 0 Light Poster · Answer 2 · 2010-07-02T20:40:33+00:00

Ok I got it working. I am only going to use the images for IE since rest of browsers support drop shadow in css.

<style type="text/css">
			body {background-color: blue;}
		
			#box {width: 735px; margin: 0px;}
			
			#boxtop {background-image: url('rBoxTop.gif'); background-repeat: no-repeat;
			background-position: left top; margin: 0px; padding: 15px 0px 0px 15px;}
			
			#boxmiddle {background-image: url('rBoxMiddle.png'); background-repeat: repeat-y; 
			background-position: right; margin: 0px; padding: 0px;}
			
			p {margin: 0px; padding: 10px 5px 15px 15px; width: 650px;}
			
			#boxbottom {width: 735px; background-image: url('rBoxBottom.png');
			background-repeat: no-repeat; background-position: left bottom; padding-bottom: 30px;}
			
			
		</style>

And here is the HTML

<div id="box">
			<div id="boxtop" style="width: 100%">
				toptext
			</div>
			<div id="boxmiddle">
				
				<p>
					All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my terst All my
				</p>
			</div>
			<div id="boxbottom" style="width: 100%">
				
			</div>
		</div>

jrock2004 0 Light Poster · Answer 3 · 2010-07-03T21:11:47+00:00

Yeah that is what I ended up doing. Then what I am doing is loading another stylesheet for internet explorer that uses my image trick that I did above

Background expandable div

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers