11 replies [Last post]
nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 22 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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;
}

HEADER

Text...

FOOTER

AttachmentSize
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
nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

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.

nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

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

slc faircontent here

Thanks,

nofx1728

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mdnewsguy
mdnewsguy's picture
Offline
Enthusiast
Philadelphia, PA
Last seen: 12 years 10 weeks ago
Philadelphia, PA
Timezone: GMT-5
Joined: 2007-01-23
Posts: 69
Points: 0

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

AttachmentSize
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

"If you're still using ie5, you have bigger problems than not being able to view my website."

nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Thanks for the replies.

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

nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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;
}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nofx1728
Offline
Regular
Florida
Last seen: 8 years 18 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

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 Smile. You don't know how many articles I was reading through on google trying to figure this out. Thanks again for your help.

nofx1728

rogenie
Offline
Regular
Last seen: 12 years 10 weeks ago
Joined: 2007-01-29
Posts: 13
Points: 0

Solve my same problem:=)

Solve my same problem:=) Thank you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

two birds with one stone,

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me