Hello! I'm creating a site with rounded corners and I'm having all kinds of problems. There are a few things that I want that I can not for the life of me get to display properly.
1. I created an image in photoshop with rounded corners, a border and a drop shadow. I want this image to be background of my container. What I mean by that is I want the body of the page to be a certain color... and for this image to sit in the middle of the page. I need it to stretch vertically though so it expands with the content. Hopefully that makes sense.
2. For each section of my site I want to have rounded corner elements to hold that information. For example.. if I have a Header, content1, content2, content3, footer. Each of them sections would have a rounded corner box that expands with content. The background of these boxes will also have graphics.. so I can't just make the center a color.. that has to be an image as well.
I'm not sure if that makes any sense at all so let me post a link of a site that has a simiar effect that I'm trying to create. http://www.fairplex.com/2007/homepage.asp
Can someone please help me.. I'm struggling beyond belief.
Thanks,
nofx1728
Hi This might give you some
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;
}
Text...
Attachment | Size |
---|---|
Frame_down.jpg | 685 bytes |
Frame_down-left.jpg | 921 bytes |
Frame_down-right.jpg | 910 bytes |
Frame_left.jpg | 670 bytes |
Frame_right.jpg | 673 bytes |
Frame_up.jpg | 697 bytes |
Frame_up-left.jpg | 912 bytes |
Frame_up-right.jpg | 909 bytes |
Thank you very much for your
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
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

Thanks,
nofx1728
Your leaving yourself little
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
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;
}
this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
hope this helps
Attachment | Size |
---|---|
top_left.gif | 417 bytes |
top_middle.gif | 2.23 KB |
top_right.gif | 469 bytes |
top_spacer.gif | 73 bytes |
middle_left.gif | 57 bytes |
middle_right.gif | 119 bytes |
bottom_middle.gif | 69 bytes |
bottom-left.gif | 395 bytes |
bottom-right.gif | 504 bytes |
Thanks for the replies.
Thanks for the replies. I'll test these out.
I thank everyone for their
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
News and Information
- First News Info
- Second News Info
- Third News Info
- will this continue to extend downwards
- will this continue to extend downwards
- will this continute to extend downwards
- will this coninue to extend
- will this continue
- will this continue
- will this continue
- will this continue
- will this continue
Exhibits & Concerts
- First Exhibit
- Second Exhibit
- Third Exhibit
Entertainment/Events
- First Event
- Second Event
- Third Event
Thanks,
nofx1728
Ferris wheel:
#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
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:=)
Solve my same problem:=) Thank you.
two birds with one stone,
two birds with one stone, er or is it blokes or have we one bloke and one bird or.. oh just ignore me