Ch3fK0cH
Neues Mitglied
Guten Morgen liebe html.de Community,
Kurzer Einleitungstext zu mir:
Ich selber bin in der HTML & CSS lern Phase noch relative am Anfang, und habe mir ein Basis Grundkurs angeschaut um mir das HTML & CSS selbst beizubringen.
Nun versuche ich die Theorie in die Praxis umzusetzen an einem eigenen Website Projekt.
Doch leider bin ich schon an meine wissensgrenzen angekommen und stehe vor einigen Problemen, die ich scheinbar selbst mit meinem kleinen Grund wissen nicht gelöst bekomme.
Folgendes habe ich vor:
Und zwar versuche ich die Navigationsbar über ein Slider was allerdings noch aus einem Bild besteht zu setzen.
Zugleich wollte ich die Navigationsbar auch via "Posision: Sticky" & Top: 0px;, am oberen Rand der Website zu Sticken damit die Navigationsbar beim herunterscrollen im Sichtfeld mit scrollt.
Ich habe versucht anhand dieser Website BIG Clan die Navigation den Slider sowie das darunter liegende About BIG nachzubauen.
Folgende Probleme treten auf:
Ich habe es nun irgendwie geschafft dass das Slider Bild hinter der Navigationsbar steht, allerdings habe ich jetzt die Probleme dass wenn ich weitere Container für zb. "About Us" setze diese auch alle am oberen Rand und hinter dem Slider Bild (in der Roten Umradung) der Website angeheftet sind und nicht wie gewollt direkt unter dem Slider Bild (In der Grünen Umrandung) sich anheften.
Und wenn ich nun runter scrolle bleibt die navigationsbar irgendwo mittig vom Slider Bild hängen und scrollt nicht mehr mit.
Hier noch einmal ein Screenshot meiner bisherigen Website.
Ich habe hier Drunter mal meine HTML sowie meine CSS Datei als Spoiler hinzugefügt.
Ich würde mich wirklich freuen wenn sich jemand meine beiden Dateien mal anschauen könnte und mir bezüglich meiner Probleme helfen könnte.
Mit freundlichen Grüßen
Steven "Ch3fK0cH" K.
Kurzer Einleitungstext zu mir:
Ich selber bin in der HTML & CSS lern Phase noch relative am Anfang, und habe mir ein Basis Grundkurs angeschaut um mir das HTML & CSS selbst beizubringen.
Nun versuche ich die Theorie in die Praxis umzusetzen an einem eigenen Website Projekt.
Doch leider bin ich schon an meine wissensgrenzen angekommen und stehe vor einigen Problemen, die ich scheinbar selbst mit meinem kleinen Grund wissen nicht gelöst bekomme.
Folgendes habe ich vor:
Und zwar versuche ich die Navigationsbar über ein Slider was allerdings noch aus einem Bild besteht zu setzen.
Zugleich wollte ich die Navigationsbar auch via "Posision: Sticky" & Top: 0px;, am oberen Rand der Website zu Sticken damit die Navigationsbar beim herunterscrollen im Sichtfeld mit scrollt.
Ich habe versucht anhand dieser Website BIG Clan die Navigation den Slider sowie das darunter liegende About BIG nachzubauen.
Folgende Probleme treten auf:
Ich habe es nun irgendwie geschafft dass das Slider Bild hinter der Navigationsbar steht, allerdings habe ich jetzt die Probleme dass wenn ich weitere Container für zb. "About Us" setze diese auch alle am oberen Rand und hinter dem Slider Bild (in der Roten Umradung) der Website angeheftet sind und nicht wie gewollt direkt unter dem Slider Bild (In der Grünen Umrandung) sich anheften.
Und wenn ich nun runter scrolle bleibt die navigationsbar irgendwo mittig vom Slider Bild hängen und scrollt nicht mehr mit.
Hier noch einmal ein Screenshot meiner bisherigen Website.
Ich habe hier Drunter mal meine HTML sowie meine CSS Datei als Spoiler hinzugefügt.
Ich würde mich wirklich freuen wenn sich jemand meine beiden Dateien mal anschauen könnte und mir bezüglich meiner Probleme helfen könnte.
<!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>
<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;
}
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;
}
Mit freundlichen Grüßen
Steven "Ch3fK0cH" K.
