Anker + Scroll Bottons
einsiedler
Anker + Scroll Bottons
einsiedler
Gunnar BittersmannHallo liebe Forengemeinde,
Zur späten Stunde fehlt mir die nötige Konzentration, irgendwie fehlt mir die Logik
folgendes
#modul1:checked ~ #l3:after,
#modul3:checked ~ #l3:before,
#modul2:checked ~ #l2:before,
#modul2:checked ~ #l3:before,
#modul1:checked ~ #l2:before,
#modul1:checked ~ #l3:before,
#modul4:checked ~ #l2:before,
#modul5:checked ~ #l3:before
{
display:none;
}
in meinem script anzuwenden bzw. die richtige Reihenfolge in 5 Variationen zu finden sodass es stimmt..........
Sodass die Scroll-Bottons unten rechts funktionieren........
wer kann mir dabei helfen und hat die Musse????
DANKE!!!!!
Grüsse T.
Das script:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {
margin:0;
pading:0;
}
html , body {
height:100%;
overflow:hidden;
}
#home , #about , #news , #impressum , #links {
width:80%;
height:100%;
float:left;
left:0;
background:#add;
overflow:auto;
}
input {
z-index:1000;
height:39px;
opacity:0;
cursor:pointer;
}
label {
cursor:pointer;
}
label:before , label:after {
content:"<";
position:absolute;
bottom:10px;right:65px;
width:50px;
height:50px;
background:#ddd;
display:block;
line-height:50px;
text-align:center;
border-radius:50%;
z-index:1100;
}
label:after {
content:">";
bottom:10px;right:5px;
}
#modul1:checked ,
#modul2:checked ,
#modul3:checked ,
#modul4:checked ,
#modul5:checked {
cursor:default;
}
#modul1:checked ~ #l3:after,
#modul3:checked ~ #l3:before,
#modul2:checked ~ #l2:before,
#modul2:checked ~ #l3:before,
#modul1:checked ~ #l2:before,
#modul1:checked ~ #l3:before,
#modul4:checked ~ #l2:before,
#modul5:checked ~ #l3:before
{
display:none;
}
#modul1:checked ~ #l2:after,
#modul3:checked ~ #l3:before,
#modul2:checked ~ #l2:before,
#modul2:checked ~ #l3:before,
#modul1:checked ~ #l2:before,
#modul1:checked ~ #l3:before,
#modul4:checked ~ #l2:before,
#modul5:checked ~ #l3:before
{
display:none;
}
#modul1:checked ~ #l1:after,
#modul3:checked ~ #l3:before,
#modul2:checked ~ #l2:before,
#modul2:checked ~ #l3:before,
#modul1:checked ~ #l2:before,
#modul1:checked ~ #l3:before,
#modul4:checked ~ #l2:before,
#modul5:checked ~ #l3:before
{
display:none;
}
#modul1:checked ~ #l1:after,
#modul3:checked ~ #l3:before,
#modul2:checked ~ #l2:before,
#modul2:checked ~ #l3:before,
#modul1:checked ~ #l2:before,
#modul1:checked ~ #l3:before,
#modul4:checked ~ #l2:before,
#modul5:checked ~ #l3:before
{
display:none;
}
#modul1:checked ~ #l1:before,
#modul3:checked ~ #l1:after,
#modul3:checked ~ #l2:after,
#modul3:checked ~ #l3:after,
#modul4:checked ~ #l4:after,
#modul5:checked ~ #l5:after
{
background:#aaa;
color:#444;
cursor:default;
}
</style>
<body>
<h1>Homepage</h1>
<input type="radio" name="scroll" id="modul1" checked="checked"><a href="#home">Home</a>
<input type="radio" name="scroll" id="modul2"><a href="#about">About</a>
<input type="radio" name="scroll" id="modul3"><a href="#news">News</a>
<input type="radio" name="scroll" id="modul4"><a href="#impressum">Impressum</a>
<input type="radio" name="scroll" id="modul5"><a href="#links">Links</a>
<label id="l1" for="modul1"></label>
<label id="l2" for="modul2"></label>
<label id="l3" for="modul3"></label>
<label id="l4" for="modul4"></label>
<label id="l5" for="modul5"></label>
<main>
<div id="home">
<h2>Willkommen</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
</div>
<div id="about">
<h2>Ueber</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
</div>
<div id="news">
<h2>News</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
</div>
<div id="impressum">
<h2>Impressum</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
<div id="links">
<h2>Linksammlung</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
</div>
</main>
<footer>
</footer>
</body>
</html>
-
@@einsiedler
Das script:
Kein „Script“; weder HTML noch CSS sind Programmiersprachen.
<input type="radio" name="scroll" id="modul1" checked="checked"><a href="#home">Home</a> <input type="radio" name="scroll" id="modul2"><a href="#about">About</a> <input type="radio" name="scroll" id="modul3"><a href="#news">News</a> <input type="radio" name="scroll" id="modul4"><a href="#impressum">Impressum</a> <input type="radio" name="scroll" id="modul5"><a href="#links">Links</a> <label id="l1" for="modul1"></label> <label id="l2" for="modul2"></label> <label id="l3" for="modul3"></label> <label id="l4" for="modul4"></label> <label id="l5" for="modul5"></label>Die Radiobuttons haben keine Beschriftung; dein Markup ist kaputt.
Was möchtest du erreichen? So etwas? Das geht mit der
:target-Pseudoklasse.Nachtrag: Statt ursprünglich
display: nonehab ich jetzt die nicht angewähltensections nur visuell versteckt, damit der Inhalt barrierefrei erreichbar ist.Eine andere Möglichkeit wäre, Screenreader per ARIA-Attribute anzuweisen, auf Änderungen der Sichtbarkeit der
sections zu reagieren.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
habe es mal aufgezeichnet es geht mir nur rein um das hellblaue, das ich erzeugen möchte.
anhand von anker - sprüngen ... deshalb die ID`s (durch die beiden bottons "vor" und "zurück"!)
vielen dank!
grüsse siedler
-
@@einsiedler
anhand von anker - sprüngen ...
Das dürfte ein Fall für scroll snap points sein. Can I use?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-