Avoir un problème avec le texte de l'en-tête et son alignement

Lorsque j'exécute mon site Web sur un navigateur, l'en-tête (Un peu d'en-tête) doit être centré en haut de la page Web mais centré au milieu de la page Web. J'ai besoin d'aide pour corriger cela, mais je garde toujours l'en-tête dans une position fixe.Avoir un problème avec le texte de l'en-tête et son alignement

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Some Title</title> 
 
    <link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%"> 
 
</head> 
 
<style> 
 
    body { 
 
     margin: 0; 
 
     background-image: url("Road.png"); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 

 
    } 
 
    .header { 
 
     position: fixed; 
 
     width: 100%; 
 
     height:70px; 
 
     background-color: transparent; 
 
     text-align:right; 
 
    } 
 
    .socialmedia { 
 
     position:fixed; 
 
     right:150px; 
 
     top:35px; 
 
     transform:translate(0,-50%); 
 
     display: flex; /* add this */ 
 
     align-items: center; /* add this */ 
 
    } 
 

 
    .footer { 
 
     display: flex; 
 
     align-items: center; 
 
     width: 100%; 
 
     height: 90px; 
 
     margin-top: 319px; 
 
    } 
 
</style> 
 

 
<body> 
 
<div class="Coming Soon" style=" color: black;"> 
 
    <div class="header"> 
 
    <a href="website"><h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1></a> 
 

 
    <style> 
 
     a{text-decoration: none; 
 
      color: white; } 
 
    </style> 
 
    <div class="socialmedia"> 
 
     <img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px"> 
 
     <a class="Facebook"> 
 
      <a href="https://www.facebook.com" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a> 
 
     </a> 
 
     <a class="Instagram"> 
 
      <a href="https://www.instagram.com" target="_blank"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a> 
 
     </a> 
 
     <a class="Youtube"> 
 
      <a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a> 
 
     </a> 
 

 
    </div> 
 
    </div> 
 
    <p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p> 
 
    <div class="footer" style=" color: black;"> 
 

 
     <p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company | City State Website All Right Reserved.</p> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

Source

2017-03-08 Noah Tanenholtz

add 'top: 0;' 'à .header' –

Merci, qui a été fixé il! –

@NoahTanenholtz peut-être, mais il utilise le positionnement absolu et il n'est pas recommandé de pratiquer –

html5 a une balise native header, vous n'avez pas besoin de le définir comme une classe, mais c'est un aparté.

Si vous modifiez votre position sur relative (recommandé), et en outre, supprimez le text-align:right;, votre 'Some Header' apparaîtra probablement comme vous le souhaitez.

Une note: vous avez beaucoup de style en ligne dans votre code HTML (et trop de html - trop de tags - vous avez des liens de liens dans les liens inutilement - vous pouvez en supprimer). Je vous recommande de mettre le css en ligne avec le css (de préférence dans une feuille de style css) plutôt que dans le document html. Si nécessaire, vous pouvez ajouter une classe si vous souhaitez utiliser le même tag ultérieurement avec une variante.

Hope this helps

Source

2017-03-08 18:09:49

Pour rendre l'en-tête évident, j'ai changé le lien «a» du blanc au rouge. Voici comment votre html ressemblerait avec les balises html5 et html decluttered https://jsfiddle.net/RachGal/1tcpggst/ –

Avoir un problème avec le texte de l'en-tête et son alignement

Répondre

Questions connexes