Problem with nav bar and footer

Discussion in 'CSS' started by Arborem, Sep 21, 2017.

  1. #1
    My navigation bar and footer are misplaced and sized wrong and i dont know how to solve this. They should both be centered and have 90% width but at the moment the navigation bar is 100% width and the footer looks really messed up on my iPhone 6s Plus in landscape. Its in the bottom right corner and there is only a quarter of the footer visible.



    Does anybody know how to solve this?

    Btw I would llike to show a picture of the problem but i cant post a picture:
    I tried link, picture and file upload but it wouldnt let me upload or post


    Code:

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Couture Anni</title>
            <meta charset="utf-8">
          
            <link rel="stylesheet" type="text/css" href="resources/css/style.css">
            <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <header class="mainHeader">
                <img class="Logo" src="resources/img/Content%255Cvariation_800_e.png" alt="Logo">
                <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
              
                <nav>
                  
                    <ul>
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Kontakt</a></li>
                    </ul>
                  
                </nav>
              
              
                <p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
            </header>
          
          
          
            <footer class="mainFooter">
                  <div class="footerBody">
                    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
                  </div>
            </footer>
          
        </body>
    
    
    </html>
    HTML:

    body {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
        background-size: cover;
        height: 1000px;
        color: #000305;
        font-size: 87.5%;
        font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
        line-height: 1.5;
        margin: 0 auto;
        width: 100%;
        clear: both;
    }
    
    a {
        text-decoration: none;
      
    }
    
    a:link, a:visited {
        color: #CF5C3F;
    }
    
    a:hover, a:active {
        background-color: #CF5C3F;
        color: #fff;
    }
    
    
    .mainHeader {
        width: 100%;
        margin: 0% auto;
    }
    
    
    
    .mainHeader img {
        position: relative;
    }
    
    .mainHeader img.Logo {
        position: absolute;
        right: 15%;
        top: 74.5%;
        max-width: 20%;
        height: auto;
    }
    
    .mainHeader img.Margrit {
        position: absolute;
        right: 15%;
        top: 15%;
        max-width: 20%;
        height: auto;
        margin-bottom: 100px;
    }
    
    .mainHeader nav {
        background-color: #9cb34f;
        height: 40px;
        margin-top: 15px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    
    .mainHeader nav ul {
        list-style: none;
        margin: 0 auto;
    }
    
    .mainHeader nav ul li {
        text-align: center;
        display: inline;
        float: left;
    }
    
    .mainHeader nav a:link, .mainHeader nav a:visited {
        color: #fff;
        display: inline-block;
        padding: 10px 25px;
        height: 20px;
    }
    
    .mainHeader nav a:hover, .mainHeader nav a:active,
    .mainHeader nav .active a:link, mainHeader nav .active a:visited {
        background-color: #CF5C3F;
        text-shadow: none;
    }
    
    .mainHeader nav ul li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    
    .mainHeader p {
       position: relative;
    }
    
    
    .mainHeader p.inBearbeitung {
       position: absolute;
      
       top: 50%;
       left: 5%;
       font-size: 140%;
       color: #fff;
    }
    
    
    .mainFooter {
      position: fixed;
      width: 100%;
      bottom: 3%;
      margin: 0 5%;;
    }
    
    
    .mainFooter .footerBody {
        width: 90%;
        height: 40px;
        clear: both;
        text-align: left;
    
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        background-color: #9cb34f;
        display: table;
    }
    
    
    
        .mainFooter .footerBody p {
           display: table-cell;
           vertical-align: middle;
           text-align: left;
           padding-left: 1%;
           margin-top: 0;
         }
    
    
    
    
    /* ----------- iPhone 6+ ----------- */
    /* Portrait */
    @media only screen
      and (device-width: 414px)
      and (orientation: portrait) {
          body {
              font-size: 95%;
          }
      
        
            .mainHeader {
                width: 90%;
            }
    
            .mainHeader img.Margrit {
                right: 5%;
                width: 25%;
                top: 45%;
            }
    
            .mainHeader img.Logo {  
                right: 5%;
                width: 25%;
                top: 62%;
            }
    
            .mainHeader nav {
              height: 160px;
          }
        
              .mainHeader nav ul {
                padding-left: 0;
            }
    
              .mainHeader nav ul li {
                width: 100%;
            }
    
              .mainHeader nav a:link, .mainHeader nav a:visited {
                padding: 11px 120px;
                height: 20px;
                display: block;
            }
    
    
            .mainHeader p.inBearbeitung {
              
                top: 50%;
                left: 5%;
                font-size: 135%;
                color: #fff;
            }
    
        .mainFooter {
            height: 20px;
        }
        
        
          .mainFooter .footerBody{
              height: 20px;
          }
        
        
          .mainFooter .footerBody p {
               padding-left: 1%;
               margin-top: 0;
           }
    }
    
    /* Landscape */
    @media only screen
      and (device-width: 736px)
      and (orientation: landscape) {
        
          body {
              font-size: 95%;
          }
      
        
            .mainHeader {
                width: 90%;
            }
    
            .mainHeader img.Margrit {
                right: 5%;
                width: 12.5%;
                top: 30%;
            }
    
            .mainHeader img.Logo {  
                right: 5%;
                width: 12.5%;
                top: 62%;
            }
    
            .mainHeader nav {
              height: 25px;
          }
        
              .mainHeader nav ul {
                padding-left: 0;
            }
    
              .mainHeader nav ul li {
                width: 25%;
            }
    
              .mainHeader nav a:link, .mainHeader nav a:visited {
                padding: 2.5px 63px;
                height: 20px;
                display: inline-block;
            }
    
    
            .mainHeader p.inBearbeitung {
                top: 45%;
                left: 5%;
                font-size: 135%;
                color: #fff;
            }
    
        .mainFooter {
            clear: both;
            display: table;
            text-align: left;
        }
        
        
          .footerBody {
              display: table-cell;
              vertical-align: middle;
          }
        
          .footerBody footerBody.p {
              font-size: 90%;
          }
    }
    
    Code (CSS):
     
    Last edited: Sep 21, 2017
    Arborem, Sep 21, 2017 IP