Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2

Thread: element z index

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    element z index

    so i have designed a nav element where on a mobile device, you click a button (the 3 menu bar hamburger) and the nav element slides in from the left. on the original index page it appears on top of the header which is what i want, i didnt even have to use z-index to achieve this. so i created a login page with a form element and two inputs. i havent optimised the form element for mobile but i was having a look and althoughthe nav appears above the header, it appears underneath or behind the form. i tried correcting this by setting the z-index to 0 and 1 respectively but it didnt correct it.

    heres the index page

    <?php

    include 'view/header.php';
    include 'includes/connect.php';

    $db = new database();

    $sql = "SELECT `first_name`, `last_name` FROM `pratts_db`
    WHERE `first_name` = `clive`;";

    $result = $db->select($sql);

    if (sizeof($result) >= 1){
    echo "query successful";
    echo "<p>{$result[0]['first_name']}</p>";
    }

    include 'view/footer.php';

    ?>
    nothing fancy there. the header

    <!doctype html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/login.css">

    <title>Pratts of carlow </title>
    </head>

    <body>

    <header>
    <h1> Pratts of Carlow </h1>

    <div id="menubar">
    <div class="bar">
    </div>
    <div id="dos" class="bar">
    </div>
    <div class="bar">
    </div>
    </div>

    <div id="logos">
    <img src="images/fiat.png" alt="fiat logo">
    <img src="images/fiatpro.png" alt="fiat pro logo">
    </div>
    </header>

    <nav id="slidenav">
    <a href="#" id="exit"> x </a>
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">SALES</a></li>
    <li><a href="#">SERVICE</a></li>
    <li><a href="#">PARTS</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">LOGIN</a></li>
    </ul>
    </nav>
    header css including nav css

    /* ************************************************** **************************/
    /* CSS RESET */
    /* ************************************************** **************************/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /************************************************** ****************************/
    /************************************************** ****************************/

    body {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    header {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    background-color: rgb(170,10,50);
    border-bottom: 2px solid rgb(180,20,60);
    }

    header h1 {
    position: relative;
    font-family: helvetica;
    font-size: 30px;
    width: 200px;
    padding: 10px;
    letter-spacing: 2px;
    color: white;
    font-weight: bold;
    }

    #menubar {
    position: absolute;
    width: 40px;
    height: 20px;
    top: 34px;
    right: 25px;
    }

    .bar {
    position: relative;
    width: 40px;
    height: 5px;
    background-color: white;
    border-radius: 3px;
    }

    #menubar:hover > .bar {
    background-color: rgb(180,180,180);
    }

    #dos {
    margin: 3px 0px 3px 0px;
    }

    nav {
    position: absolute;
    left: -150px;
    top: 0px;
    height: 100%;
    width: 80%;
    max-width: 150px;
    text-align: center;
    background-color: white;
    border-right: 1px solid grey;
    transition: left .5s ease-out;
    z-index: 1;
    }

    #exit {
    position: reltive;
    float: right;
    color: grey;
    }

    ul {
    position: relative;
    text-align: center;
    clear: both;
    }

    nav ul li {
    border-top: 1px solid grey;
    padding: 15px 0px 15px 0px;
    }

    nav ul li:hover {
    background-color: rgb(240,240,240);

    }

    nav a {
    text-decoration: none;
    font-family: helvetica;
    font-size: 10px;
    margin: 10px;
    color: grey;
    }

    #logos{
    display: none
    }

    /************************************************** ****************************/
    /************************************************** ****************************/

    @media screen and (min-width: 680px){
    #menubar {display: none;}
    #exit{display: none;}

    nav {
    position: relative;
    margin: 0 auto;
    left: 0px;
    width: 100%;
    min-width: 550px;
    max-width: 1200px;
    height: 25px;
    border: none;
    }

    nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    }

    nav ul li {
    display: inline-block;
    margin: 0 auto;
    border: none;
    margin: 0 auto;
    padding: 4px;
    }

    nav ul li:hover {
    background-color: white;
    }

    nav ul li a:hover {
    color: rgb(100,100,100);
    }

    #logos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;;
    height: 76px;
    width: 200px;
    }

    #logos img {
    max-width: 76px;
    }
    }
    footer

    <footer>
    <blockquote>
    <h2>ADDRESS</h2> <br>
    Pratts of Carlow <br>
    Pollerton Road <br>
    Carlow <br>
    R93 FX20
    </blockquote>
    <blockquote>
    <h2>CONTACTS</h2><br>
    Sales: <a href="mailto:sales@prattsofcarlow.ie">sales@Pratts ofCarlow</a><br>
    Service: <a href="mailto:service@prattsofcarlow.ie">Service@Pr attsofCarlow.ie</a><br>
    Parts: <a href="mailtoarts@prattsofcarlow.ie">Parts@PrattsofCarlow.ie</a><br>
    </blockquote>
    <blockquote>
    <h2>OPENING HOURS</h2>
    9.00am-6.00pm Monday to Friday<br>
    10.00am-1.00pm saturday
    </blockquote>
    </footer>

    <script src="scripts/mm.js">
    </script>

    <script src="scripts/exit.js">
    </script>
    </body>

    </html>
    footer css

    footer {
    position: relative;
    width: 100%;
    background-color: rgb(40,40,40);
    letter-spacing: 1px;
    font-size: 12px;
    font-family: helvetica;
    }

    footer h2 {
    font-weight: bold;
    color: rgb(200,200,200);
    }

    blockquote {
    color: rgb(200,200,200);
    padding: 20px;
    text-align: center;
    }

    blockquote a{
    text-decoration: none;
    color: rgb(230,100,90);
    }

    @media screen and (min-width: 680px){
    footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    }
    }
    login.php

    <?php

    include 'view/header.php';

    echo "<main id='login'>
    <form action='access.php' method='post' id='form1'>
    <input type='email' name='email' placeholder='email'>
    <input type='password' name='password' placeholder='password'>
    <button type='submit' form='form1' value='submit'>Login</button>
    </form>
    </main>";

    include 'view/footer.php';

    ?>
    login css

    #login {
    position: relative;
    width: 500px;
    height: 200px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 400px;
    padding: 50px;
    background-color: grey;
    z-index: 0;
    }

    #login input {
    margin: 10px auto;
    display: block;
    width: 200px;
    border: none;
    background-color: grey;
    border-bottom: 1px solid white;
    color: white;
    }

    #login input:laceholder {
    color: white;
    }

    #login input:focus {
    outline: none;
    background-color: rgb(100,100,100);
    }

    #login button {
    margin: 10px auto;
    display: block;
    width: 200px;
    height: 20px;
    border: none;
    border-radius: 5px;
    background-color: rgb(230,100,90);
    }
    i just noticed that the ooter appears on top of the nav when it slides in also. why is it appearing on top of the header but underneath the login form and footer??

  2.  

  3. #2
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    i have kinda half fixed it. i had the head css and foot css in seperate files. i combined them and now the nav is above bothelements, but... none of the footer styles are working now

    what am i doing wrong?

    index.php

    <?php

    include 'view/header.php';
    include 'includes/connect.php';

    $db = new database();

    $sql = "SELECT `first_name`, `last_name` FROM `pratts_db`
    WHERE `first_name` = `clive`;";

    $result = $db->select($sql);

    if (sizeof($result) >= 1){
    echo "query successful";
    echo "<p>{$result[`first_name`]}</p>";
    }

    include 'view/footer.php';

    ?>
    head.php

    <!doctype html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/login.css">

    <title>Pratts of carlow </title>
    </head>

    <body>

    <header>
    <h1> Pratts of Carlow </h1>

    <div id="menubar">
    <div class="bar">
    </div>
    <div id="dos" class="bar">
    </div>
    <div class="bar">
    </div>
    </div>

    <div id="logos">
    <img src="images/fiat.png" alt="fiat logo">
    <img src="images/fiatpro.png" alt="fiat pro logo">
    </div>
    </header>

    <nav id="slidenav">
    <a href="#" id="exit"> x </a>
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">SALES</a></li>
    <li><a href="#">SERVICE</a></li>
    <li><a href="#">PARTS</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">LOGIN</a></li>
    </ul>
    </nav>
    foot.php

    <footer>
    <blockquote>
    <h2>ADDRESS</h2> <br>
    Pratts of Carlow <br>
    Pollerton Road <br>
    Carlow <br>
    R93 FX20
    </blockquote>
    <blockquote>
    <h2>CONTACTS</h2><br>
    Sales: <a href="mailto:sales@prattsofcarlow.ie">sales@Pratts ofCarlow</a><br>
    Service: <a href="mailto:service@prattsofcarlow.ie">Service@Pr attsofCarlow.ie</a><br>
    Parts: <a href="mailtoarts@prattsofcarlow.ie">Parts@PrattsofCarlow.ie</a><br>
    </blockquote>
    <blockquote>
    <h2>OPENING HOURS</h2>
    9.00am-6.00pm Monday to Friday<br>
    10.00am-1.00pm saturday
    </blockquote>
    </footer>

    <script src="scripts/mm.js">
    </script>

    <script src="scripts/exit.js">
    </script>
    </body>

    </html>
    and the css for both

    /* ************************************************** **************************/
    /* CSS RESET */
    /* ************************************************** **************************/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /************************************************** ****************************/
    /************************************************** ****************************/

    body {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    header {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    background-color: rgb(170,10,50);
    border-bottom: 2px solid rgb(180,20,60);
    }

    header h1 {
    position: relative;
    font-family: helvetica;
    font-size: 30px;
    width: 200px;
    padding: 10px;
    letter-spacing: 2px;
    color: white;
    font-weight: bold;
    }

    #menubar {
    position: absolute;
    width: 40px;
    height: 20px;
    top: 34px;
    right: 25px;
    }

    .bar {
    position: relative;
    width: 40px;
    height: 5px;
    background-color: white;
    border-radius: 3px;
    }

    #menubar:hover > .bar {
    background-color: rgb(180,180,180);
    }

    #dos {
    margin: 3px 0px 3px 0px;
    }

    nav {
    position: fixed;
    left: -150px;
    top: 0px;
    height: 100%;
    width: 80%;
    max-width: 150px;
    text-align: center;
    background-color: white;
    border-right: 1px solid grey;
    transition: left .5s ease-out;
    z-index: 1;
    }

    #exit {
    position: reltive;
    float: right;
    color: grey;
    }

    ul {
    position: relative;
    text-align: center;
    clear: both;
    }

    nav ul li {
    border-top: 1px solid grey;
    padding: 15px 0px 15px 0px;
    }

    nav ul li:hover {
    background-color: rgb(240,240,240);

    }

    nav a {
    text-decoration: none;
    font-family: helvetica;
    font-size: 10px;
    margin: 10px;
    color: grey;
    }

    #logos{
    display: none
    }


    footer {
    position: relative;
    width: 100%;
    background-color: rgb(40,40,40);
    letter-spacing: 1px;
    font-size: 12px;
    font-family: helvetica;
    z-index: 0;
    }

    footer h2 {
    font-weight: bold;
    color: rgb(200,200,200);
    }

    blockquote {
    color: rgb(200,200,200);
    padding: 20px;
    text-align: center;
    }

    blockquote a{
    text-decoration: none;
    color: rgb(230,100,90);
    }

    @media screen and (min-width: 680px){
    footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    }
    }


    /************************************************** ****************************/
    /************************************************** ****************************/

    @media screen and (min-width: 680px){
    #menubar {display: none;}
    #exit{display: none;}

    nav {
    position: relative;
    margin: 0 auto;
    left: 0px;
    width: 100%;
    min-width: 550px;
    max-width: 1200px;
    height: 25px;
    border: none;
    }

    nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    }

    nav ul li {
    display: inline-block;
    margin: 0 auto;
    border: none;
    margin: 0 auto;
    padding: 4px;
    }

    nav ul li:hover {
    background-color: white;
    }

    nav ul li a:hover {
    color: rgb(100,100,100);
    }

    #logos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;;
    height: 76px;
    width: 200px;
    }

    #logos img {
    max-width: 76px;
    }
    }
    running out of time on this can anyone help?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com