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
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="colorrange; 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="colorurple; 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>