Textfelder Nebeneinander

[janis2000]

Hallo Zusammen

Ich bin Anfänger in der Welt des Webdesigns und kriege es nicht hin 3 Textfelder (Footer) nebeneinander zu platzieren. Habe ich etwas falsch gemacht oder vergessen`?

Hier der HTML part:
<div class="footer-container">
<div class="footer">
<div class="footer-heading footer 1">
<h2>Über uns</h2>
<a href="#">Wer sind wir?</a>
<a href="#">Team</a>
<a href="#">Angebote</a>
<a href="#">Blog</a>
</div>
<div class="footer-heading footer 2">
<h2>Hilfe und Service</h2>
<a href="#">Kontaktformular</a>
<a href="#">Broschüre</a>
<a href="#">Sponsoren</a>
</div>
<div class="footer-heading footer 3">
<h2>Rechtliche Hinweise</h2>
<a href="#">Nutzungsbedingungen</a>
<a href="#">AGB</a>
<a href="#">Datenschutz</a>
<a href="#">Impressum</a>
</div>
<div class="footer-email-form"></div>
<h2>Tritt unserem Newsletter bei!</h2>
<input type="email" placeholder="Geben Sie Ihre Emailadresse ein" id="footer-email">
<input type="submit" value="Sign Up" id="footer-email-btn">
</div>
</div>
</div>

und hier der CSS Part:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "montserrat", sans-serif;
}

.footer-container{
background-color: #2e004d;
padding-bottom: 4rem 0 4rem 0;

}
.footer{
width: 80%;
height: 40vh;
background-color: #2e004d;
color: white;
display: inline-block;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.footer-heading{
display: flex;
flex-direction: column;
margin-right: 4rem;
}
.footer-heading h2{
margin-bottom: 2rem;
}
.footer-heading a{
color: white;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-heading a:hover{
color:red;
transition: 0.3s ease-out;
}
.footer-email-form h2{
margin-bottom: 2rem;
}
#footer-email{
width: 250px;
height: 40px;
border-radius: 4px;
outline: none;
border: none;
padding-left: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
#footer-email:laceholder{
color: #b1b1b1
}
#footer-email-btn{
width: 100px;
height: 40px;
border-radius: 4px;
background-color: #f9423d;
outline: none;
border: none;
color: white;
font-size: 1rem;
}
#footer-email-btn:hover{
cursor: pointer;
background-color: skyblue;
transition: all 0.4s ease-out;
}
@media screen and (max-width: 1150px){
.footer{
height: 50vh;
}
.footer-email-form{
margin-top: 4rem;
}
}
@media screen and (max-width: 820px){
.footer-2{
padding-top: 2rem;
}
}
@media screen and (max-width: 720px){
.footer-3{
display: none;
}
.footer-email-form{
margin-top: 2rem;
}
}


Vielen Dank schonmal im Voraus!

 

[janis2000]

Warum da auf einmal ein Emoji rumhängt weiss ich nicht...

 

[Sempervivum]

Das Emoji kannst Du vermeiden, indem Du den Code in Codetags setzt, das Menüsymbol (3 Punkte) rechts von dem Landschaftssymbol und dann </>.

 

[Sempervivum]

Erst Mal willkommen im Forum!

Sehr positiv, dass Du Flexlayout verwendest aber Du hast dabei etwas entscheidendes vergessen: display: flex; für den Footer, damit werden die Elemente nebeneinander angeordnet. Wenn ich das dem div.footer zuweise funktioniert es allerdings immer noch nicht weil Du die Klasse .footer auch den Flexitems zugewiesen hast und das CSS die Regel width: 80%; enthält, so dass die Items nicht in eine Zeile passen. Lösche ich diese Klasse bei den Flexitems werden die Elemente auch nebeneinander angeordnet.

Nicht direkt falsch aber ungünstig und nicht zu empfehlen ist folgendes:
Ein überflüssiger Container div.footer-container.
Für den Footer gibt es das Tag <footer> und es empfiehlt sich, das auch zu verwenden.
Ich vermute, bei diesem: class="footer-heading footer 1" wolltest Du den Spalten im Footer eine Klasse mit einer fort laufenden Nummer geben? Dann würde ich die Klassen so fest legen: class="footer-heading footer-1". So hast Du dich ja auch im CSS darauf bezogen.
Ich würde auf die feste Höhe des Footers verzichten und die Höhe sich automatisch auf die des Inhaltes einstellen lassen.

 

[janis2000]

Vielen Dank, deine Antwort war sehr hilfreich. Jetzt muss ich die Textfelder nur noch symmetrisch abbilden und die Mail Eingabe in den Farbbereich verschieben, aber ich denke, dass ich das alleine schaffen werde

Have a nice day!
-Janis