HTML
Ich beschäftige mich gerade mit dem Thema Flexbox und habe eine Webseite als one-pager erstellt. Kann mir jemand erklären, warum es bei längeren <li>Einträgen zu diesem komischen Phänomen kommt, dass die Inhalte übereinander liegen. Für Hilfe immer dankbar. Ich habe schon alles ausprobiert.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style_3.css">
<title>One - Pager</title>
</head>
<body>
<div class="container">
<header class="header">
<div class="header_l">
<img src="images/logo.png" alt="Logo">
</div>
<div class="header_r">
<a href="index_3.html#physio"><img src="images/physioIcn.jpg" alt="Physio"></a>
<a href="index_3.html#team"><img src="images/teamIcn.png" alt="Team"></a>
<a href="index_3.html#kontakt"><img src="images/contactIcn.png" alt="Kontakt"></a>
</div>
</header>
<!--<nav class="nav-box1">Navi</nav>-->
<div class="welcome"><!-- Content mit 1 Spalten -->
<h2 class="left">WILLKOMMEN</h2>
<h3>Olaf Gerlach</h3>
<p>Praxis für Krankengymnastik und Physiotherapie, Schwäbisch Hall <br><br>
Herzlich willkommen auf unserer Website <br><br>
Olaf Gerlach und sein Team helfen Ihnen mit Freude gesund zu werden und gesund zu bleiben. Gesund werden und gesund bleiben ist
die Philosophie von Olaf Gerlach und seinem Team und stellt Sie in den Mittelpunkt:<b>unsere Kunden und Patienten.
Olaf Gerlach und Team
</p>
</div>
<div id="physio">
<div class="welcome"> <!-- Content mit 1 Spalten -->
<h2>physiotherapie</h2>
<p>In der Physiotherapie behandeln wir Patienten mit orthopädischen, unfallchirurgischen, sporttraumatologischen sowie
neurologischen Krankheitsbildern. Aus einer Vielzahl von Behandlungsmethoden wählen wir in Abstimmung auf Ihre Erkrankung
das passende therapeutische Verfahren. Sollten Sie eine bestimmte Behandlungsmethode wünschen, so sprechen Sie diese bitte
mit unseren Therapeuten oder bei der Anmeldung ab. Unser Ziel ist Sie in angenehmer Atmosphäre nach den neuesten
wissenschaftlichen Erkenntnissen zu versorgen.
</p>
</div>
<div class="content"> <!-- Content mit 3 Spalten -->
<div class="box1"><h2>PHYSIOTHERAPIE/ KRANKENGYMNASTIK</h2>
<ul>
<li>Manuelle Therapie</li>
<li> Massage</li>
<li>Gerätegestützte Krankengymnastik</li>
<li> Manuelle Lymphdrainage</li>
<li>PNF - Propriozeptive Neuromuskuläre Fazilation</li>
<li>Kieferbehandlung (Zahnarztverordnung) bei <br> Cranio Mandibulärer Dysfunktion usw.</li>
<li>Naturmoor-Packung</li>
<li> Skoliosetherapie für Kinder, <br> Jugendliche und Erwachsene</li>
</ul>
</div>
<div class="box2">
<h2>PHYSIKALISCHE THERAPIE</h2>
<ul>
<li>Elektrotherapie</li>
<li>Naturmoorbehandlung</li>
<li>Wärmetherapie</li>
<li>Kältetherapie</li>
<li>Schlingentisch/ Extension</li>
<li>Ultraschallbehandlung</li>
</ul>
<p>und vieles mehr...</p>
</div>
<div class="box3">
<h2>PRIVATE LEISTUNGEN</h2>
<ul>
<li>Cranio Sacrale Osteopatie</li>
<li>Kinesiotaping</li>
<li>Personal Training</li>
<li>Trainingsgruppen</li>
<li>Geschenkgutscheine</li>
<li>Thai-Massagen</li>
<li>Propriozeptive neuromuskuläre Fazilitation (PNF)</li>
</ul>
<p>und vieles mehr...
</p>
<h2>HAUS- UND HEIMBESUCHE MÖGLICH</h2>
<ul>
<li>Klassische Massage</li>
<li>Bindegewebsmassage</li>
<li>Manuelle Lymphdrainage</li>
</ul>
</div>
</div>
</div>
<div id="team">
<div class="content1"> <!-- Content mit 2 Spalten -->
<div class="box1"> <h2>(1) box1</h2> <p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
</div>
<div class="box2"> <h2>(2) box2</h2>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et t justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div id="kontakt">
<div class="content2"> <!-- Content mit 3 Spalten -->
<div class="box1"> <h2>(1) box1</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna t, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box2"> <h2>(2) box2</h2>
<p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna et, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="box3"><h2>(3) box3</h2><p> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor r sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<footer class="footer">(6) Footer</footer>
</div>
</body>
</html>
CSS
* {
padding:0;
margin:0;
}
ul {
line-height: 0.1em;
}
body {
background: #333;
margin: 0;
font-family: arial, sans-serif;
}
.container {
background: white;
margin: 0 auto;
padding: 1em;
max-width:1500px;
}
.container * { padding: 1em; }
/*.header { background: #aa8147; }*/
.header_l img{
width: 40%;
}
.nav-main { background: #97a2aa; }
.welcome {
background: #fff;
padding: 1em;
}
.content, .welcome, .team, .kontakt {padding: 0;}
/*.box1 { background:#fff; }
.box2 { background: #f0f3f5; }
.box3 { background: #daedc1; }*/
.footer {
background: #353535;
color: white;
}
h1, h2, h3 {
text-align: left;
}
p {
text-align: justify;
}
#box3 ul li {
line-height: 1;
}
@media screen and (min-width: 600px) {
body {margin:1em;}
.header{
display: flex;
flex-direction: row;
justify-content: end;
align-items: flex-end;
}
.header_r{
flex: 1;
background: #fff;
text-align: right;
}
.header_l{
flex: 1;
background: #fff;
}
.header_l img{
width: 50%;
}
.welcome { background: lightgrey;
margin-left: 10%;
margin-right: 10%;
padding: 1em;
color: #000;
}
.content {
background-color: #aa8147;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.content1 {
background-color: lightblue;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.content2 {
background-color: red;
margin-left: 10%;
margin-right: 10%;
display: flex;
}
.box1 {
flex: 1;
order: 1;
}
.box2 {
flex: 1;
order: 2;
}
.box3 {
flex: 1;
order: 3;
}
.left {
text-align: left;
}
}
Alles anzeigen