Liquid Divs (Creative problem)

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
sHobbsWW
Forum Newbie
Posts: 15
Joined: Wed Jul 16, 2008 10:48 am

Liquid Divs (Creative problem)

Post by sHobbsWW »

Here is my issue as it pertains to a vertically liquid website design. I have a main content area (DIV A) whose content makes the site grow from a min-height to infinite (dependent upon the contained content.) DIV A, is surrounded by a back ground image of lines. This background image needs to grow with the same height as DIV A.

However, due to the nature of the background it must be broken into 3 parts.. A top, a middle and a bottom. I need the BG-top to stay at the top of DIV A, and the BG-bottom to stay at the bottom of DIV A. This creates a problem for the BG-Middle that needs to grow to close the gap between BG-top and BG-Bottom as DIV A expands or contracts with respect to content.

Here is an image of the issue.. (colors are added to illustrate) (Dark blue is DIV A) (BG-Top is apparent, BG-Bottom is apparent)
(BG-Mid is orange colored)

http://img443.imageshack.us/img443/6080/bgissue.png

The question is how to get the BG-Mid to repeat it self to close the gap between BG-Top and BG-Bottom.
User avatar
Architek
Forum Commoner
Posts: 44
Joined: Wed Jul 01, 2009 5:01 am
Location: Portland OR

Re: Liquid Divs (Creative problem)

Post by Architek »

can you just do a background repeat in CSS to accomplish this?

assuming DIV A has a solid color or same pattern image you can repeat it left to right top to bottom... if it has a specific top to bottom pattern then you need to make an image the width of the div and set repeat so it stacks through out its expanding needs.

guessing your html looks similar to this...

Code: Select all

<div id="TOP">
    <p>This is kind of my header section...</p>
<div>
<div id="A">
     <p>This is my content section!</p>
</div>
<div id="BOTTOM">
    <p>This is my footer section...</p>
</div>

I would probably have CSS set for a background image on div A like follows.

Code: Select all

#A {
background: url(images/content-background.gif) repeat-y;
}

Is that kind of what you are looking for?
sHobbsWW
Forum Newbie
Posts: 15
Joined: Wed Jul 16, 2008 10:48 am

Re: Liquid Divs (Creative problem)

Post by sHobbsWW »

Well, again I'm trying different techniques because this is the first design of it's kind for me. Please feel free to tell me if I'm doing something completely the wrong way. But Here is the long version:

I have mainCC (DIV A) centered in the browser window regardless of the browser dimensions.

So I am attempting to imbed the BG-Top, BG-MID, BG-BOT inside the mainCC, by wrapping BG-TOP/MID/BOT in a Wrapper (BG-Wrapper).

Here is html:

Code: Select all

<div id="mainCC">

	<div id="BG-BldgWrapper">
		<div id="BG-BldgTop">
		</div>
    	<div id="BG-BldgMid">
    	</div>
		<div id="BG-BldgBot">
		</div>
	</div>
</div>
</body>
</html>
CSS code:

Code: Select all

#mainCC{
		position:absolute;
		width:884px;
		min-height:831px;
		height:1000px;
		top:140px;
		left:50%;
		margin-left:-442px;
		background-color:#996;
	}
#BG-BldgTop{
		float:left;
		width:1512px;
		height:533px;
		top:-55px;
		background-image:url(/media/images/raster/BG-BldgTop.png);
	}
#BG-BldgMid{
		float:left;
		width:158px;
		min-height:8px;
		margin-left:139px;
		background-image:url(/media/images/raster/BG-BldgMid.png);
		background-repeat:repeat-y;
		background-color:#F60;
	}
#BG-BldgBot{
		position:absolute;
		width:1512px;
		height:353px;
		left:0px;
		bottom:0px;
		margin-bottom:-55px;
		background-image:url(/media/images/raster/BG-BldgBot.png);
		opacity:1;
	
	}
#BG-BldgWrapper{
	position:absolute;
	width:1512px;
	height:100%;
	left:-312px;
	top:-55px;
	background-color:#00F;
	opacity:.7;
}
Here as a screen image, and it will explain the problem with the background. http://img687.imageshack.us/img687/6080/bgissue.png

Please if there is anything else you need to know, just ask.
User avatar
Architek
Forum Commoner
Posts: 44
Joined: Wed Jul 01, 2009 5:01 am
Location: Portland OR

Re: Liquid Divs (Creative problem)

Post by Architek »

I played with it a little bit... trying to keep your current css format intact.

I added borders since I dont get the images... also changed some colors and position from the top etc just so I could see whats going on with out scrolling.

Hope it helps.

Code: Select all


#mainCC{
                position:absolute;
                width:884px;
                min-height:831px;
                height:1000px;
                top:40px;
                left:50%;
                margin-left:-442px;
                background-color:#996;
        }
#BG-BldgTop{
                float:left;
                width:100%;
                height: 533px;
                top:-55px;
                background-image:url(/media/images/raster/BG-BldgTop.png);
	border: solid 2px red;
        }
#BG-BldgMid{
                float:left;
                width: 100%;
                min-height:8px;
                background-image:url(/media/images/raster/BG-BldgMid.png);
                background-repeat:repeat-y;
                background-color:#F60;
	border: solid 1px blue;
        }
#BG-BldgBot{
                position:relative;
                width:100%;
                height:353px;
                left:0px;
                bottom:0px;
                margin-bottom:-55px;
                background-image:url(/media/images/raster/BG-BldgBot.png);
                opacity:1;
	border: solid 2px black;
	clear: both;
        
        }
#BG-BldgWrapper{
        position:static;
        width:100%;
        height:95%;
        left:-312px;
        top:-55px;
        background-color:#eee;
        opacity:.7;
}

If that doesnt start to get you headed in the right direction post up a photoshoped version of what you want things to look like and I might be able to help a little more.

Thanks!
sHobbsWW
Forum Newbie
Posts: 15
Joined: Wed Jul 16, 2008 10:48 am

Re: Liquid Divs (Creative problem)

Post by sHobbsWW »

I removed all irrelevant site design. I reduced file size and quality to fit onto smaller screens. Just incase.


Before Growth
Image



After Growth
Image
Post Reply