Can you please help get my expandable box working?

Garindan

02-26-2009, 09:04 PM

Hi all, first post. This site looks really good ;)

Can anyone help me out with this? I am trying to create a 'rounded corner' expandable box with four corner images. I know there are other methods but the four corners fit in with the rest of the site design and i thought it would be best.

I have the four corner images positioned correctly but i can't get the box to expand and i don't know where i've gone wrong. Its fixed width so only needs to expand down. Instead the text just flows over.

Also, if i set the box to a fixed height everything is perfect, but if i try to make it expand for some reason the two bottom corner images jump to the top of the box. I'm confused :confused:

If anyone could help i would be very grateful :thumbsup:

Here's the code:-

xhtml
<div id="contenttop_box">
<div id="contenttop_content">content here</div>
<div id="contenttop_tl"></div>
<div id="contenttop_tr"></div>
<div id="contenttop_bl"></div>
<div id="contenttop_br"></div>
</div>

css
#contenttop_box {
clear: both;
width: 960px;
height: 42px;
position: relative;
background-color: #FFFFFF;
background-image: url('images/contenttop-background.png');
}

#contenttop_content {
position: absolute;
padding-left: 15px;
padding-right: 15px;
width: 930px;
}

#contenttop_tl {
background: url('images/contenttop-boxleft_top.png');
width: 11px;
height: 21px;
left: 0px;
top: 0px;
background-repeat: no-repeat;
position: absolute;
}

#contenttop_tr {
background: url('images/contenttop-boxright_top.png');
width: 11px;
height: 21px;
right: 0px;
top: 0px;
background-repeat: no-repeat;
position: absolute;
}

#contenttop_bl {
background: url('images/contenttop-boxleft_bottom.png');
width: 11px;
height: 21px;
left: 0px;
bottom: 0px;
background-repeat: no-repeat;
position: absolute;
}

#contenttop_br {
background: url('images/contenttop-boxright_bottom.png');
width: 11px;
height: 21px;
right: 0px;
bottom: 0px;
background-repeat:no-repeat;
position: absolute;
}

BoldUlysses

02-26-2009, 10:12 PM

Hi Garindan. Welcome to CF!

You need to get rid of position:absolute your content. That removes it from the document flow and makes its containing box ignore it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Page Title Goes Here</title>

<style type="text/css">

#contenttop_box {
width: 960px;
position: relative;
background-color: #FFFFFF;
background-image: url('images/contenttop-background.png');
}

.contenttop_corners {
width: 11px;
height: 21px;
background-repeat: no-repeat;
position: absolute;
}

#contenttop_content {
padding-left: 15px;
padding-right: 15px;
width: 930px;
}

#contenttop_tl {
background-image: url('images/contenttop-boxleft_top.png');
left: 0px;
top: 0px;
}

#contenttop_tr {
background-image: url('images/contenttop-boxright_top.png');
right: 0px;
top: 0px;
}

#contenttop_bl {
background-image: url('images/contenttop-boxleft_bottom.png');
left: 0px;
bottom: 0px;
}

#contenttop_br {
background-image: url('images/contenttop-boxright_bottom.png');
right: 0px;
bottom: 0px;
}

</style>

</head>

<body>

<div id="contenttop_box">
<div id="contenttop_content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div class="contenttop_corners" id="contenttop_tl"></div>
<div class="contenttop_corners" id="contenttop_tr"></div>
<div class="contenttop_corners" id="contenttop_bl"></div>
<div class="contenttop_corners" id="contenttop_br"></div>
</div>

</body>
</html>

Also note the addition of a class for the corners in order to consolidate their common properties and simplify the code.

Honestly, if your box is going to be fixed width you could just get away with doing top and bottom caps instead of four corners. Check out this page for an example (http://www.sufferndesign.com/helping/page4.html).

Garindan

02-28-2009, 05:06 PM

Hi thanks alot for the reply! Thanks for letting me know about the content position absolute, that works properly now. Unfortunately the two bottom images bl & br refuse to sit at the bottom! :confused: They are at the top but sitting atop the line of the div :( , so not in the same place as the top two corners, but above them on top of the #contenttop_box div! Thats where they were before and i cant get them down :D

Oh also i do have top and bottom caps on the box, but they are above and below this 'central' box i'm trying to make work. The corners on my design are quite big, but i like the design. So i found that if i slice the corners off, top and bottom, where they end (and the design goes straight) then iv'e got a fair bit of white space above and below the text. So instead i have made smaller top and bottom caps (11px height) and then four images to make up the rest of the corner (11px width) for the middle box. Then i can have less white space at top and bottom of content and it looks alot better (well it would if it worked :o ).

I hope that all made sense. I just wanna get my corners in right position :rolleyes:

Any idea's whats happening? Many thanks again for your help!!!

Update: I have found that if the #contenttop_box has a fixed height then the corners are in the right place, but if i take the height out they go to that weird position (this is what was happening before).

Update 2: Actually forget that, its dreamweaver thats showing funny behaviour for the bottom corners, works really well in IE7 and firefox