Danke, dass du das sagst. Allerdings hat das immernoch nicht mein Problem mit den Icons rechts und meinem Footer gelöst 
Beiträge von Nackhthund94
-
-
Soo hab jetzt bisschen was gebastelt und hab aber das Problem, dass ich nicht so Recht weiß wie ich den Footer untem am Viewport kleben kann.. Außerdem habe ich versucht mit einer Font-Art die Social Media Icons anzeigt oben in der rechten Ecke mit einer flex-UL hinzuklatschen (Also nebeneinander angeordnet) Hat aber leider nicht so ganz geklappt, die Flexbox mit den Elementen wurde nicht angezeigt:
HTML:
<!doctype html>
<html>
<head>
<title>Big Nerd Bear - Tech, Gaming and Nice T-Shirts</title>
<meta charset="utf-8">
<link rel="stylesheet" href="bignerdbearstil.css">
</head>
<body>
<div class="wrapper">
<header class="topheader">
<ul>
<li class="first"><a href="#">GAMING</a></li>
<li class="second"><a href="#">TECH</a></li>
<li class="third"><a href="#">TSHIRT'S</a></li>
<li class="fourth"><a href="#">CONTACT</a></li>
</ul>
</header>
<header class="subheader">
<h1> GAMING </h1>
</header>
<main>
<div>
</div>
</main>
</div>
<footer>
</footer>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------
CSS:
body{
margin:0;
padding: 0;
background-color: #294567;
}
.wrapper {
display: grid;
grid-template-rows: 150px 70px 700px 200px;
}
.topheader {
background-color: #305179;
background-image: url(GFX/Bignerdbear/BigNerdBear+sub.png);
background-size: 200px;
background-repeat: no-repeat;
background-position: 60px;
}
header ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 60px;
font-family: 'Impact';
font-size: 1.7rem;
width: 40%;
margin-left: 400px;
}
header ul li{
background-color: white;
margin: 0;
}
main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
height: 100vh;
grid-gap: 40px;
margin: 20px;
min-height: 100%;
}
footer {
background-color: #182a3f;
}
.subheader{
background-color: white;;
}
.second {
margin-bottom: 20px;
}
.third {
margin-top: 10px;
}
.fourth {
margin-bottom: 25px;
}
.subheader h1 {
text-align: center;
font-family: 'Impact';
}
header ul li a{
text-decoration: none;
color: black;
}
main div {
background-color: white;
grid-row: 1/7
}
footer{
height: 120px;
background-color: #132030;
}
-
Moin,
habe für meinen Gaming Blog ein Layout gemacht und habe nun die Frage ob das Ganze vom Layout her nur mit CSS-Grid machbar ist und außerdem wie man die Navigationspunkte im Header am besten realisieren kann, da die ja ein bisschen dezentralisiert sind
-
HTML:
den bisherigen code +
<figure> <img src="images/weiteresbild1.jpg" alt="xxxx">
<figcaption>xxx
</figcaption>
</figure>
<figure> <img src="images/weiteresbild2.jpg" alt="xxxx">
<figcaption>xxx
</figcaption>
</figure>
CSS:
deinen bisherigen code +
#gallery figure:nth-of-type(7) {
-webkit-animation: wechseln 15s infinite;
animation: wechseln 15s infinite;
}
#gallery figure:nth-of-type(8) {
-webkit-animation: wechseln 15s infinite;
animation: wechseln 15s infinite;
}
... Bin selbst total am Anfang aber das wäre so meine logische Schlussfolgerung!