html.de - Probleme beim Titel zentrieren

by SpiceLab

HTML

<div id="header">
  <div id="headerlinks">
    <a href="index.html">TestU</a>
  </div>
  <div id="headerrechts">
    <ul>
      <li><a href="index.html" class="active">Startseite</a></li>
      <li><a href="index.html" class="active">Test</a></li>
      <li><a href="index.html" class="active">Test1</a></li>
      <li><a href="index.html" class="active">Test2</a></li>
      <li><a href="ueberuns.html" class="active">Über Uns</a></li>
    </ul>
  </div>
</div>

CSS

/*header*/
#header {
   width:100%;
   position:relative;
}
#headerlinks {
   width:12%;
   height:7vh;
   line-height:7vh; /* für vertikale Zentrierung */
   float:left;
   position:absolute;
   /*display:block;*/ /* obsolet, <div> ist ein Block-Element */
   background-color:black;
   font-size:140%;
   font-weight:bold;
   font-family:Helvetica;
}
#headerlinks a{
   text-decoration:none;
   /*padding-top:10px;*/ /* entfällt wg. line-height */
   margin-left:10px; /* alternativ zu padding-left, falls Rahmen/Hintergrundfarbe gewünscht ist, der/die links nicht hinausragen soll */
   font-size:150%;
   font-weight:bold;
   font-family:Helvetica;
   color:silver;
   display:block; /* Inline-Element verhält sich im Textfluß wie ein Block-Element, interpretiert z.B. margin-/padding-Regeln korrekt */
}
#headerrechts {
   width:88%;
   height:7vh;
   line-height:7vh; /* für vertikale Zentrierung */
   background-color:black;
   display:inline-block;
   position:relative;
   float:right;
}
 
#headerrechts ul{
   /*display:block;*/ /* obsolet, <ul> ist ein Block-Element */
   margin:0; /* Reset des voreingestellten Außenabstandes - falls noch nicht im übrigen unbekannten CSS angewendet */
   padding:0; /* Reset des voreingestellten Innenabstandes - falls noch nicht im übrigen unbekannten CSS angewendet */
  
}
#headerrechts ul li{
   display:inline-block; /* anstatt display:inline wg. display:block für <a> */
   /*position:middle;*/ /* middle ist kein gültiger Wert für position */
}
#headerrechts ul li a{
   /*position:middle;*/ /* middle ist kein gültiger Wert für position */
   font-family:Helvetica;
   text-decoration:none;
   color:white;
   font-size:1em;
   line-height:1em;
   padding:0em 1.3em 0em 1.3em;
   transition:background 0.2s;
   -webkit-transition:background 0.2s;
   display:block;  /* Inline-Element verhält sich im Textfluß wie ein Block-Element, interpretiert z.B. margin-/padding-Regeln korrekt */
}
#headerrechts ul li a:hover{
   background:silver;
  ...