Wie man Hintergrundbild als Überschrift mit Logo und Navigationsleiste einstellt?

-1

Ich bin sehr neu im Webdesign und brauche jede Menge Hilfe. Ich versuche meine eigene Website zu erstellen. Der Hintergrund ist die Kopfzeile. Im Hintergrund befindet sich das Logo auf der linken Seite, während sich die Navigationsleiste auf der rechten Seite befindet. Der Text wird ebenfalls im Hintergrund zentriert. Hier ist ein Beispiel. Was bedeutet Position absolut? Kann mir das jemand erklären? Jede Hilfe wird sehr geschätzt! Dieser Dank ist ein Beispiel: Wie man Hintergrundbild als Überschrift mit Logo und Navigationsleiste einstellt?

Diese meine Codes sind ....

* { 
 
\t box-sizing: border-box; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.container { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t width: 100%: 
 
\t height: 100%; 
 
\t 
 
} 
 

 
.hero { 
 
\t height: 100%: 
 
\t width: 100%; 
 
\t background-image:url(../images/Background.png); 
 
\t background-size: cover; 
 
\t background-repeat: no repeat; 
 
\t background-position: center center; 
 
\t 
 
} 
 
nav ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; /* remove bullet point */ 
 
\t float: right; 
 
} 
 

 
nav li { 
 
\t display: inline-block; 
 
\t margin: 1em; 
 
\t padding: 0.5em; \t 
 
} 
 

 
nav a { 
 
\t font-weight: 800; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
} 
 

 
nav ul a:hover { 
 
\t color: #f13647; 
 
\t transition: all 0.5s ease-in;   
 
\t padding: 15px 0; \t \t \t \t \t 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title>Josh</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<script src="js/modernizr.custom.40753.js" type="text/javascript"></script> 
 
<link rel="stylesheet" href="css/Test.css"> 
 
</head> 
 
<body> 
 
\t <header> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="hero"> 
 
\t \t \t \t <img src="images/logoo.png" alt="Logo FitnessX " class="logo"> 
 
\t \t \t \t <nav class="sitenavigation"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t \t \t \t <li><a href="aboutus.html">About Me</a></li> 
 
\t \t \t \t \t \t <li><a href="Work.html"></a>Work</li> 
 
\t \t \t \t \t \t <li><a href=""></a>Blog</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav> 
 
\t \t \t \t <div class="home-hero"> 
 
\t \t \t \t \t <h2>Hello my name is josh</h2> 
 
\t \t \t \t \t <p>I am 18 years old</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </header> 
 
</body> 
 
</html>

Quelle

2017-08-04 XxS0ul678

Ein Element mit position: absolute; positioniert ist, relativ zum nächsten positioniert Vorfahren (anstelle von relativ positioniert zum Viewport, wie fixiert). Jedoch; Wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, verwendet es den Dokumentkörper und bewegt sich mit dem Seitenscrollen.

Hinweis: Ein "positioniertes" Element ist eines, dessen Position alles außer statisch ist.

Hier ist ein einfaches Beispiel:

div.relative { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.absolute { 
 
    position: absolute; 
 
    top: 80px; 
 
    right: 0; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 3px solid #73AD21; 
 
}

<h2>position: absolute;</h2> 
 

 
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p> 
 
<div class="absolute">This div element has position: absolute; (ancestor is body) </div> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
<div class="relative">This div also has positio: relative; which positions the div after the top div</div>

für weitere Informationen this sehen und einige Beispiele

Quelle

2017-08-04 03:01:38

** Ein Element mit Position: relativ; ist relativ zu seiner normalen Position positioniert. ** Ich sehe nicht, was du meinst –

bei Heldenklasse ändern, um Ihre Höhe mit Pixel versuchen:

.hero { 
    height: 100%; 
}

Quelle

2017-08-04 03:07:03

Wie man Hintergrundbild als Überschrift mit Logo und Navigationsleiste einstellt?

Antwort

Verwandte Themen