Beiträge von wakeme

wakeme · 30. Mai 2021

Ich habe das Directory-Listing auf meinem Webspace mittels .htaccess aktiviert.

Jetzt würde ich gerne die Hintergrundfarbe des Bodys, die Schriftart und Schriftgröße als auch den Text von „Index Of“ ändern.

Wie gehe ich dabei vor ?

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 ?

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

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

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

wakeme · 4. Februar 2021

Hat jemand Erfahrungen mit solchen Kursen und wie hoch ist der Lerneffekt vorausgesetzt, dass Eigenmotivation vorhanden ist ?

https://www.sgd.de/kursseite/php-programmiererin.html

Reicht der dort vermitelte Inhalt aus um danach selbstständig Webanwendungen wie Content-Management-Systeme zu entwickeln ?

wakeme · 12. Dezember 2020

Ich habe eine Frage zu HTML5. Ich habe hier <section> für den Contentbereich verwendet. Jetzt bräuchte ich darin Boxen für die News. Kann ich <section> häufiger verwenden also schachteln nur mit unterschiedlicher Klasse oder muss ich hier <article> verwenden ?

Code

<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png">
</div>
</header>
<main>
<section class="content"></section>
<aside class="sidebar"></aside>
</main>
<footer></footer>

</div>

Alles anzeigen

Code

main {
    display: flex;
    flex-direction: row;
    margin-top: 8px;
    margin-right: 20px;
    margin-left: 20px;
}

.content {
    flex: 3;
    margin-right: 12px;
    background-color: #000;
}

.sidebar {
    flex: 1;
    background-color: #000;
    margin-bottom: 20px;
}

Alles anzeigen

wakeme · 7. Dezember 2020

Dankeschön basti1012

wakeme · 30. November 2020

Danke, das ist mir nicht aufgefallen

wakeme · 30. November 2020

Kann ich Grid&Flex beliebig kombinieren ?

Und bei den Media queries main auf width: auto; und grid-template-columns: 1fr; damit auf dem mobilen Gerät nur eine Box erscheint ?

Was sagst du zum restlichem Code ?

html-seminar.de/woltlab/attachment/2678/

Es kommen drei Fehlermeldungen auf welche ich nicht nachvollziehen kann.

wakeme · 30. November 2020

Ich habe mich bei selfhtml eingelesen und mein derzeitiges Projekt überarbeitet.

Wenn irgendwas unsauber ist wäre es schön, wenn man mich darauf hinweist damit ich daraus lernen kann.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>pp</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="js/menu.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="brand-title">pp</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
</ul>
</div>
</nav>
<header>
<h1 class="header_title">p&nbsp;blog</h1>
</header>
<main>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<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.</p>
<a class="button_1" href="#">---</a>
</section>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<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.</p>
<a class="button_1" href="#">---</a>
</section>
<section class="news">
<h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
<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.</p>
<a class="button_1" href="#">---</a>
</section>
</main>
<footer>
</footer>
</body>
</html>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');

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

body {
background-color: #fafafa;
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header footer {
flex: none;
}

header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 250px;
opacity: 0.85;
}

.header_title {
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
padding: 4.813rem;
}

main {
margin: 0 auto;
max-width: 950px;
flex: 1;
}

.news {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
text-align: center;
}

.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}

.button_1:hover {
background-color: #fafafa;
}

aside {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.box {
flex-basis: 35%;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
padding: 15px;
border-radius: 3px;
}

.break {
flex-basis: 100%;
height: 0;
}

footer {
margin-top: 100px;
background-color: #1a1a1a;
}


/*nav*/

.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
color: #444;
}

.brand-title {
font-size: 1.5rem;
margin: .7rem;
font-family: 'Covered By Your Grace', cursive;
}

.navbar-links {
height: 100%;
}

.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}

.navbar-links li {
list-style: none;
}

.navbar-links li a {
display: block;
text-decoration: none;
padding: 1rem;
font-size: 1.125rem;
font-family: 'Covered By Your Grace', cursive;
color: #444;
}

.navbar-links a:hover {
background-color: #1a1a1a;
color: #ffffff;
}

.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}

.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #444;
}

/*nav*/



/*responsive Elemente*/

@media only screen and (max-width: 800px) {
main {
margin-right: 20px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

.news {
margin-top: 20px;
}

.navbar {
flex-direction: column;
align-items: flex-start;
}

.toggle-button {
display: flex;
}

.navbar-links {
display: none;
width: 100%;
}

.navbar-links ul {
width: 100%;
flex-direction: column;
}

.navbar-links ul li {
text-align: center;
}

.navbar-links ul li a {
padding: .5rem 1rem;
}

.navbar-links.active {
display: flex;
}


}

/*responsive Elemente*/



/*Schriften,Überschriften&Links*/
h1 {
font: 18px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
margin: 10px;
}

a {
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
text-decoration: none;
}

/*Schriften,Überschriften&Links*/

Alles anzeigen

Das zweite Problem ist weiterhin vorhanden. Diese zweite Datei ist eine Unterseite. Ich möchte, dass drei Boxen die volle Breite von main ausnutzen und der Rest in die zweite Zeile umbricht. Das funktioniert nicht so richtig.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>pp</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="js/menu.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="brand-title">pp</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#">item</a><li>
<li><a href="#">ite</a><li>
<li><a href="#">item</a><li>
<li><a href="#">item</a><li>
</ul>
</div>
</nav>
<header>
<h1 class="header_title">pathos&nbsp;blog</h1>
</header>
<main>
<aside>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
<div class="break"></div>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
<div class="break"></div>
<section class="box"></section>
<section class="box"></section>
<section class="box"></section>
</aside>
</main>
<footer>
</footer>
</body>
</html>

Alles anzeigen

wakeme · 29. November 2020

Dankeschön

wakeme · 29. November 2020

Hast du ein Beispiel ?

wakeme · 29. November 2020

Dann konkreter. Die Frage war ja jetzt nicht spezifisch auf das obige bezogen. Ich zentriere den Hauptcontainer/Wrapper einer Seite immer mit margin: 0 auto;.

Ich wollte eigentlich nur wissen ob das in einem Flexlayout so zulässig ist. Das ist Alles.

Justify-content: center;&align-items: center; scheinen bei diesem Aufbau nicht zu funktionieren. Ist das überhaupt sinnvoll hierbei darauf zurückzugreifen ?

Code

<div id="wrapper">
<main>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
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.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
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.
</div>
<a href="#" class="button_1">---</a>
</div>

<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
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.
</div>
<a href="#" class="button_1">---</a>
</div>
</main>
</div>

Alles anzeigen

Code

#wrapper {
min-height: 100vh;
}

.main {
max-width: 950px;
flex:1;
margin: 0 auto;
display: flex;
flex-direction: column;
}

.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
}

.news_box_title {
margin: 10px;
text-align: center;
}
.news_box_content {
text-align: center;
}
.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}

.button_1:hover {
background-color: #fafafa;
}

Alles anzeigen

wakeme · 29. November 2020

Danke, das übernehme ich mit padding um es vertikal mittig auszurichten

Interessehalber warum funktioniert das justify-content nicht ? Was ist richtig zum zentrieren eines wrappers margin: 0 auto; oder justify-content: center; ?

wakeme · 29. November 2020

Nein so

</div></header>

wakeme · 29. November 2020

Ich wollte einen Überschrift in dem Header zentrieren. Geht das auch mit justify-content: center; ?

Komischerweise wird das ignoriert.

Code

header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
position: relative;
}

.header_title {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translateX(-50%) translateY(-50%);
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}

Alles anzeigen

Code

header {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
display: flex;
}

.header_title {
justify-content: center;
align-items: center;
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}

Alles anzeigen

Darüber hinaus möchte ich möchte ich mehrere horizontale ausgerichtete Boxen darstellen.

Maximal drei in einer Reihe, sodass der Rest automatisch in die nächste Zeile umbricht. Das Problem ist nur, dass flex: 1; oder auch andere Breitenangaben ignoriert werden. Stattdessen werden alle Boxen in einer Reihe platziert unabhängig von flex-wrap: wrap. Ich habe einen Workaround mit einen Break gefunden, welcher soweit funktioniert. Ist das so korrekt oder gibt es eine andere Lösung ? Warum werden die Breitenangaben ignoriert ?

Code

<div id="footer_wrapper">
<main class="main2">
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="break"></div> <!-- break -->
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="break"></div> <!-- break -->
<div class="rowbox"></div>
<div class="rowbox"></div>
<div class="rowbox"></div>
</main>
</div>

#footer_wrapper {
min-height: 100vh;
}


.main {
max-width: 950px;
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}


.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
}

.news_box_title {
margin: 10px;
text-align: center;
}
.news_box_content {
text-align: center;
}

.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}

.button_1:hover {
background-color: #fafafa;
}


.rowbox {
flex: 1;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
padding: 15px;
border-radius: 3px;
}

.break {
flex-basis: 100%;
height: 0;
}

Alles anzeigen

wakeme · 29. November 2020

Okay, dann hat sich das geklärt.

wakeme · 26. November 2020

Der Kreis schließt sich langsam. Ich lerne von Design zu Design mehr.

Es gibt aber noch einige Sachen welche ich nicht verstehe.

overflow&owerflow:hidden;

position: absolut&relativ;

display: inline;&display: block;

Vor Allem warum reicht margin: 0 auto; oftmals nicht aus um etwas mittig auszurichten warum muss ich auf absolut&relativ zurückgreifen. Ich weiß wie es geht aber nicht warum und die Erklärungen im Netz kann ich nicht nachvollziehen.

Was mir auch noch schwerfällt sind responsive Navigationen. Wäre jemand so lieb mir den Code zu erklären ? Hoffentlich kann ich dann auch das Thema abschließen.

Code

<nav class="navbar">
        <div class="brand-title">Brand Name</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>

Alles anzeigen

Code

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}

.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}

Alles anzeigen

Code

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

wakeme · 26. November 2020

Das Design ist komplett gesprengt ?

Komisch im IE geht es. FF macht ansonsten keinerlei Probleme mit der Darstellung.

Beiträge von wakeme

Directory Lister, Apache mit eigenem CSS

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

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

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

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

PHP-Programmierer bei SGB

section oder article

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

display:flex; als Universalselektor

overlfow,position,display & nav

Navigation