Databases
StackOverflow2013
Postsdbo
POHeader php not exactly in place
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHeader php not exactly in place
    text
    copied!<p>I'm including my header and footer with PHP. But the 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 a little left or right on one of the pages. If you see this example, you can understand it better. See the difference between those two pages: 1- <a href="http://www.altayda.com/test2/" rel="nofollow">http://www.altayda.com/test2/</a> 2- <a href="http://www.altayda.com/test2/about.php" rel="nofollow">http://www.altayda.com/test2/about.php</a></p> <p>And here are the codes. Thanks in advance:</p> <p><strong>index.php</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;psdtowebindex12323.psd&lt;/title&gt; &lt;link href="styles.css" rel="stylesheet" type="text/css"&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="frameworkmodified.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;&lt;?php include 'header.php'; ?&gt;&lt;/div&gt; &lt;div id="container"&gt; &lt;ul id="filter"&gt;&lt;hr size=1&gt;&lt;br /&gt; &lt;li class="current"&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Poster Design&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Branding&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Illustration&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Painting&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Print Design&lt;/a&gt;&lt;/li&gt; &lt;br /&gt;&lt;br /&gt; &lt;hr size=1&gt; &lt;/ul&gt; &lt;ul id="portfolio"&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/politician.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/recycle.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/women.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/warwomen.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/joy.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="poster-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/bombs.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="branding"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/mir.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="illustration"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/vader.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="illustration"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/mario.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="painting"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/eye.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="print-design"&gt;&lt;a class="image" href="#"&gt;&lt;span class="rollover" &gt;&lt;/span&gt; &lt;img class="imgborder" src="images/rain.png" alt="" height="156" width="263" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="footer"&gt;&lt;?php include 'footer.php'; ?&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>styling of index</strong></p> <pre><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; } </code></pre> <p><strong>about.php</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;psdtowebindex12323.psd&lt;/title&gt; &lt;link href="aboutstyle.css" rel="stylesheet" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;&lt;?php include 'header.php'; ?&gt;&lt;/div&gt; &lt;div id="container"&gt; &lt;div id="title"&gt;&lt;hr size=1&gt; &lt;div id="titletext"&gt; &lt;br /&gt; About me &lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;/div&gt; &lt;hr size=1&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="footer"&gt;&lt;?php include 'footer.php'; ?&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>About Style</strong> </p> <pre><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;} </code></pre> <p><strong>Header.php</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Creating a Filterable Portfolio with jQuery&lt;/title&gt; &lt;link href="headerstyle.css" type="text/css" rel="stylesheet" media="screen,projection" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="contained"&gt; &lt;div id="logo"&gt;&lt;a href="http://www.altayda.com"&gt;&lt;img src="images/Logo.png"&gt;&lt;/a&gt;&lt;/div&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="http://www.altayda.com/test2"&gt;Works&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.php"&gt;About me&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Header style</strong></p> <pre><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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload