html: wie div boxen neben- und untereinander?
Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:
.leistung {
padding: 15px;
margin: 15px;
}
.leistung-container {
display: flex;
flex-direction: column;
}
/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */
@media (min-width: 25em) and (max-width: 45em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(50% - 2em);
/* Zwei Boxen nebeneinander */
}
}
/* Layout für PC (nebeneinander) */
@media (min-width: 45em) and (max-width: 65em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(33.33% - 2em);
/* Drei Boxen nebeneinander */
}
}
@media (min-width: 65em) {
.leistung-container {
display: flex;
flex-wrap: wrap;
}
.leistungen {
flex: 1 1 calc(33.33% - 2em);
/* Drei Boxen nebeneinander */
}
}
Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön
Ich habe das ganze jetzt wie folgt mit dem Grid-Layout geändert:
/* Grid-Layout für Handy */
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"head"
"nav"
"main"
"foot";
background-color: black;
color: white;
}
/* Layout fürs Handy */
.leistung-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"eins"
"zwei"
"drei"
"vier"
"fünf"
"sechs";
}
/*Grid-Layout für Tablet*/
@media (min-width: 40em) {
body {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"head head"
"nav nav"
"main main"
"foot foot";
}
.leistung-container {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"eins zwei drei"
"vier fünf sechs";
}
}
/*Grid-Layout für PC*/
@media (min-width: 60em) {
body {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"head head head head"
"nav nav nav nav"
"main main main main"
"foot foot foot foot";
}
.leistung-container {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
"eins zwei drei vier fünf sechs";
}
}
header {
grid-area: head;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: foot;
}
h2{
font-size: 45px;
text-decoration: underline;
text-align:center;
color:#47267a;
text-shadow: 0 0 5px white,
0 0 10px white,
0 0 20px white,
0 0 40px #34195b,
0 0 60px #34195b,
0 0 90px #9126da,
0 0 120px #9126da,
0 0 160px #9126da;
}
img {
width: 40px;
height: 40px;
}
video {
height: 450px;
width: auto;
}
.leistung-container {
margin-top: 20px;
}
.leistung1 {
grid-area: eins;
}
.leistung2 {
grid-area: zwei;
}
.leistung3 {
grid-area: drei;
}
.leistung4 {
grid-area: vier;
}
.leistung5 {
grid-area: fünf;
}
.leistung6 {
grid-area: sechs;
}
Allerdings ist jetzt irgendwie alles nebeneinander, selbst das was ich nicht definiert habe. Ich werd noch wahnsinnig, muss morgen fertig sein und auf einmal funktioniert nichts mehr. Ich hab sonst nie so Probleme mit HTML und CSS.
So sieht das aufeinmal aus.
könnt da bitte nochmal jemand über code schauen und mir sagen was falsch ist und was ich ändern muss?
Dankeschön.
2 Antworten
Dafür kannst du display: flex; oder display: grid; verwenden.
Dafür gibt es mehr als genug Tutorials auch YouTube, schau dir einfach mal beides an und nim das was dir eher zusagen (heißt: du kannst flex oder grid verwenden, mit beiden kommst du ans Ziel). Was du verwendest ist egal.
Schau dir ruhig einige Videos dazu an, die wirst du immer und immer wieder brauchen, vor allem flex
So, wie ich es gerade deuten kann, kollidiert das miteinander, ja.
Nimm am besten auch ein overflow wert mit hinein in die einzelnen Textboxen, dann ist der Zeilensprung nicht im Nirvana
Was mir immer hilft bei soetwas: codepen.io dort hast du nicht mehr, als du unbedingt brauchst und siehst sofort deine Änderungen, die du wieder übertragen kannst. Viel ausprobieren musst du in diesem Zustand!
Benutz am besten flex boxen: https://kulturbanause.de/blog/einfuhrung-in-das-flexbox-modell-von-css/
display: grid hab ich schon für die gesamte Seite benuzt und display:flex hab ich für die Dienstleistungen benuzt. Kolidiert das vielleicht miteinadner??