Comment réparer ma navigation et pied de page?

-1

La navigation prend toute la largeur de l'écran et le pied de page reste sur la gauche. Les deux sont faux et je voudrais avoir la largeur de navigation de 90% et les deux être centrés. J'espère avoir décrit le problème de manière compréhensible.Comment réparer ma navigation et pied de page?

code html:

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

 
\t \t body { 
 
      \t width: 90%; 
 
      \t font-size: 300%; 
 
     \t } 
 

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

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

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

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

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

 
\t \t .mainHeader nav a:link, .mainHeader nav a:visited { 
 
\t \t padding: 20px 367px; 
 
\t \t height: 59px; 
 
\t  display: inline-block; 
 
\t \t } 
 
     
 
\t \t .mainFooter { 
 
\t \t \t display: table; 
 
\t \t \t height: 100px; 
 
\t \t \t width: 90%; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
     \t .mainFooter p { 
 
\t \t display: table-cell; 
 
\t  vertical-align: middle; 
 
      text-align: left; 
 
\t \t padding-left: 1%; 
 
     \t } 
 
}

<!DOCTYPE html> 
 
<html lang="de"> 
 
    <head> 
 
\t \t <title>Couture Anni</title> 
 
\t \t <meta charset="utf-8"> 
 
\t \t 
 
     <link rel="stylesheet" type="text/css" href="resources/css/style.css"> 
 
     <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
\t \t <header class="mainHeader"> 
 
\t \t \t <img class="Logo" src="resources/img/Content_variation_800_e.png" alt="Logo"> 
 
\t \t \t <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter"> 
 
\t \t \t <img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni"> 
 
\t \t \t 
 
\t \t \t <nav> 
 
\t \t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t \t 
 
\t \t  </nav> 
 
\t \t </header> 
 
\t \t 
 
\t \t 
 
     
 
     <footer class="mainFooter"> 
 
      <p>Copyright &copy; <a href="#" title="couture-anni">couture-anni.ch</a></p> 
 
     </footer> 
 
     
 
    </body> 
 

 

 
</html>

J'ai choisi cette requête car il reproduit le problème. Au moins je pense.

Source

2017-09-20 Paludis

pouvez-vous ajouter du code HTML afin que nous puissions voir le problème? – Liquidchrome

Im actuellement ob mobile donc je ne peux pas donner le code ici mais voici un lien vers mon site, vous pouvez inspecter là https://www.couture-anni.ch – Paludis

'.mainFooter {left: 0; droite: 0; marge: auto; } ' – ecolema

Vous devriez garder l'élément corporel à 100% et dimensionner les autres contenus à partir de là. marge: 0 auto; prend soin de centrer votre élément.

body{ 
    width: 100%; 
} 
.mainHeader{ 
    width: 90%; 
    margin: 0 auto; 
} 
.mainFooter{ 
    position: fixed; 
    width: 100%; 
    bottom: 3%; 
} 
.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; 
} 
.mainFooter .footerBody p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: left; 
    padding-left: 1%; 
    margin-top: 0; 
}

En ce qui concerne votre pied de page, utilisez la classe mainFooter comme enveloppe pour le positionnement fixe, puis ajoutez un récipient de taille de 90% à l'intérieur et que l'affichage set: bloc;

<footer class="mainFooter"> 
    <div class="footerBody"> 
    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p> 
    </div> 
</footer>

Espérons que cela aide!

Source

2017-09-20 19:06:27 Liquidchrome

Merci d'avoir répondu. Sur mon écran de PC cela a fonctionné avant et cela fonctionne maintenant mais pas quand je fais glisser la fenêtre sur mon uhd tv je reçois toujours ce que j'ai décrit ci-dessus – Paludis

écran de télévision? regardez-vous via un navigateur à partir d'une télévision intelligente? il pourrait être problème de mise en cache puis – Liquidchrome

pas son accroché à mon pc – Paludis

Comment réparer ma navigation et pied de page?

Répondre

Questions connexes