PDA

View Full Version : Fluid Height?



chrisfromboji
Jul 3rd, 2009, 08:20 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:


<!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:


/*==================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; }

abduraooft
Jul 4th, 2009, 09:17 AM
Your need to get rid of all divitis (http://csscreator.com/?q=divitis) first and your content should be semantic (http://boagworld.com/technology/semantic-code-what-why-how) as well.

Now, to repeat a shadow background for a fixed width element, you don't have to put two extra divs on either side. Instead, just make a horizontal 1px high strip of having enough width to cover your content area and apply it a background with repeat-y.