#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    77
    Rep Power
    18

    Yet another <div> problem


    I've added a border around my exiting web sites main interface page (all the content gets generated via php inside this page). But I'm having two probelms with the <div> structure that are driving me mad. I've moved all the styles inline and I've taken out almost all the php to make the file more readable.

    I have two points of confusion. 1) Why is the lower part of the border showing outside the container with the background. 2) How do I get the side parts of the border to fill the entire side. I googled this and have given all the containing div's heights, but every time I give these elemnts height other than the size of the image in the background they shrink to about 20 pixels.

    Code:
    Thanks for any help. You can see the real web page at www.greystackcellars.com
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title><?php print $meta_title ?></title>
    
    <style>
    .HeadLine {
    	clear:both;
    	background-color: #8c8170;
    	height: 25px;
    	text-align: center;
    	vertical-align: middle;
    	padding-top: 7px;
    	color: #FFFF99;
    	font-size: 14px;
    }
    
    .Bottom {
    	COLOR: #333333;
    	font-size: 10px;
    	text-align: center;
    	clear: both;
    	background-color: #8C8170;
    	width: 820;
    	height: 25px;
    	padding-top: 7px;
    }
    </style>
    
    </head>
    <body style="margin:0; padding:0; height:100%;" >
    
    <div ID="Container" style="border: solid #8C8170 2px; margin: 0 auto; width: 962px; z-index: 1; height: 100%; background: url(images/background.jpg); background-repeat: repeat;"> 
    
    
    <div id="top_decoration" >
      <div style="width:54px; height:51px; float:left; background: url(images/label-border-top-left.gif);"></div>
      <div style="float:left; width:857px; height:51px; background: url(images/label-border-top-mid.gif);" ></div>
      <div style="width:51px; height:51px; float:right; background: url(images/label-border-top-right.gif);" ></div>
    </div>
    
    <div id="border_container" style="height:100%; clear:both;">
    <div id="left_border" style="height:550px; float:left; width: 20px; background: url(images/label-border-left.gif); background-repeat: repeat;">
      </div>
      <div id="content_container" style="float:left; width:920px;">
    <div id="Banner" style="position:relative; height:150px; width: 100%;">
    	<div id="YouAreHere" 
    		  style="
    		   padding-left: 10px;
    			float:left;
    			width:220px;
    			height: 140px;
    	 ">
    	</div><!-- your are here -->
    
    	<div id="logo" style="float:left;">
    	<IMG src="images/logo.jpg" border="0" alt="Grey Stack Cellars"/>
    	</div>
    
    	<div align="right" style="float:right; padding-right: 20px; height:150px;">
    		<table height ="100%" width="100%">
    			<tr><td align="center">
    <?php if ($_SERVER['HTTPS'] == 'on')
    {
    ?>
    		<img src="images/icon-thawte2.gif" alt="Thawte SSL">
    <?php
    }
    ?>
    		</table>
    	</div>
    </div> <!-- banner -->
    
    <div id="headline" style="clear:both; background-color: #8c8170; height: 25px; text-align: center; vertical-align: middle; padding-top: 7px; color: #FFFF99; font-size: 14px; width: 100%;">
    <a href="index.php?Page=Home" class="head">Home</a> &nbsp;|&nbsp; 
    <a href="index.php?Page=Bennett Valley" class="head">Bennett Valley</a> &nbsp;|&nbsp;
    <a href="index.php?Page=WineCategory& Category=Current Release Wines" class="head">Buy Wine</a> &nbsp;|&nbsp;
    <a href="index.php?Page=People" class="head">Information</a>  &nbsp;|&nbsp;
    <a href="index.php?Page=ContactUs" class="head">Contact</a>  &nbsp;|&nbsp;  
    <a href="AccountFunctions.php?Mode=Cart" class="head">View Cart</a>   &nbsp;|&nbsp;
    <a href="index.php?Page=Background" class="head">Trade</a>  &nbsp;|&nbsp;
    
    <a href="http://www.greystackcellars.com/HomeGrown/index.php?Page=AccountManager" class="head">My Account</a>
    &nbsp;|&nbsp; <a href="AccountFunctions.php?Mode=LogOut" class="head">Log Out</a>
    
    </div><!-- headline -->
    <div ID="Wrapper" style="width: 920px; z-index: 1; height: auto; min-height: 400px; vertical-align: top; background: url(images/background.jpg); background-repeat: repeat;"> <!-- This has almost everything -->
    <div ID="main" style=" padding: 10px 0px 10px 0px;"> <!-- this has just the padding -->
    	<div class="DialogTitle" style=" color:#555555;">
    			<?php print $page_title ?>
    	</div><!-- page title -->
    
    <?php
    	if (!file_exists($page_file))
    		print ("Internal error: File ".$page_file." for Page ".$_REQUEST['Page']. " not found<br>");
    	else
    		require_once($page_file);
    	
    ?>
    </div> <!-- main -->
    </div> <!-- Wrapper -->
    
    
    <div class="Bottom">
    <a href="index.php?Page=SiteMap" class="bottom-link">Site Map</a> | 
    <a href="index.php?Page=Terms" class="bottom-link">Terms &amp; Conditions</a> | 
    <a href="index.php?Page=Privacy" class="bottom-link">Privacy Policy</a> |
    <a href="index.php?Page=Gallery" class="bottom-link">Photo Gallery</a>
    </div> <!-- Bottom -->
    </div> <!-- content_container -->
    	<div id="right_border"  style="float:right; width: 20px;">
      <img src="images/label-border-right.gif" width="20" height="555">
      </div>
    </div> <!-- left and right border_container -->
    <div id="bottom_decoration" style="clear:both">
      <div style="width:56px; height:56px; float:left; background: url(images/label-border-bot-left.gif);"></div>
      <div style="float:left; width:848px; height:51px; background: url(images/label-border-bot-mid.gif);" ></div>
      <div style="width:56px; height:56px; float:right; background: url(images/label-border-bot-right.gif);" ></div>
      </div><!--bottom decoration-->
    </div> <!--Container-->
    </body>
    </html>


    Peter
    Peter Young
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Location
    Texas
    Posts
    167
    Rep Power
    59

IMN logo majestic logo threadwatch logo seochat tools logo