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

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    Header is not stable in place


    Hello!

    My Problem is:
    On my pages, I'm including my header and footer with PHP. But the weird problem is that header doesn't always stay in it's place (horizantally). I want it to be stable on every page but it keeps moving left and right about some pixels. And also the content is not always in it's place, it's moving left or right on each page. If you see this example, you can understand it better.
    See the difference between those two pages:
    1- http://www.altayda.com/test2/
    2- http://www.altayda.com/test2/about.php

    Below I'm going to paste the codes so maybe you can figure out what's going on. Thanks in advance.

    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>psdtowebindex12323.psd</title>
    		<link href="styles.css" rel="stylesheet" type="text/css">
           <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="frameworkmodified.js"></script>
    
      
    
           
        
    
    
    
    
    </head>
    	
    	<body>
        
       <div id="header"><?php include 'header.php'; ?></div>
    	
       
       <div id="container">
    
    	<ul id="filter"><hr size=1><br />
    		<li class="current"><a href="#">All</a></li>
    		<li><a href="#">Poster Design</a></li>
    		<li><a href="#">Branding</a></li>
    		<li><a href="#">Illustration</a></li>
    		<li><a href="#">Painting</a></li>
    		<li><a href="#">Print Design</a></li>
            <br /><br />
            <hr size=1>
    	</ul>
    
    	<ul id="portfolio">
    		
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/politician.png" alt="" height="156" width="263" /></a></li>
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/recycle.png" alt="" height="156" width="263" /></a></li>
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/women.png" alt="" height="156" width="263" /></a></li>
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/warwomen.png" alt="" height="156" width="263" /></a></li>
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/joy.png" alt="" height="156" width="263" /></a></li>
    		<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/bombs.png" alt="" height="156" width="263" /></a></li>
    		<li class="branding"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/mir.png" alt="" height="156" width="263" /></a></li>
    		<li class="illustration"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/vader.png" alt="" height="156" width="263" /></a></li>
    		<li class="illustration"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/mario.png" alt="" height="156" width="263" /></a></li>
    		<li class="painting"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/eye.png" alt="" height="156" width="263" /></a></li>
    		<li class="print-design"><a class="image" href="#"><span class="rollover" ></span> 
    <img class="imgborder" src="images/rain.png" alt="" height="156" width="263" /></a></li>
    	</ul>
    </div>
    <div class="footer"><?php include 'footer.php'; ?></div>
    
    </body>
    
    </html>

    styling of index

    Code:
    /* Portfolio Filter Stylesheet */
    
    /*****Reset*****/
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
    
    /*****Basic Definitions*****/
    body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
    h1 { font-size: 1.667em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.333em; }
    h4 { font-size: 1.167em; }
    h5, h6 { font-size: 1em; }
    
    a { color: #333; }
    a:visited { }
    a:hover { text-decoration: none; }
    p, ul, ol, dl, table { margin-bottom: 18px; }
    ul, ol, dd { margin-left: 36px; }
    
    /*****Custom Classes*****/
    .clearing { clear: both; }
    .last { margin-bottom: 0; }
    .screenReader { left: -9999px; position: absolute; top: -9999px; }
    
    /*****Basic Layout*****/
    div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
    
    
    
    ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0px; margin-top:250px; width: 100%; font-family:Helvetica }
    ul#filter li { 
    	border-right: 1px solid #dedede;
    	float: left;
    	line-height: 16px;
    	margin-right: 10px;
    	padding-right: 10px;
    }
    ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
    ul#filter a { color: #333; text-decoration: none; }
    ul#filter li.current a, ul#filter a:hover { color: #A1A1A1; }
    ul#filter li.current a { color: #333; font-weight: bold; font-family:Helvetica }
    
    ul#portfolio { float: left; list-style: none; margin-left:0px; margin-right:-35px; margin-top:20px;  border: 0px solid #dedede;  }
    ul#portfolio li { 
    	border: 0px solid #dedede; 
    	float: left; 
    	margin: 0 31px 20px 0; 
    	padding: 0px;
    	width: 263px;
    	height: 156px
    	
    }
    ul#portfolio a { display: block; width: 100%; }
    ul#portfolio a:hover { text-decoration: none; }
    ul#portfolio img { border: 0px solid #dedede; display: block; padding-bottom: 5px; }
    
    hr { display: block; height: 1px;
        border: 0; border-top: 1px solid #ccc;
        margin: 1em 0; padding: 0; width: 100%; }
    	
    	
    	span.rollover {
    	opacity: 0;
    	-o-transition-duration: 1s;
    	-moz-transition-duration: 1s;
    	-webkit-transition: -webkit-transform 1s;
    	background:url(images/mag.png) center center no-repeat #ffffff;
    	
    	cursor: pointer;
    	height: 156px;
    	width: 263px;
    	position: absolute;
    	z-index: 10;
    	opacity: 0;
    }
    
    span.rollover:hover {
    	
    	opacity: 0.9;
    	-o-transition-duration: 1s;
    	-moz-transition-duration: 1s;
    	-webkit-transition: -webkit-transform 1s; 
    	
    	-webkit-box-shadow: 0px 0px 0px #000;
    	-moz-box-shadow: 0px 0px 0px #000;
    	box-shadow: 0px 0px 0px #000;
    }
    	
    #header{

    about.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>psdtowebindex12323.psd</title>
    		<link href="aboutstyle.css" rel="stylesheet" type="text/css">
       
    
      
    
           
        
    
    
    
    
    </head>
    	
    	<body>
        
       <div id="header"><?php include 'header.php'; ?></div>
    	
       
       <div id="container">
       
       <div id="title"><hr size=1>
       <div id="titletext">
       <br />
       About me
       <br /><br /><br />
       </div>
      
       <hr size=1></div>
       
       
    
    
    </div>
    <div class="footer"><?php include 'footer.php'; ?></div>
    
    </body>
    
    </html>
    About Style

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    /*****Reset*****/
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding: 0; }
    
    /*****Basic Definitions*****/
    body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
    h1 { font-size: 1.667em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.333em; }
    h4 { font-size: 1.167em; }
    h5, h6 { font-size: 1em; }
    
    a { color: #333; }
    a:visited { }
    a:hover { text-decoration: none; }
    p, ul, ol, dl, table { margin-bottom: 18px; }
    ul, ol, dd { margin-left: 36px; }
    
    /*****Custom Classes*****/
    .clearing { clear: both; }
    .last { margin-bottom: 0; }
    .screenReader { left: -9999px; position: absolute; top: -9999px; }
    
    
    
    
    /*****Basic Layout*****/
    div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
    
    #title {
    	
    	margin-top:254px;
    	width:860px;
    	
    	
    	
    	
    	 }
    
    #titletext {
    	
    	
    	width:860px;
    	
    	float:left;
    	font-family:Helvetica;
    	font-size:26px;
    	margin-top:2px;
    	
    
     }
     
     hr { display: block; height: 1px;
        border: 0; border-top: 1px solid #ccc;
        margin: 1em 0; padding: 0; width: 100%; }
    	
    #header {
    	
    	
    	width:100%;
    	float:left;
    	
    	margin: 0px auto 0; overflow: hidden; 
    	}
    	
    	
    .footer {
    	
    	
    	margin: 0px auto 0;
    	
    	width:860px;}

    Header.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>Creating a Filterable Portfolio with jQuery</title>
    <link href="headerstyle.css" type="text/css" rel="stylesheet" media="screen,projection" />
    
    
    </head>
    
    <body>
    		
            
         <div id="contained">
    			<div id="logo"><a href="http://www.altayda.com"><img src="images/Logo.png"></a></div>
    			<ul id="nav">
    <li><a href="http://www.altayda.com/test2">Works</a></li>
    <li><a href="about.php">About me</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    			
    		</div>
     </body>
     </html>

    Header style

    Code:
     body {
    	margin: 0;
    	padding: 0;
    	text-align:left;
    	
     }
     
     
     ul#nav {
    list-style-type: none;
    height: 80px;
    width: 350;
    margin: auto;
    margin-left: 555px;
    position:absolute;
    top: 159px;
    
    }
      li {
    float: left;
    }
    
     ul#nav a{
    
    padding-right: 20px;
    padding-left: 20px;
    display: block;
    line-height: 80px;
    text-decoration: none;
    font-family: Helvetica;
    font-weight:bold;
    font-size: 18px;
    color: #371C1C;
    }
    
    ul#nav a:hover {
    color: #999 ;
    }
     
     
    
    	
    
    
    
    
     #logo
    { 
    	 float: left;
    	 top: 161px; 
    	 position: absolute; 
    	 width: 183px;
    	 height: 40px;
    	 z-index:2;
    } 
    
     #contained { margin: 0px auto 0; overflow: hidden; width: 860px; }
    
    
    
     #Contact 
    {
    	
    	top: 161px;
    	position: absolute;
    	width: 67px;
    	height: 13px;
    	z-index:3;
    	font-weight: bold;
    	font-family: Helvetica;
    	font-size: 19px;
    } 
    
     #Aboutme 
    {
    	
    	top: 161px;
    	position: absolute;
    	width: 95px;
    	height: 13px;
    	z-index:4;
    	font-size: 19px;
    	font-family: Helvetica;
    	font-weight: bold;
    } 
    
     #Works 
    {
    	
    	top: 161px;
    	position: absolute;
    	width: 53px;
    	height: 13px;
    	z-index:5;
    	font-family: Helvetica;
    	font-size: 19px;
    	font-weight: bold;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, Sensible.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    Are you sure that you're just not seeing the affect of only some pages having a vertical scrollbar?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo