SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Website problems

    I am working on a design for a website. The problem is that when you make the window small, and then scroll down, ...well you'll see it. I'll include the relevant files.

    Heres the url
    http://stepmaniapraise.newelltest.com/

    index.php
    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">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>stepmania Praise</title>
    	<link rel="stylesheet" type="text/css" href="style1.css" />
    	<?php require 'library/opendb.php'; ?>
    	<script language="JavaScript" src="library/login.js">
    	</script>
    </head>
    <body>
    	<?php require 'include/header.php'; ?>
    	<?php require 'include/sidebar.php'; ?>
        <div id="content">
    					<?php
    	
    					// Request the home articles
    					$result = @mysql_query('
    					SELECT a.title, a.article
    					FROM articlescategories as ac
    					inner
      					JOIN articles as a
        				on a.a_id = ac.a_id
     					WHERE ac.c_id = "1"
    					');
    					if (!$result) {
    					exit('<p>Error performing query: ' . mysql_error() . '</p>');
    					}
    					
    					// Display the text of each home article
    					while ($row = mysql_fetch_array($result)) {
    						echo "<h1>" . $row['title'] . "</h1>" . $row['article'];
    					}
    					
    					?>
                        <p>
                        <!--
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                          -->
                        </p>
        </div> <!-- end of content div -->
    	<?php require 'library/closedb.php'; ?>
    </body>
    </html>
    sidebar.php
    Code:
        <div id="sidebar">
    	
        <h1>Login</h1>
        
    	<?php
    	
    	if (1==1)
    	{
    	echo '
    	<form action="login.php" method="post" onSubmit="return validate()">
    	<h2>Username:</h2> <input type="text" name="username" size="20"><br>
    	<h2>Password:</h2> <input type="password" name="password" size="20"><br>
    	<input type="submit" value="Log In">
    	</form>
    	<a href="register.php">Register</a>
    	<form action="forgotpass.php" method="post">
    		<p><strong>Forgot Password</strong></p>
    		<p>Username: 
    		<input type="text" name="username" size="20"></p>
    		<input type="submit" value="Re-Send">
    	</form>
        ';
        }
        
    	else
    	{
    	echo '
    	<p>Welcome ' . $firstname . '!</p>';
    	}
    	
        ?>
        
        </div> <!-- end of sidebar div -->
    style1.css
    Code:
    html,body{height: 100%;}
    
    * {margin: 0;padding:0;}
    
    body{font-family:Arial, Verdana, Helvetica, sans-serif;background:#d0eae0;}
    
    p {
    font-size: 12px;
    padding: 0;
    margin: 0;
    border: 0;
    }
    
    h1{
    font-size:16px;
    font-weight:100;
    color: #19BDD3;
    }
    
    h2{
    font-size:12px;
    font-weight:100;
    color: #CE6C65;
    }
    
    a {
    text-decoration: none;
    font-weight: bold;
    }
    
    a:link {
    color: #CE6C65;
    }
    
    a:visited {
    color: #CE6C65;
    }
    
    a:active {
    color: #CE6C65;
    }
    
    a:hover {
    color: #FE7070;
    }
    
    body{
    color:#000000;
    font: 12px Arial, Verdana, Helvetica, sans-serif;
    text-align: center;
    }
    #header{
    position:absolute;
    top: 0;
    left: 0;
    height: 103px;
    width: 100%;
    background: #168FA1 url(images/header.png) repeat-x 0 0;
    z-index:1;
    }
    #logo{
    height: 103px;
    width: 320px;
    background: url(images/logo.png) no-repeat;
    }
    
    #sidebar,#content{min-height:100%;}
    
    #sidebar{
    width:218px;
    float:left;
    text-align: left;
    }
    #sidebar ul{padding-top:123px;list-style:none;}
    #sidebar h1{padding: 123px 20px 0 20px;}
    #sidebar p, a{padding: 0 20px;}
    #sidebar form{padding: 10px 20px 0 20px;}
    #sidebar input{margin: 4px 0 10px 0;}
    
    
    #content{
    border-left:4px solid #000;
    text-align:left;
    background:#ffffff;
    }
    #content h1{padding: 123px 20px 0 20px;}
    #content p{padding: 10px 20px;}
    
    head+body #content {overflow:auto;}
    * html #content {float:left}
    * html #content h1{height:1%;}
    
    * html #sidebar, * html #content{ height:100%;}

  2. #2
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect it has something to do with the min-height:100&#37; you have set to the content area. height values in percentage points are very unreliable, maybe you should consider faux columns?
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ?

    What's a fax column, and how do I do it?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have two independent elements which are your sidebar and your content and you have set them to be 100&#37; high (or a minimum of 100% high). When you make the page smaller so that a vertical scrollbar appears (or add more content to one column than the other) then you have one column which stays at the viewport height because that is the minimum of 100% and the other column stretches to hold the content.

    The elements are not related to each other and there is no reason for them to suddenly magically appear to mimic each others height. That is table behaviour and only table cells do that.

    You need to use a different approach and use either the faux column method which simply involves repeating a background image on the main 100% container (min-height:100% (and height:100% for ie6)) which gives the illusion of a full column. The left and right columns are simply floated in this main container and carry no height with them. As they grow the stretch the main container and the columns appear to grow together because of the repeating image on the parent.

    If you don't want to use an image then the other solution (mine) is to use negative margins as shown in this demo:

    http://www.pmob.co.uk/temp/2col-nofloatdrop2.htm

    This of course complicate the issue a bit but in fact does produce a more solid layout than the side by side floats.

    Although I shouldn't really link to this (because its my site) it does have an explanation that is pertinent.

    Also see the 3 col sticky thread for more examples and then read the faq on 100% height as it is an important topic.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •