CSS Rounded Box help

HTML & CSS
1

I have a gradient rounded box with a border. The header of the box is outlined text (but won’t need to change, so I’m using a GIF). The final result should look like this: http://danspeziale.com/images/instr_step5.jpg

I have it nearly figured out, but I can’t float the header in the proper place without it getting cut off. Can anyone assist?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen, projection">
<!--

/***** Images on All Sides box *****/
#instructions {
	float:left;
	height: 43px;
	width: 197px;
	z-index: 100;
	margin-top: -40px;
	background-image: url(images/instr-header.gif);
}

.cB, .cBw {
	background-image: url(images/fb_leftright.png);
	background-position: right top;
}
.cBt, .cBt div, .cBb, .cBb div { background:url(images/fb_topbottom.png) top right; }
.cB {
	position:relative;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: auto;
}
.cBw {
	background-position:top left;
	padding-left:10px;
}
.cBt, .cBb {
	margin:0 -15px 0 -10px; /* push into rB and rBw padding */
	height:23px; /* fix IE/win bug when rB width set */
}
.cBt div, .cBb div { width:20px; height:23px; }
.cBt div {
	background-position:top left;
	padding-top: 0px;
}
.cBb, .cBb div { height:25px; }
.cBb { background-position:bottom right; }
.cBb div { background-position:bottom left; }
/***** end Images on All Sides box *****/

#testing {padding:15px 50px; }
-->
</style>
</head>

<body>
<div class="cB">
 <div class="cBw">
    <div class="cBt">
      <div></div>
    </div>
    <div id="instructions"></div>
    <p>Content </p>
    <div class="cBb">
      <div></div>
    </div>
  </div>
</div>
</body>
</html>

[attachment=2]instr-header.gif[/attachment]

2

Hi Danopoly,

Have you tried using position:absolute; on the #instructions div? Using top: -40px; and left: 50px (or whatever looks right) you should be able to get the look you want.

floater

3

Hi,

I think you want something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen, projection">
<!--
/***** Images on All Sides box *****/
.cB h3 {
    float:left;
    height: 43px;
    width: 197px;
    z-index: 100;
    position:relative;
    margin:-43px 0 0;
    background: url(images-test/instr-header.gif) no-repeat 0 0;
    text-indent:-999em;
}
.cB, .cBw {
    background: url(images-test/fb_leftright.png) repeat-y 100&#37; 0;
    padding:0 10px 0 0;
}
.cBw {
    background-position:0 0;
    padding:0 0 0 10px;
}
.cBt, .cBt div, .cBb, .cBb div {
    background:url(images-test/fb_topbottom.png) 100% 0;
}
.cB {
    position:relative;
    margin:20px 0 0;
    min-height:0;
}
* html .cb {zoom:1.0}
.cBt, .cBb {
    margin:0 -11px 0 -10px; /* push into rB and rBw padding */
    height:23px; /* fix IE/win bug when rB width set */
}
.cBt div, .cBb div {
    width:20px;
    height:23px;
}
.cBt div {
    background-position:top left;
}
.cBb, .cBb div {
    height:25px;
}
.cBb {background-position:100% 100%;clear:both}
.cBb div {background-position:0 100%}
/***** end Images on All Sides box *****/

#testing {
    padding:15px 50px;
}
-->
</style>
</head>
<body>
<div class="cB">
    <div class="cBw">
        <div class="cBt">
            <div></div>
        </div>
        <h3>Instructions</h3>
        <p>Content </p>
        <p>Content </p>
        <p>Content </p>
        <p>Content </p>
        <p>Content </p>
        <div class="cBb">
            <div></div>
        </div>
    </div>
</div>
</body>
</html>

You needed position:relative on the Instructions image for the z-index to take effect.

I tidied it up a bit also :slight_smile:

4

Thanks to both of you. Using Paul’s code did the trick!

I also had success with removing “overflow: auto;” from .cB and adding “margin-left: 14px;” to .cBw.

I appreciate the replies!

Dan