0

Sorry for the really dumb title but I dont know how else to phrase it.

Well I have my index.php which provides a nice frame layout for my HTMl using CSS and divs. Each page i.e the header, navigation bar, footer etc. are added in the div via PHP include(..).

Here is my index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

            html, body{
                padding: 0;
                margin: 0 auto;
                height: 100%;
            }

            #header {
                width: 100%;
                height: 15%;
                background-color: green;
            }

            #navbar {
                float: left;
                width: 20%;
                height: 70%;
                background-color: red;
            }

            #content {
                float: right;
                width: 80%;
                height: 70%;
                background-color: blue;
            }
            #footer {
                clear: both;
                width: 100%;
                height: 15%;
                background-color: yellow;
            }

        </style>
    </head>
    <body>
        <div id="header"> 
            <?php 
                include("header.html"); 
            ?>
        </div>
        <div id="navbar"> 
            <?php 
                include("nav.php"); 
            ?>
        </div>
        <div id="content"> 
            <?php 
                include("home.html"); 
            ?>
        </div>
        <div id="footer"> 
            <?php 
                include("footer.php"); 
            ?>
        </div>
    </body>
</html>

Now look here in <body> tag of index.php:

<div id="header"> 
    <?php 
        include("header.html"); 
    ?>
</div>

this piece will of course add my header.html which looks like this:

<!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>
        <title>Title</title>
        <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1"
        />
    </head>

    <body>
        <p align="center">TITLE PAGE</p>
    </body>

</html>

producing this:

enter image description here

See that white bar at the top of TITLE PAGE? Well thats not meant to be there...

And if I add anything to my actual <body> of header.html i.e:

<body>
    Hello
    <p align="center">TITLE PAGE</p>
</body>

Notice how the white bar disappears and web browser does not have the scrollbar anymore? everything works just peachy - well besides that random text needed to clear the white bar:

enter image description here

So basically my question is why is this happening and how would I go about fixing it?

UPDATE:

Fixed white bar by setting

margin in header.html to 0 (+1 @Imperative):

<p align="center" style="margin: 0;">TITLE PAGE</p>

Now I would just like to know wether or not I am doing right by including DOCTYPE html header title etc tags each time I create a new html? Or should I only do this once in my index.php? If so than how would I make my header.html pass validation at http://validator.w3.org/

4

2 回答 2

1

You are including a whole html page into your page, with <head> definitions etc..

The header.html should look like this <p align="center">TITLE PAGE</p> only. Same applies for the other includes.

于 2013-04-12T08:59:41.950 回答
1

do not add anything in BODY if you are using include, just write down what you need without BODY, by including another BODY you just mess everything around.

your header.php should look like this

<center>TITLE PAGE</center>

DONT ADD <p> that is messing everything.

于 2013-04-12T09:02:49.253 回答