[Solved] rounded corners - images on top of images

Hi

This might give you some ideas:

New document

html,body{
margin:0;
padding:0;
border:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%;
background:#000000;
}
div,p{margin:0}
#ob{
margin-left:0;
width:550px; /* adjust this for width */
overflow:hidden;
margin-top:20px;
}
#ob .mrlbg{background:url(images/Frame_left.jpg) repeat-y left}
#ob .mrrbg{
background:url(images/Frame_right.jpg) repeat-y right;
height:44px; /* adjust this for height */
}
#ob .ulbg{background:url(images/Frame_up-left.jpg) no-repeat top left}
#ob .urbg{background:url(images/Frame_up-right.jpg) no-repeat top right}
#ob .umbg{
margin:0 20px;
background:url(images/Frame_up.jpg) repeat-x;
height:40px;
overflow:hidden;
}
#ob .llbg{background:url(images/Frame_down-left.jpg) no-repeat top left;}
#ob .lrbg{background:url(images/Frame_down-right.jpg) no-repeat top right}
#ob .lmbg{
margin:0 30px;
background:url(images/Frame_down.jpg) repeat-x 0 0;/* second value is push down for middle bottom line if not same height as corner bits */
height:25px;
overflow:hidden;
}
#ob .bt{
margin:0 1.5em;
margin-top:-.3em;
color:#ADFF2F;
font-weight:bold;
font-size:1.1em;
}
#ob .hd{
color:teal;
font-weight:bold;
text-align:center;
margin-top:8px;
font-size:.9em;
}
#ob .ft{
color:teal;
font-weight:bold;
text-align:center;
margin-top:9px;
font-size:.9em;
}

Thank you very much for your help. I think this will give me the information I need to create the look I was trying for. I appreciate your help.

I'm lost once again. I need my container to expand down when more content is added automatically. Right now the container remains fixed and the content carries on past the background. Does anyone know how to fix this... so I don't have to adjust the height of every section of my page, on every page of my site? Please help. Here is my code. You can view an example here: http://home.bellsouth.net/p/pwp-slcfair

/* CSS Document */

html,body{
margin:0;
padding:0;
border:0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #0091d4;
}

#container {
width: 760px;
margin: auto;
overflow: hidden;
}

/*Top Section of Background*/
#top {
width: 760px;
height: 10px;
margin: 0px;
}

#top .topleft {
background-image: url(images/top_left.png);
background-repeat: no-repeat;
float: left;
height: 10px;
width: 15px;
}

#top .topright {
background-image: url(images/top_right.png);
background-repeat: no-repeat;
float: left;
height: 10px;
width: 15px;
}

#top .topmiddle {
background-image: url(images/top_middle.png);
background-repeat: repeat-x;
height: 10px;
float: left;
width: 730px;
}

/*End of Top Section*/
/*Beginning of Middle Background*/

#middle {
width: 760px;
margin: 0px;
}

#middle .leftside {
background-image: url(images/side_left.png);
background-repeat: repeat-y;
float: left;
width: 15px;
height: 520px;
}

#middle .main {
width: 730px;
height: 520px;
background-color: #FFFFFF;
float: left;
}

#middle .rightside {
background-image: url(images/side_right.png);
background-repeat: repeat-y;
height: 520px;
float: left;
width: 15px;
}

/*Start of Content*/
.orangebox {
background-color: #ffbb03;
width: 730px;
height: 150px;
}

.leftboxes {
width: 450px;
float: left;
}

.greenbox {
background-color: #9fca45;
width: 450px;
height: 200px;
float: left;
margin-top: 10px;
}

.ferriswheel {
background:url(images/ferriswheel.png) no-repeat bottom right;
width: 450px;
height: 200px;
}

.ferriswheel p {
margin: 5px;
}

.ferriswheel h3 {
margin: 5px;
color: #222662;
}

.ferriswheel li {
list-style-image:url(images/red_bullet.gif);
}

.bluebox {
background-color: #00a7c1;
width: 450px;
height: 150px;
float: left;
margin-top: 10px;
}

.cow {
background:url(images/cow.png) no-repeat bottom left;
width: 450px;
height: 150px;
}

.cow p {
margin: 5px 5px 5px 120px;
text-align: left;
}

.cow h3 {
margin: 5px 5px 5px 120px;
color:#620041;
}

.cow li {
list-style-image: url(images/red_bullet.gif);
margin-left: 120px;
}

.darkorangebox {
background-color: #ee7719;
width: 270px;
height: 360px;
float: left;
margin-top: 10px;
margin-left: 10px;
}

.music {
background:url(images/music.png) no-repeat bottom right;
width: 270px;
height: 360px;
}

.music p {
margin: 5px;
}

.music h3 {
color: #37630A;
text-align: center;
}

.music li {
list-style-image: url(images/red_bullet.gif);
}

/*End of Middle Section*/
/*Beginning of Bottom Background*/

#bottom {
height: 10px;
width: 760px;
clear: both;
}

#bottom .bottomleft {
background-image: url(images/bottom_left.png);
background-repeat: no-repeat;
float: left;
height: 10px;
width: 15px;
}

#bottom .bottommiddle {
background-image: url(images/bottom_middle.png);
background-repeat: repeat-x;
height: 10px;
overflow: hidden;
float: left;
width: 730px;
}

#bottom .bottomright {
background-image: url(images/bottom_right.png);
background-repeat: no-repeat;
float: left;
height: 10px;
width: 15px;
}

/*End of Bottom Section*/

/*Styling*/

p {
margin: 0px;
}

New document

News and Information

• First News Info
• Second News Info
• Third News Info

Exhibits & Concerts

• First Exhibit
• Second Exhibit
• Third Exhibit

Entertainment/Events

• First Event
• Second Event
• Third Event

more content here

content here

Thanks,

nofx1728

Your leaving yourself little room for manoeuvre I'm afraid. If you build a layout based on fixed heights you're going to have these sorts of problems.

Content is meant to overflow fixed heights, you could set element to overflow hidden but that is not likely what you want.

If your doing rounded boxes then you really want to slice the graphics into at least two for top and bottom and with something to fill the middle as it expands.

I'm working on a very similar idea right now. with some help from here and some help from another forum, I was able to get this working try this.

[img]

Untitled Document

#container {
position:relative;

width: 100%;
height: auto;
}

#top_left {
position:absolute;
left:1%;
top:15px;
background: url('top_spacer.gif') repeat-x top left;
width: 50%;
height: 56px;
}

#top_middle {
position:absolute;
top:15px;
left:50%;
margin-left:-260px;
z-index:10;
background: url('top_middle.gif') no-repeat top left;
width: 521px;
height: 56px;
z-index:3;
}

#top_right {
position:absolute;
right:1%;
top:15px;
background: url('top_spacer.gif') repeat-x top left;
width: 50%;
height: 56px
}

#top {
width: 100%;
height: 56px
}

#left {
position:absolute;
left:0px;
background: url('top_left.gif') no-repeat;
width:18px;
height: 56px;
top: 14px;
z-index:2;
}

#right {
position:absolute;
right:0px;
background: url('top_right.gif') no-repeat;
width:22px;
height: 56px;
top: 14px;
}

#one {
float:left;
background:url('middle_left.gif') repeat-y;
width:18px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#two {
margin-right:-1px;
float:right;
background:url('middle_right.gif') repeat-y;
width:22px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;

}

#three {
float:left;
left:50%;
width:50%;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#middle {
position:relative;
top:70px;
width: 100%;
height: auto;
overflow:hidden;
}
#bottom_left {
position:absolute;
width:20px;
height:31px;
z-index:100;
background:url(bottom-left.gif) no-repeat;
}

#bottom_right {
position:absolute;
width:22px;
height:31px;
right:0px;
background:url(bottom-right.gif) no-repeat;
}

#bottom_middle {
position:absolute;
width:100%;
height:31px;
background:url(bottom_middle.gif) repeat-x;
left:1%;
}

#bottom {
position:relative;
width: 100%;
height:31px;
overflow:hidden;
top:70px;
}

hope this helps

Thanks for the replies. I'll test these out.

I thank everyone for their responses and time. However, I still can not achieve what I want... I'm probably just incredibly stupid, but everything I try does not work. I've given up on the rounded corner background because that wasn't working. Instead I just added a border to my container. But I still have plenty of problems that I can not fix for whatever reason.

#1. My container is not extending in Firefox.
#2. My ferriswheel images is not displaying at the bottom, right of the green background.
#3. I need the column on the right to extend at all times to be the height of the blue box. But it needs to line up at the top with the green box.

I've been ripping my hair out for the last week trying to just get the layout down, and I'm still not there. Can someone far superior to me explain to me what I'm doing wrong to achieve this effect which should (and I'm sure it is) simple. You can view my problems here: http://bellsouthpwp2.net/n/o/nofx1728/test3.html

/* CSS Document */

html, body {
margin: 0px;
padding: 0px;
border: 0px;
}

body {
background-color: #0091d4;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 100.1%
}

#container {
width: 760px;
margin: 0px auto;
background-color: #FFFFFF;
border: #ffbb03 3px solid;
}

#top {
width: 740px;
min-height:150px;
margin: 5px 10px;
padding: 0px;
background-color: #ffbb03;
}

/*content section*/
#main {
width: 750px;
margin: 0px 10px 5px 10px;
}

.leftboxes {
width: 450px;
float: left;
}

.greenbox {
background-color: #9fca45;
width: 450px;
float: left;
margin-top: 10px;
min-height: 200px;
}

.ferriswheel {
background:url(images/ferriswheel.png) no-repeat bottom right;
width: 450px;
min-height: 200px;
}

.ferriswheel p {
margin: 5px;
}

.ferriswheel h3 {
margin: 5px;
color: #222662;
}

.ferriswheel li {
list-style-image:url(images/red_bullet.gif);
}

.bluebox {
background-color: #00a7c1;
width: 450px;
float: left;
margin-top: 10px;
min-height: 150px;
}

.cow {
background:url(images/cow.png) no-repeat bottom left;
width: 450px;
min-height: 150px;
}

.cow p {
margin: 5px 5px 5px 120px;
text-align: left;
}

.cow h3 {
margin: 5px 5px 5px 120px;
color:#620041;
}

.cow li {
list-style-image: url(images/red_bullet.gif);
margin-left: 120px;
}

.darkorangebox {
background-color: #ee7719;
width: 280px;
float: left;
margin-top: 10px;
margin-left: 10px;
min-height: 360px;
}

.music {
background:url(images/music.png) no-repeat bottom right;
width: 270px;
min-height:360px;
}

.music p {
margin: 5px;
}

.music h3 {
color: #37630A;
text-align: center;
}

.music li {
list-style-image: url(images/red_bullet.gif);
}

/*end of content*/

Untitled Document

Thanks,

nofx1728

#1. Background:

add overflow:hidden to this ruleset.

#container {
width: 760px;
margin: 0px auto;
background-color: #FFFFFF;
border: #ffbb03 3px solid;
overflow:hidden;
}

#2. Ferris wheel:

replace the existing two rulesets .greenbox & .ferriswheel for these adjusted ones.

.greenbox {
position:relative;
width: 450px;
float: left;
margin-top: 10px;
min-height: 200px;
background: #9fca45 url(images/ferriswheel.png) no-repeat right bottom;
}

.ferriswheel {
width: 450px;
min-height: 200px;
}

#3. Column height:

This is trickier; usually one would employ a technique known as 'faux columns' or put a solid background of required colour on the div behind the boxes and then use borders to recreate the white gaps between the boxes. There is one other technique that may work in this instance (does in Firefox) but you will need to test it thoroughly cross browsers.
Change the ruleset below to include the properties in bold also add overflow hidden to #main

.darkorangebox {
background-color: #ee7719;
width: 280px;
float: left;
margin-top: 10px;
margin-left: 10px;
min-height: 360px;
padding-bottom:3000px;
margin-bottom:-3000px;
}

That worked perfect. Thank you so much. You're a life saver! I now only wish I was capable of solving these problems myself . You don't know how many articles I was reading through on google trying to figure this out. Thanks again for your help.

nofx1728

Solve my same problem:=) Thank you.

two birds with one stone, er or is it blokes or have we one bloke and one bird or.. oh just ignore me