nicht angemeldet Ch3fK0cH
Rolf B
Gunnar Bittersmann
Ch3fK0cH
Rolf B
Ch3fK0cH
Gunnar Bittersmann
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.
Tabellenkalk<!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;
}
Hallo Ch3fK0cH,
bitte stelle ein Online-Beispiel bereit.
Rolf
ich wollte den pageaufbau bezüglich navigation, slider sowie dem about von dieser website https://bigclan.gg/ nachbilden.
Edit JürgenB: Url mit spitzen Klammern verlinkt
ich wollte so wie auf dieser clanpage die navigation, slider sowie das about nachbauen.
Hallo Ch3fK0cH,
ok, danke. Jetzt muss nur einer Zeit zum draufgucken haben, das ist bei mir gerade nicht der Fall.
Rolf
@@Ch3fK0cH
<link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
Haben die Besucher deiner Seiten ihre Zustimmung gegeben, dass du sie von Google ausschnüfeln lässt? Vermutlich nicht. Vermutlich informierst du sie nicht einmal, dass du sie ausschnüfeln lässt.
Besser: Fonts von Googlefonts herunterladen und selbst hosten, d.h auf deinen eigenen Server packen.
Kwakoni Yiquan
ich will niemanden ausschnüffeln oder der gleichen (keine ahnung was du direkt damit meinst.)
und diese website soll auch nur für mich privat sein daher habe ich diese auch nur auf meinem PC wo ich mit VS code arbeite. und das HTML/CSS mache ich erst seit ca. 3 tagen.
Hallo Ch3fK0cH,
ich will niemanden ausschnüffeln
Du nicht. Aber Google. Das ist deren Geschäftsmodell. Und wenn Du die Fonts direkt von Google lädst, dann passiert das. Sie protokollieren den Zugriff und bilden Nutzerprofile.
Solange die Seite für andere unzugänglich ist, ist das kein Problem. Sobald sie aber in der wilden weiten Welt erreichbar ist, zwingt die DSGVO dich dazu, die Besucher über diesen Umstand zu informieren. Und weil die Seite mit Roboto genauso gut funktionieren wird wie ohne, wirst Du auch die Option geben müssen, den Google-Zugriff zu unterlassen. Was Dir die Arbeit erschwert.
Einfache Lösung: Font lokal hosten. Keine Zustimmung mehr nötig. Nichts anderes wollte Gunnar Dir sage.
Rolf
Achso also muss ich quasi die Schriftart Roboto herunterladen und von meinem Server (PC) direkt laden und die Verlinkung quasi entfernen.
das wusste ich leider nicht Entschuldigung.
weiß denn jemand wie ich das umsetzen kann mit der herunter geladenen Schrift?
weil in dem lehr Video wo ich mir das html und css beibringe hat dieser es genauso gemacht. daher habe ich mir dabei nichts weiter gedacht und es auch so gebaut.
Moin,
Achso also muss ich quasi die Schriftart Roboto herunterladen und von meinem Server (PC) direkt laden und die Verlinkung quasi entfernen.
weiß denn jemand wie ich das umsetzen kann mit der herunter geladenen Schrift?
Es gibt ein ganzes Wiki voll an Informationen für dich – der obige Link stammt auch von dort (bzw. hier) 😉
weil in dem lehr Video wo ich mir das html und css beibringe hat dieser es genauso gemacht. daher habe ich mir dabei nichts weiter gedacht und es auch so gebaut.
Obwohl „Programming by Googling“ durch „Programming by watching videos“ ersetzt worden ist, führt doch immer noch kein Weg an der Energie des Verstehens vorbei, d.h. Lesen und Verstehen von Dokumentation und Tutorials anstatt Copy&Paste.
Viele Grüße
Robert
@@Robert B.
Achso also muss ich quasi die Schriftart Roboto herunterladen und von meinem Server (PC) direkt laden und die Verlinkung quasi entfernen.
Wie ich schon sagte: in dem Fall weniger.
Kein @font-face, sondern einfach als Systemschrift.
Kwakoni Yiquan
Hallo,
Obwohl „Programming by Googling“ durch „Programming by watching videos“ ersetzt worden ist,
... und das widerum(sic!) durch „Programming by Chatting“.
Gruß
Kalk
Moin Kalk,
Obwohl „Programming by Googling“ durch „Programming by watching videos“ ersetzt worden ist,
... und das widerum(sic!) durch „Programming by Chatting“.
„chatting“ oder „asking a bot“/„prompting“?
Viele Grüße
Robert
@@Ch3fK0cH
und diese website soll auch nur für mich privat sein
Dann musst du die Fonts gar nicht auf deinen Webserver packen und als Webfonts einbinden. Es genügt, wenn du sie lokal auf deinem System installierst, d.h. herunterladen und in den Schriftordner verschieben (welcher das auf deinem Betriebssystem auch sein mag).
Kwakoni Yiquan