• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Nur Bild, ohne andere Elemente im Header zentrieren.

S

Seiml

Neues Mitglied
Hallo! Ich bin neu hier im Forum da ich vor ca. 2 Wochen angefangen habe mir HTML und CSS beizubringen.
Für eine Frage kann ich nirgends eine Antwort finden. Wär super wenn Ihr mir helfen könntet!

Wie kann ich ein Bild (ein Logo) innerhalb des Headerbereichs mittig (horizontal UND vertikal) darstellen ohne daß andere Elemente des Headers auch zentriert werden?

Der Code in Kurzform:
HTML: 
  <header id="startbildschirm">

     <ul id="navi"> <!-- Hauptmenü -->
       <!-- <li id="navi01"><a href="index.html">HOME</a></li> <!-- Menü-Link zur Startseite ********************** -->
       <li id="navi02"><a href="index.html#portfolio">PROJEKTE</a></li> <!-- Sprung-Link zu Projekte -->
       <li id="navi04"><a href="werkstatt.html">WERKSTATT</a></li> <!-- Menü-Link zum Impressum -->
       <li id="navi03"><a href="vita.html">VITA</a></li> <!-- Menü-Link zu Vita -->
     </ul>

     <div id="logobox">
       <img id="logo" src="bilder/peel.jpg" /><!-- LOGO -->
     </div>

     <h2 class="direktlink-projekte"><a href="index.html#portfolio">PROJEKTE</a></h2>

   </header>

<!-- PORTFOLIO -->

   <ul class="portfolio-gruppe" id="portfolio"> <!-- Anfang des Portfolios -->

     <a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
       <img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
       <p>BLECHZOO</p> <!-- Beschriftung des Portfoliobildes -->
     </a>

     <a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
       <img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
       <p>BLECHZOO</p> <!-- Beschriftung des Portfoliobildes -->
     </a>

   </ul>

</body>

Wär Super, wenn Ihr mir kurz weiterhelfen könntet!

Vielen Dank schonmal und Grüße,

Seiml
 
Werbung:
So vielleicht?

Code: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>Meine Website</title>
 <style>
* {
 margin:0;
 padding:0;
 box-sizing: content-box;
}

html , body  {
 height:100%;
}

header {
 height: 100%;
 width:100%;
 background:#333;
 text-align:center;
 display:table;
}

header #logo {
 vertical-align:middle;
 display:table-cell;
}


nav {
 vertical-align:middle;
 text-align: center;
 display:table-row;
 background:#add;
}

nav ul {
 display:table-cell;
 vertical-align:middle;
}

nav li {
  display: inline;
  list-style-type: none;
}

nav a {
  text-decoration: none;
  padding: 20px;
  color: white;
 
}

</style>
</head>
<body>
<header>
 <nav>
  <ul>
  <li><a href="index.html">HOME</a></li>
  <li><a href="index.html#portfolio">PROJEKTE</a></li>
  <li><a href="werkstatt.html">WERKSTATT</a></li>
  <li><a href="vita.html">VITA</a></li>
  <li><a href="blog.html">BLOG</a></li>
  <li><a href="kontakt.html">KONTAKT</a></li>
  <li><a href="impressum.html">IMPRESSUM</a></li>
  <li><a href="freunde.html">FREUNDE</a></li>
  </ul>  
 </nav>   

 <div id="logo"><img id="logo" src="bilder/peel.jpg" alt=""></div>
</header>
</body>
 
Werbung:
Vielen Dank! Funktioniert weitgehend! :)

Leider bestehen noch drei weitere Probleme:

1. Ich hatte am unteren Rand meiner Vollbild-Startseite noch einen einzelnen Link. Einen Pfeil nach unten, der darauf hinweist daß sich meine Portfolio-Gallerie weiter unten befindet. Man kann runterscrollen oder auf diesen Pfeil klicken um zum Portfolio zu gelangen.
Jetzt schaff ich´s nicht mehr dieses Bildchen auf der Startseite zu plazieren. Es soll horizontal zentriert sein und am unteren Bereich des Headers liegen.

2. Mein Logo ist zwar jetzt horizontal und vertikal zentriert, jedoch in vertikaler richtung nicht in der Mitte des Headers sondern in der MItte des Headers abzüglich nav-höhe. Das sieht noch etwas unschön aus. Gibts ne möglichkeit das Logo wirklich exakt in die Mitte des Headers zu bekommen?

3. Die Startseite zeigt das Hintergrundbild vollflächig an - egal wie groß der Bildschirm bzw. das Browserfenster ist (also responsive). Dies funktioniert jedoch nur solange das Browserfenster größer als das Logo-image ist. Da das Logo recht groß dargestellt wird, ist das bei vielen Bildschirmen Problematisch.
Weiß jemand wie ich das Logo auch responsive bekomme? So daß ich z.B. sagen kann, das Logo soll immer halb so breit sein wie der Bildschirm/das Browserfenster?

Vielleicht kann mir da noch jemand helfen. Wär super!

Grüße,

Seiml
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben