• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ich komme einfach nicht weiter *grml

Defenetiv

Neues Mitglied
Hey Leute, ich hoffe, es findet sich jemand, der mir bei meinem Problem helfen kann.

Problem:

Auf der Kontakt.html sollen Links, wie man sieht mit Bildern, hier in der CSS gut zu sehen.
Ich hab etwas genutzt und es Funktioniert wie man bei der Werbung sehen kann.

Aber die TS sowie Skype und Discord Grafik lassen sich irgendwie nicht Zentrieren noch untereinander bringen.

Ich habe auch schon mit <li></li> gearbeitet aber irgendwie ...

Ziel: Links mittig, Links untereinander.

brauch echt Hilfe, der Kopf raucht *danke an euch und sorry für den Spam

Hier mal meine HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" data-lt-installed="true" lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="index, follow">
<meta name="author" content=" UNWICHTIG">
<meta name="keywords" content="#">
<meta name="description" content="#">
<link rel="canonical" href="#">
<link rel="shortcut icon" href="#">

<link rel="stylesheet" href="css/menue.css" />
<link rel="stylesheet" href="css/main.css" />

<title>UNWICHTIG</title>

<script type="text/javascript">
(function(d){ if(!d.createTextNode) return; var elem = "header|nav|section".split('|'); for(var i=0; i<elem.length; i++){ d.createElement(elem); } } )(document);</script>

<style type="text/css">
nav {
opacity:0.9;
bottom:0px;
height:3em;
left:0px;
position:absolute;
background-color:#000;
width:100%;}

* html nav {
top:expression(auto);}

.fixed-navi {
top:0px;
position:fixed !important;
position:absolute;}

* html .fixed-navi {
top:expression(documentElement.scrollTop);}

</style>

</head>

<body>

<header>

<div id="head">

<div id="logo">
<img src="img/02test01.png" alt="Logo">
</div>

<div id="banner">
<img src="img/1.png" alt=" UNWICHTIG ">
</div>

<section class="icon">

<ul>

<li><a id="fb-ico" style="color:blue; transition: 0.5s;" href="https://www.facebook.com/ UNWICHTIG" class="fab fa-facebook" target="new"><span class="label">Facebook</span></a></li>

<li><a id="ins-ico" style="color:eek:range; transition: 0.5s;" href="https://www.instagram.com/ UNWICHTIG /?hl=de" class="fab fa-instagram" target="new"><span class="label">Instagram</span></a></li>

<li><a id="st-ico" style="color:black; transition: 0.5s;" href="https://steamcommunity.com/id/ UNWICHTIG " class="fab fa-steam" target="new"><span class="label">Steam</span></a></li>

<li><a id="tw-ico" style="color:purple; transition: 0.5s;" href="https://www.twitch.tv/ UNWICHTIG" class="fab fa-twitch" target="new"><span class="label">Twitch</span></a></li>

<li><a id="yt-ico" style="color:darkred; transition: 0.5s;" href="https://www.youtube.com/ UNWICHTIG " class="fab fa-youtube" target="new"><span class="label">Youtube</span></a></li>

</ul>

</section>

</div>

<nav class="">

<div class="hamburger">

<div class="line"></div>
<div class="line"></div>
<div class="line"></div>

</div>

<ul class="nav-links">

<li><a href="home.html"><button class="butn">Startseite</button></a></li>
<li><a href="kontakt.html"><button class="butn">Kontakt</button></a></li>
<li><a href="streams.html"><button class="butn">Streams</button></a></li>
<li><a href="projekte.html"><button class="butn">Projekte</button></a></li>
<li><a href="#"><button class="butn">Spenden</button></a></li>

</ul>

</nav>

</header>

<section id="Content">

<div id="left">

<section id="w1" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a class="host" href="https://host-unlimited.de/" title="host-unlimited" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a class="any" href="https://anymator.de/" title="anymator" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a href="info.html" target="_self" >Mehr Info.</a>

</section>

</div>
<!-- Hier ist die Werbung -->
<div id="right">

<section id="w2" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

<hr style="height:2px;border-width:0;color:gray;background-color:black">

<a class="ilm" href="https://www.ilovemusic.de//" title="ilovemusic" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:black">

<a href="info.html" target="_self" >Mehr Info.</a>

</section>

</div>

<article>
So hier Schreibe ich nun einen Text.</br>
Auch wenn es so aussieht, als würde dieser Text keinen sinn ergeben,sollte man dennoch gut aufpassen.</br>
Es gibt ja dennoch Texte, die nach mehrmaligem Lesen erst einen Sinn ergeben.</br>



<a class="ts3" href=" UNWICHTIG " title="TS3" target="new"></a>
<a class="dis" href=" UNWICHTIG " title="Discord" target="new"></a>
<a class="sky" href=" UNWICHTIG " title="Skype" target="new"></a>



</article>

</section>

<footer>Copyright 2020 by UNWICHTIG <a href="#"><button class="butn1">Impressum</button></a> <a href="#"><button class="butn2">Datenschutz</button></a> </footer>

<script type="text/javascript">
/**
* Fixierung der Header-Divisions
*
* @param none
* @return none
*/
var startPos;

if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}

window.onload=function(){
window.scrollTo(0,0);
startPos = document.getElementsByTagName("nav")[0].offsetTop;
};

window.onresize=function(){
window.scrollTo(0,0);
startPos = document.getElementsByTagName("nav")[0].offsetTop;
};

window.onscroll = function () {
elem = document.getElementsByTagName("nav")[0];
var myFixedClass='fixed-navi';

var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
var topPos=document.all? body.scrollTop : pageYOffset;

if (topPos > startPos) {
if (elem.className.indexOf(myFixedClass)== -1) {
if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
else elem.className = myFixedClass;
}
} else {
var sRegEx = new RegExp(myFixedClass, "g");
elem.className = elem.className.replace(sRegEx,"").trim();
}
}
</script>
<script src="js/app.js"></script>
</body></html>
 
Werbung:
Hey Leute, ich hoffe, es findet sich jemand, der mir bei meinem Problem helfen kann.

Problem:

Auf der Kontakt.html sollen Links, wie man sieht mit Bildern, hier in der CSS gut zu sehen.
Ich hab etwas genutzt und es Funktioniert wie man bei der Werbung sehen kann.

Aber die TS sowie Skype und Discord Grafik lassen sich irgendwie nicht Zentrieren noch untereinander bringen.

Ich habe auch schon mit <li></li> gearbeitet aber irgendwie ...

Ziel: Links mittig, Links untereinander.

brauch echt Hilfe, der Kopf raucht *danke an euch und sorry für den Spam

Hier mal meine HTML
Hier die CSS

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

html, body {
background: linear-gradient(90deg, black, white);
width:100%;
height:100%;}

header, nav, section {
display: block;}

header {
top:0px;
position:relative;
height:16em;
width:100%;
color: white;
z-index:10;}

body {
font-size:18px;
font-family:Arial, Helvetica, sans-serif;}

.nav-links {
display: flex;
list-style: none;
width:100%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-right: auto;}

.nav-links li a {
padding:0px;
margin:0px;
color: white;
text-decoration: none;
font-size: 16px;}

#Content {
background: linear-gradient(90deg, black, white);
float:left;
top: 0;
height:0 auto;
position:relative;
width:100%;}

article{
margin-top:4em;
text-align:center;
width:100%;}

#logo{
float:left;
width:10%;
height:100%;}

#logo img{
width:100%;
height:100%;}

#banner{
float:left;
width:90%;
height:100%;}

#banner img{
width:40%;
height:80%;}

video{
margin-top:4em;
width:50%;
height:50%;}

#head{
text-align:center;
height:60%;
width:100%;}

#left{
margin-top:4em;
background-color:transparend;
float:left;
width:0 auto;
height:0 auto;}

#left a{
color:white;}

#right{
background-color:transparend;
margin-top:4em;
float:right;
width:0 auto;
height:0 auto;}

#right a{
color:black;}

#w1{
float:left;
text-align:center;
padding:4px;
font-size:18px;
border:2px white solid;
color:white;
margin-left:1em;
max-width:100%;
height :0 auto;
border-radius: 1em;}

#w1 a{
color:white;}


#w2{
float:right;
text-align:center;
padding:4px;
font-size:18px;
border:2px black solid;
color:black;
margin-right:1em;
max-width:100%;
height :0 auto;
border-radius: 1em;}

.butn{
font-size:16px;
width:6em;
height:2em;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, white , darkgrey);
box-shadow: inset 1px 0px 10px darkgrey,inset 0px 10px 10px black;
border: 2px solid red;
border-radius: 15px;
margin-left:1em;}

.butn:hover,
.butn:focus {
font-size:16px;
width:8em;
height:2em;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, silver , silver);
font-weight:bold;
box-shadow:white 8px 5px 15px, inset silver 0px -10px 20px;
border: 2px solid green;
border-radius: 1em;}

.butn1{
font-size:16px;
width:6em;
height:2em;
box-shadow: inset 1px 0px 10px darkgrey,inset 0px 10px 10px black;
border: 2px solid lime;
border-radius: 15px;
margin-left:1em;}

.butn1:hover,
.butn1:focus {
font-size:16px;
width:8em;
height:2em;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, silver , silver);
font-weight:bold;
box-shadow:white 8px 5px 15px, inset silver 0px -10px 20px;
border: 2px solid green;
border-radius: 1em;}

.butn2{
font-size:16px;
width:6em;
height:2em;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, white , darkgrey);
box-shadow: inset 1px 0px 10px darkgrey,inset 0px 10px 10px black;
border: 2px solid lime;
border-radius: 15px;
margin-left:1em;}

.butn2:hover,
.butn2:focus {
font-size:16px;
width:8em;
height:2em;
background: yellow; /* old browsers */
background: linear-gradient(to bottom, silver , silver);
font-weight:bold;
box-shadow:white 8px 5px 15px, inset silver 0px -10px 20px;
border: 2px solid green;
border-radius: 1em;}

.ilm{
background-position:center center;
text-align:center;
background-size:contain;
background-repeat:no-repeat;
display:block;
width:100%;
height:3em;
background-image:url('../banner/ilovemusiclogo-black.png');}

.ilm:hover{
background-image:url('../banner/ilovemusiclogo-grey.png');}

.host{
background-position:center center;
text-align:center;
background-size:contain;
background-repeat:no-repeat;
display:block;
width:100%;
height:3em;
background-image:url('../banner/host-unlimited.png');}

.host:hover{
background-image:url('../banner/hostunlimited.png');}

.any{
background-position:center;
text-align:center;
background-size:cover;
background-repeat:no-repeat;
display:block;
width:100%;
height:2em;
background-image:url('../banner/anymator.jpg');}

.any:hover{
background-image:url('../banner/anymator.jpg');}

article a{
float:left;
margin-left:2em;
background-color:blue;
width:100%;
height:0 auto;
padding:0;
display:block;}


footer{
clear:both;
line-height:3em;
float:left;
height:3em;
width:100%;
text-align:center;
color:white;
background-color:black;}



.ts3{
float:left;
background-position:center;
text-align:center;
background-size:cover;
background-repeat:no-repeat;
display:block;
width:20%;
height:8em;
background-image:url('../banner/ts3-rot-name.png');}

.ts3:hover{
background-image:url('../banner/ts3-gruen-name.png');}

.dis{
float:left;
background-position:center;
text-align:center;
background-size:cover;
background-repeat:no-repeat;
display:block;
width:20%;
height:8em;
background-image:url('../banner/discord.png');}

.dis:hover{
background-image:url('../banner/discord1.png');}

.sky{
float:left;
background-position:center;
text-align:center;
background-size:cover;
background-repeat:no-repeat;
display:block;
width:20%;
height:8em;
background-image:url('../banner/skype1.png');}

.sky:hover{
background-image:url('../banner/skype2.png');}



@media screen and (max-width: 868px) { /*768*/
#left{
margin-top:4em;
background-color:transparend;
width:0 auto;
height:0 auto;}

#right{
background-color:transparend;
margin-top:4em;
width:0 auto;
height:0 auto;}

#banner{
float:left;
width:70%;
height:100%;}

#banner img{
width:90%;
height:80%;}

#logo{
float:left;
width:30%;
height:100%;}

#logo img{
width:100%;
height:100%;}

.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;}

nav {
position: relative;}

.hamburger {
position: absolute;
cursor: pointer;
left: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;}

.nav-links {
position: fixed;
height: 50vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;}

.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;}

.nav-links li {
opacity: 0;}

.nav-links li a {
font-size: 20px;}

.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;}

.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;}

li.fade {
opacity: 1;}

}
 
Werbung:
Also um es zu verstehen.

Im Header brauche ich ja kleine flex box dort hab 7ch ja nicht viel.
Dann kommt ja der content oder main wie auch immer.
Dort brauche ich ja die flexboxen?
Weil ich hab ja im content oder main die Werbung stehen, und mittig wäre dann der Text den man sehen soll.

Grob beschrieben:

Header

Links
Logo Banner
Navi

Content / Main

Flexboxen

1 Werbung Links
2 Content
3 Werbung Rechts

Footer

Richtig verstanden?
 
Also da ich nun das erste Mal Kontakt mit Flex habe, hoffe ich nun, dass alles so schick ist :D

Es gibt aber irgendwie noch ein Klein Fehler evtl. stimmt was in meinem Kopf nicht ^^ oder aber ich hab irgendwie was falsch :)

</
<section id="Content">

<div id="left">

<section id="w1" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a class="host" href="https://host-unlimited.de/" title="host-unlimited" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a class="any" href="https://anymator.de/" title="anymator" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:white">

<a href="info.html" target="_self" >Mehr Info.</a>

</section>

</div>



<main>

<div id="kontakt" class="flex-container">
<a id="flex-item" class="ts3" href=" UNWICHTIG "></a></br>
<a id="flex-item" class="dis" href=" UNWICHTIG " title="Discord" target="new"></a></br>
<a id="flex-item" class="sky" href=" UNWICHTIG " title="Skype" target="new"></a>
</div>

</main>

<div id="right">

<section id="w2" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

<hr style="height:2px;border-width:0;color:gray;background-color:black">

<a class="ilm" href="https://www.ilovemusic.de//" title="ilovemusic" target="new"></a>

<hr style="height:2px;border-width:0;color:gray;background-color:black">

<a href="info.html" target="_self" >Mehr Info.</a>

</section>

</div>


</section>

/>
 
Also da ich nun das erste Mal Kontakt mit Flex habe, hoffe ich nun, dass alles so schick ist :D

Es gibt aber irgendwie noch ein Klein Fehler evtl. stimmt was in meinem Kopf nicht ^^ oder aber ich hab irgendwie was falsch :)

Code:
<section id="Content">

 

<div id="left">

        

        <section id="w1" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

                

        <hr style="height:2px;border-width:0;color:gray;background-color:white">

                

        <a class="host" href="https://host-unlimited.de/" title="host-unlimited" target="new"></a>

                

        <hr style="height:2px;border-width:0;color:gray;background-color:white">

                

        <a class="any" href="https://anymator.de/" title="anymator" target="new"></a>

                

        <hr style="height:2px;border-width:0;color:gray;background-color:white">

                

        <a href="info.html" target="_self" >Mehr Info.</a>

        

</section>

 

        </div>

 

 

 

<main>

    

            <div id="kontakt" class="flex-container">

            <a id="flex-item" class="ts3" href=" UNWICHTIG "></a></br>

            <a id="flex-item" class="dis" href=" UNWICHTIG " title="Discord" target="new"></a></br>

            <a id="flex-item" class="sky" href=" UNWICHTIG " title="Skype" target="new"></a>

            </div>

        

</main>     

    

        <div id="right">

 

        <section id="w2" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>

                

        <hr style="height:2px;border-width:0;color:gray;background-color:black">

                  

        <a class="ilm" href="https://www.ilovemusic.de//" title="ilovemusic" target="new"></a>

                

        <hr style="height:2px;border-width:0;color:gray;background-color:black">

                

        <a href="info.html" target="_self" >Mehr Info.</a>

                

        </section> 

 

        </div>

    

    

    </section>
Code:
* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;}


body {

    font-size:24px;

  font-family: sans-serif;}


.nav-links {

  display: flex;

  list-style: none;

  width: 50%;

  height: 100%;

  justify-content: space-around;

  align-items: center;

  margin-right: auto;}


.nav-links li a {

  color: white;

  text-decoration: none;

  font-size: 16px;}


#kopf{

    display:flex;

    justify-content: flex-start;

    flex-direction: row;

    background:transparend;

    width:100%;

    height:10em;}


#logo{

    display:flex;

    justify-content: flex-start;

    background-color:transparend;

    width:10%;

    height:70%;}


#banner{ 

    text-align:center;

    background-color:transparend;

    width:100%;

    height:70%;}


#logo img{

    width:100%;

    height:100%;}


#banner img{

    width:50%;

    height:70%;}


#Content {

    display:flex;

    flex-direction: row;

    justify-content: flex-start;

    background-color:transparend;

    text-align:center;

    width:100%;

    flex: 1;}


main{

    margin-top:1em;

    color:white;

    background-color:transparend;

    width:100%;}


a{

    color:white;}


#frame{

    margin-top:0px;

    align-items: center;

    display: flex;

    justify-content:center;

    flex-direction:column;

    background-color:transparend;

    width:100%;

    height:40em;}


iframe{

    background-color:transparend;

    text-align:center;

    width:50%;

    height:20em;}


#kontakt{

    margin:0px;

    align-items: center;

    display: flex;

    justify-content:center;

    flex-direction:column;

    background-color:transparend;

    width:100%;

    height:40em;}


#kontakt a{

    margin-bottom:2em;

    width:18%;

    height:20%;

    background-color:transparend;}


.butn{

    font-size:16px;

    width:6em;

    height:2em;

    background: yellow; /* old browsers */

    background: linear-gradient(to bottom, white , darkgrey);

    box-shadow: inset 1px 0px 10px darkgrey,inset 0px 10px 10px black;

    border: 2px solid red;

    border-radius: 15px;

    margin-left:1em;} 

 

.butn:hover,

  .butn:focus {

    font-size:16px;

    width:8em;

    height:2em;

    background: yellow; /* old browsers */

    background: linear-gradient(to bottom, silver , silver);

    font-weight:bold;

    box-shadow:white 8px 5px 15px, inset silver 0px -10px 20px;

    border: 2px solid green;

    border-radius: 1em;}

 

#left{

    margin-left:1em;

    background-color:transparend;

    margin-top:1em;

    width:20%;

    height:0 auto;}


#left a{

    color:white;}


#right{

    margin-right:1em;

    background-color:transparend;

    margin-top:1em;

    width:20%;

    height:0 auto;}


#right a{

    color:black;} 


#w1{

    width:100%;

    text-align:center;

    padding:4px;

    font-size:18px;

    border:2px white solid;

    color:white;

    height :0 auto;

    border-radius: 1em;} 

 

#w1 a{

    color:white;} 

 

#w2{

    width:100%;

    text-align:center;

    padding:4px;

    font-size:18px;

    border:2px black solid;

    color:black;

    height :0 auto;

    border-radius: 1em;}

video{

    margin-top:2em;

    width:70%;

    height:70%;}


footer{

    background-color:black;

    color:white;

    text-align:center;}

              

@media screen and (max-width: 868px) {

  .line {

    width: 30px;

    height: 3px;

    background: white;

    margin: 5px;

  }

  nav {

    position: relative;

  }


  .hamburger {

    position: absolute;

    cursor: pointer;

    left: 5%;

    top: 50%;

    transform: translate(-5%, -50%);

    z-index: 2;

  }


  .nav-links {

    position: fixed;


    height: 100vh;

    width: 100%;

    flex-direction: column;

    clip-path: circle(100px at 90% -10%);

    -webkit-clip-path: circle(100px at 90% -10%);

    transition: all 1s ease-out;

    pointer-events: none;

  }

  .nav-links.open {

    clip-path: circle(1000px at 90% -10%);

    -webkit-clip-path: circle(1000px at 90% -10%);

    pointer-events: all;

  }


  .nav-links li {

    opacity: 0;

  }

  .nav-links li a {

    font-size: 25px;

  }

  .nav-links li:nth-child(1) {

    transition: all 0.5s ease 0.2s;

  }

  .nav-links li:nth-child(2) {

    transition: all 0.5s ease 0.4s;

  }

  .nav-links li:nth-child(3) {

    transition: all 0.5s ease 0.6s;

  }

  li.fade {

    opacity: 1;

  }

}
 
Werbung:
Code:
* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;}


body {

    font-size:24px;

  font-family: sans-serif;}


.nav-links {

  display: flex;

  list-style: none;

  width: 50%;

  height: 100%;

  justify-content: space-around;

  align-items: center;

  margin-right: auto;}


.nav-links li a {

  color: white;

  text-decoration: none;

  font-size: 16px;}


#kopf{

    display:flex;

    justify-content: flex-start;

    flex-direction: row;

    background:transparend;

    width:100%;

    height:10em;}


#logo{

    display:flex;

    justify-content: flex-start;

    background-color:transparend;

    width:10%;

    height:70%;}


#banner{

    text-align:center;

    background-color:transparend;

    width:100%;

    height:70%;}


#logo img{

    width:100%;

    height:100%;}


#banner img{

    width:50%;

    height:70%;}


#Content {

    display:flex;

    flex-direction: row;

    justify-content: flex-start;

    background-color:transparend;

    text-align:center;

    width:100%;

    flex: 1;}


main{

    margin-top:1em;

    color:white;

    background-color:transparend;

    width:100%;}


a{

    color:white;}


#frame{

    margin-top:0px;

    align-items: center;

    display: flex;

    justify-content:center;

    flex-direction:column;

    background-color:transparend;

    width:100%;

    height:40em;}


iframe{

    background-color:transparend;

    text-align:center;

    width:50%;

    height:20em;}


#kontakt{

    margin:0px;

    align-items: center;

    display: flex;

    justify-content:center;

    flex-direction:column;

    background-color:transparend;

    width:100%;

    height:40em;}


#kontakt a{

    margin-bottom:2em;

    width:18%;

    height:20%;

    background-color:transparend;}


.butn{

    font-size:16px;

    width:6em;

    height:2em;

    background: yellow; /* old browsers */

    background: linear-gradient(to bottom, white , darkgrey);

    box-shadow: inset 1px 0px 10px darkgrey,inset 0px 10px 10px black;

    border: 2px solid red;

    border-radius: 15px;

    margin-left:1em;}



.butn:hover,

  .butn:focus {

    font-size:16px;

    width:8em;

    height:2em;

    background: yellow; /* old browsers */

    background: linear-gradient(to bottom, silver , silver);

    font-weight:bold;

    box-shadow:white 8px 5px 15px, inset silver 0px -10px 20px;

    border: 2px solid green;

    border-radius: 1em;}



#left{

    margin-left:1em;

    background-color:transparend;

    margin-top:1em;

    width:20%;

    height:0 auto;}


#left a{

    color:white;}


#right{

    margin-right:1em;

    background-color:transparend;

    margin-top:1em;

    width:20%;

    height:0 auto;}


#right a{

    color:black;}


#w1{

    width:100%;

    text-align:center;

    padding:4px;

    font-size:18px;

    border:2px white solid;

    color:white;

    height :0 auto;

    border-radius: 1em;}



#w1 a{

    color:white;}



#w2{

    width:100%;

    text-align:center;

    padding:4px;

    font-size:18px;

    border:2px black solid;

    color:black;

    height :0 auto;

    border-radius: 1em;}

video{

    margin-top:2em;

    width:70%;

    height:70%;}


footer{

    background-color:black;

    color:white;

    text-align:center;}

             

@media screen and (max-width: 868px) {

  .line {

    width: 30px;

    height: 3px;

    background: white;

    margin: 5px;

  }

  nav {

    position: relative;

  }


  .hamburger {

    position: absolute;

    cursor: pointer;

    left: 5%;

    top: 50%;

    transform: translate(-5%, -50%);

    z-index: 2;

  }


  .nav-links {

    position: fixed;


    height: 100vh;

    width: 100%;

    flex-direction: column;

    clip-path: circle(100px at 90% -10%);

    -webkit-clip-path: circle(100px at 90% -10%);

    transition: all 1s ease-out;

    pointer-events: none;

  }

  .nav-links.open {

    clip-path: circle(1000px at 90% -10%);

    -webkit-clip-path: circle(1000px at 90% -10%);

    pointer-events: all;

  }


  .nav-links li {

    opacity: 0;

  }

  .nav-links li a {

    font-size: 25px;

  }

  .nav-links li:nth-child(1) {

    transition: all 0.5s ease 0.2s;

  }

  .nav-links li:nth-child(2) {

    transition: all 0.5s ease 0.4s;

  }

  .nav-links li:nth-child(3) {

    transition: all 0.5s ease 0.6s;

  }

  li.fade {

    opacity: 1;

  }

}
Problem noch der Abstand nach oben, ich könnte alles hochladen. Dann könnte ich einen Link hier einstellen wenn Recht.
 
Werbung:
Misst ich versteh es echt nicht, auch das mit der Nav nicht das es so wegbricht..

ich habe mal nur das gerüst gebaut.


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" data-lt-installed="true" lang="de">
<head>
<meta name="description" content="Gaming, Streaming und vieles mehr jetzt auf https://Defenetiv.Info seid dabei!">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Gaming, Straming, Talk, Gameplay">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="David Burmeister">
<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<link rel="canonical" href="https://Defenetiv.Info">
<link rel="shortcut icon" href="#">
    
<link rel="stylesheet" href="css/menue.css" />
<link rel="stylesheet" href="css/werbung.css" />     
<link rel="stylesheet" href="css/style.css" />
    
            <title>Defenetiv.Info</title>
    
<script type="text/javascript">
/*
@param none
@return none
*/
(function(d){if(!d.createTextNode) return;var elem = "header|nav|section".split('|');for(var i=0; i<elem.length; i++){d.createElement(elem[i]);}})(document);
</script>
    
</head>

<body>

<header>
        
        Header - Logo
        
        <nav class="">
            
        <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
          </div>
      
          <ul class="nav-links">
        
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Projects</a></li>
        
          </ul>
        
        </nav>

</header>

<section id="Content">
        Content 1<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content last<br>
    </section>

<footer>Copyright 2020 by Defenetiv.Info</footer>   

<script type="text/javascript">
/**
 * Fixierung der Header-Divisions
 *
 * @param none
 * @return none
 */
    var startPos;

    if(typeof String.prototype.trim !== 'function') {
      String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
      }
    }
    
    window.onload=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
    
    window.onresize=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
    
    window.onscroll = function () {
        elem = document.getElementsByTagName("nav")[0];
        var myFixedClass='fixed-navi';

        var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
        var topPos=document.all? body.scrollTop : pageYOffset;

        if (topPos > startPos) {
            if (elem.className.indexOf(myFixedClass)== -1) {
                if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
                else elem.className = myFixedClass;
            }
        } else {
            var sRegEx = new RegExp(myFixedClass, "g");   
            elem.className = elem.className.replace(sRegEx,"").trim();
        }
    }
</script>

<script src="js/app.js"></script>

</body></html>
 
Misst ich versteh es echt nicht, auch das mit der Nav nicht das es so wegbricht..

ich habe mal nur das gerüst gebaut.


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" data-lt-installed="true" lang="de">
<head>
<meta name="description" content="Gaming, Streaming und vieles mehr jetzt auf https://Defenetiv.Info seid dabei!">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Gaming, Straming, Talk, Gameplay">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="David Burmeister">
<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<link rel="canonical" href="https://Defenetiv.Info">
<link rel="shortcut icon" href="#">
   
<link rel="stylesheet" href="css/menue.css" />
<link rel="stylesheet" href="css/werbung.css" />    
<link rel="stylesheet" href="css/style.css" />
   
            <title>Defenetiv.Info</title>
   
<script type="text/javascript">
/*
@param none
@return none
*/
(function(d){if(!d.createTextNode) return;var elem = "header|nav|section".split('|');for(var i=0; i<elem.length; i++){d.createElement(elem[i]);}})(document);
</script>
   
</head>

<body>

<header>
       
        Header - Logo
       
        <nav class="">
           
        <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
          </div>
     
          <ul class="nav-links">
       
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Projects</a></li>
       
          </ul>
       
        </nav>

</header>

<section id="Content">
        Content 1<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content last<br>
    </section>

<footer>Copyright 2020 by Defenetiv.Info</footer>  

<script type="text/javascript">
/**
* Fixierung der Header-Divisions
*
* @param none
* @return none
*/
    var startPos;

    if(typeof String.prototype.trim !== 'function') {
      String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
      }
    }
   
    window.onload=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
   
    window.onresize=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
   
    window.onscroll = function () {
        elem = document.getElementsByTagName("nav")[0];
        var myFixedClass='fixed-navi';

        var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
        var topPos=document.all? body.scrollTop : pageYOffset;

        if (topPos > startPos) {
            if (elem.className.indexOf(myFixedClass)== -1) {
                if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
                else elem.className = myFixedClass;
            }
        } else {
            var sRegEx = new RegExp(myFixedClass, "g");  
            elem.className = elem.className.replace(sRegEx,"").trim();
        }
    }
</script>

<script src="js/app.js"></script>

</body></html>
Hier kommt die Css *Das Grundgerüst hab ich nur Lokal müsste wenn alles hochladen ..


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

html, body {
    height:100%;
    margin:0;
    padding:0;}
        
header, nav, section {
    display: block;}
        
header {
    top:0px;
    position:relative;
    height:10em;
    background-color:#14529a;
    width:100%;
    color: white;
    z-index:10;}
            
body {
    font-family: sans-serif;}

nav {
    bottom:0px;
    height:3em;
    left:0px;
    position:absolute;
    background-color:#000;
    width:100%;
}

* html nav {
    top:expression(auto);}
    
.fixed-navi {
    top:0px;
    position:fixed !important;
    position:absolute;}

* html .fixed-navi {
    top:expression(documentElement.scrollTop);}
        
#Content {
    top: 0;
    position:relative;
    background-color:#ccc;
    width:100%;}

a {
    color:#fff;}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;}


@media screen and (max-width: 868px) {
 
.line {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;}
 
nav {
    position: relative;}
 
.hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;}

.nav-links {
    position: fixed;
    background: #5b78c7;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;}
 
.nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;}
 
.nav-links li {
    opacity: 0;}
 
.nav-links li a {
    font-size: 25px;}
 
.nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;}
 
.nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;}
 
.nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
 
li.fade {
    opacity: 1;
  }
}
 
So, wenn ich es nun Richtig verstehe, muss ich doch für jeden Bereich, den ich einrichte, eine Flex nehmen.

Im Header FLEX
Media Buttons sollen nach ganz oben und gesamte breite haben.
Logo und Banner Teilen sich ja einen Flex Bereich wobei Logo kleiner als der Banner sein soll, der Banner muss aber mittig bleiben.

Dann zusätzlich im Header ist noch die NAV.
Die auch die gesamte breite einnehmen soll.

Dann kommt ja mein Conten.

Aber erstmal ein Bereich verstehen ^^

Grobe CSS

Header Flex
Media Center
Logo links Banner mittig

Aber hier steck ich schon fest.

Code:
<header>

        

        <img class="logo" src="img/02test01.png" alt="Logo">

        

        <div id="banner">

        <img class="banner" src="img/1.png" alt="Defenetiv.Info">

        </div>


Wenn ich den Code vom Div lösche funzt es aber, der Banner ist nicht mittig.


Code:
#banner{display:flex;
    flex-direction: row;
    text-align:center;
    width:100%;
    height:100%;
    background-color:orange;
    align-items: center;
    justify-content:center;}

.logo{
    width:10%;
    height:10%;}

.banner{
    width:40%;
    height:40%;}


Oder was versteh ich da falsch ?

Header ist ja meine Hauptachse

Logo muss flex 1 sein Banner Flex 2 sozusagen aber wie verschieb ich das *aaaahah
 
Werbung:
So, wenn ich es nun Richtig verstehe, muss ich doch für jeden Bereich, den ich einrichte, eine Flex nehmen.

Im Header FLEX
Media Buttons sollen nach ganz oben und gesamte breite haben.
Logo und Banner Teilen sich ja einen Flex Bereich wobei Logo kleiner als der Banner sein soll, der Banner muss aber mittig bleiben.

Dann zusätzlich im Header ist noch die NAV.
Die auch die gesamte breite einnehmen soll.

Dann kommt ja mein Conten.

Aber erstmal ein Bereich verstehen ^^

Grobe CSS

Header Flex
Media Center
Logo links Banner mittig

Aber hier steck ich schon fest.

Code:
<header>

       

        <img class="logo" src="img/02test01.png" alt="Logo">

       

        <div id="banner">

        <img class="banner" src="img/1.png" alt="Defenetiv.Info">

        </div>


Wenn ich den Code vom Div lösche funzt es aber, der Banner ist nicht mittig.


Code:
#banner{display:flex;
    flex-direction: row;
    text-align:center;
    width:100%;
    height:100%;
    background-color:orange;
    align-items: center;
    justify-content:center;}

.logo{
    width:10%;
    height:10%;}

.banner{
    width:40%;
    height:40%;}


Oder was versteh ich da falsch ?

Header ist ja meine Hauptachse

Logo muss flex 1 sein Banner Flex 2 sozusagen aber wie verschieb ich das *aaaahah
So ich habe nun das Ganze mal so in der HTML zusammen gesetzt wie es soll.

In der Regel sollte ja erstmal nur die HTML stimmig sein.

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" data-lt-installed="true" lang="de">
<head>
<meta name="description" content="Gaming, Streaming und vieles mehr jetzt auf https://Defenetiv.Info seid dabei!">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Gaming, Straming, Talk, Gameplay">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="David Burmeister">
<meta name="robots" content="index, follow">
<meta charset="UTF-8">
<link rel="canonical" href="https://Defenetiv.Info">
<link rel="shortcut icon" href="#">
    
<link rel="stylesheet" href="css/menue.css" />
<link rel="stylesheet" href="css/werbung.css" />     
<link rel="stylesheet" href="css/style.css" />
    
            <title>Defenetiv.Info</title>
    
<script type="text/javascript">
/*
@param none
@return none
*/
(function(d){if(!d.createTextNode) return;var elem = "header|nav|section".split('|');for(var i=0; i<elem.length; i++){d.createElement(elem[i]);}})(document);
</script>
    
</head>

<body>

<header>

<section class="icon">   

    <ul>
    
        <li><a id="fb-ico" style="color:blue; transition: 0.5s;" href="https://www.facebook.com/Defenetiv" class="fab fa-facebook" target="new"><span class="label">Facebook</span></a></li>
                
        <li><a id="ins-ico" style="color:orange; transition: 0.5s;" href="https://www.instagram.com/defenetiv.info/?hl=de" class="fab fa-instagram" target="new"><span class="label">Instagram</span></a></li>
                                                    
        <li><a id="st-ico" style="color:black; transition: 0.5s;" href="https://steamcommunity.com/id/defenetiv" class="fab fa-steam" target="new"><span class="label">Steam</span></a></li>
                                                                                  
        <li><a id="tw-ico" style="color:purple; transition: 0.5s;" href="https://www.twitch.tv/defenetiv" class="fab fa-twitch" target="new"><span class="label">Twitch</span></a></li>
                                                      
        <li><a id="yt-ico" style="color:darkred; transition: 0.5s;" href="https://www.youtube.com/channel/UCSQ6_caCD2wTdBltKUUUZFw?view_as=subscriber" class="fab fa-youtube" target="new"><span class="label">Youtube</span></a></li>
        
    </ul>
    
</section>
        
        <div id="kopf">
        
        <div id="logo">   
        <img src="img/02test01.png" alt="Logo">
        </div>
    
        <div id="banner">     
          <img src="img/1.png" alt="Defenetiv.Info">
        </div></div>

        
<nav class="menue">
            
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
      
<ul class="nav-links">
        
<li><a href="home.html"><button class="butn">Startseite</button></a></li>
<li><a href="kontakt.html"><button class="butn">Kontakt</button></a></li>
<li><a href="streams.html"><button class="butn">Streams</button></a></li>
<li><a href="projekte.html"><button class="butn">Projekte</button></a></li>
<li><a target="new" href="https://www.tipeeestream.com/defenetiv/donation"><button class="butn">Spenden</button></a></li>
        
</ul>
        
</nav>

</header>

<section id="Content">
    
<div id="left">
            
        <section id="w1" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>
                  
        <hr style="height:2px;border-width:0;color:gray;background-color:white">
                  
        <a class="host" href="https://host-unlimited.de/" title="host-unlimited" target="new"></a>
                    
        <hr style="height:2px;border-width:0;color:gray;background-color:white">
                  
        <a class="any" href="https://anymator.de/" title="anymator" target="new"></a>
                  
        <hr style="height:2px;border-width:0;color:gray;background-color:white">
                  
        <a href="info.html" target="_self" >Mehr Info.</a>
          
</section>
    
        </div>   
    
<article>  

------>  Hier soll Später alles Stehen was es auf den einzelnen seiten gibt von About Us bis zum Impressum..

<video src="vid/intro.mp4" poster="vid/intro.mp4" autobuffer autoplay controls onVolumeChange="1">
</video>
        
</article>         
        
        <div id="right">
    
        <section id="w2" >Hier kann Ihre</br> <b style="color:green;">Werbung</b></br> stehen. </br>
                    
        <hr style="height:2px;border-width:0;color:gray;background-color:black">
                    
        <a class="ilm" href="https://www.ilovemusic.de//" title="ilovemusic" target="new"></a> 
                    
        <hr style="height:2px;border-width:0;color:gray;background-color:black">
                    
        <a href="info.html" target="_self" >Mehr Info.</a>
                    
        </section>     
    
        </div>
        
        
    </section>

<footer>Copyright 2020 by Defenetiv.Info</footer>   

<script type="text/javascript">
/**
 * Fixierung der Header-Divisions
 *
 * @param none
 * @return none
 */
    var startPos;

    if(typeof String.prototype.trim !== 'function') {
      String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
      }
    }
    
    window.onload=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
    
    window.onresize=function(){
        window.scrollTo(0,0);
        startPos = document.getElementsByTagName("nav")[0].offsetTop;
    };
    
    window.onscroll = function () {
        elem = document.getElementsByTagName("nav")[0];
        var myFixedClass='fixed-navi';

        var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
        var topPos=document.all? body.scrollTop : pageYOffset;

        if (topPos > startPos) {
            if (elem.className.indexOf(myFixedClass)== -1) {
                if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
                else elem.className = myFixedClass;
            }
        } else {
            var sRegEx = new RegExp(myFixedClass, "g");   
            elem.className = elem.className.replace(sRegEx,"").trim();
        }
    }
</script>

<script src="js/app.js"></script>

</body></html>



Sry wegen dem Spam aber ich werd verrückt :D
 
Zurück
Oben