Fluid Height?

**chrisfromboji** · 07-03-2009, 06:21 PM

I finished the css for my new website yesterday, and I've been having trouble with some images. Along the sides of my content area, I made an image that acts as shadow. I figured out how to get the content area to be content aware so it gets longer or shorter when it needs to, but I can't seem to get the side images to follow suit.

Any ideas on how to fix this? Thanks!

Edit: Just for some clarification, I want #content_leftshadow and #content_rightshadow to be the same fluid height as #content_background

Anyway here's a live copy of the site: http://12.218.62.141
HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body id="superwrap">
<div id="wrapper">
<div id="hconstruct">
<div id="headercore"></div><div id="headerlefttall"></div><div 

id="headerrighttall"></div>
<div id="hmwrapper">
<div id="header_leftspacer"></div>
<a id="t_home" href="#"><span class="alt">Home</span></a>
<a id="t_travel" href="#"><span class="alt">Travel</span></a>
<a id="t_media" href="#"><span class="alt">Media</span></a>
<a id="t_portfolio" href="#"><span class="alt">Portfolio</span></a>
<a id="t_contact" href="#"><span class="alt">Contact</span></a>
<div id="header_rightspacer"></div>
</div>
<div id="content_background">
<div id="content_leftshadow"></div><div id="content_rightshadow"></div>
<div id="c_home"></div>
<div id="c_text">
test1234
</div>
</div>
<div id="content_bottom"></div>
<div id="footer_construct">
<div id="footer_leftspacer"></div>
<a id="f_home" href="#"><span class="alt">Home</span></a>
<a id="f_travel" href="#"><span class="alt">Travel</span></a>
<a id="f_media" href="#"><span class="alt">Media</span></a>
<a id="f_portfolio" href="#"><span class="alt">Portfolio</span></a>
<a id="f_contact" href="#"><span class="alt">Contact</span></a>
<div id="footer_rightspacer"></div>
<br/>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img 

src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 

Transitional" height="31" width="88" /></a>
</p>
</div>
</div>
</div>
</body>
</html>

CSS:

Code:

/*==================Page Properties==================*/
#superwrap {
	background-image: url(Images/pagebackground.png);
	background-repeat: repeat;
}
#wrapper {
	text-align: left;
	width: 857px;
	margin-left:auto;
	margin-right:auto;
}
/*==================Header Construct==================*/
#hconstruct {
	width:857px;
	margin-top:0px;
	height:167px;
}
#headercore {
	height:126px;
	width:799px;
	margin-top:0px;
	margin-left:29px;
	background-image: url(images/header_core.png);
}
#headerlefttall {
	height:167px;
	width:29px;
	margin-top:-126px;
	background-image: url(images/header_lefttall.png);
}
#headerrighttall {
	height:167px;
	width:29px;
	margin-top:-167px;
	margin-left:828px;
	background-image: url(images/header_righttall.png);
}
/*==================Header Menu Wrapper==================*/
#hmwrapper {
	margin-top:-41px;
	width:749px;
}
/*Header Menu Buttons*/
a#t_home {
    display: block;
    width: 149px;
    height: 41px;
    background-image: url(images/header_dualhome.png);
    background-position: 0 0;
    margin-left:54px;
    margin-top:-41px;
}
a#t_home:hover {
    background-position: 0 -41px;
}
a#t_travel {
    display: block;
    width: 150px;
    height: 41px;
    background-image: url(images/header_dualtravel.png);
    background-position: 0 0;
    margin-left:203px;
    margin-top:-41px;
}
a#t_travel:hover {
    background-position: 0 -41px;
}
a#t_media {
    display: block;
    width: 150px;
    height: 41px;
    background-image: url(images/header_dualmedia.png);
    background-position: 0 0;
    margin-left:353px;
    margin-top:-41px;
}
a#t_media:hover {
    background-position: 0 -41px;
}
a#t_portfolio {
    display: block;
    width: 150px;
    height: 41px;
    background-image: url(images/header_dualportfolio.png);
    background-position: 0 0;
    margin-left:503px;
    margin-top:-41px;
}
a#t_portfolio:hover {
    background-position: 0 -41px;
}
a#t_contact {
    display: block;
    width: 150px;
    height: 41px;
    background-image: url(images/header_dualcontact.png);
    background-position: 0 0;
    margin-left:653px;
    margin-top:-41px;
}
a#t_contact:hover {
    background-position: 0 -41px;
}
a .alt { display: none; }
/*==================Header Menu Spacers==================*/
#header_leftspacer {
	margin-left:29px;
	height:41px;
	width:25px;
	background-image: url(images/header_leftspacer.png);
}
#header_rightspacer {
	margin-left:803px;
	margin-top:-41px;
	height:41px;
	width:25px;
	background-image: url(images/header_rightspacer.png);
}
/*==================Content==================*/
#content_background {
	position:relative;
	display:block;
	width: 799px;
	height:100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:29px;
	background-image: url(Images/bodybackground.png);
	background-repeat: repeat;
}
#content_leftshadow {
	width:10px;
	height:100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:-10px;
	background-image: url(images/body_left.png);
	background-repeat:repeat-y;
	display:block;
	position:fixed;
}
#content_rightshadow {
	width:10px;
	height:100%;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:799px;
	background-image: url(images/body_right.png);
	background-repeat:repeat-y;
	display:block;
	position:fixed
}
#content_bottom {
	width:817px;
	height:19px;
	margin-top:0px;
	margin-left:20px;
	background-image: url(images/body_bottom.png);
}
#c_text {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color:#FFFFFF;
	font-size:12pt;
	text-indent:50px;
	margin-top:120px;
	position:absolute;
}
/*==================Content - Page Title Image==================*/
#c_home {
	width:118px;
	height:82px;
	background-image: url(images/home.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
#c_contact {
	width:214px;
	height:79px;
	background-image: url(images/contact.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
#c_media {
	width:113px;
	height:81px;
	background-image: url(images/media.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
#c_portfolio {
	width:156px;
	height:99px;
	background-image: url(images/portfolio.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
#c_travel {
	width:155px;
	height:87px;
	background-image: url(images/travel.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
#c_welcome {
	width:212px;
	height:78px;
	background-image: url(images/welcome.png);
	margin-left:25px;
	margin-top:25px;
	margin-bottom:15px;
	position:absolute;
}
/*==================Footer==================*/
#footer_construct {
	margin-top:0px;
}
#footer_leftspacer {
	display:block;
	height:55px;
	width:315px;
	margin-left:0px;
	margin-top:0px;
	background-image: url(images/footer_leftspacer.png);
}
#footer_rightspacer {
	display:block;
	height:55px;
	width:42px;
	margin-left:815px;
	margin-top:-55px;
	background-image: url(images/footer_rightspacer.png);
}
a#f_home {
    display: block;
    width: 100px;
    height: 55px;
    background-image: url(images/footer_dualhome.png);
    background-position: 0 0;
    margin-left:315px;
    margin-top:-55px;
}
a#f_home:hover {
    background-position: 0 -55px;
}
a#f_travel {
    display: block;
    width: 100px;
    height: 55px;
    background-image: url(images/footer_dualtravel.png);
    background-position: 0 0;
    margin-left:415px;
    margin-top:-55px;
}
a#f_travel:hover {
    background-position: 0 -55px;
}
a#f_media {
    display: block;
    width: 100px;
    height: 55px;
    background-image: url(images/footer_dualmedia.png);
    background-position: 0 0;
    margin-left:515px;
    margin-top:-55px;
}
a#f_media:hover {
    background-position: 0 -55px;
}
a#f_portfolio {
    display: block;
    width: 100px;
    height: 55px;
    background-image: url(images/footer_dualportfolio.png);
    background-position: 0 0;
    margin-left:615px;
    margin-top:-55px;
}
a#f_portfolio:hover {
    background-position: 0 -55px;
}
a#f_contact {
    display: block;
    width: 100px;
    height: 55px;
    background-image: url(images/footer_dualcontact.png);
    background-position: 0 0;
    margin-left:715px;
    margin-top:-55px;
}
a#f_contact:hover {
    background-position: 0 -55px;
}
a .alt { display: none; }

Thread: Fluid Height?

Thread Tools

Search Thread

Fluid Height?

Bookmarks

Bookmarks

Posting Permissions