nicht angemeldet
Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}
Guck mal was er jetzt macht. KOMISCH!!!
B) Du meinst:
<ul class="tree"> <li class="main-treeitem">
Das könne weg?
Hmmm ja, wäre wirklich einfacher, müßte nur die einzelnen Pfade zu den Bottons und den li`s neu ausknobeln. Wäre das wirklich wichtig, einfacher , schlanker ...
Zuallererst hatte ich es folgendermassen: `<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav"> <button aria-expanded=""> </button> <ul>
<li>
<a class="a-link" href="http://tassilosturm.de/aktuell.html">Aktuelles</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">aktuelle Ausstellungen</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Blog</a>
</div>
</li>
<li>
<a class="a-link" href="http://tassilosturm.de/arbeiten.html">Arbeiten</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Drifters, 2012</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Waldfrieden, 2006</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit03.html">Eremitage für Paris, 2006</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit04.html">Der Bau, 2007</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit05.html">Utopia Planetia, 2006</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit06.html">Kellerräume, 2012-15</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit07.html">Bunker / Maquetten, 2012-16</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit08.html">Take Shelter, 2015</a>
</div>
</li>
<li>
<a class="a-link" href="http://tassilosturm.de/cv.html">Curriculum Vitae</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Lebenslauf</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Studium & Stipendien</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Publikationen (Auswahl)</a>
</div>
</li>
<li>
<a class="a-link" href="http://tassilosturm.de/texte.html">Texte</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Bettina Mühlbauer</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Friederike Fast</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Wolfgang Türk</a>
</div>
</li>
<li>
<a class="a-link" href="http://tassilosturm.de/ausstellungen.html">Ausstellungen</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Einzelausstellungen</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Gruppenausstellungen</a>
</div>
</li>
<li>
<a class="a-link" href="http://tassilosturm.de/impressum.html">Impressum</a>
<button aria-expanded=""> </button>
<div class=nav-group>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a>
<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz & Urheberrecht</a>
</div>
</li>
</ul>
</nav>
<main>
<figure>
<img class="imgA" src="img/indexseite/wohnsarg_bearbeitet_web.jpg" alt="Reiseesel" />
<figcaption>Ich ziehe um!</figcaption>
</figure>
</main>
</div>`
mein CSS /* nav specific */ nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; }
.nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;} /* box-shadow: 0 0 0.2em 0 #666; */
.nav-group a{display:block;}
nav button:hover, nav button:focus {
background: hsla(0, 100%, 100%, 0.8);
}
button[aria-expanded] { /* NOTWENDIG? */
font-size: 13px;
}
/* nav specific */
nav > button {margin-left:auto; display: block; width:3.1rem; }
nav > ul,
nav > ul > li { margin:0; padding:0; display:block; }
nav > ul > li { display:flex; flex-flow:row wrap; }
nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); }
nav > ul > li > :nth-child(2){display:block; width:3.1rem; }
nav > ul > li > :nth-child(3){display:block; width:100%; }
.nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;} /* box-shadow: 0 0 0.2em 0 #666; */
.nav-group a{display:block;}
nav button:hover, nav button:focus {
background: hsla(0, 100%, 100%, 0.8);
}
button[aria-expanded] { /* NOTWENDIG? */
font-size: 13px;
}
/* Buttons mit Icons anreichern */
[aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
[aria-expanded]::after { content: " "; white-space: normal; }
[aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
[aria-expanded="false"]::after { content: " "; }
[aria-expanded="false"] + * { display:none !important;}
/*media queries*/
@media screen and (min-width: 1440px) {
#main-nav {
flex-grow: auto;
flex-shrink: auto;
flex-basis: 24em;
align-self: flex-start;
}
main {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 14em - 24em);
}
nav > [aria-expanded="false"]{ display:none; }
nav > [aria-expanded="false"] + * {display:block !important; }
}
@media screen and (min-width: 850px) and (max-width: 1440px) {
.contentspan {
margin: 0 1.2em 0 1.2em;
}
main {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* flex: 1 1 auto; */
}
#main-nav {
align-self: flex-start;
}
div.contentspan nav > ul {
display: block !important;
margin-left: -26em;
transition: margin-left 0.15s;
width: 22em;
}
nav button[aria-expanded="true"]+ul {
margin-left: 0;
margin-top: 1em;
}
nav button[aria-expanded="false"]+ul > * {
display: none;
}
}
@media screen and (max-width: 850px) {
.contentspan {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex-grow: auto;
flex-shrink: auto;
flex-basis: auto;
/* flex: 0 0 100%; */
}
.fav {
margin: 0;
padding: 0;
}
.headingspan {
align-self: flex-start;
}
header {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
}
header img {
height: 110px;
}
#main-nav {
flex-grow: auto;
flex-shrink: auto;
flex-basis: auto;
/* flex: 1 1 100%; */
}
nav button[aria-expanded="true"]+ul {
margin: 1em 0 0 0;
padding: 0;
width: 100%;
}
}
Rolf B
MudGuard
Matthias Apsel
Gunnar Bittersmann