Fluid Height?

Discussion in 'CSS' started by chrisfromboji, Jul 3, 2009.

0
  1. #1
    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:
    
<!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>
    Code (markup):
    CSS:
    
/*==================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; }
    Code (markup):
     
    chrisfromboji, Jul 3, 2009 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    justinlorder, Jul 5, 2009 IP
  3. WebDizajnSajter

    WebDizajnSajter Peon

    Messages:
    31
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    chrisfromboji,

    You have to wraparound one another divs, content_background, content_rightshadow and
    content_leftshadow. That’s it, very simple, try yourself to visualize, and develop your imagination, the ability to form images and ideas in the mind, especially of things never seen or never experienced direct.
     
    WebDizajnSajter, Jul 6, 2009 IP