CSS navigation menu (horizontal & vertical)

HTML & CSS
1

hey,

I have two navigations menu vertical and horizontal
I have also created 2 css script because I thought it would solve my problem.
The issue is: the second menu (vertical) takes over the horizontal menu css properties although they are saved separately(design.css und design1.css) and display an horrible thing.
What I want is: each menu with different properties as defined in their css. I hope I describe the problem well.
I also created 2 php scripts (aside_menu.php and menu.php) and in the menu.php I include (aside_menu.php) to get them in the same page. Thank you

mignoncharly

2

Welcome to the forums, @mignoncharly.

To diagnose he issue, we really need to see this in a live page, or at least to see all the relevant code.

To format code in a post, you can highlight it, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

3

Having two different files will not solve the problem, both will apply to the whole page.
What is important is the order of the css rules and specificity of selectors.
Subsequent rules will override previous ones if they target the same elements, either by the same selector or by a more specific selector.
In fact, a more specific selector can override less specific subsequent selectors.
you may need to use unique classes or ids in the differing menus to distinguish them apart.
Though seeing the code would help.

2 Likes
4

Thank you
here are the code

menu.php

<!doctypehtml>                                                                                                                       <?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">
    <link rel="stylesheet" href="design2.css">

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

<div class="absolute">
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="fiancailles.php">Betrothal</a></li>
    <li><a href="programme.php">Program</a></li>
    <li><a href="guestbook.php">Guestbook</a></li>
    <li><a href="contact.php">Contact</a></li>
    <li><a href="logout.php">Logout</a></li>
</ul>
</div>
<?php include ("aside_menu.php");?>
</body>
<?php include("footer.php");?>
</html>

design.css

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


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

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

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

aside_menu.php

<!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="design2.css">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<?php include("header.php");?>
<body>
<nav class="navigation">
    <ul class="nav">
        <li class="nav1"><a href="bride.php">The Bride</a></li>
        <li><a href="groom.php">The Groom</a></li>
        <li><a href="album.php">Album</a></li>
        <li><a href="confirmation.php">Confirm your presence</a></li>
        <li><a href="gift_list.php">Want to support us ?</a></li>
        <li><a href="testimonial.php">Our stories</a></li>
    </ul>
</nav>
</body>
<?php include("footer.php");?>
</html>

design1.css

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


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

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

.navigation{
    width: 180px;
    height: 200px;
}

.nav{
    position: relative;
    top: 61px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav a {
    display: block;
    background-color: #BA9B61;
    text-decoration: none;
    padding: 20px;
    color: #000;
}

.nav a:hover {
    background-color: #c5c5c5;
}
5

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

4 Likes
6

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:

7

Can you please post a URL to the web site?

8

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
9

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.

10

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

11

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
12

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

4 Likes
13

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

667Ă—652 69.7 KB

14

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
15

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

16

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
17

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
18

oooh yes … I understood now. grgrgrgr. thks

2 Likes
19

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
20

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

912Ă—68 12 KB
)