Hallo!
leider hänge ich schon wieder an einer Sache fest. Vielleicht kann mir nochmal jemand helfen. Wär super!
Meine Startseite zeigt ein Vollbild als Hintergrund. Vor dem Vollbild soll mittig mein Logo erscheinen. Dieses soll etwa zwei Drittel der Browserfensterbreite einnehmen - egal wie groß das Fenster gerade ist. Ich habe das Logo als PNG-Grafik - daß der Hintergrund des Logos durchsichtig ist. Da sich die Größe des Logos je nach Bildschirm bzw. Browserfenstergröße verändert, wär vielleicht eine Vektordatei besser - oder? Könnte ich mit Indesign erstellen.
Ich schaffs nicht, das Logo mittig und responsive über das Hintergrundbild zu legen. Hat da jemand ne Idee wie man das macht? Oder gibts schon irgendwo eine Anleitung (ich find leider nirgends was brauchbares).
(sollte dann ungefähr so aussehen wie in folgendem Wordpress-Theme: https://themify.me/demo/themes/landing/ - nur dass eben mein Logo anstelle von Schrift mittig plaziert wird.)
bisherige Codes:
index.html:
<!DOCTYPE html> <!-- sagt dem Browser welche Art von Befehlen benutzt werden -->
<html> <!-- Anfang des HTML -->
<head> <!-- enthält Metainformationen d. Seite (Titel, etc.) -->
<meta charset="UTF-8" />
<title>Meine Website</title> <!-- wird im Browserfenster angezeigt. Überschrift die in Suchmaschinen angezeigt wird -->
<meta name="description" content="Kurzbeschreibung" />
<link href="style.css" type="text/css" rel="stylesheet" /> <!-- Verweis auf CSS -->
<link href="navigation.css" type="text/css" rel="stylesheet" />
</head>
<body id="home"> <!-- enthält eigentliche Inhalte der Seite -->
<!-- STARTBILDSCHIRM -->
<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="navi03"><a href="vita.html">Vita</a></li> <!-- Menü-Link zu Vita -->
<li id="navi04"><a href="impressum.html">Impressum</a></li> <!-- Menü-Link zum Impressum -->
</ul>
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</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 -->
</a>
</ul>
</body>
</html>style.css:
* {
box-sizing: content-box;
}
header { /* betrifft den Header */
border: solid red;
background: transparent url(bilder/weltfullhd.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
background-size: cover; /* für Vollbild auf Startseite */
height: 100vh; /* für Vollbild auf Startseite */
margin-bottom: 0px; /* Abstand unterm Header */
}
#logo { /* Logo - Ausrichtung */
border: solid yellow;
}
body { /* betrifft den Body */
font-size: 100%; /* Schriftgröße */
font-family: verdana, arial, helvetica, sans-serif; /* Schriftart */
margin: 0;
}
/* PORTFOLIO: */
#portfolio { /* Abstände, Ausrichtung, etc. definieren */
width: 90%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/* "Flexbox" - zur Anordnung der Portfolio-Bilder*/
.portfolio-gruppe { /* ganzer Block mit allen Projekten */
border: 0px solid blue;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.portfolio-projekt { /* einzelne Projekte */
border: 0px solid red;
width: 300px; /* Bildgröße - wie echt */
height: 300px; /* Bildgröße - wie echt */
margin: 25px; /* Abstand ums Bild auf allen Seiten */
}navigation.css:
/* waagerechtes Menü, ohne Aufzählungszeichen */
#navi li { /* betrifft alle "li-Elemente" im Bereich "navi" in den HTML-Dateien */
display: inline; /* Listenelemente nebeneinander */
list-style-type: none; /* Aufzählungszeichen entfernen */
}
/* MENÜPUNKTE: Ausrichtung, Abstände, Hintergrund etc. definieren */
#navi {
padding: 20px;
margin: 0px;
text-align: center; /* Menü zentrieren */
}
/* MENÜPUNKTE: Text formatieren */
#navi a { /* Gestaltung der Hyperlinks */
text-decoration: none; /* Unterstreichung entfernen */
padding: 20px 20px; /* oben&unten re&li */
color: white; /* Schriftfarbe */
font-size: 18px; /* Schriftgröße - festgelegt für ältere Browser */
font-size: 1rem; /* Schriftgröße - relativ. 1rem = Standardschriftgröße des Browsers (i. d. R. 16px), sofern im Elternelement für Schriftgröße 100% eingestellt ist */
}
/* Farbänderung bei Mouseover */
#navi a:hover {
color: #EDEDF8;
}
/* aktuellen Menüpunkt hervorheben: */
#navi, /* im Hauptmenü... */
#home #navi01 a, /* ...werden alle Hyperlinks mit der ID navi01, die in einer Kiste mit der ID home liegen... */
#vita #navi03 a, /* ...werden alle Hyperlinks mit der ID navi03, die in einer Kiste mit der ID vita liegen... */
#impressum #navi04 a { /* ...werden alle Hyperlinks mit der ID navi04, die in einer Kiste mit der ID impressum liegen... */
color: #C3D9FF; /* ...eingefärbt */
}
/* bis zur nächsten SPRUNGMARKE scrollen statt springen */
html {
scroll-behavior: smooth;
}Grüße,
Seiml
Das Bild am Startbildschirm zentriert darzustellen würde funktionieren wenn ich folgende codes einfüge:
in der index.html folgendes einfügen
<header id="startbildschirm">
<div id="logobox">
<img id="logo" src="bilder/logo.png" />
</div>
</header>style.css
header { /* betrifft den Header */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}Jedoch wird dann auch das Hauptmenü in der Mitte des Bildschirms angezeigt statt am oberen Rand - sowie sämtliche weitere Inhalte der Webseite, wenn man welche hinzufügt. Verkleinert man das Browserfenster kanns passieren daß das Menü am oberen Bildschirmrand aus dem Bild geschoben wird (sobald das Browserfenster kleiner als das Logo wird). 
Und das Logo is auch noch nicht "responsive". Bleibt also immer gleich groß, was dazu führt daß es bei stark unterschiedlichen Bildschirmgrößen entweder vergleichsweise winzig sein kann oder größer als der Bildschirm - also beschnitten wird.
Es bleiben die Fragen:
Wie kann ich die Zentrierung des Logos vom Menü trennen? Wie mache ich das Logo "responsive"?
Was halten die Profis von meiner Zentrierungsmethode? Kann man damit weiterarbeiten oder würdet Ihr ganz anders vorgehen?
Grüße,
Seiml