HTML Forum

**Voltius** · 08-25-2006, 05:34 PM

Page is here

Problem: The left menu which is a div is at 100% hieght at all times even when the page is resized BUT when content that is long enough triggers the scroll bar to appear the left menu div's background shrinks

See it for yourself: check out the page, everything's fine, resize the page's height until the scroll bar triggers then scroll down. The left menu messes up.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Lori Turchin Photography - Orlando Florida</title>
  <link rel="stylesheet" type="text/css" href="lori.css" />
  <script language="JavaScript">

//Preloaded slideshow script- By Jason Moon

var Slides = new Array('image01.jpg','image02.jpg','image03.jpg','image04.jpg','image05.jpg','image06.jpg','image07.jpg','image08.jpg','last.jpg');

function CacheImage(ImageSource) {
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100);
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);
      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}
</script>
</head>

<body onLoad="StartSlideShow()">

<!-- Holds the logo and contact info -->
    <div id="header">
        <img src="header-logo.jpg" id="logo" alt="Lori Turchin Photography.com" width="407" height="73" />
        <img src="header-info.jpg" id="info" alt="lori@loriturchinphotography.com" width="246" height="57" />
    </div>
<!-- simulates shadow underneath header -->
    <div id="shadow"><img src="menu-header-shadow.gif" width="144" height="17" align="left" alt="" /></div>

<!-- left hand menu at 100% height -->
    <div id="menu">
        <div id="button-holder">
            <a class="over" href="gallery/index.php"><img src="menu-order.gif" alt="order prints" width="128" height="42" /></a>
            <a class="over" href="services.html"><img src="menu-services.gif" alt="services" width="128" height="42" /></a>
            <a class="over" href="portfolio/"><img src="menu-portfolio.gif" alt="portfolio" width="128" height="42" /></a>
            <a class="over" href="locations/"><img src="menu-locations.gif" alt="locations" width="128" height="42" /></a>
            <a class="over" href="about.html"><img src="menu-about.gif" alt="about me" width="128" height="42" /></a>
        </div>
    </div>

<!--  -->
    <div id="contentbox">
               <center>
                 <div id="content">
                   <form name="SlideShow">
                    <table>
                    <tr>
                       <td colspan=3><img name="Screen" width=400 height=300 style="border: 1px solid White;"></td>
                    </tr>
                    <tr>
                       <td><input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)"></td>
                       <td><img src="body-slogan.gif" alt="Capturing Moments in Time" width="307" height="43" /></td>
                       <td align="right"><input type="button" name="Next" value=" >> " onClick="ShowSlide(1)"></td>
                    </table>
                    </form>

                 </div>
               </center>
    </div>


</body>
</html>

And the CSS

HTML Code:

body{
  margin: 0;
  padding: 0;
  background-image: url("body-bg.jpg");
  height: 100%;                                /* needed for 100% height menu */
  color: #fff;
}

img{
  border: 0px;
}

.topic{
  font-size: 1.8em;
  font-family: Papyrus, Verdana, Arial;
}

td, tr{
  text-align: center;
}


/* ========== DIV LAYERS ==========*/
#header{                                        /* controls the entire header */
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("header-bg.jpg");
  height: 137px;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

#shadow{                                        /* shadow underneath the header */
  position: absolute;
  left: 0px;
  top: 137px;
  height: 17px;
  width: 100%;
  background-image: url("header-shadow-bg.gif");
  overflow: hidden;
  z-index: 2;
}

div#menu{                                       /* the grey bar (menu) on the left */
  position: absolute;
  left: 0px;
  top: 0px;
  width: 144px;
  height: 100%;
  background: url("menu-bg.gif");
  background-position: right;
  background-repeat: repeat-y;
  background-color: #1a1a1a;
  z-index: 1;
}

#button-holder{                                 /* holds buttons in position */
  position:absolute;
  top: 180px;
  padding-left: 4px;
}

#wideholder{                                    /* stretches to 100% width for content */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#contentbox{                                    /* stretches to allow content to be centered on page */
  position: relative;
  top: 155px;
/*  background-color: white;*/
  overflow: hidden;
  margin-left: 145px;

}

#content{                                       /* actual content starts in here */
  position: relative;
  margin-top: 30px;
}



a.over{                                         /* controls bg of buttons */
  display: block;
  width: 128px;
  margin-top: 15px;                             /* adjust space between buttons */
  height: 42px
  margin: 0;
  background: url("button-bg.gif") 0 0 no-repeat;
  text-decoration: none;
}

a.over:hover{                                   /* controls hover of bg of buttons */
  background-position: 0 -42px;
}




/* ========== IMAGES ========== */
img{                                            /* gets rid of borders on all images */
  border: none;
}

#logo{                                          /* for lori turchin photography image */
  position: absolute;
  top: 32px;
  left: 55px;
}

#info{                                          /* for your contact information in header */
  position: absolute;
  top: 39px;
  right: 40px;
}

**LadynRed** · 08-26-2006, 10:46 AM

That's because the 100% height is 100% of the VIEWPORT so when you shrink the viewport, so does the div.

Probably your biggest problem is that EVERYTHING is absolutely positioned. This is not necessary and causes many problems of it's own. It would be better to use the normal document flow and floats to acheive your desired layout.

Float your #menu left, add a left-margin wide enough to clear the left menu to push the content area over. There's no need to absolutely position the header, it will sit at the top anyway, just use margin and padding to put it where you want it.

Rather than wrangling with the 100% height problems, it is probably easier to use the 'faux column' method to make columns appear to be the same height:
Any Column Longest - css-discuss

**Voltius** · 08-27-2006, 07:33 AM

Thank you very much for your response and I found the site extremely useful. I used to be good at web development until I went to college and became too busy to keep up with standards and changes. During that time the web really transitioned from tables to css and I never really caught on now that I'm back to developing (I'd rather design) .

I know tables are less easy to upgrade and change but I think for what I'm looking for I'm going to just use a table just for the basic layout.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!