askIT

Main navigation

media-floppy.png Download files for this lesson

Split code into three parts

We want to split the webdesign into three parts. A header.php, footer.php and the index.php

split_layout.jpg
Figure: Splitting the code into three parts.

Create two new files

Please create two new files inside the _webdesign folder. One named header.php and one named footer.php.

Folder

_webdesign

Txt

header.php

Txt

footer.php

header.php

The header file should include the top of the index.php file. This will be everything before the <h1> tag.

<?php 
/**
*
* File: _webdesign/header.php
* Version 14.38 22.04.2017
* Copyright (c) 2009-2017 Nettport.com
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/
echo"<!DOCTYPE html>
<html lang=\"en\">
<head>
    <title>Community Website</title>

    <!-- Reset -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/reset.css\" />
    <!-- //Reset -->

    <!-- Bootstrap CSS -->
        <link href=\"_scripts/javascripts/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\">
    <!-- //Bootstrap CSS -->

    <!-- Site CSS -->
        <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/master.css\" />
    <!-- //Site CSS -->

    <!-- jQuery -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/jquery/jquery-3.2.1.min.js\"></script>
    <!-- //jQuery -->

    <!-- Bootstrap Javascript -->
        <script type=\"text/javascript\" src=\"_scripts/javascripts/bootstrap/js/bootstrap.min.js\"></script>
    <!-- //Bootstrap Javascript -->

    <link rel=\"icon\" href=\"favicon.ico\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0;\"/>
</head>
<body>
<!-- Header -->
    <header>
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
        </div>
    </header>
<!-- //Header -->
"
;
?> 

footer.php

The footer file should include the bottom of the index.php file. This will be everything after the </h1> tag.

<?php 
/**
*
* File: _webdesign/footer.php
* Version 14.39 22.04.2017
* Copyright (c) 2009-2017 Nettport.com
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/
echo"
</body>
</html>
"
;
?>

index.php

The index.php file should first include the header, then print the content, then at the end include the footer.

<?php 
/**
*
* File: index.php
* Version 14.41 22.04.2017
* Copyright (c) 2009-2017 Nettport.com
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/
include("_webdesign/header.php"); 

echo
"
    <div class=\"page-header\">
        <h1>Hello! Welcome to my site!</h1>
    </div>
"
;

include(
"_webdesign/footer.php"); 
?> 

If you go to http://127.1.1.0/index.php file with your web browser now it should look like a site with the logo and text "Hello! Welcome to my site!". We are now ready to code the navigation.

Main navigation

We will create a own place for the main navigation inside the header block. It is important to try to keep it simple in our first site. This can be done by following the best practice given in this lesson. We will edit our header.php file and our master.css file.

We have the logo on the top left. Next to the logo we want to place our navigation. To do this we need to create a new div.

First start by adding a <div> with the id "header_center" and a sub <div> with the id "main_navigation".

Edit header.php and insert new divs.

<!-- Header -->
    <header>
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
        </div>
        <div id=\"header_center\">
            <div id=\"main_navigation\">

            </div>
        </div>
    </header>
<!-- //Header -->

Navigation

The navigation is created by using the <ul>, <li> and <a> tags. The reason for using this type of tags for the navigation is to ensure that it works on all media including screen, mobile and pad.

<!-- Header -->
    <header>
        <div id=\"header_left\">
            <a href=\"index.php\"><img src=\"_webdesign/images/logo.png\" alt=\"logo.png\" /></a>
        </div>
        <div id=\"header_center\">
            <div id=\"main_navigation\">
                <ul>
                    <li><a href=\"adoptable_pets.php\">Adoptable Pets</a></li>
                    <li><a href=\"volunteer.php\">Volunteer</a></li>
                    <li><a href=\"foster.php\">Foster</a></li>
                    <li><a href=\"donations.php\">Donations</a></li>
                    <li><a href=\"events.php\">Events</a></li>
                    <li><a href=\"contact.php\">Contact</a></li>
                </ul>
            </div>
        </div>
    </header>
<!-- //Header -->

Main navigation master.css code

We need to create some code inside the stylesheet for our navigation. First we will create a new section for header center. We want the header center to also float left, and we will add margin of 50 pixels to the right of the logo.

/**
*
* File: _webdesign/master.css
* Version 01.42 22.04.2017
* Copyright (c) 2008-2017 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Body ---------------------------------------------------------------------------- */
body {
    font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
}

/*- Header --------------------------------------------------------------------------- */
header{
	padding: 10px;
}

	/*- Header left -------------------------------------------------------------- */
	#header_left{
		float: left;
	}

	/*- Header center ------------------------------------------------------------- */
	#header_center{
		float: left;
		margin: 0px 0px 0px 50px;
	}

The result should be like this now:

site.png
Figure: Layout of the logo and navigation.

We now want to code the <ul>, <li> and <a> in our style sheet.

/**
*
* File: _webdesign/master.css
* Version 01.42 22.04.2017
* Copyright (c) 2008-2017 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Body ---------------------------------------------------------------------------- */
body {
    font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
}

/*- Header --------------------------------------------------------------------------- */
header{
	padding: 10px;
}

	/*- Header left -------------------------------------------------------------- */
	#header_left{
		float: left;
	}

	/*- Header center ------------------------------------------------------------- */
	#header_center{
		float: left;
		margin: 0px 0px 0px 50px;
	}

	#main_navigation ul{
		list-style: none;
		margin: 10px 0px 0px 0px;
		padding: 0;
	}
	#main_navigation ul > li{
		float:left;
		position:relative;
		margin: 0px 30px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	#main_navigation ul > li > a{
		font: bold 15px Verdana, Tahoma, Arial, Helvetica, sans-serif;
		display: block;
		color: #595758;
		text-decoration:none;
	}
	#main_navigation ul > li > a:hover{
		color: #e72665;
	}

In the #main_navigation ul part we first removed the bullets · of the list. Then we added 10 pixels margin at the top, and removed all padding. Margin is the same as space between the top and the links.

The #main_navigation ul > li applies to all list items. THe tags will now float left and their position is relative. The default position of elements are static, meaning that their will render in order, as they appear in the document flow. Whenwe set the positon to relative the tags will render relative to its normal position.

The #main_navigation ul > li > a is style for all links. We want the links to be bold 15 pixels and the font Verdana. We want to display them in a block, meaning that the <a> tag will take the entire <li> spaces. The color is grey, and we remove the default underline by having text-decoration none.

Whenever we hoved the link the code #main_navigation ul > li > a:hover is run. We want to change the color to pink, so we will write the color code for it.

Status check

You should now be able to se your website with a logo and the text.
Please check my files and compare it to your files.

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.