Jump to content

CSS DIV Help

ludjer

By ludjer
in CSS Help

 Share

Recommended Posts

ludjer Member

ludjer

Posted
Posted

http://ludgers.pcriot.com/

 

as you see the shadow thingies at the sides are not going right to the bottem or the top T_T

 

can some one help me

 

here is the html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="top">
    <center><img src="Images/headder.png" alt="Ludgers Headder" border="0" usemap="#Map"  />
<map name="Map" id="Map"><area shape="rect" coords="181,118,266,144" href="index.php" target="_self" />
<area shape="rect" coords="296,119,372,141" href="index.php?main=links" />
<area shape="rect" coords="409,120,522,142" href="index.php?main=projects" />
<area shape="rect" coords="567,120,652,143" href="index.php?main=about" />
<area shape="rect" coords="702,120,784,142" href="index.php?main=work" />
</map></center>
      <div class="clearer"> </div>
    </div>
    <div id="topmid" align="center">
        <table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="800" id="topic"> </td>
          </tr>
        </table>
    </div>
    <div class="middle">
    	<div class="container">
            <div class="midleft"> </div>
            <div class="midright"> </div>
            <div class="middle">middle
            </div>
        </div>
    </div>
    <div id="footer">
      <div id="footercont">
      
                  <br />
        Designed And Coded by <a href="mailto:[email protected]">Ludger</a><br />
        <a href="http://www.mysql.com/" target="_blank">
            <img src="Images/mysql.gif" alt="Powered by MySQL" border="0" height="31" width="88"/></a> 
                    <a href="http://www.php.net/" target="_blank">
                         <img src="Images/php.gif" alt="Powered by PHP" border="0" height="31" width="88"/></a> 
                    <a href="http://validator.w3.org/check/referer" target="_blank">
                         <img src="Images/valid-xhtml10.gif" alt="Valid XHTML 1.0!" border="0" height="31" width="88" /></a> 
                    <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
                         <img src="Images/valid-css.gif" alt="Valid CSS!" border="0" height="31" width="88"/>                    </a>      </div>
  </div>
</div>
</body>
</html>

 

and here is the css

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
background-image:url(Images/midbg.png);
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
margin: 0px;
height: 100%;
text-align: left;
border: 1px solid #ddd;
}
#wrapper #middle #middletab {
height: 100%;
width: auto;
}

#container {
padding: 0px;
margin: 10px 0px 0px 0px;
background-attachment: scroll;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#center {
height: auto;
width: 504px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 6px;
line-height: 1.8em;
}
#right {
padding: 10px 20px 10px 20px;
height: auto;
width: 160px;
float: left;
margin: 0px 0px 0px 6px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#center {
height: auto;
width: 504px;
padding: 10px 20px 10px 20px;
float: left;
margin: 0px 0px 0px 6px;
line-height: 1.8em;
}
#topcenter {
padding: 0px;
margin: 0px;
text-align: center;
width: 800px;
}
#top {
padding: 0px;
margin: 0px;
background-attachment: scroll;
background-image: url(Images/topbg.png);
background-repeat: repeat-x;
background-position: 0px 0px;
height: 150px;
width: 100%;
}
#wrapper   #topmid  {
background-image: url(Images/darkbg.png);
background-repeat: repeat-x;
}
#wrapper   #topmid   #topic {
background-image: url(Images/midbluebg.png);
background-repeat: repeat-x;
height: 100px;
width: 800px;
}
#wrapper  #middle  #midleft {
background-image: url(Images/midleftblue.png);
background-repeat: repeat-y;
width: 50px;
background-attachment: fixed;
background-position: right top;
}
#wrapper #middle #content {
width: 790px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
background-color: #FFFFFF;
}
#wrapper #middle #midright {
background-image: url(Images/midrightblue.png);
background-repeat: repeat-y;
width: 50px;
background-attachment: fixed;
background-position: left top;
}
#wrapper #middle {
background-image: url(Images/midbg.png);
width: 100%;
}
#wrapper #footer {
background-image: url(Images/footer.png);
height: 80px;
width: 100%;
text-align: center;
vertical-align: middle;
}
img{
border:0;
}#wrapper #footer #footercont {
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
color: #FFFFFF;
}
#wrapper #footer #footercont #icons {
float: right;
width: 400px;
}
#wrapper #footer #footercont #footertext {
float: left;
width: 400px;
text-align: center;
vertical-align: text-bottom;
}
#wrapper .middle .container {
margin-right: auto;
margin-left: auto;
width: 900px;
}
#wrapper .middle .container .midleft {
float: left;
width: 50px;
background-image: url(Images/midleftblue.png);
background-repeat: repeat-y;
height: inherit;
}
#wrapper .middle .container .midright {
float: right;
width: 50px;
background-image: url(Images/midrightblue.png);
background-repeat: repeat-y;
height: inherit;
}
#wrapper .middle .container .middle {
width: 780px;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
padding: 10px;
height: 100%;
}

Link to comment
https://forums.phpfreaks.com/topic/79280-css-div-help/
Share on other sites
bronzemonkey Member

bronzemonkey

Posted
Posted

It's a float clearing issue. You need to properly clear #container because it contains floated elements. This will do the trick:

 

/*Clearing for Modern Browsers */
#container:after {content:"."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;}
/*Clearing for IE6 only*/
* html #container {height:1%;}
/*Clearing for IE7 only*/
*+html #container {min-height:1px;}

 

Just add any other elements that contain floated elements (typically people have floated content in their footer). I've started adding {line-height:0} to the clearing for modern browsers because Opera sometimes produces some whitespace below a cleared footer because the generated content inherits the line-height.

Link to comment
https://forums.phpfreaks.com/topic/79280-css-div-help/#findComment-401605
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.