justify-content: center; & align-items: center; werden ignoriert.

wakeme · 14. Februar 2021

Ich code aus Übungszwecken ein OnePageLayout mit Flexbox. Komischerweise tritt wieder das bekannte Problem mit justify-content: center; & align-items: center; auf.

Ich möchte in <section id="seite_1> einen Container mit 50% Breite definieren. Der dem untergeordnete Container <div class="content_box_seite_1"> igonriert jedoch folgende Angaben ;

Code

.content_box_seite_1  {
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Wenn ich justify-content: center; & align-items: center; <section id="seite_1> zuweise, dann funktioniert es. Warum ist das so ?

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>OnePageLayout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style_alt.css" media="all" type="text/css">

</head>
<body>
<nav>
<div class="title">OnePageLayout</div>
<div class="nav_links">
<ul>
<li><a href="#header">startseite</a></li>
<li><a href="#seite_1">über mich</a></li>
<li><a href="#seite_1">links</a></li>
</ul>
</div>
</nav>
<header id="header">
<h1 class="header_title">OnePageLayout</h1>
<h2 class="header_subtitle">Lorem ipsum dolor sit amet</h2>
</header>
<section id="seite_1">
<div class="content_box_seite_1">
<figure><img src="images/platzhalter.jpg" alt="platzhalter" class="responsive"></figure>
<article>
<h3>Lorem ipsum dolor sit amet</h3>
<p>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. 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>
</article>
</div>
</section>
</body>
</html>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

html, body, #header, #seite_1, #seite_2, #seite_3 {
height:auto;
min-height: 100vh;
}

html {
scroll-behavior: smooth;
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
font-family: 'Cairo', sans-serif;
background-color: #fff;
color: #777;
}

nav {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.title {
font-size: 30px;
font-family: 'Amatic SC', cursive;
background-color: #fff;
color: #777;
}

.nav_links ul {
display: flex;
}

.nav_links li {
list-style: none;
}

.nav_links a {
font-family: 'Cairo', sans-serif;
text-decoration: none;
background-color: #fff;
color: #777;
padding: 5px;
}

.nav_links a:hover {
background-color: #ccc;
border-radius: 3px;
}

#header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(images/background.jpg);
background-size: cover;
}

.header_title  {
font-size: 75px;
font-family: 'Amatic SC', cursive;
font-weight: 700;
text-align: center;
color: #fff;
padding: 5px;
border-radius: 4px;
}

.header_subtitle  {
font-size: 35px;
font-family: 'Amatic SC', cursive;
font-weight: 500;
text-align: center;
color: #fff;
padding: 5px;
border-radius: 4px;
}

.content_box_seite_1  {
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.responsive {
width: 100%;
height: auto;
}

/*responsive Elemente*/

@media only screen and (max-width: 800px) {

nav {
flex-direction: column;
}

.nav_links {
margin: 10px;
}

.header_title  {
font-size: 30px;
}

.header_subtitle  {
font-size: 15px;
}

}

/*responsive Elemente*/

Alles anzeigen

Sempervivum · 14. Februar 2021

Beide, justify-content: center;und align-items: center; , können ihre Wirkung nur entfalten wenn freier Raum vorhanden ist.

Bei dem div.content_box_seite_1 ist das horizontal nicht der Fall, die Kindelemente füllen den Raum vollständig aus. Vertikal, je nachdem was es für ein Bild ist, schon und dann funktioniert auch die vertikale Zentrierung.

Bei dem section#seite_1 ist jedoch in beiden Richtungen freier Raum da, horizontal weil Du dem div.content_box_seite_1 eine Breite von 50% gegeben hast, und die Zentrierung funktioniert.

wakeme · 14. Februar 2021

Dankeschön verstanden. Das heißt dass der übergeordnete Container die im untergeordnete Inhalte horizontal und vertikal ausrichtet.

Ich habe das jetzt so gelöst :

Code

#seite_1, #seite_2 {
display: flex;
justify-content: center;
align-items: center;
}

.content_box_seite_1  {
display: flex;
flex-direction: row;
margin: 25px;
width: 75%;
}

Alles anzeigen

wakeme · 14. Februar 2021

Das heißt auch, dass der Elterncontainer mit den Anweisung zur Positionierung über Höhe verfügen muss ?

So das OnePageLayout funktioniert soweit gut nur, dass die Sprungmarken zu weit gehen. Also beim Anspringen der bestimmen Bereiche wird ein Teil des Inhaltes von der fixierten Navigation verdeckt und der Nutzer muss zurück scrollen. Gibt es dafür eine Lösung ?

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>OnePageLayout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/smooth.js" defer></script>
</head>
<body>
<nav>
<div class="title">OnePageLayout</div>
<div class="nav_links">
<ul>
<li><a href="#header">startseite</a></li>
<li><a href="#seite_1">über mich</a></li>
<li><a href="#seite_2">anderes</a></li>
</ul>
</div>
</nav>
<header id="header">
<h1 class="header_title">Lorem ipsum</h1>
<h2 class="header_subtitle">Lorem ipsum dolor sit amet</h2>
</header>

<section id="seite_1">
<div class="content_box_seite_1">
<figure><img src="images/bild.jpg" alt="bild" class="responsives_bild"></figure>
<article>
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</h3>
<p>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. 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>
</article>
</div>
</section>

<section id="seite_2">
<div class="content_box_seite_2">
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
<p>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. 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>
</section>
<footer>
<div class="footer_copyright">2021@ipsum</div>
<div class="footer_contact">ich@ipsum.net</div>
</footer>
</body>
</html>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

html, body, #header, #seite_1, #seite_2, #seite_3 {
height:auto;
min-height: 100vh;
}

html {
scroll-behavior: smooth;
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
font-family: 'Cairo', sans-serif;
background-color: #fff;
color: #777;
}

nav {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.title {
font-size: 30px;
font-family: 'Amatic SC', cursive;
background-color: #fff;
color: #777;
}

.nav_links ul {
display: flex;
}

.nav_links li {
list-style: none;
}

.nav_links a {
font-family: 'Cairo', sans-serif;
text-decoration: none;
background-color: #fff;
color: #777;
padding: 5px;
}

.nav_links a:hover {
background-color: #ccc;
border-radius: 3px;
}

#header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(images/background.jpg);
background-size: cover;
}

.header_title  {
font-size: 75px;
font-family: 'Amatic SC', cursive;
font-weight: 700;
text-align: center;
color: #fff;
padding: 5px;
border-radius: 4px;
}


.header_subtitle  {
font-size: 35px;
font-family: 'Amatic SC', cursive;
font-weight: 500;
text-align: center;
color: #fff;
padding: 5px;
border-radius: 4px;
}

.header_title:hover {
background-color: #232323;
}

.header_subtitle:hover {
background-color: #232323;
}

#seite_1, #seite_2 {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
}

.content_box_seite_1 {
display: flex;
flex-direction: row;
margin: 25px;
width: 75%;
}

.content_box_seite_2 {
display: flex;
flex-direction: column;
margin: 25px;
width: 75%;
}

article {
width: 70%;
}

figure {
width: 30%;
margin-right: 20px;
}

.responsives_bild {
width: 100%;
height: auto;
}

footer  {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}

.footer_contact, .footer_copyright {
font-family: 'Amatic SC', cursive;
color: #fff;
font-size: 25px;
padding: 5px;
}

.footer_contact:hover {
background-color: #232323;
}

.footer_copyright:hover {
background-color: #232323;
}
/*responsive Elemente*/

@media only screen and (max-width: 800px) {

nav {
flex-direction: column;
}

.nav_links {
margin: 10px;
}

.header_title  {
font-size: 30px;
}

.header_subtitle  {
font-size: 15px;
}

#seite_1, #seite_2 {
font-size: 16px;
text-align: center;
}

.content_box_seite_1, .content_box_seite_2 {
flex-direction: column;
width: 100%;
}

article, figure {
width: 100%;
}

figure {
margin-right: 0px;
}


}

/*responsive Elemente*/

Alles anzeigen

Sempervivum · 14. Februar 2021

Zitat

Das heißt auch, dass der Elterncontainer mit den Anweisung zur Positionierung über Höhe verfügen muss ?

Ja, wie gesagt, funktioniert die Zentrierung nur wenn freier Raum da ist. Aber ich glaube bei deinem Layout war das der Fall, weil Du die Höhe auf 100vh gesetzt hattest.

MrMurphy · 14. Februar 2021

Zitat

dass die Sprungmarken zu weit gehen

Du könntest den section-Elementen ein oberes Padding in Höhe der Navigation mit auf den Weg geben. In deinem Beispiel ist leider nur wenig zu sehen, da vernünftiger Inhalt fehlt. Da wir deine Hintergrundgrafik nicht haben servierst du uns teilweise zudem weißen Text auf weißem Grund.

Da die Navigation durch "position: fixed" aus dem Dokumentenfluß genommen ist, kann der Rest der Seite auf die nicht mehr reagieren. Du musst dich also selbst um die erforderlichen Abstände kümmern.

Sempervivum · 14. Februar 2021

Zitat

Also beim Anspringen der bestimmen Bereiche wird ein Teil des Inhaltes von der fixierten Navigation verdeckt und der Nutzer muss zurück scrollen. Gibt es dafür eine Lösung ?

Eine ganz einfache Lösung dafür kenne ich nicht. Hier habe ich etwas ausgearbeitet, was auf einem Muster basiert, das unser MrMurphy früher mal vorgestellt hat:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>One Page Layout</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: arial;
        }

        header {
            flex: 0 0 auto;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }

        main>section {
            height: 100%;
        }

        footer {
            font-size: 2em;
        }

        /* Nav */

        nav ul {
            list-style: none;
            display: flex;
            flex-direction: row;
        }

        nav ul li {
            padding: 0.5em;
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>
                    <a href="#section1">Home</a>
                </li>
                <li>
                    <a href="#section2">Page 1</a>
                </li>
                <li>
                    <a href="#section3">Page 2</a>
                </li>
                <li>
                    <a href="#section4">Page 3</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="section1">
            Lorem ipsum dolor sit amet, ...
        </section>
        <section id="section2">
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
            feugiat ...
        </section>
        <section id="section3">
            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
            possim assum...
        </section>
        <section id="section4">
            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 ...
        </section>
    </main>
    <footer>This is the footer</footer>
</body>

</html>

Alles anzeigen

Wahrscheinlich wäre eine Alternative, position: sticky; zu verwenden, dann wird der Header nicht aus Fluss genommen und das Problem müsste entfallen. Aber ich habe das noch nicht ausgearbeitet.

wakeme · 14. Februar 2021

MrMurphy

Danke padding-top: 150px; hat funktioniert.

Sempervivum

Danke für deine Mühe es ist immer schön ein anderen Lösungsansatz zu sehen und daraus zu lernen

Da ergeben sich doch gleich neue Fragen zu deinem Code. Welchen Nutzen hat es dem Body display: flex; &

flex-direction: colum; zuzweisen ? Im normalen Dokumentfluss von HTML wird ja sowieso alles untereinander dargestellt ?

Sempervivum · 14. Februar 2021

Zitat

Im normalen Dokumentfluss von HTML wird ja sowieso alles untereinander dargestellt ?

Das trifft zu. Ich habe jedoch damit ein anderes Ziel verfolgt, nämlich dass der Header und das scrollbare main-Element die Höhe des Browserfenster genau ausfüllt. Anderfalls würde entweder eine Lücke oder eine zweite Scrollbar auftauchen. Und das lässt sich mit Flex am einfachsten erreichen, ohne dass Berechnungen und eine feste Höhe des Headers erforderlich sind.

Die Lösung mit Padding hatte ich auch als erstes angedacht, war dann aber davon abgekommen, weil beim Scrollen mit der Scrollbar dieses Padding sichtbar und das Layout stören würde. Außerdem muss man sich dabei auf eine feste Höhe des Header fest legen, so dass das Ganze nicht mehr voll responsiv ist.

justify-content: center; & align-items: center; werden ignoriert.

Jetzt mitmachen!

Teilen

Tags