CSS navigation menu (horizontal & vertical)

Apart from anything else, including the doctype, html, head and body tags within your include is going to confuse some browsers.

4 Likes

I don’t get what you mean … should i remove them? until now i haven’t got any issues with them until you mention it today :slight_smile:

Can you please post a URL to the web site?

As @Gandalf mentioned, the php includes should only be the specific code snippet that is to be inserted where the include command is placed.

That also means the include commands should be carefully placed in the html code, I see you happen to have misplaced the include commands for both header.php and footer.php, they should probably be inside the body tags.

2 Likes

Yes! Take a look at the HTML your page produces, you’ll see what a mess it is. You can’t have all that guff in the middle of a page.

I didn’t host it yet … all files are on my pc

Take a giant step on your own, then.

Open your home page in a browser. Show Source. Copy that code to your clipboard (everything that is showing) and upload it to the HTML validator.
https://validator.w3.org/nu/
See if the validator reports any problems, such as those mentined by @Erik_J and @galdalf458.
Fix the problems.

Ask about any that you do not know how to fix.

2 Likes

thank you very much … i’m going to do it and so far i’m done with it i ll post it.

4 Likes

Hey,
here is the result of the checking.
It said i should replace doctype and instead of using <br> which trick can i use then? Thks

Looking at the code in the screen grab, there appears to be no doctype, no head and no body. You should have all three of these things.

<br> should only ever be used to break a line, such as a line in a song, poem or address.
It is not for starting a new paragraph of for creating gaps between lines.
<li>s default to a new line, so don’t need it. If you want more space between your <li>s, apply padding or margins to them with css.
Eg

li { padding-bottom: 0.8em }
2 Likes

Hey,
thank
but gandalf458 said i don’t need those tags … (i always used to write my code with them).

gandalf458 was referring to the <!doctype> and head information included in the files called by PHP. He was not talking about the initial page. The initial page needs to be properly <doctyped>. The files called by PHP should contain ONLY the code being inserted.

3 Likes

I think you misinterpret @Gandalf
You do need those tags once in a page. What he means is, they should not be on the include, but should be on the page.
The php looks like you are including a whole page (with its own doctype, head and body) within another page.

3 Likes

oooh yes … I understood now. grgrgrgr. thks

2 Likes

The sites that I write and maintain are fairly simple. As such, I rarely use PHP calls… BUT when I do, I surround those calls with comment marks so anyone who looks into the page code can tell when an external file is being called. I know this sounds like overkill, but it is very helpful during the developmental stages of a page especially if I need to ask someone else to lend a hand debugging something.

The pattern is simple. On the “home” or base page I comment around the PHP call like this:

<!-- begin thismenufile.php -->
<?php ... ?>
<!-- end thismenufile.php -->

Because Show Source shows only the inserted HTML and not the PHP call, the comment marks reveal that the HTML is being imported from another file.

I find it helpful.

4 Likes

do i have to make a new post when i strike an issue?
so i wanted to know why in my page i got nothing instead having a line of code in the (picture

)

If it is a new topic and does not relate to the main topic of the curren thread, then yes, start a new topic.

If relevent information about the issue exists in the current thread, then present the issue in the current thread.

Use your best judgement.

In response to your post #20, I would ask you to show us a complete “working page” (starts with <!doctype html> and ends with </html>) that demonstrates the issue so we can reproduce it on our computers. The CSS can be included between <style> tags in the <head> of the page.

The index.php doesn’t contain much information because they are many files (menu.php, album.php …) that will be called depend on from where the user will be on the website.

<!doctype html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
<?php  
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="mignoncharly" content="text/html">
	<title>Paola&amp;Prince</title>
	<link rel="stylesheet" href="design.css">
	<style>
		html, body{

	background-color: #FBF2B7;
    height: 100%;
    width: 92%;

    background:url(images/paola.png) center center no-repeat;
            -webkit-background-size: cover;
		    -moz-background-size: cover;
		    -o-background-size: cover;
    background-size: cover;

}
.style1 {font-size: 12px}
body,td,th {
    font-size: 14px;
}

 body {
	background-color: #CCC;
	/*margin:80px 80px 100px 100px;*/
	margin: 0;
	height: 900px;
    overflow-y: scroll;
    overflow-x: hidden; /* hides the horizontal scroll bar */
}


#fixedheader {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#BA9B61;
	padding:30px;
}

#fixedfooter, p {
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#BA9B61;
	padding:10px;
}

#foo{
	text-align: center;
	/*position: relative;*/
	bottom: 1px;
}
#form{
	position:relative;
	top:180px;
	left: 100px;
	
}


/* ########################################### */

/*menu horizontal*/
ul{
	position: relative;
    display: table;
    width: 600px;
    margin: 100px auto;
    padding: 0;
	/*dégradé linéaire*/
	background: linear-gradient(deepskyblue, dodgerblue);
	/*compatiilité du dégradé*/
	background: -webkit-linear-gradient(deepskyblue, dodgerblue);
    background:    -moz-linear-gradient(deepskyblue, dodgerblue);
    background:     -ms-linear-gradient(deepskyblue, dodgerblue);
    background:      -o-linear-gradient(deepskyblue, dodgerblue);
    background:         linear-gradient(deepskyblue, dodgerblue);
	background: #BA9B61;
	/*coins arrondis et ombres*/
	border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}


div.absolute {
    position: fixed;
    top: -30px;
    right: 320px;
	left: ;
	bottom: ;
}



/*menu horizontal*/
ul li{
    display: table-cell;
}

/*Style des liens*/
ul li a{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
	/*effet de texte incrusté*/
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
	
	/*effet 3Dsur le menu*/
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset, 
                0 -5px 0 hsl(210, 100%, 60%) inset;
	
	/*transition*/
	transition: padding .3s;
	transition: padding .3s, background .3s;
	/*transition: all .3s; */
	transition: all .3s .1s;
	position: relative;
}

/*peauffinage de l'effet (coins arrondis)*/
ul li:first-child a{
    border-radius: 3px 0 0 3px;
}
ul li:last-child a{
    border-radius: 0 3px 3px 0;
}


ul li a:hover, 
ul li a:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset;
	padding: 8px 25px 17px 25px;
	transition: all .3s 0s;	
} 


ul li a:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}

ul li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
}


ul li a:hover::before,
ul li a:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}


.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    position: fixed;
    height: 55%;
    overflow: auto;
}

.nav li a {
    display: inline-block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

.nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
	</style>

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<!-- begin header.php -->
<?php include("header.php");?>
<!-- end header.php -->

<body>
<p>Welcome to our Weddings website <a href="login.php">click here to login.</a>Thanks!</p>
</body>

<!-- begin footer.php -->
<?php include("footer.php");?>
<!-- end footer.php -->
</html>

</head>
<!-- begin header.php -->
<?php include("header.php");?>
<!-- end header.php -->

<body>
<p>Welcome to our Weddings website <a href="login.php">click here to login.</a>Thanks!</p>
</body>

<!-- begin footer.php -->
<?php include("footer.php");?>
<!-- end footer.php -->
</html>

The include commands should be inside the body tags:

</head>
<body>
<!-- begin header.php -->
<?php include("header.php");?>
<!-- end header.php -->

<p>Welcome to our Weddings website <a href="login.php">click here to login.</a>Thanks!</p>

<!-- begin footer.php -->
<?php include("footer.php");?>
<!-- end footer.php -->
</body>
</html>

Just reminding:
The include code snippets does not have any other code/tags then what’s to be in place of the include command.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.