1 reply [Last post]
mathewbguise
Offline
newbie
Packwood, Iowa
Last seen: 2 years 22 weeks ago
Packwood, Iowa
Timezone: GMT-5
Joined: 2012-02-01
Posts: 3
Points: 6

Hi

It looks like I got a bit cocky and sold a design to one of my clients that I am having trouble building.

Please take a look at the attached file so you can see what I am talking about.

1. The web page’s height dynamically needs to expand vertically.

2. The swirly design in the background has to stay at the bottom with the footer when the web page expands.

3. The yellow area represents the place where I need to put content that will also expand vertically. It needs to stay behind the circle herb images and in front of the swirly design.

4. The circle herb images can never move in position nor can the navigation.

Please go to the following URL and you can see what I have designed so far.

http://www.webskillsplus.com/massage/index.html

Take a look at demo.css

html {
	background: #5e88a2 url(../img/dice_slice.jpg) repeat-x;
}
body {
	padding: 0;
	margin: 0;
	background: url(../img/bg.jpg) no-repeat center top;
	width: 100%;
	display: table;
}
.header	{
	width: 960px;
	background: url(../img/header.jpg) no-repeat center top;
	height: 196px;
}
.footer	{
	float: left;
	width: 960px;
	background-color: #b9b299;
	height: 86px;
}
.container_12 {
	height: 100%;
	background: url(../img/design.jpg) no-repeat center bottom;
}

I could make .container_12 solid white but it covers the circle herb images.

AttachmentSize
page_1.jpg78.9 KB
ndirashful
ndirashful's picture
Offline
newbie
New Jersey
Last seen: 2 years 41 weeks ago
New Jersey
Timezone: GMT-5
Joined: 2012-02-17
Posts: 3
Points: 3

Did you get help with

Did you get help with this?
If not, take a look at what I came up with here:

http://bit.ly/ABL0tJ

Rather than floats, it's easier to use absolute positioning for those 2 floating images. Also, the container holding them should be positioned relative.

Hope that helps.