html - ヘッダー php が正確に配置されていません

Question

PHPでヘッダーとフッターを含めています。しかし、問題は、ヘッダーが常にその場所 (水平方向) に留まるとは限らないことです。すべてのページで安定させたいのですが、数ピクセルほど左右に動き続けます。また、コンテンツは常にその場所にあるとは限らず、ページの 1 つで少し左または右に移動しています。この例を見ると、よりよく理解できます。これらの 2 つのページの違いを参照してください: 1- http://www.altayda.com/test2/ 2- http://www.altayda.com/test2/about.php

そして、ここにコードがあります。前もって感謝します：

index.php

<!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>

インデックスのスタイリング

/* 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;
}

about.php

<!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>

スタイルについて

@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;}

ヘッダー.php

<!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>

ヘッダースタイル

 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;
}

html - ヘッダー php が正確に配置されていません

1 に答える 1

Related

Reference