nicht angemeldet
Guten Abend liebe community,
und zwar geht es um folgendes, ich bin gerade dabei mir das HTML und das CSS bei zu bringen.
Ich habe nun um einfach mal die Theorie, in der Praxis umzusetzen mich an ein eigenes Template basierend auf HTML und CSS versucht.
Nun stehe ich vor einem Problem das ich selber scheinbar nicht gelöst bekomme weil mir einfach mal die erfahrung fehlt.
Und zwar habe ich versucht die navigationsbar über ein Slider was allerdings noch aus einem Bild besteht zu setzen, und die Navigationsbar Sticky an den oberen rand der website zu sticken mit "position: Sticky; und top: 0px;"
nun habe ich aber einige andere probleme und das alle anderen container die ich anlegen möchte irgendwie auch alle sich ganz oben an der website anheften obwohl sie sich unter dem slider anheften sollen.
könnte sich vieleicht jemand mal meine HTML und meine CSS anschauen und mir was wo ich dort fehler verbaut habe? und wie ich die probleme am besten lösen könnte?
die Navigationsbar habe ich von einem anderen Forum übernommen und versucht entsprechend meines designs anzupassen.
ich bedanke mich schonmal im vorraus das ihr euch die zeit und mühe macht mir zu helfen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cs2 Gaming clan since 2015">
<meta name="keywords" content="Cs Clan since 2024">
<title>saints gaming</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="stroke">
<div class="standard-container">
<img src="img/headerlogo.png" alt="">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Nice staff</a></li>
</ul>
</div>
</nav>
</header>
<section class="slider">
<div class="standard-container">
<div class="slider-content">
<h2><span class="text-highlighted">welcome to saints gaming</span><br>we are competetive</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quis beatae aliquid eos quae atque illum dignissimos
est nihil delectus quo?
</p>
</div>
</div>
</section>
<section class="about">
<div class="standard-container">
<div class="about-content">
<h2><span class="text-highlighted">welcome to saints gaming</span><br>we are competetive</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quis beatae aliquid eos quae atque illum dignissimos
est nihil delectus quo?
</p>
</div>
</div>
</section>
</body>
</html>
*/* (*) alle elemente selectieren*/ {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.standard-container {
max-width: 1080px;
margin: 0 auto;
}
header {
position: sticky;
top: 0px;
z-index: 2;
}
nav img {
text-align: left;
top: 5px;
position: absolute;
}
nav img:after {
content: "";
display: block;
clear: both;
}
/* NAVIGATION */
nav {
background: #000000a6;
padding: 30px 0;
box-shadow: 0px 5px 0px orange;
position: relative;
top: 0px;
}
nav ul {
margin-top: 0 auto;
list-style: none;
text-align: right;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a {
position: relative;
}
nav.stroke ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: orange;
height: 2px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
/* Slider Content*/
.slider {
background-image: linear-gradient(rgba(0,0,0, 0.6), rgba(0,0,0,0.6)), url(#);/*../img/big.jpeg*/
background-repeat: no-repeat;
background-size: cover;
min-height: 700px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.slider-content {
float: left;
width: 100%;
color: white;
padding: 250px 0px;
}
.slider-content h2 {
margin: 0px;
padding-bottom: 20px;
font-size: 48px;
font-weight: 900;
line-height: 1.2em;
}
.slider-content p {
margin: 0px;
font-size: 24px;
}
/* About Content*/
.about {
background-color: burlywood;
}
Rolf B
Gunnar Bittersmann
Tabellenkalk