Member Avatar for jrock2004

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>
Screen_shot_2010-07-01_at_11.06_.15_AM_.png 20.9 KB
  • 3 Contributors
  • 5 Replies
  • 148 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jrock2004
Member Avatar for helioptra 
<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!

Member Avatar for jrock2004

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>
Member Avatar for jrock2004

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>
Member Avatar for gaurang4

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.

Member Avatar for jrock2004

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

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.