Wie kann man einen HTML Div Container nach unten verschieben?
Hallo,
ich würde gerne den markierten Container unter das Posten Feld setzen. Wie genau kann das funktionieren?
Sorry für die blöde Frage, bin noch etwas neu / unerfahren beim coden :)
VG
Update: hier der Code : https://pastebin.com/CzQJ5cH7
2 Antworten
Okay, zunächst mal: Das Tutorial, das du verwendet hast um das zu basteln solltest du so schnell wie nur irgendmöglich in die Tonne treten und dem Vollpfosten der es verfasst hat in den Hintern treten.
Hier nur eine kleine (nicht vollständige) Auflistung von Problemen in dem ganzen Zeugs:
- Mehrere Elemente mit der selben ID
- Tonnenweise Inline-CSS und trotzdem noch ein großer CSS-Block
- Der erwähnte CSS-Block als Unterelement von <html>
- Float und Flex wild durcheinander gemischt aber keines davon halbwegs konsequent angewendet
- <br> als Layoutelement
Aber da ich gerade nicht viel anderes zu tun hatte, hier eine zumindest zum Großteil aufbereitete Version:
<!doctype html>
<html lang="de">
<head>
<title>Profil | PhilBook</title>
<style>
body{
font-family: Tahoma,serif;
background-color: #d0d8e4;
}
header{
margin-bottom: 0.75em;
}
#blue_bar{
height: 50px;
background-color: #405d9b;
color: #d9dfeb;
font-size: 30px;
position: relative;
}
#search_box{
width: 400px;
height: 20px;
border-radius: 5px;
border: none;
padding: 4px;
font-size: 14px;
}
#selfie{
width: 50px;
position: absolute;
right: 0;
margin-bottom: 10px;
}
#profile_pic{
width: 150px;
border-radius: 50%;
border: solid 2px white;
}
nav{
background-color: white;
text-align: center;
color: #405d9b;
width: 800px;
margin: auto;
}
#menu_buttons{
width: 100px;
display: inline-block;
margin: 2px;
}
#content{
display: flex;
flex-direction: row;
width: 800px; margin: auto; min-height:400px;
}
#friends_bar{
flex-shrink: 1;
flex-grow: 0;
background-color: white;
width: 30%;
color: #aaa;
padding: 8px;
}
#friends_bar .friend{
font-size: 12px;
font-weight: bold;
color: #405d9b;
margin: 5px;
}
#friends_bar .friend span{
display: inline-block;
margin: 8px;
}
#friends_bar .friend img{
width: 75px;
height: 75px;
margin: 8px;
display: inline-block;
vertical-align: top;
}
#posts{
flex-grow: 1;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
#post_box{
flex-grow: 0;
flex-shrink: 1;
margin: 0.5em;
}
#post_bar{
flex-grow: 1;
flex-shrink: 0;
}
#post_bar .post{
background-color: white;
margin: 0.5em;
padding: 5px;
}
#post_bar .post img{
margin: 8px;
display: inline-block;
vertical-align: top;
}
#post_bar .post span{
margin: 8px;
display: inline-block;
}
#post_box textarea{
width: 100%;
border: none;
font-family: Tahoma, serif;
font-size: 14px;
height: 60px;
resize: none;
}
#post_button{
background-color: #405d9b;
border: none;
color: white;
padding: 4px;
font-size: 14px;
border-radius: 2px;
width: 50px;
margin-left: calc(100% - 50px);
}
</style>
</head>
<body>
<header>
<div id="blue_bar">
PhilBook
<input type="text" id="search_box" placeholder="Suche nach Personen">
<img src="selfie.jpg" id="selfie" alt="Bild">
</div>
<nav>
<img src="mountain.jpg" style="width: 100%;" alt="Bild">
<img src="selfie.jpg" id="profile_pic" alt="Bild"><br>
<div style="font-size: 20px;">Mary Bender</div>
<div id="menu_buttons">Zeitleiste</div>
<div id="menu_buttons">Über</div>
<div id="menu_buttons">Freunde</div>
<div id="menu_buttons">Fotos</div>
<div id="menu_buttons">Einstellungen</div>
</nav>
</header>
<article id="content">
<div id="friends_bar">
Freunde <br>
<div class="friend">
<img src="user1.jpg" alt="BILD">
<span>Erster Nutzer</span>
</div>
<div class="friend">
<img src="user2.jpg" alt="Bild">
<span>Zweiter Nutzer</span>
</div>
<div class="friend">
<img src="user3.jpg" alt="Bikld">
<span>Dritter Nutzer</span>
</div>
<div class="friend">
<img src="user4.jpg" alt="Bild">
<span>Vierter Nutzer</span>
</div>
</div>
<div id="posts">
<div id="post_box">
<textarea placeholder="Was möchtest du sagen?"></textarea>
<input type="submit" id="post_button" value="Posten">
</div>
<div id="post_bar">
<div class="post">
<img src="user1.jpg" style="width: 75px;">
<span>So ist's schon besser...</span>
</div>
<div class="post">
<img src="user1.jpg" style="width: 75px;">
<span>Das alte Markup war (ohne Übertreibung) zum Kotzen.</span>
</div>
</div>
</div>
</article>
</body>
</html>
Sieht beim groben Drüberschauen eigentlich gar nicht mal so schlimm aus wie ich dachte.
Und in dem Tutorial wurde tatsächlich der ganze von mir aufgelistete Mist verzapft? (Besonders der Punkt bzgl. der mehrfachbelegung von IDs und der bzgl. der Position des CSS-Blocks sind schon ziemlich übles Zeug.)
Welcher Container ist den markiert?
Unabhängig davon, solltest du deinen Code noch mal komplett überarbeiten und statt Floats lieber auf moderne Techniken wie Flexbox setzen. Damit lassen sich solche Layout deutlich einfacher und robuster umsetzen und gerade solche Sachen wie die Ausrichtung von Elementen geht damit sehr einfach.
Zwei Tutorials findest du hier:
https://kulturbanause.de/blog/einfuhrung-in-das-flexbox-modell-von-css/
Ich versuche den posts_bar zu verschieben. Das ganze ist mit einem Tutorial entstanden, deshalb sieht das noch perfekt aus :)
(rechts mit dem Bild)
Wie gesagt, versuche das ganze noch mal mit Flexbox zu bauen. Wenn man einmal dahinter gestiegen ist, ist das ganze auch viel einfacher als sperrige Floats. Mit Flexbox kannst du auch viel besser Elemente verschachteln.
Hach habe dir hier mal eine ganz grobes Beispiel gebaut, wie dein Layout mit Flexbox aufgebaut sein könnte:
https://jsfiddle.net/Babelfisch/gm2kLt7o/23/
Das kannst du so nicht übernehmen, siehst aber vielleicht ein wenig, wohin die Reise damit geht.
Danke! Das hier war’s https://youtube.com/playlist?list=PLY3j36HMSHNWaKUC73RJlwi6oU-WTpTPM