CSS Flexbox

Das sieht allerdings schon wesentlich besser aus. Für den überschüssigen Platz unter der Nav habe ich keine Erklärung. Er verschwindet wenn ich entweder das Wrapping ausschalte:
Code: 
#flexbox {
    max-width: 60rem;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
}
oder die Breitenangabe für die a-Tags ausschalte:
Code: 
nav a:link {
    display: block;
    background-color: #000099;
    border-radius: 0.3rem;
    /* width: 50%; */
    font-size: 1rem;
    margin: 0.2rem;
    padding: 0.2rem;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}

Noch eine andere Frage, das ganze Layout soll "flüssig" sein.
Zum Vergrößern anklicken....
Darunter verstehe ich, dass der linke Container sich in der Größe anpasst und das aside rechts genau die Breite hat, die sein Inhalt braucht. Das kann man auch mit der Anweisung flex: 0 0 auto; für das aside und flex: 1; für main erreichen.
 
Ich habe nun das Wrapping ausgeschaltet, das klappt gut. In einem Beispiel hatten wir mit max-width: 60rem ein flüssiges Layout erzeugt. Ich habe es hier nun auch so gemacht (da ich das flex: 0 0 auto nicht kenne) und dem main-Element flex: 1 zugeordnet. Ist das richtig?

Laut Aufgabenstellung soll ich noch Klassen und kontextabhängige Selektoren nutzen. Da ich für p schon jeweils eine Klasse definiert habe, habe ich nun der Headline noch eine zugeordnet. Ich hatte es mit den Links versucht aber das hat mit dem Code unten nicht geklappt. Kann man Links überhaupt Klassen zuordnen?
Code: <li><a href="#" class="link">Link 1</a></li>
Zum Vergrößern anklicken....

Mich irritiert, dass das aside-Element in meiner Version um einiges schmaler und breiter ist als in der Vorgabe. Kann das an den Buttons liegen, die ich den Links zugewiesen habe?

HTML:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe195.css" rel="stylesheet">
</head>
<body>
<main>
<h1 class="headline">CSS Einsendeaufgabe</h1>
<p class="grosstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <em>eirmod tempor invidunt</em> 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>
<p class="kleintext">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 <em>sea takimata sanctus</em> est Lorem ipsum dolor sit amet.</p>
</main>
<aside id="flexbox">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<div>
</div>
</aside>
</body>
</html>
Zum Vergrößern anklicken....
CSS:
*{
margin: 0px;
}
body {
max-width: 60rem;
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
margin: 0 3.5rem 5rem 3.5rem;
display: flex;
}
main {
background: #009900;
border-left: 0.2rem solid #877D6C;
flex: 1;
}
aside {
width: 27%;
}
#flexbox {
display: flex;
flex-direction: column;
}
nav {
text-align: left;
background: #66B2FF;
}
div {
flex: 1;
background: #FFFF66;
}
h1 {
padding: 2rem 1rem 1rem 1rem;
}
.headline {
color: #003300;
font-style: italic;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0rem 1rem 0.5rem 1rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 1rem 1.5rem 1rem;
}
p em {
color: #66FF66;
text-transform: capitalize;
}
nav ul {
margin: 0;
padding: 0.5rem;
}
nav li {
margin: 0;
font-size: 100%;
list-style-type: none;
padding: 0.5rem;
color: #99CCFF;
font-style: normal;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 0.9rem;
margin: 0.2rem;
padding: 0.2rem;
color: #99CCFF;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
Zum Vergrößern anklicken....
 

Anhänge

  • Screenshot8.png
    Screenshot8.png
    417,5 KB · Aufrufe: 5
  • Screenshot7.png
    Screenshot7.png
    42,5 KB · Aufrufe: 5
Kann man Links überhaupt Klassen zuordnen?
Zum Vergrößern anklicken....
Selbstverständlich. Was hat denn genau nicht funktioniert? Mit "link" hast Du eine Klasse gewählt, die gleichzeitig als Pseudoklasse existiert. Das ist zwar valide, kann aber Verwirrung stiften. Ich würde es nicht tun.

Mich irritiert, dass das aside-Element in meiner Version um einiges schmaler und breiter ist als in der Vorgabe.
Zum Vergrößern anklicken....
Das verstehe ich nicht richtig, es kann doch nicht gleichzeitig schmaler und breiter sein. Oder bezieht sich eins auf die Höhe?

In einem Beispiel hatten wir mit max-width: 60rem ein flüssiges Layout erzeugt. Ich habe es hier nun auch so gemacht (da ich das flex: 0 0 auto nicht kenne) und dem main-Element flex: 1 zugeordnet. Ist das richtig?
Zum Vergrößern anklicken....
Ja, kann man wahrscheinlich machen. Mit "flüssig" meinst Du wahrscheinlich, dass sich die Breite verändert, wenn man das Browserfenster breiter oder schmaler macht? In dem speziellen Fall des aside halte ich das nicht für sinnvoll: Ist es schmaler als der Inhalt erfordert, wird es schlechter lesbar weil Zeilenumbrüche auftreten. Ist es breiter verschenkt man Platz.
 
Da hast Du natürlich Recht. Ich habe die Klasse nun anders genannt. Habe ihr eine andere Schriftfarbe und Grossbuchstaben zugewiesen. Die Schriftfarbe wird aber nicht ausgeführt. Kann es sein, dass die Klasse hier von dem "nav li" oder dem "nav a:link" overruled wird? Hatte es eigentlich so verstanden, dass Klassen ein größeres Gewicht haben!?

Genau, ich meinte die Höhe. Mein aside-Element ist schmaler und niedriger als das in der Vorgabe. Kann das an der Schriftgröße liegen? Die ist sicherlich nicht 1:1 identisch.

Ich habe nun die "max-widh: 60rem" so gelassen und dem main-Element "flex: 1" und dem aside-Element "flex: 0 0 27%" zugewiesen. Mit "flex:0 0 auto" hat's nicht funktioniert. Aber die Maße sind trotzdem wie oben beschrieben schmaler und niedriger.

HTML:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe200.css" rel="stylesheet">
</head>
<body>
<main>
<h1 class="headline">CSS Einsendeaufgabe</h1>
<p class="grosstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <em>eirmod tempor invidunt</em> 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>
<p class="kleintext">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 <em>sea takimata sanctus</em> est Lorem ipsum dolor sit amet.</p>
</main>
<aside id="flexbox">
<nav>
<ul>
<li><a href="#" class="variante1">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<div>
</div>
</aside>
</body>
</html>
Zum Vergrößern anklicken....
CSS:
*{
margin: 0px;
}
body {
max-width: 60rem;
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
margin: 0 3.5rem 5rem 3.5rem;
display: flex;
}
main {
background: #009900;
border-left: 0.2rem solid #877D6C;
flex: 1;
}
aside {
flex: 0 0 27%;
}
#flexbox {
display: flex;
flex-direction: column;
}
nav {
text-align: left;
background: #66B2FF;
}
div {
flex: 1;
background: #FFFF66;
}
h1 {
padding: 2rem 1rem 1rem 1rem;
}
.headline {
color: #003300;
font-style: italic;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0rem 1rem 0.5rem 1rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 1rem 1.5rem 1rem;
}
.variante1 {
color: #CC0066;
text-transform: uppercase;
}
p em {
color: #66FF66;
text-transform: capitalize;
}
nav ul {
margin: 0;
padding: 0.5rem;
}
nav li {
margin: 0;
font-size: 100%;
list-style-type: none;
padding: 0.5rem;
color: #99CCFF;
font-style: normal;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 0.9rem;
margin: 0.2rem;
padding: 0.2rem;
color: #99CCFF;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
Zum Vergrößern anklicken....
 
Kann es sein, dass die Klasse hier von dem "nav li" oder dem "nav a:link" overruled wird? Hatte es eigentlich so verstanden, dass Klassen ein größeres Gewicht haben!?
Zum Vergrößern anklicken....
Der HTML-Inspektor zeigt eindeutig, dass das der Fall ist: Schalte ich die blaue Farbe bei "nav a:link" aus wird die rote bei ".variante1" aktiv. Der Grund ist, dass "nav a:link" spezifischer ist: Es liefert nur a-Elemente, die in einem nav liegen während ".variante1" alle Elemente liefert, die diese Klasse haben, auch außerhalb von nav. Es trifft jedoch zu, dass Klassen ein höheres Gewicht haben als Tagnamen, IDs aber wiederum noch ein höheres, weil sie nur ein Element liefern und damit sehr spezifisch sind.

Was die Höhe des aside betrifft, wird diese ja indirekt durch die Breite des Browserfensters bestimmt: Ist diese und damit das main schmaler muss main in der Höhe wachsen damit der Text hinein passt. Möglicher Weise ist das eine Erklärung für die unterschiedliche Höhe?
 
Ok alles klar, das macht Sinn :)

Ich bin noch ein bisschen am rumbasteln. Habe grade mal die color bei nav a:link herausgenommen, um zu sehen, welche Schriftfarbe die beiden anderen Links nun haben. Müsste das nicht die Farbe von nav li sein, sprich weiß? Sie werden allerdings blau!? Woher kommt diese Farbe?

Habe im HTML-Inspektor diese Fehlermeldung gelesen: "Fehler beim Verarbeiten des Wertes für 'font'. Deklaration ignoriert." Ich kann sie mir aber nicht wirklich erklären :(

CSS:
*{
margin: 0px;
}
body {
max-width: 60rem;
font: 100%/1.3 Verdana, Geneva, sans-serif;
color: #000;
background: #ADA189;
margin: 0 3.5rem 5rem 3.5rem;
display: flex;
}
main {
background: #009900;
border-left: 0.2rem solid #877D6C;
flex: 1;
}
aside {
flex: 0 0 27%;
}
#flexbox {
display: flex;
flex-direction: column;
}
nav {
text-align: left;
background: #66B2FF;
}
div {
flex: 1;
background: #FFFF66;
}
h1 {
padding: 2rem 1rem 1rem 1rem;
}
.headline {
color: #003300;
font-style: italic;
text-transform: uppercase;
}
.grosstext {
font: Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
padding: 0rem 1rem 0.5rem 1rem;
}
.kleintext {
font: Verdana, Geneva, sans-serif;
font-size: 75%;
color: #000;
margin: 0;
padding: 0.5rem 1rem 1.5rem 1rem;
}
.variante1 {
color: #CC0066;
text-transform: uppercase;
}
p em {
color: #66FF66;
text-transform: capitalize;
}
nav ul {
margin: 0;
padding: 0.5rem;
}
nav li {
margin: 0;
font-size: 100%;
list-style-type: none;
padding: 0.5rem;
color: #FFF;
font-style: normal;
}
nav a:link {
display: block;
background-color: #000099;
border-radius: 0.3em;
width: 50%;
font-size: 0.9rem;
margin: 0.2rem;
padding: 0.2rem;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
Zum Vergrößern anklicken....
 
Habe im HTML-Inspektor diese Fehlermeldung gelesen: "Fehler beim Verarbeiten des Wertes für 'font'. Deklaration ignoriert." Ich kann sie mir aber nicht wirklich erklären
Zum Vergrößern anklicken....
Der Grund ist, dass font allein ein Sammelbegriff ist, bei dem man auch die Größe angeben muss. Du kannst natürlich auch die Schriftart allein angeben indem Du -family hinzu fügst:
font-family: Verdana, Geneva, sans-serif;
 
Habe grade mal die color bei nav a:link herausgenommen, um zu sehen, welche Schriftfarbe die beiden anderen Links nun haben. Müsste das nicht die Farbe von nav li sein, sprich weiß? Sie werden allerdings blau!? Woher kommt diese Farbe?
Zum Vergrößern anklicken....
Woher sie kommt, zeigt uns der HTML-Inspektor:
css-color.png

Sie wird im user-agent-stylesheet, wo Default-Eigenschaften fest gelegt werden, definiert und setzt sich durch. Ich habe mir nicht die Mühe gemacht, heraus zu finden wie die genauen Regeln bei vererbten Eigenschaften sind.
 
Super, danke dir. Eine Frage habe ich noch. Wenn ich einen der Links anklicke, verändert sich die Schriftfarbe von allen 3 Links. Kann man das so einstellen, dass sich nur der eine angeklickte Link verändert?

nav a:visited {
color: #0066CC;
}
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück