Ich komme einfach nicht weiter *grml

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

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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>
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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;}

}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.151
430
83
68
Offenbar hast Du den Code als Kommentar gepostet, Du musst statt dessen dieses Symbol </> verwenden.

Zu deiner Frage: Beim Überfliegen deines CSS fällt auf, dass Du einmal schon begonnen hast, das mit Flex zu gestalten aber andererseits auch float verwendest. Meine Empfehlung: Verwende konsequent Flex, dann wirst Du es leichter haben, deine Elemente so anzuordnen, wie Du es dir vorstellst.
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
Puh ich werd mich nochmal dran setzen, bin da kein Experte und flex ist ganz neu für mich. Aber erstmal danke.
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.151
430
83
68
Wenn ich das richtig verstehe, ist dein Kernproblem, die Container in #Content nebeneinander anzuordnen und den article in die Mitte zu setzen. Das ist mit Flexlayout sehr einfach, im HTML die Container einfach in der Reihenfolge anordnen, wie sie stehen sollen:
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>
        <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>
        <!-- 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>
Dann braucht es nur noch wenige Zeilen CSS:
Code:
        #Content {
            display: flex;
        }

        #left,
        #right {
            flex: 1;
        }

        #Content>article {
            flex: 2;
        }
Die floats dann löschen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.151
430
83
68
PS: Wie ich sehe, habe ich dies überlesen:
Aber die TS sowie Skype und Discord Grafik lassen sich irgendwie nicht Zentrieren noch untereinander bringen.
Auch das lässt sich sehr einfach mit wenigen Zeilen CSS machen:
Code:
        #Content>article {
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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>

/>
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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;

  }

}
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.151
430
83
68
Sieht doch im wesentlichen gut aus. Was noch nicht passt ist die aufgeklappte Nav bei schmalem Browserfenster. Und im CSS sind noch einige Syntaxfehler. Sieh es dir mal im HTML-Inspektor deiner Entwicklerwerkzeuge an: Rechtsklick auf ein Element -"Element untersuchen". Dann kannst Du auf die Elemente klicken und es wird dir das CSS angezeigt.
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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>
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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;
  }
}
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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
 

Defenetiv

Neues Mitglied
23 November 2020
19
0
1
40
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
 
Werbung: