[ERLEDIGT] Probleme beim Titel zentrieren

[Aresch]

Hi :)

ich habe einen Header erstellt, den ich in 2 div Container unterteilt habe. Der linke Container soll den Firmennamen enthalten und der Rechte soll eine Menüleiste enthalten. Hierzu habe ich zwei Probleme.

1) Der vertikale Abstand des Firmennamens ist zu niedrig. Ich möchte den Firmennamen etwas tiefer platzieren, jedoch kriege ich es nicht hin. Ich habe den Abstand auf den Bildern rot markiert.

2) Ich möchte die Menüleiste mittig des Containers positionieren, jedoch bewegt sich die Menüleiste ebenfalls nicht.

Hoffe ihr könnt mir weiterhelfen. Danke im Voraus :)

 

[SpiceLab]

Hoffe ihr könnt mir weiterhelfen.

Sicher, wenn wir auch den dazugehörigen HTML- u. CSS-Code gesehen haben.

Aber bitte diesen hier nicht als "Screenshot" hochladen, sondern im [code][/code]-Tag vorstellen.

 

[Aresch]

LOL sry^^
habe ich ganz vergessen :)

HTML Code

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

/*header*/
#header {
   width:100%;
   position:relative;
}
#headerlinks {
   width:12%;
   height:7vh;
   float:left;
   position:absolute;
   display:block;
   background-color:black;
   font-size:140%;
   font-weight:bold;
   font-family:Helvetica;
}
#headerlinks a{
   text-decoration:none;
   padding-top:10px;
   padding-left:10px;
   font-size:150%;
   font-weight:bold;
   font-family:Helvetica;
   color:silver;
}
#headerrechts {
   width:88%;
   height:7vh;
   background-color:black;
   display:inline-block;
   position:relative;
   float:right;
}

#headerrechts ul{
   display:block;
}
#headerrechts ul li{
   display:inline;
   position:middle;
}
#headerrechts ul li a{
   position:middle;
   font-family:Helvetica;
   text-decoration:none;
   color:white;
   font-size:1em;
   line-height:0;
   padding:0em 1.3em 0em 1.3em;
   transition:background 0.2s;
   -webkit-transition:background 0.2s;
}
#headerrechts ul li a:hover{
   background:silver;
   border-bottom:0.188em solid #E7590B;
}

 

[SpiceLab]

Eine Eigenschaft namens position:middle gibt es überhaupt nicht. Gültige Werte zur Positionierungsart sind static, relative, absolute u. fixed.

Mit dem zeitgemäßen CSS3-Flexbox-Modell ist es ein Leichtes, Blöcke nebeneinander anzuordnen (die float-Regeln entfallen gänzlich), und sie zueinander vertikal auszurichten.

• https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  
• https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
  
• http://www.w3schools.com/css/css3_flexbox.asp

 

[Aresch]

Hey, danke für die Antwort. Leider erkenne ich da keinen Zusammenhang zu meiner Frage. Ich möchte den Firmennamen innerhalb des DIV Containers etwas tiefer platzieren und nicht den vertikalen Abstand zwischen den Blöcken verändern. Die Blöcke sollen in der Position bleiben, lediglich der Text in dem Block soll tiefer versetzt werden. Hoffe ich konnte es einigermaßen erklären.

 

[SpiceLab]

Dann bleiben wir halt bei Deinem veralteten Konzept... Ich zwinge niemanden zu seinem Glück.

#headerlinks a{
   ...
   padding-top:10px; /* muß ggfs. angepasst/herabgesetzt werden, nachdem display:block ergänzt wurde */
   padding-left:10px; /* muß ggfs. angepasst/herabgesetzt werden, nachdem display:block ergänzt wurde */
   ...
   display:block; /* Ergänzung für das Inline-Element, damit die padding-Regeln überhaupt greifen */
}

 

[Aresch]

Besten Dank. Habe damit auch das Prinzip endlich verstanden mit dem Display:Block :)
Danke nochmals

 

[SpiceLab]

Weil ja im Betreff "zentrieren" steht, hier die vertikale Zentrierung per line-height für #headerlinks u. #headerrechts: https://jsfiddle.net/spicelab/n8frnug3/ - inkl. CSS-Kommentare für's Verständnis :)

Anstatt innerhalb eines Elternelements, das mit der Viewport-Unit vh (= view height) eine relative Höhe zur aktuellen Größe des Browserfensters besitzt, an einem absoluten padding-top/margin-top-Wert zu schrauben, der beim Zoomen (STRG+, STRG-) die vermeintliche vertikale Zentrierung bloßstellt.