nicht angemeldet
Henry
Henry
Rolf B
Rolf B
Matthias Apsel
Der Martin
Henry
Der Martin
Matthias Apsel
Henry
Rolf B
Gunnar Bittersmann
MudGuard
Jetzt hab ich schon alle möglichen Varianten des Footers probiert zum erstellen. Nichts hat so funktioniert wie ich es wollte. Kurz erklärt. Der Footer soll den gleichen Background wie die Navigation haben, über die ganze Breite gehen, das Copyright, Impressum und den Datenschutz beinhalten. ich dachte an Copy links und die anderen zwei rechts und beide mit der gleichen Schriftfarbe. Ich hoffe mir kann da wer helfen. Hier sind meine Codes.
<!DOCTYPE html>
<html lang="de">
<head>
<title>BIRD VIEW Foto & Film</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="author" content="Michael Dorner">
<link rel="stylesheet" media="screen" href="css/reset.css">
<link rel="stylesheet" media="screen" href="css/common.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon/2137Logo-für-Luftaufnahmen-neu_1.ico">
<script src="js/jquery.js"></script>
<script src="js/gallery.js"></script>
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
<!--TOPNAVIGATION-ANFANG-->
<div class="header">
<h2 class="logo">BIRD VIEW || Luftaufnahmen Foto & Film</h2>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-ellipsis-h"></i>
</label>
<ul class="menu">
<a href="index.html">Home</a>
<a href="#">Über mich</a>
<a href="fotos.html">Fotos</a>
<a href="#">Panoramen</a>
<a href="#">Videos</a>
<a href="#">Kontakt</a>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times-circle times"></i>
</label>
</ul>
</div>
<!--HEADERBILD-ANFANG-->
<div class="content">
<center>
<img src="images/7.png" alt="Bild">
</center>
<!--HEADERBILD-ENDE-->
<p>
Die Standardpassage von Lorem Ipsum, die seit dem 15. Jahrhundert verwendet wird
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporäre incididunt ut labore et dolore magna aliqua velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Abschnitt 1.10.32 von "de Finibus Bonorum et Malorum", verfasst von Cicero im Jahr 45 v
"Ist der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler festgestellt, wurde der Fehler festgestellt, wurde der Fehler aufgetreten, wurde der Fehler aufgetreten, wurde der Fehler aufgetreten Die Konsequenz ist, dass die Anzahl der Abläufe und die Anzahl der Abläufe, die Anzahl der Abläufe, die Anzahl der Abläufe und die Anzahl der Abläufe, die Anzahl der Abläufe und die Anzahl der Abläufe in der letzten Minute geändert werden müssen Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? "
1914 Übersetzung von H. Rackham
außer um einen Vorteil daraus zu ziehen? Aber wer hat das Recht, einen Mann zu bemängeln, der sich für ein Vergnügen entscheidet, das keine ärgerlichen Konsequenzen hat, oder der einen Schmerz vermeidet, der kein daraus resultierendes Vergnügen hervorruft? "
Abschnitt 1.10.33 von "de Finibus Bonorum et Malorum", verfasst von Cicero im Jahr 45 v
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
1914 Übersetzung von H. Rackham
"Auf der anderen Seite prangern wir mit aufrichtiger Empörung an und lehnen Männer ab, die durch die Reize des Vergnügens des Augenblicks so verführt und demoralisiert werden, dass sie den Schmerz und die Schwierigkeiten, die dazu führen werden, nicht vorhersehen können Die Schuld liegt bei denen, die ihre Pflicht durch Willensschwäche nicht erfüllen, was das gleiche ist wie das Zurückschrecken vor Mühe und Schmerz. Diese Fälle sind ganz einfach und leicht zu unterscheiden. In einer freien Stunde, wenn unsere Entscheidungsgewalt ungehindert ist und Wenn uns nichts daran hindert, das zu tun, was wir am liebsten tun, ist jedes Vergnügen zu begrüßen und jeder Schmerz zu vermeiden, aber unter bestimmten Umständen und aufgrund von Pflichten oder Pflichten des Geschäfts wird es häufig vorkommen, dass Vergnügen abgelehnt werden müssen und Ärgernisse akzeptiert.Der Weise hält daher in diesen Dingen immer an diesem Selektionsprinzip fest: Er lehnt Vergnügen ab, um andere größere Vergnügen zu sichern, oder er erträgt Schmerzen, um schlimmere Schmerzen zu vermeiden. "
</p>
<!--TOPNAVIGATION-ENDE-->
<!--FOOTER-ANFANG-->
<footer>
<ul>
<li>© 2019 Michael Dorner</li>
<li>Datenschutz</li>
<li>Impressum</li>
</ul>
</footer>
<!--FOOTER-ENDE-->
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.header{
height: 100px;
background-color: #2c3e50;
border-radius: 20px;
padding: 0 20px;
color: #fff;
}
.logo{
line-height: 100px;
float: left;
}
.menu{
float: right;
line-height: 100px;
}
.menu a{
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn, .hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover{
color: #2980b9;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.content{
padding: 0 20px;
}
.content img{
width: 100%;
max-width: 700px;
margin: 20px 0;
}
.content p{
text-align: justify;
}
@media screen and (max-width:845px){
.show-menu-btn, .hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background-color: #2c3e50;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
}
div#frame {width:100%; min-width:320px; margin:0 auto;}
@media only screen and (min-width:1200px)
{
div#frame {width:1200px;}
}
/* GALLERY */
div.gallery {
width:100%;
min-width:320px;
float:left;
background:#708090;
margin-bottom: 20px;}
div.gallery > div{
width:50%;
margin:0 0 1px;
float:left; background:#363636;
border-right:1px solid #708090;
box-sizing:border-box;
}
div.gallery > div > h1{
color:#ffffff;
font:0.8em/30px arial, sans-serif;
text-align:center;
cursor: default;
}
div.gallery > div > a > img{
max-width:160px;
height:120px;
margin:0 auto 20px;
padding:0 5px;
box-sizing:border-box;
display:block;
}
div.gallery > div.eol{
border:0;
}
div#background{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:#000000;
cursor:default;
z-index:9999;
}
div#background > div.content{
width:inherit;
height:50px;
position:absolute;
color:#ffffff;
background:#1d1d1d;
font:0.9em/50px arial, sans-serif;
text-align:center;
box-sizing:border-box;
z-index:10000;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
div#background > div.content.top{
top:0;
border-bottom:1px solid #708090;
}
div#background > div.content.bottom{
bottom:0;
border-top:1px solid #708090;
}
div#background > div.close{
width:50px;
height:50px;
position:absolute;
top:0; right:0;
background: url("images/close.gif");
cursor: default;
z-index:10000;
}
div#background > div.loading{
width:50px;
height:50px;
position:fixed;
background: transparent;
z-index:10000;
}
div#background > div.next, div#background > div.previous{
width:50%;
height:100%;
position:absolute;
top:0; display:block;
cursor:pointer;
}
div#background > div.next{
right:0;
background: url("images/next.gif")
no-repeat 100% 50%;
}
div#background > div.previous{
left:0;
background: url("images/previous.gif")
no-repeat 0 50%;
}
div#foreground{
position:fixed;
border:1px solid #708090;
box-sizing:border-box;
overflow:hidden;
display:none;
cursor:default;
z-index:10000;
}
div#foreground > div.image{
position:absolute;
top:0; left:0;
}
@media only screen and (min-width:768px)
{
div.gallery > div {width:33.33%;}
div.gallery > div > h1 {font-size:0.9em;}
div#background > div.content {font-size:1.1em;}
}
@media only screen and (min-width:1024px)
{
div.gallery > div {width:25%;}
div.gallery > div > h1 {font-size:1em;}
div#background > div.content {font-size:1.3em;}
}
@media only screen and (min-width:1200px)
{
div.gallery > div {width:20%;}
div.gallery > div > h1 {font-size:1.1em;}
div#background > div.content {font-size:1.5em;}
}
/* FOOTER */
footer{
height: 50px;
display: block;
background: #2c3e50;
text-align: center;
color: #fff;
margin-top: 20px;
border-radius: 20px;
}
footer ul{
display: block;
width: 100%;
max-width: 1080px;
text-align: center;
margin: 0px auto;
}
footer ul li{
display: inline;
font-size: 1.2em;
line-height: 2.8em;
font-weight: bold;
padding: 0em 0.625em 0em 0.625em;
}
footer ul li a{
color: #E2DBDB;
}
/* FOOTER-ENDE */
Hallo Michael53,
Der Footer soll den gleichen Background wie die Navigation haben, über die ganze Breite gehen, das Copyright, Impressum und den Datenschutz beinhalten. ich dachte an Copy links und die anderen zwei rechts und beide mit der gleichen Schriftfarbe. Ich hoffe mir kann da wer helfen.
Das funktioniert auch, zumindest wenn ich deinen Quelltext teste ohne die JS und anderen externen Dateien. Folglich muss es wohl daran liegen.
Hier sind meine Codes.
Längerer Code ist besser Online (ähm... Online ist ja auch hier, na ja weisst schon extern halt 😉 ) aufgehoben. Wenn Du nicht weisst wo, zeige ich das gerne indem ich das mit deiner Einwilligung hochlade.
Gruss
Henry
Hallo Henry.
Klar darfst du das machen für mich. Ich hab halt mal so versucht.
LG Michael
Hallo Michael53,
Klar darfst du das machen für mich. Ich hab halt mal so versucht.
Viele hier nutzen codepen oder fiddle, ich mag w3schools, alle haben Vor- und Nachteile.
https://www.w3schools.com/code/tryit.asp?filename=G90NIS1HLWJK
Dort auf RUN klicken und mittleren Scrollbalken nach links ziehen.
Gruss
Henry
Hallo.
Soweit funktioniert es ja, aber wenn man es kleiner macht, verschwindet der Datenschutz und das Impressum.
LG Michael
Hallo Michael53,
verschwindet der Datenschutz und das Impressum.
Das ist nicht das einzige, was verschwindet. Das Menü verschwindet auch.
Responsive Seiten bauen zu wollen und gleichzeitig fixe Höheangaben zu setzen, das passt nicht gut zusammen. Im Footer kannst Du Dich retten, indem Du die height-Angabe einfach weglässt. Wird der Footer zu schmal, brechen die Datenschutz und Impressum-Links in die nächste Zeile um. Mit fester height sind sie dann unsichtbar. Ohne height wird der Footer einfach höher.
Im Header reicht das nicht, da hat Du mit float herumgespielt um h2 und Menü links und rechts auszurichten. Gefloatete Elemente sind nicht mehr im normalen Elementfluss und haben deswegen keinen Einfluss mehr auf die Höhe des Headers - darum hat der Header ohne height-Angabe die Höhe 0 und ist unsichtbar.
Hier musst Du entweder mit Media-Queries dafür sorgen, dass das Menü anders aussieht sobald der Header zu schmal wird. Du solltest Dich aber vor allem mit Flexbox beschäftigen, damit kannst Du das, was früher float-Fummeleien benötigte, wesentlich einfacher lösen.
Eins funktioniert jedenfalls nie: Cargo Cult Programming, bei dem man einfach Dinge aus Vorbildern übernimmt, ohne sie verstanden zu haben.
Rolf
Du die height-Angabe einfach weglässt. Wird der Footer zu schmal, brechen die Datenschutz und Impressum-Links in die nächste Zeile um.
Hallo Rolf.
Das mit dem Footer habe ich jetzt mal probiert. Funktioniert einwandfrei. Jetzt fehlt mir eigentlich noch das Problem mit der Navigationsleiste.
LG Michael
Hallo Michael53,
naja, einwandfrei ist anders.
Header und Footer haben unterschiedliche Randabstände. Grund ist, dass der Footer im Content-Bereich ist, der Header nicht.
div class="header" möchte viel lieber ein header Element sein.
div class="content" möchte viel lieber ein main Element sein.
Dein (c) Eintrag im Footer mag nicht in die Liste. Eine Liste zählt gleichartige Elemente auf. Dein (c) gehört nicht dazu.
CSS
footer {
background: #2c3e50;
text-align: center;
color: #fff;
margin-top: 1em;
padding: 0.8em;
border-radius: 1em;
}
footer span, footer ul {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
margin: 0.2em;
}
footer ul {
text-align: center;
}
footer ul li {
display: inline;
padding: 0em 0.5em;
}
footer ul li a{
color: #E2DBDB;
}~~~
HTML
~~~html
<footer>
<span>© 2019 Michael Dorner</span>
<ul>
<li>Datenschutz</li>
<li>Impressum</li>
</ul>
</footer>
Dadurch, dass die Linkliste ein eigenes Element ist, rückt sie bei Platzmangel geschlossen unter den (c) Eintrag. Das sieht besser aus. Die 0.8em Padding des footer-Elements und die 0.2em Margin von span und ul addieren sich außen zu 1em Abstand. Bricht der Footer um, sind es zwischen den Zeilen 0.4em Abstand. Durch verändern dieser beiden Werte kannst Du den Abstand zum Footer-Rand und zwischen den beiden Zeilen justieren.
Die max-width Einträge habe ich weggenommen. Du solltest besser dem body Element ein max-width geben.
Der Header ist nicht so einfach. Da kommen noch deine Media-Breaks hinzu, die einen Umbruch eigentlich unschön machen. Du müsstest erstmal sagen, was Du willst. Soll das Menü sofort zum Menu-Button kollabieren, wenn es in der Breite nicht mehr passt? Oder willst Du einen Zwischenzustand, wo h2 und Menü untereinander stehen?
Rolf
Hallo Rolf B,
<footer> <span>© 2019 Michael Dorner</span>
Es gibt keine Notwendigkeit © zu schreiben, © existiert.
Bis demnächst
Matthias
Hallo,
Es gibt keine Notwendigkeit
©zu schreiben, © existiert.
und davon abgesehen gibt es sowas wie ein Copyright im deutschen Rechtssystem nicht, das ist eine Sache des US-Rechtssystems.
Das Urheberrecht hat man bei uns automatisch, auch wenn man es nicht explizit beansprucht.
Ciao,
Martin
Copyright im deutschen Rechtssystem
Hi.
Bei uns in Österreich ist das etwas anders.
LG Michael
Hallo Der,
Das Urheberrecht hat man bei uns automatisch, auch wenn man es nicht explizit beansprucht.
Wenn das denn immer so einfach wäre… Seit Jahren suche ich eine Antwort auf folgende Frage, die auch Juristen höchst unterschiedlich behandeln:
Du planst eine Fotosession, richtest alles her und letztendlich drückt ein ahnungloser Passant auf deinen Wunsch hin den Auslöser deiener Kamera. Wer genießt hier streng rechtlich das Urheberrecht?
Gruss
Henry
n'Abend,
Du planst eine Fotosession, richtest alles her und letztendlich drückt ein ahnungloser Passant auf deinen Wunsch hin den Auslöser deiener Kamera. Wer genießt hier streng rechtlich das Urheberrecht?
IANAL, aber nach meinem Rechtsverständnis habe ich dann das Urheberrecht. Ich habe das ganze Szenario entworfen und geplant, ich habe es arrangiert - wer dann tatsächlich auf meine Anweisung den Auslöser drückt, ist meines Erachtens irrelevant.
Ich sehe da Parallelen zu der Situation, dass ein Angestellter im Auftrag seines Arbeitgebers ein bestimmtes Werk erstellt (z.B. eine Software). Dann ist auch der Arbeitgeber, auf dessen Geheiß das passierte, der Urheber im Sinne des Gesetzes.
Ähnlich bei Diplom- oder Doktorarbeiten: Da gilt der betreuende Professor als Urheber, selbst wenn der nicht weiter getan hat als hin und wieder zu meckern und schließlich sein Placet zu geben. Gerecht ist das IMO nicht.
So long,
Martin
Hallo Der Martin,
sehe ich auch so.
Bis demnächst
Matthias
Hallo Der,
IANAL, aber nach meinem Rechtsverständnis habe ich dann das Urheberrecht. Ich habe das ganze Szenario entworfen und geplant, ich habe es arrangiert -
Ja, gefühlt sehe ich das auch so…
wer dann tatsächlich auf meine Anweisung den Auslöser drückt, ist meines Erachtens irrelevant.
rechtlich ist das u.U. aber schon relevant:
Ich sehe da Parallelen zu der Situation, dass ein Angestellter im Auftrag seines Arbeitgebers ein bestimmtes Werk erstellt (z.B. eine Software). Dann ist auch der Arbeitgeber, auf dessen Geheiß das passierte, der Urheber im Sinne des Gesetzes.
Könnte man bei dem Beispiel so sehen, mir wurde bei Projekten stets nahegelegt einen Vertrag dahin gehend aufzusetzen und bestenfalls, falls möglich, die ausführende Person als Mitarbeiter einzustellen.
Ähnlich bei Diplom- oder Doktorarbeiten: Da gilt der betreuende Professor als Urheber, selbst wenn der nicht weiter getan hat als hin und wieder zu meckern und schließlich sein Placet zu geben. Gerecht ist das IMO nicht.
Auch hier, sollte die Rechte vorher schriftlich genau fixiert werden, wobei dann immer noch das Problem besteht, dass das eigentliche Urheberrecht nicht übertragbar ist.
Gruss
Henry
Hallo Leute.
jetzt mal abgesehen vom Rechtlichen oder Copyright.
Wo kann ich die folgende CSS in meiner einfügen, bzw. was muss ich da dann rauslöschen?
.visually-hidden
{
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
white-space: nowrap;
}
Hallo Michael53,
die Frage gehört zwar in einen anderen Teil des Threads (wo Du sie auch schon mal gestellt hattest, ohne dass Gunnar sich zu einer Antwort bequemt hat), aber ich antworte trotzdem mal.
CSS Regeln sind voneinander "ziemlich" unabhängig. Darum kannst Du das fast überall hinschreiben.
"Fast" bedeutet:
"Ziemlich" bedeutet:
Bitte beachte die Links. Da gibt's was zu lernen!
Rolf
@@Michael53
Dass du deine problematische Seite verlinken oder auf einer Plattform wie bspw. CodePen zugänglich machen solltest, damit man sich das ohne Copy-and-paste-Orgien ansehen kann, erwähnte Henry schon.
Mir fiel dein Menü ins Auge, das nicht funktioniert:
<input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-ellipsis-h"></i> </label> <ul class="menu"> <a href="index.html">Home</a> <a href="#">Über mich</a> <a href="fotos.html">Fotos</a> <a href="#">Panoramen</a> <a href="#">Videos</a> <a href="#">Kontakt</a> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times-circle times"></i> </label> </ul>
Falsch daran:
Ein input-Element sollte nicht mehrere zugehörige labels haben.
Das input-Element hat zwar label, aber keine Beschriftung. Kein Text, den ein Screenreader vorlesen könnte. Auch wenn das Stylesheet nicht greift, ist nichts da. Da sollte sowas wie „Menü öffnen/schließen“ stehen, was visuell versteckt werden kann.
Du missbrauchst eine Checkbox (Eingabeelement) für eine Aktion. CSS-only ist für interaktive Elemente kein erstrebenswertes Ziel. Weg mit dem Checkbox-Hack; verwende einen button! Die Sichtbarkeit wird mit JavaScript umgeschaltet – und auch die notwendigen ARIA-Attribute.
Ich hab das in diesem Beispiel mal vorgemacht. Etwas Beschreibung in diesem Posting – aber nicht das dort vorgestellte Vorgängerbeispiel verwenden, denn:
Menü und Öffnen/Schließen-Button gehören in in nav-Element, s.a. diesen Thread. Und natürlich Menus & Menu Buttons auf Inclusive Design.
Iconfonts sind keine gute Idee. Wirklich nicht. Verwende SVG – Font Awesome stellt die zur Verfügung. Siehe Tutorial Teil 1 und insbesondere Teil 2.
LLAP 🖖
Hallo Gunnar.
Danke für deine Infos. Jetzt bin ich etwas überfordert. Ich bin ja noch kein Profi in diesen Dingen. Dieses Navigationsmenü hab ich von einem Video nachgebaut und es funktioniert auch so wie es soll. Dann versteh ich das mit den label nicht. Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann. Ich hab ja auch schon YouTube durchgekaut, da sind aber eher uralte Videos drinnen und nichts aktuelles, was man verwenden könnte.
LG Michael
@@Michael53
Dieses Navigationsmenü hab ich von einem Video nachgebaut
Bau es lieber von einem Tutorial nach, das ich zu meinem verlinkten Beispiel geschrieben habe. Allerdings musst du dazu in die Zukunft reisen – ich hoffe, in nicht allzu ferne. 😉
und es funktioniert auch so wie es soll.
Für dich mag es das (gegenwärtig noch) tun. Für andere – insb. Nutzer, die auf Screenreader angewiesen sind – funktioniert es nicht. Die wissen ja nichts von dem Font-Awesome-Icon, und ein entsprechender Text fehlt. Außerdem wird die Schaltfläche nicht als Button, sondern als Checkbox angesagt, was zu Verwirrung führen dürfte.
Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann.
So wie in meinem gezeigten Beispiel. Bei dir wäre das so:
<nav>
<button>
<i class="fas fa-ellipsis-h"></i>
<span class="visually-hidden">Menü öffnen/schließen</span>
</button>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="#">Panoramen</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
(Die fehlenden li hab ich korrigiert, die Verwendung des Iconfonts nicht.)
Das JavaScript solltest du von mir übernehmen können. Die Stile für .visually-hidden (Element wird nicht visuell angezeigt, aber vom Screenreader vorgelesen) findest du auch in jenem Pen:
.visually-hidden
{
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
white-space: nowrap;
}
Statt „Menü öffnen/schließen“ könnte auch einfach nur „Menü“ reichen. Wenn du zwei getrennte Buttons „Menü öffnen“ und „Menü schließen“ haben willst, brauchst du ein zusätzliches div, in welches du die ul und den Schließen-Button hineinpackt, und müsstest das JavaScript evtl. etwas anpassen.
Wenn du das Menü auch auf großen Viewport nicht ausklappen willst (warum eigentlich nicht?), die media queries weglassen.
LLAP 🖖
Das JavaScript solltest du von mir übernehmen können.
Wo füge ich dann die CSS ein?
LG Michael
Hi,
Mir fiel dein Menü ins Auge, das nicht funktioniert:
<input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-ellipsis-h"></i> </label> <ul class="menu"> <a href="index.html">Home</a> <a href="#">Über mich</a> <a href="fotos.html">Fotos</a> <a href="#">Panoramen</a> <a href="#">Videos</a> <a href="#">Kontakt</a> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times-circle times"></i> </label> </ul>Falsch daran:
hab ich da was übersehen oder Gunnar? Kinder von ul dürfen m.E. nur li-Elemente sein …
Oder ist das geändert worden?
cu,
Andreas a/k/a MudGuard
@@MudGuard
hab ich da was übersehen oder Gunnar?
Ich. (Also Gunnar 😉)
Kinder von ul dürfen m.E. nur li-Elemente sein …
Jetzt du.
Oder ist das geändert worden?
Ja. Auch script-supporting elements dürfen Kinder von ul sein. (Matthias verlinkte es schon.) a-Elemente gehören nicht dazu.
LLAP 🖖