Background expandable div

Question

jrock2004 0 Light Poster

13 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>

css div usability web-design

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

3 Contributors
5 Replies
137 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by jrock2004

All 5 Replies

helioptra 1 Light Poster

13 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

13 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

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers