here is the page: http://creamycoffee.com/punk.html
I want the two images (punk_02, punk_04) on the side to repeat down the sides according to the length of the content. I've tried and tried everything I can think of. I don't understand. HELP!
Currently, the images will stay at a certain length when specified '100% height' but if i say, 3000px, they will go down like they are supposed to. I know this has to do with a wrapper, but I don't understand.
Can someone help me and explain what is going on? and how to fix it?
Thanks for your time!
I want the two images (punk_02, punk_04) on the side to repeat down the sides according to the length of the content. I've tried and tried everything I can think of. I don't understand. HELP!
Currently, the images will stay at a certain length when specified '100% height' but if i say, 3000px, they will go down like they are supposed to. I know this has to do with a wrapper, but I don't understand.
Can someone help me and explain what is going on? and how to fix it?
Thanks for your time!
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>punk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0;}
html, body {height:100%;}
#wrapper{height:100%;background:#fff;}
body>#wrapper{height:auto;min-height:100%;} /*child hack overrides height in compliant browsers and adds min-height, which they understand*/
</style>
</head>
<!-- ImageReady Slices (punk.psd) -->
<div style="position:absolute; left:0px; top:0px; width:936px; height:100%;">
<div style="position:absolute; left:0px; top:0px; width:936px;">
<img id="punk_01" src="images/punk_01.gif" width="936" height="144" alt="" />
</div>
<div style="position:absolute; left:118px; top:144px; width:700px; height:108px;">
<img id="punk_03" src="images/punk_03.gif" width="700" height="108" border="0" alt="" usemap="#punk_03_Map" />
</div>
<div class="wrapper">
<div style="position:absolute; background-image:url(/images/punk_02.gif);
background-repeat:repeat-y; left:0px; top:144px; width:118px; height:100%;">
<img id="punk_02" src="images/punk_02.gif" width="118" height="756" alt="" />
</div>
<div style="position:absolute; background-image:url(/images/punk_04.gif);
background-repeat:repeat-y; left:818px; top:144px; width:118px; height:100%;">
<img id="punk_04" src="images/punk_04.gif" />
</div>
<div style="position:absolute; background-image:url(/images/punk_05.gif);
background-repeat:no-repeat; left:118px; top:252px; width:700px; height:20px;">
<br><br>
<br><br><br><br>
<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader>
<b><$MTEntryDate format="%x"$></b>
</MTDateHeader>
<br><b><id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></b>
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
<p class="posted">Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink valid_html="1"$>"><$MTEntryDate format="%X"$></a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">TrackBack (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>
<img src="images/punk_06.gif">
</MTEntries>
</div>
</div>
</div>
<map name="punk_03_Map" id="punk_03_Map">
<area shape="rect" alt="" coords="270,79,358,108" href="http://creamyocoffee.com/contact" />
<area shape="rect" alt="" coords="133,79,225,108" href="http://creamycoffee.com/notwork" />
<area shape="rect" alt="" coords="27,79,85,108" href="http://creamycoffee.com/work" />
<area shape="rect" alt="" coords="50,11,359,60" href="http://creamycoffee.com" />
</map>
<map name="punk_05_Map" id="punk_05_Map">
<area shape="rect" alt="" coords="270,0,358,3" href="http://creamyocoffee.com/contact" />
<area shape="rect" alt="" coords="133,0,225,3" href="http://creamycoffee.com/notwork" />
<area shape="rect" alt="" coords="27,0,85,4" href="http://creamycoffee.com/work" />
</map>
<!-- End ImageReady Slices -->
</body>
</html>
