Navigation bar and footer problem on uhd screen (tv hooked to pc)

ساخت وبلاگ

آخرین مطالب

امکانات وب

Navigation bar and footer problem on uhd screen (tv hooked to pc)

The navigation bar and the footer are wrong. Both should be centered and 90% width.

this is how it looks like now:

Click image for larger version.  Name: Capture.jpg  Views: 4  Size: 53.5 KB  ID: 17437


html:

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_variation_800_e.png" alt="Logo">
                        <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
                        <img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni">
                       
                        <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>
                </header>
               
               
       
        <footer class="mainFooter">
                          <div class="footerBody">
                            <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
                          </div>
                </footer>
       
    </body>


</html>


css:

Code:
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;
    text-align: left;
        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 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 img.Couture {
        position: absolute;
    left: 10%;
    top: 5%;
        max-width: 100%;
        height: auto;
}

.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;
}

.mainFooter {
    position: fixed;
       
    width: 100%;
    height: 40px;
   
    clear: both;
    text-align: left;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
    bottom: 3%;
}



.mainFooter .footerBody {
                  margin:0 auto;
            background-color: #9cb34f;
        }



        .mainFooter .footerBody p {
          vertical-align: middle;
          text-align: left;
          padding-left: 1%;
          margin-top: 0;
        }




@media only screen
        and (device-width: 3840px)
        and (device-height: 2160px)
        and (orientation: landscape) {

                body {
                  width: 100%;
                font-size: 300%;
            }

                .mainHeader {
                        width: 90%;
                        margin: 0 auto;
                }

                .mainHeader img.Margrit {
                        height: auto;
                        width: 12%;
                        top: 20%;
                }

                .mainHeader img.Logo {
                        height: auto;               
                        width: 12%;
                        top: 60%;
                }

                .mainHeader img.Couture {
                        height: auto;
                        left: 0%;
                        top: -18%;
                        width: 75%;
                }

                .mainHeader nav {
                  width: 90%;
          height: 100px;
      }
     
              .mainHeader nav ul {
                padding-left: 0;
                }

                  .mainHeader nav ul li {
                width: 25%;
                text-align: center;
                }

                  .mainHeader nav a:link, .mainHeader nav a:visited {
                padding: 20px 367px;
                height: 59px;
            display: inline-block;
                }
     
               
        .mainFooter {
            width: 90%;
        }

                .mainFooter .footerBody {
                  width: 90%;
                  margin:0 auto;
            height: 40px;
            clear: both;
            text-align: left;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            background-color: #9cb34f;
        display: block;
        }
        .mainFooter .footerBody p {
          display: table-cell;
      vertical-align: middle;
          text-align: left;
          padding-left: 1%;
          margin-top: 0;
        }
}
Attached Thumbnails
Click image for larger version.  Name: Capture.jpg  Views: N/A  Size: 53.5 KB  ID: 17437 
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 177 تاريخ : پنجشنبه 30 شهريور 1396 ساعت: 17:45

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه