SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content needs to appear above a background but hide behind an image.

    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

    Code:
    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.
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mguise View Post
    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
    1) The page will expand automatically so you don't need to do anything special for point 1.

    2) Place the swirly image as background to the page wrapper and position it at 50% 100% and it will always remain at the bottom.

    3) Nothing special needed here just another container in the normal flow and it will automatically sit on top of the swirly images.

    4) Not Sure what you mean by "never move"? I would place the 4 circles as 4 absolute elements placed into position with a z-index to keep them on top of everything. Add position:relative to the wrapper and then you can place them in respect of the wrapper and they will always remain at that position (unless you are talking about position:fixed of course). You don't need to do anything special for the nav unless you wanted a fixed positioned navigation but I would advise against that unless it was either the first or last element on the page.

    I wouldn't use a grid system for that as you have too much code before you even start. CSS is its own grid system so just create what you need (unless you were just using it for wireframing of course).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •