CSS Elemente nebeneinander

Simuletsplay

Moin Leute!
Ich habe bei mir das problem, dass wenn ich mein Section auf links orientiere, der hintergrund des unterliegenden Div ignoriert wird.
Die Section wird ebenfalls automatisch unter diesen Div geschoben!

Code

<div class="footer"><section class="sec-left">
	<ul>
		<li><h1>Folge uns auf</h1></li>
		<li><a href="https://twitter.com/simuundquex"><i class="fa fa-twitter"></i></a></li>
		<li><a href="https://instagram.com/simuundquexteam"><i class="fa fa-instagram"></i></a></li>
		<li><a href=""></a></li>
	</ul>
</section>




<section class="sec-left">
	<ul>
		<li><h1>Folge uns auf</h1></li>
		<li><a href="https://twitter.com/simuundquex"><i class="fa fa-twitter"></i></a></li>
		<li><a href="https://instagram.com/simuundquexteam"><i class="fa fa-instagram"></i></a></li>
		<li><a href=""></a></li>
	</ul>
</section>
<p>Copyright © 2019</p>
</div>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css?family=Roboto');






.footer{
    width: 100%;
    height: auto;
    background-color: #2e2e2e;
    color: #fff;
    margin: 0;
    padding: 0;
}
.footer ul{
    list-style: none;
    text-align: center;
}
.footer ul li{
    padding-top: 5px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.footer ul li a{
    text-decoration: none;
    color: #fff
}
.footer ul li a:hover{
    text-decoration: underline;
}
.footer h1{
    margin-bottom: 0;
}
.sec-left{
    margin-left: 20px;
    width: auto;
    color: #fff;
}
.fa-twitter:hover{
    color: #00acee
}
.fa-instagram:hover{
    color: #d6249f;
    color: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

Alles anzeigen

Kann mir jemand helfen?

Simuletsplay

Hat jemand eine Idee?

Gastl

Mangels eines Onlinelinks, auf dem man sich das Problem zumindest mal ansehen könnte, nein, keine Idee.

Simuletsplay

Was meinst du mit

Zitat

Mangels eines Onlinelinks

?

Gastl

Online! Auf ein Webspace hochladen. Wo kann man das Online ansehen? Jetzt verstanden was Onlinelink sein soll?

Simuletsplay

https://simuundquex.de/footer

Gastl

Okay, ist ein Anfang...

MrMurphy

Hallo

Auf der verlinkten Seite ist das Problem leider nicht sichtbar. Offensichtlich unterschlägst du uns den problematischen CSS-Quelltext. Deshalb kann ich nur raten.

Wahrscheinlich mißbrauchst du float um die section-Elemente nebeneinander zu stellen. Falls dem so sein sollte:

Float ist nicht dafür gedacht Container nebeneinander anzuzeigen. Sondern damit Text andere Elemente (in der Regel Bilder) umfließen kann.

Zudem hat Float Nebenwirkungen, mit denen du dich nicht beschäftigt hast und die jetzt zuschlagen. Dazu gehört, dass Float sich weitervererbt und gefloatete Elemente aus dem Dokumentenfluß genommen werden.

Sachlich ist die Verwendung von Float zum Nebeneinander stellen von Elementen falsch.

Bereits seit einigen Jahren (mit der Einführung von HTML5) wurde für die von dir gewünschte Darstellung im CSS das sogenannte Flexbox-Modell eingeführt ( display: flex; ). Damit solltest du dich beschäftigen, die Suchmaschine deiner Wahl sollte dir weiterhelfen.

Seitdem ist der Mißbrauch von Float zum Anordnen von Elementen nicht mehr erforderlich und Float sollte nur noch für die oben genannte dafür gedachte Anordnung verwendet werden. Dazu gehört auch, sich mit allen Auswirkungen von Float zu beschäftigen.

Da Float kaum noch erforderlich wird solltest du deine Energie in das Lernen von Flexbox und neuerdings auch CSS-Grid stecken. Die sind speziell zum Anordnen von Elementen (dazu gehören auch Container) entwickelt worden. Üblicherweise in Verbindung mit MediaQueries.

Gruss

MrMurphy

basti1012

irgendwie verstehe ich deinn problem nicht ganz. Der Code macht doch genau das was er machen soll.
Was meinst du mit links orientiert und übereinander geschoben ? bIch sehe nix was übereinander steht.
Erklär doch mal wie es aussehen soll,notfalls mir Grafik.

Tags