Problem with nav bar and footer

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

0
  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