Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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.


    SEMrush
    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
    SEMrush