Beiträge von olkostbe

olkostbe · 9. Dezember 2017

Google Chrome ist auf dem neuesten Stand.

Version 63.0.3239.84 (Offizieller Build) (64-Bit)

War aber interessant, als ich das aus Chrome herauskopiert habe, hat er sich just in diesem Moment aktualisiert. Habe es danach nochmal getestet und es hat sich aber nichts geändert. Vielleicht muß ich den Rechner nochmal hochladen. Mach ich aber später.

olkostbe · 9. Dezember 2017

Google Chrome + Firefox: es ist ein "springen" zu erkennen. Wie wenn die Bewegung in Stufen erfolgt.

Hoffe das hilft.

olkostbe · 9. Dezember 2017

Hallo beisammen,

jetzt möchte ich doch noch mal dieses Thema aufgreifen.

Ich habe einfach mal mit dem Drehbild von Sempervivum auf meiner Probewebseite rumgespielt. Wie oben gesagt, hat es mit Chrome super geklappt.

Auch auf meinem Smartphone (hier Samsung S5) klappt alles wie es soll -> Somit war ich "glücklich und zufrieden.

Ich habe einfach mal angenommen, dass das bei anderen Browsern auch klappen sollte:

Leider Fehlanzeige.

Ich habe dann mal aus einer Laune heraus Firefox und IE ausprobiert und da wird das Bild zwar gedreht auch in der Größe aber die Bildgröße schneidet sich im Rahmen ab.

Beispiel hier:

Meine Probewebseite bei der ich einfach so rumspiele

Kann das mir jemand erklären?

Danke

olkostbe · 3. Dezember 2017

Nur so als Randnotiz:

Habe mir den Code von Sempervivum mal angeschaut: -> So einfach kann Webdesign sein! Sogar ich habe das Vorgehen verstanden.

Danke dafür. Habe wieder ein paar mehr Denkanstöße bekommen.

Schönes Wochenende

olkostbe · 26. November 2017

Hallo Monika,

ich bin nicht der große Experte, also eher auch noch auf der Fragesteller-Seite. Folgendes ist mir allerdings aufgefallen:

- Deine Seite reagiert meines Erachtens gar nicht responsive. Wenn der Bildschrim verkleinert wird springt die Schnecke einfach unter das Menü. Ist das so gewollt? Deiner Frage nach eher nicht. Auf der HTTML-Seminar Homepage findest Du zu Responsive Web Design einiges. Wenn Du allerdings Lösungsvorschläge von den hier anwesenden Profis möchtest, solltest Du auch den Code hier in das Forum legen.

- Bezüglich der Linie: Auch hier nur eine Vermutung:

Hast du die Generalselektoren im CSS gesetzt?

Code

/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

Aber auch das ist nur eine Vermutung, da der Code von Dir nicht hier drin ist.

Ansonsten gefällt mir die drehende Schnecke richtig gut!

Hoffentlich kannst Du mit meinen Kommentaren etwas anfangen.

Schönes Wochenende

olkostbe · 19. November 2017

Jep; Danke Jav - so einfach kann Webdesign manchmal sein.

Habe es ausprobiert und funktioniert so wie es gerne hätte.

Gibt es eventuell auch zu meinem "Nebenproblem" auch eine Lösung?

olkostbe · 19. November 2017

Hallo beisammen,

Nachdem ich mich in CSS3 und RWD eingelesen habe und auch endlich das Menü so hinbekommen habe wie ich es wollte, kommt jetzt der nächste Hacken, den ich einfach nicht hin bekomme (zumindest bis jetzt). Diesmal kann ich einen Schreibfehler (siehe mein Menüproblem) ausschließen:

Folgender Link habe ich schon mal eingestellt, damit man sich das "live" ansehen kann: http://einsterneinberg.de/test/rwd/Bildergalerie-test.htm

Die Seite ist nur zum Testen gedacht; somit gehen die dort aufgeführten links ins Leere. Auch die angeführte jQuery funktioniert nicht (auch so gewollt, da nicht Teil der Frage).

A.) Hauptproblem: Die Fußzeile funktioniert hervorragend: Beim verändern der Bildschirmgröße bleibt Sie brav, wie von mir gewollt am unteren Rand hängen. ABER: wenn man runter scrollt - bleibt die Zeile an der Stelle auch stehen und verrutscht eben nicht wieder an den unteren Bildschirmrand.

B.) Kleines zusätzliches Problem (bitte aber zweitrangig): Wenn ich die Seite auf meinem Smartphone (Samsung S5) öffne und nach rechts scrolle wird das Hintergrundbild verhunzt. Auch hier habe ich noch keine gute Lösung gefunden (getestet habe ich die auskommentierte Version mit #hintergrund - siehe Code - funktioniert aber auch nicht so richtig).

Die CSS Datei hänge ich hier an:

Code

/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

/* Fuer alte Browser */
header, nav, footer, article, aside {
    display: block;
}

/* Definition des kompletten Bildschirmes*/
html, body {
    background-image: url(bilder/Rund.jpg);
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    text-align: center; /* wegen alter IE-Versionen */
}

/*Definition der Aktion bei verkleinertem Bildschirm (z.B. Smartphones, etc.)*/
@media only screen and (max-width: 40em) {
    body, article {
        width: 100%;
    }
    
    #mobilanzeige {
        position: absolute;
        left: -15em;
        width: 25em;
    }
    
    #einsterneinbergmobil {
        display: block;
        background-color: green;
        position: absolute;
        border-radius: 20px 0px;
        height: 3.3em;
        width: 3.3em;
    }
       
    #sternbergbox, #einsterneinbergbox {
        display: none;
    }
                          
    header {
        height: 6em;
    }
    #ueberschrift p {
        padding: 0.9em 0.1em 0.1em 2.5em;
        font-size: 2em;
    }
 /* CSS erweitern um Menu Button  */
    nav {
        display: none;
    }
    .menue-button {
        width: 15em;
        display: block;
        background-color: green;
        color: white;
        position: absolute;
        left: 1em;
        top: 0;
        cursor: pointer;
        text-decoration: none;
        }
    
    .menue-button:hover {
            font-weight: bold;
            background-image: url(bilder/dreieck.gif);
            background-repeat: no-repeat;
            background-position: right center;
            text-transform: uppercase;
            animation-name: steuerung-animation;
            animation-duration: 2s;
    }
    
    #steuerung p {
        font-size: 1em;
    }
        
    #nav-menue:target nav {
                display: block;
                float: none;
    }

    #nav-menue:target .menue-button-beschreibung-open {
        display: none;
    }
    
}

/* Hintergrund bei Smartphones, hier speziell für Samsung S5 - Noch UNKLAR!!*/
/*#hintergrund {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(bilder/Rund.jpg);
    background-attachment: fixed;
 }*/

#seite {
    position: relative;
    min-height: 100%;
    margin: 0 auto;
/*    Wenn gewollt: Diese Zeile einfügen, dann wird die Seite zentriert angegeben: -- width: 800px;*/
    text-align: left; /* wegen alter IE-Versionen */
}

h1 {
    color: #656565;
    font-size: 2em;
}

h2 {
    color: black;
    font-size: 1.5em;
}

h3 {
    color: blue;
    font-size: 3em;
    font-family: 'Waiting for the Sunrise', cursive;
}

#einsterneinbergmobil  {
    position: absolute;
    left: 1em;
    top: 1.9em;
}

#einsterneinbergmobil p {
        color: white;
        padding: 0.5em 0.5em 0.5em 0.5em;
        font-size: 0.7em;
        text-align: left;
    }

#einsterneinbergbox {
    background-color: green;
    position: absolute;
    left: 1em;
    top: 1em;
    height: 9.375em;
    width: 9.375em;
    border-radius: 50px 0px;
    transition: all 5s 1s ease;
}

#einsterneinbergbox p {
    color: white;
    padding: 0.7em 0.5em 0.5em 0.5em;
    font-size: 2em;
    text-align: left;
    text-shadow: 3px 3px 3px black;
    transition: all 5s 1s ease;
}

#einsterneinbergbox:hover,
#einsterneinbergbox p:hover {
    opacity: 0;
}

#sternbergbox {
    background-image: url(bilder/einsterneinberg-bild-logo-v2.jpg);
    position: absolute;
    left: 1em;
    top: 1em;
    height: 9.375em;
    width: 9.375em;
    border-radius: 50px 0px;
}

#sternbergbox p {
    padding: 3.7em 0.2em 0.2em 0.5em;
    font-size: 1.5em;
    color: white;
    text-shadow: 2px 2px 2px black;
}

#steuerung a p {
    padding-left: 1em;
}

#neupost {
    height: 8em;
    width: 11em;
    position: absolute;
    left: 25em;
    top: -8em;
    background-image: linear-gradient(darkgrey 2%, yellow 8%);
    box-shadow: 1em 1em 1em black;
    transform: rotate(-10deg);
    transform-origin: bottomright;
    animation: neuposteinblenden 4s 3s 2 alternate ease;
}

@keyframes neuposteinblenden {
    0% {
        right: 0;
        }
    90% {
        left: 2em;
        top: 0;
        transform: rotate(20deg);
        }
    95% {
        left: 2em;
        top: 0;
        transform: rotate(-20deg);
        }
    100% {
        left: 2em;
        top: 0;
        transform: rotate(20deg);
        }
}

#neupost p {
    color: blue;
    font-size: 2em;
    line-height: 1em;
    font-weight: bolder;
    font-family: 'Waiting for the Sunrise', cursive;
    text-align: left;
    padding: 0 0 0 0.5em;    
}

header {
    width: 100%;
}

#ueberschrift {
    height: 7.3em;
}

header p {
    color: white;
    text-shadow: 2px 2px 10px black;
    padding: 0.3em 0.1em 0.1em 4.1em;
    font-size: 4em;
}

#steuerung {
    display: block;
}

nav {
    margin-top: 1em;
    width: 14.5em;
    float: left;
}

nav a {
    color: white;
    text-shadow: 1px 1px 4px black;
    text-decoration-line: none;
    display: inline-block;
    width: 100%;
    padding-left: 1em;
    box-sizing: border-box;

    line-height: 1.7em;
}

nav a:hover {
    font-weight: bold;
    background-image: url(bilder/dreieck.gif);
    background-repeat: no-repeat;
    background-position: right center;
    text-transform: uppercase;
    animation-name: steuerung-animation;
    animation-duration: 2s;  
}
@keyframes steuerung-animation {
    0%   {color: lightgreen}
    50%  {color: limegreen}
    100% {color: darkgreen}
}

nav a:active {
    color: yellow;
}

.neunav {
    height: 1.5em;
    width: 4.2em;
    background-color: yellow;
    box-shadow: 0.5em 0.5em 0.5em black;
    margin: -1.5em 0 0 160px;
    transform-origin: left bottom;
    transform: rotate(-25deg);
}

.neunav p {
    color: blue;
    font-size: 1em;
    line-height: 1em;
    font-weight:bolder;
    font-family: 'Waiting for the Sunrise', cursive;
    text-align: left;
    padding: 0.3em 0 0 0.1em;    
}

.schatten {
    box-shadow: 0 -4px 6px white;
        
    /*background-image: url(bilder/schatten.png);
    height: 12px;
    margin-left: 190px;
    UNBEDINGT im ORIGINAL LÖSCHEN --- an kopfsteuerung.htm denken: <article  class="schatten"> einbauen*/
}

article {
    background-color: white;
    position: absolute;
    left: 14.5em;
    margin: 0 0;
    color: black;
    font-size: 1em;
    width: max-width;
    padding: 0.1em 1em 2em 2em;
}

article h1, 
article h3, 
article p {
    margin: 0.4em 0;
}

article ol,
article ul{
    line-height: 1.5em;
    padding-left: 2em;
}

small {
    font-size: 0.5em
}

footer {
    background-color: #656565;
    color: white;
    line-height: 2em;
    font-size: 1em;
    padding-left: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2em;
    clear: both;
}

Alles anzeigen

Falls ich den HTML Code anhängen soll, bitte kurz melden.

Schon jetzt ein Danke wieder an die Profis hier im Forum

olkostbe · 13. November 2017

Es ist gelöst!

Nochmals Danke an Sempervivum; - auch wenn die Lösung oben bei mir nicht geklappt hat.

Mal wieder war es ein von mir verursachter Denkfehler beim letzten #nav-menue: Fehler von mir war hier die ......close Variante anzuziehen statt der .....open Variante (Code unten). Letzendlich hat mich Sempervivum dezent darauf hingeführt.

Sorry für meine Unzulänglichkeit. - Und Danke dafür, dass man trotzdem die Profis dafür fragen kann.

Code

#nav-menue:target nav {
            display: block;
}

#nav-menue:target .menue-button-beschreibung-open {
    display: none;
}

Nun kann ich mich in die RWD für die Seite hineinwerfen.

olkostbe · 13. November 2017

Der CSS Code:

Code

/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

/* Fuer alte Browser */
header, nav, footer, article, aside {
    display: block;
}

/* Definition des kompletten Bildschirmes*/
html, body {

    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 70em;
    text-align: center; /* wegen alter IE-Versionen */
}

@media only screen and (max-width: 40em) {
    body
    {
        width: 100%;
    }
    article,
    {
        width: 40em;
    }
}
    
/* Hintergrund bei Smartphones, hier speziell für Samsung S5 - Noch UNKLAR!!*/
#hintergrund {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(bilder/Rund.jpg);
    background-attachment: fixed;
 }

#seite {
    position: relative;
    min-height: 100%;
    margin: 0 auto;
/*    Wenn gewollt: Diese Zeile einfügen, dann wird die Seite zentriert angegeben: -- width: 800px;*/
    text-align: left; /* wegen alter IE-Versionen */
}

h1 {
    color: #656565;
    font-size: 2em;
}

h2 {
    color: black;
    font-size: 1.5em;
}

h3 {
    color: blue;
    font-size: 3em;
    font-family: 'Waiting for the Sunrise', cursive;
}

#einsterneinbergbox {
    background-color: green;
    position: absolute;
    left: 1em;
    top: 1em;
    height: 150px;
    width: 150px;
    border-radius: 60px 20px;
    transition: all 5s 1s ease;
}

#einsterneinbergbox p {
    color: white;
    padding: 0.7em 0.5em 0.5em 0.5em;
    font-size: 2em;
    text-align: left;
    text-shadow: 3px 3px 3px black;
    transition: all 5s ease;
}

#einsterneinbergbox:hover,
#einsterneinbergbox p:hover {
    opacity: 0;
    
}

#sternbergbox {
    background-image: url(bilder/einsterneinberg-bild-logo-v2.jpg);
    position: absolute;
    left: 1em;
    top: 1em;
    height: 150px;
    width: 150px;
    border-radius: 60px 20px;
}

#sternbergbox p {
    padding: 3.7em 0.2em 0.2em 0.5em;
    font-size: 1.5em;
    color: white;
    text-shadow: 2px 2px 2px black;
}

#ueberschrift {
    height: 150px;
    width: 900px;
    position: absolute;
    left: 190px;
    top: 1em;
}

#neupost {
    height: 130px;
    width: 170px;
    position: absolute;
    left: 650px;
    top: 4.5em;
    background-image: linear-gradient(darkgrey 2%, yellow 8%);
    box-shadow: 1em 1em 1em black;
    transform: rotate(-10deg);
    transform-origin: bottomright;
    animation: neuposteinblenden 6s 4s 2 alternate ease;
}

@keyframes neuposteinblenden {
    0% {
        right: 0;
        }
    80% {
        left: 1em;
        transform: rotate(20deg);
        }
    90% {
        left: 1em;
        transform: rotate(-20deg);
        }
    100% {
        left: 1em;
        transform: rotate(20deg);
        }
}

#neupost p {
    color: blue;
    font-size: 2em;
    line-height: 1em;
    font-weight: bolder;
    font-family: 'Waiting for the Sunrise', cursive;
    text-align: left;
    padding: 0 0 0 0.5em;    
}

header {
    width: 100%;
    height: 190px;
    
}
header p {
    color: white;
    text-shadow: 2px 2px 10px black;
    padding: 0.6em 0.1em 0.1em 0.8em;
    font-size: 4em;
    text-align: left;
}

nav {
    width: 190px;
    float: left;
    padding-top: 2em;
    display: none;
}

nav a {
    color: white;
    text-shadow: 1px 1px 4px black;
    text-decoration-line: none;
    display: inline-block;
    width: 100%;
    padding-left: 1em;
    box-sizing: border-box;
    line-height: 1.7em;
}

nav a:hover {
    font-weight: bold;
    background-image: url(bilder/dreieck.gif);
    background-repeat: no-repeat;
    background-position: right center;
    text-transform: uppercase;
    animation-name: steuerung-animation;
    animation-duration: 2s;  
}
@keyframes steuerung-animation {
    0%   {color: lightgreen}
    50%  {color: limegreen}
    100% {color: darkgreen}
}

nav a:active {
    color: yellow;
}

/* CSS erweitern um Menu Button  */

.menue-button {
    width: 172px;
    display: block;
    background-color: #656565;
    color: white;
    position: absolute;
    left: 0;
/*    top: 0;*/
    padding-left: 1em;
    cursor: pointer;
    text-decoration: none;
}

.menue-button:hover {
    font-weight: bold;
    background-image: url(bilder/dreieck.gif);
    background-repeat: no-repeat;
    background-position: right center;
    text-transform: uppercase;
    animation-name: steuerung-animation;
    animation-duration: 2s;
}
#nav-menue:target nav {
            display: block;
}

#nav-menue:target .menue-button-beschreibung-close {
    display: none;
}

.neunav {
    height: 1.5em;
    width: 4.5em;
    background-color: yellow;
    box-shadow: 0.5em 0.5em 0.5em black;
    margin: -1.5em 0 0 160px;
    transform-origin: left bottom;
    transform: rotate(-25deg);
}

.neunav p {
    color: blue;
    font-size: 1em;
    line-height: 1em;
    font-weight:bolder;
    font-family: 'Waiting for the Sunrise', cursive;
    text-align: left;
    padding: 0.3em 0 0 0.1em;    
}

.schatten {
    box-shadow: 0 -4px 6px white;
        
    /*background-image: url(bilder/schatten.png);
    height: 12px;
    margin-left: 190px;
    UNBEDINGT im ORIGINAL LÖSCHEN --- an kopfsteuerung.htm denken: <article  class="schatten"> einbauen*/
}

article {
    margin: 0 0 0 190px;
    color: black;
    font-size: 1em;
    background-color: white;
    padding: 0.1em 1em 2em 3em;
}

article h1, 
article h3, 
article p {
    margin: 0.4em 0;
}

article ol,
article ul{
    line-height: 1.5em;
    padding-left: 2em;
}

small {
    font-size: 0.5em
}

footer {
    background-color: #656565;
    color: white;
    line-height: 2em;
    font-size: 1em;
    padding-left: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2em;
    clear: both;
    
}

Alles anzeigen

olkostbe · 13. November 2017

Der HTML code:

HTML

<!DOCTYPE html>

<html lang="de">
    
    
    <head>
        <!--Zeichensatz definieren-->
        <meta charset="UTF-8">
        
        <!--Anwendung auch auf kleinen Bildschirmen-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!--Einträge für Suchmaschinen -->
        <title>Ein Stern - Ein Berg</title>
        <meta name="content-language" content="de" /> 
        <meta name="author" content="Konrad Sternberg " /> 
        <meta name="publisher" content="Konrad Sternberg " /> 
        <meta name="copyright" content="Konrad Sternberg " />
        <meta name="keywords" content="Konrad Sternberg, Ein Stern - Ein Berg, einsterneinberg" /> 
        <meta name="description" content="Internetauftritt von einsterneinberg.de" /> 
        <meta name="page-topic" content=" " /> 
        <meta name="page-type" content=" " /> 
        <meta name="language" content="Deutsch" /> 
        <meta name="revisit" content="After 30 days" /> 
        <meta name="robots" content="INDEX,FOLLOW" />
        
        <!--Definition der Schriftfonts von Google Fonts!!        -->
        <link href="https://fonts.googleapis.com/css?family=Roboto|Waiting+for+the+Sunrise" rel="stylesheet">
        
        <!-- Definition des flavicons-->
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="theme-color" content="#ffffff">
        
        <!-- Start Definition der CSS Datei-->
        <link rel="stylesheet" href="design-v1.css" type="text/css" />
     
    </head>
    <!--Kompletter Bildschirm-->
    
    <body id="nav-menue">
                
        <!--Definition des Anzeigebereiches        -->
        <div id="seite" >
            <div id="hintergrund"></div>
            <!--Kopfbereich inkl. Steuerung-->
            <div id="kopfsteuerungbild">
                
                <!-- Hier startet nur der Kopfbereich-->
                <header id="sprunganfang"> <!-- Hier inklusive die Srungmarke an den Anfang-->
                    
                    <div id="sternbergbox"><p>Konrad<br>Sternberg</p></div>    <!--Definition der Box die unterhalb der erscheinenden Box beim überfahren mit der Maus liegt -->
                    <div id="einsterneinbergbox"><p>einstern<br>einberg<br>.de</p></div> <!--Box die erscheint (ohne Maus) -->
                    <div id="ueberschrift"><p id="headlineanpassung"></p></div> <!-- Inhalt im Kopf-->
                                    
                </header>

                <!-- Hier startet nun der Steuerungsbereich -->
               
                <nav>    
                        <ul>
                            <li><a href="index.php" id="start">Startseite</a></li><div class="neunav"><p>Bearbeitet!</p></div><!--  mit "Bearbeitet" Post-it -->
                            <li><a href="kontakt.php" id="kontakt">Kontakt mit mir</a></li>    <!-- Aufruf für Kontaktformular-->
                            <li><a href="bildergalerie.php" id="bilder">Bildergalerie</a></li><div class="neunav"><p>Neu!</p></div>          <!-- Erster Testbereich, mit "Neu" Post-it -->
                            <li><a href="beta.php" id="beta">Bereich Beta</a></li>             <!-- Zweiter Testbereich-->
                            <li>.....</li>
                            <li><a href="impressum.php" id="impressum">Impressum</a></li>
                            <li><a href="datenschutzerklaerung.php" id="daten">Datenschutz</a></li>
                            
                        </ul>   
                    
                </nav>
                 
                <a class="menue-button menue-button-beschreibung-close" href="#nav-menue-zu">MENÜ zu</a>  
                <a class="menue-button menue-button-beschreibung-open" href="#nav-menue">MENÜ auf</a> 
             
                
                            
                <article  class="schatten">
<!-- Rest kommt von der fuss.htm Datei -->
<script>
/* ANFANG: Hier wird die im Kopf erscheinende Überschrift und die Seitensteuerung an die Seite angepasst:
a.) die Variable: - var seitenname - muss den Namen der Kopf - Headline zeigen
b.) die ID "start" muss in der Navigation (also in der kopfsteuerung.htm) und hier im script in die jeweilige Seite angepasst werden
*/
                        function kopfsteueranpassung(seite)
                            {
                                document.getElementById('bilder').innerHTML = seite;
                                document.getElementById('headlineanpassung').innerHTML= seite;
                            }
// ACHTUNG diese Variable muss angepasst werden auf die Seite 
                        var seitenname = 'Bildergalerie';
                        kopfsteueranpassung(seitenname);
                        document.getElementById('bilder').style.color = 'white';
                        document.getElementById('bilder').style.backgroundColor = '#656565';
                    </script>
<!--    ENDE der Anpassung-->

      
<head>
<!-- Übernahme aus der jQuery        -->
    <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
//Examples of how to assign the Colorbox event to elements: Hier für die Pflastersteine
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
//    Hier für die Herbstimpressionen
                $(".group1").colorbox({rel:'group1', transition:"none", width:"75%", height:"75%"});
                
            });
        </script>
</head>   
<!--NUR für den Fall, dass es eine Neuerung auf dieser Seite gibt!!!!-->
<div id="neupost"><p>Neu auf der Homepage! <br>26.10.2017</p></div>

<h1>Bildergalerie mit jQuery Lightbox Colorbox</h1>
<p>Version aus Colorbox: No Transition + fixed width and height (75% of screen size)</p>
<h2>Bilder von Pflastersteinen</h2>         
<p>Verwende ich gerne auch als Hintergrundbild. Einfach das Bild anklicken und dann gemütlich den Rest anschauen.</p>
        <p>
            <a class="group3" href="Pflastersteine/Ulm0.jpg" title="Pflasterstein in Ulm.">
                <img src="Pflastersteine/Ulm0.jpg" style="width:75px; height:50px; border-radius: 10px" alt=""></a>
            <a class="group3" href="Pflastersteine/dreieck.jpg" title="Augsburger Variante der Pflastersteine"></a>
        </p>



<!-- Test mit Bildergalerie ENDE -->



                     
                        <p> 
                            <a href="#sprunganfang"><img src="bilder/pfeil-oben.png" width="43" height="50" alt= "Pfeil nach oben" title="Auf den Pfeil klicken, um nach OBEN zu kommen">Zum Seitenanfang </a>
                        </p>
                       
                </article>
            </div>
            <footer>
                <p>© 2017 • Konrad Sternberg • www.einsterneinberg.de • 
                     
                </p>
            </footer>
            
        </div>
    </body>

</html>

Alles anzeigen

olkostbe · 13. November 2017

Danke nochmal mit dem Hinweis auf Opera. Muss ich mir mal bei Gelegenheit runterladen und prüfen. Bei mir klappt es im IE mit dem Sprungziel im Body tag.

Was ich aber überhaupt nicht verstehe, ist, dass im HTML Seminar (ebook und auch auf der DVD) dieser Code ohne Sprungziel #nav-menue-zu funktionniert?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Toggle Menü ohne JavaScript (CSS:target)</title>
    
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
    
header {
    background-color: yellow;
    background-color: gray;
    width: 100%;
    float: left;
    border-bottom: 1px solid black;
}
    
#bereichlogo {
    color: white;
    background-color: limegreen;        
    display: block;
    padding: 0.5em;
    text-decoration: none;
    float: left;    
}

#bereichlogo {
    width: auto;
}
    
#steuerung li {
    list-style: none;
    float: left;
}
    
#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.5em;
    text-decoration: none;
    color: white;
    background-color: gray;
}    

.menue-button {
    display: none;
}        
    
#steuerung {
    float: right;
}
    
#steuerung a:hover {
    color: black;
    background: orange;
}    

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*    Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:600px) {
    .menue-button {
        display: block;
    }

    .menue-button {
        background-color: darkblue;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        padding: 0.5em;
        color: white;
        cursor: pointer;
        text-decoration: none;
    }    

    #bereichlogo {
        width: 100%;
    }

    #steuerung {
        float: left;
        width: 100%;
        display: none;
    }    

    #steuerung li {
        width: 100%;
        border-bottom: 2px solid silver;
    }    

    .menue-button:hover {
        color: black;
        background: orange;
    }
}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
    display: block;
}
    
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
    display: none ; 
}    
    
/* Allgemein Anweisungen */
section {
    padding: 0.5em;
    float: left;
    width: 100%;
}

h1, p {
    margin: 0.5em 0 0 0;
}    
    
</style>    

</head>

<body>
<header id="nav-menue">
    <a href="#" id="bereichlogo">HTML-Seminar.de</a>
    <nav id="steuerung">
        <ul>
           <li><a href="#">Startseite</a></li>
           <li><a href="#">HTML lernen</a></li>
           <li><a href="#">Beispiele</a></li>
           <li><a href="#">Kontakt</a></li>
           <li><a href="#">Impressum</a></li>
        </ul>
    </nav>
    <a class="menue-button menue-button-beschr-close" 
       href="#nav-menue-zu">MENÜ zu</a>
    <a class="menue-button menue-button-beschr-open" 
       href="#nav-menue">MENÜ auf</a>
</header>

<section>
    <h1>Toggle Menü ohne JavaScript (CSS:target)</h1>
    <h2>Steuerung für mobile Geräte</h2>
    <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt.</p>
    <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt.</p>

    <p>Zurück zum Tutorial <a href="https://www.html-seminar.de/toggle-menue-03-automatische-umschaltung.htm">Toggle Menü ohne JavaScript</a>
</section>    
</body>
</html>

Alles anzeigen

Diesen wollte ich eigentlich nachstellen. Ich habe auch schon darüber nachgedacht wo ich das Sprungziel #nav-menue-zu hintue.

Ich bin gerade nur noch verwirrt, auch wenn ich durch Deinen Hinweis mindestens 2/3 schon geklärt habe.

Was mich auch verwirrt ist, dass der Text "Menü auf" bestehen bleibt, wenn ich drauf geklickt habe. Für mich ein Hinweis, dass hier was noch im Argen ist.

Ich schicke mal einfach meinen HTML und CSS Code komplett in 2 separaten Posts. Vielleicht ist es dann klarer.

olkostbe · 13. November 2017

Hallo Sempervivum,

Tja; - so ist das, wenn man zu lange vor dem Rechner sitzt. Was habe ich nicht alles ausprobiert und geprüft. Schon jetzt ein großes DANKE.

Hier in der Firma habe ich leider nur eine "Krückenversion" vom IE. Ich habe die beiden Tippfehler ">" eliminiert und jetzt kann ich das Menü wunderschön in dieser IE Version öffnen.

Trotzdem zwei kleine Nachfragen:

- Dein Hinweis mit dem a-Tag ist mir unklar. Könntest Du mir da einen Vorschlag machen, wie man den Einbauen sollte?

- In meiner verkrüppelten IE Version geht zwar das Menü jetzt nach dem anklicken auf; - aber es bleibt der Text mit Menü auf (statt mit Menü zu) und beim erneuten Anklicken geht es nicht mehr zu.

Kannst Du mir da eventuell auch helfen? Ich nehme mal an, dass das mit den Sprungzielen hier wieder der Knackpunkt ist (korrekt?)

Schon jetzt Danke

olkostbe · 12. November 2017

JUHU die Übertragung hat geklappt. Danke basti und jav

olkostbe · 12. November 2017

Hallo,

bin gerade dabei das Thema Toggle Menü mit Hilfe von CSS3 und :target aus der DVD in meiner Seite nachzubauen. Ziel ist meine Internetseite RWD möglich zu machen. Die Erläuterungen waren eindeutig und für mich eigentlich verständlich. Aber; - quasi kurz vor Torschluss hackt es und ich bin wieder an der Stelle, wo ich ziemlich ratlos bin. Wahrscheinlich ist es wieder so ein blöder Tippfehler. Ich finde Ihn einfach nicht.

Das Problem ist: Der button Menü auf ist soweit klar und wenn ich drauf klicke springt er auch (laut Brackets) dahin; - aber er mach das Menü nicht auf!

HTML (Nur der Teil der betroffen ist; - Volle Datei geht nicht wegen Fehler "zu viele Zeichen" siehe anderen Post)

Code

<body id="nav-menue">
        
        <!--Definition des Anzeigebereiches        -->
        <div id="seite" >
            <div id="hintergrund"></div>
            <!--Kopfbereich inkl. Steuerung-->
            <div id="kopfsteuerungbild">
                
                <!-- Hier startet nur der Kopfbereich-->
                <header id="sprunganfang"> <!-- Hier inklusive die Srungmarke an den Anfang-->
                    
                    <div id="sternbergbox"><p>Konrad<br>Sternberg</p></div>    <!--Definition der Box die unterhalb der erscheinenden Box beim überfahren mit der Maus liegt -->
                    <div id="einsterneinbergbox"><p>einstern<br>einberg<br>.de</p></div> <!--Box die erscheint (ohne Maus) -->
                    <div id="ueberschrift"><p id="headlineanpassung"></p></div> <!-- Inhalt im Kopf-->
                                    
                </header>

                <!-- Hier startet nun der Steuerungsbereich -->
               
                <nav>    
                        <ul>
                            <li><a href="index.php" id="start">Startseite</a></li><div class="neunav"><p>Bearbeitet!</p></div><!--  mit "Bearbeitet" Post-it -->
                            <li><a href="kontakt.php" id="kontakt">Kontakt mit mir</a></li>    <!-- Aufruf für Kontaktformular-->
                            <li><a href="bildergalerie.php" id="bilder">Bildergalerie</a></li><div class="neunav"><p>Neu!</p></div>          <!-- Erster Testbereich, mit "Neu" Post-it -->
                            <li><a href="beta.php" id="beta">Bereich Beta</a></li>             <!-- Zweiter Testbereich-->
                            <li>.....</li>
                            <li><a href="impressum.php" id="impressum">Impressum</a></li>
                            <li><a href="datenschutzerklaerung.php" id="daten">Datenschutz</a></li>
                            
                        </ul>   
                    
                </nav>
                 
                <a class="menue-button menue-button-beschreibung-close" href="#nav-menue-zu>">MENÜ zu</a>
                <a class="menue-button menue-button-beschreibung-open" href="#nav-menue>">MENÜ auf</a>

Alles anzeigen

Hier die CSS3 (auch hier nur der Teil der betroffen ist)

Code

nav {
    width: 190px;
    float: left;
    padding-top: 2em;
    display: none;
}

nav a {
    color: white;
    text-shadow: 1px 1px 4px black;
    text-decoration-line: none;
    display: inline-block;
    width: 100%;
    padding-left: 1em;
    box-sizing: border-box;
    line-height: 1.7em;
}

nav a:hover {
    font-weight: bold;
    background-image: url(bilder/dreieck.gif);
    background-repeat: no-repeat;
    background-position: right center;
    text-transform: uppercase;
    animation-name: steuerung-animation;
    animation-duration: 2s;  
}
@keyframes steuerung-animation {
    0%   {color: lightgreen}
    50%  {color: limegreen}
    100% {color: darkgreen}
}

nav a:active {
    color: yellow;
}

/* CSS erweitern um Menu Button  */

.menue-button {
    width: 172px;
    display: block;
    background-color: #656565;
    color: white;
    position: absolute;
    left: 0;
/*    top: 0;*/
    padding-left: 1em;
    cursor: pointer;
    text-decoration: none;
}

.menue-button:hover {
    font-weight: bold;
    background-image: url(bilder/dreieck.gif);
    background-repeat: no-repeat;
    background-position: right center;
    text-transform: uppercase;
    animation-name: steuerung-animation;
    animation-duration: 2s;
}

#nav-menue:target nav {
    display: block;
}

#nav-menue:target .menue-button-beschreibung-close {
    display: none;
}

Alles anzeigen

Ich hoffe, dass ich alles beigelegt habe, was zur Beantwortung meiner Frage notwendig ist. Wenn nicht; - gerne kurze Info.

Kurz noch zur Info: Ich bin noch nicht ganz mit der DVD RWD durch. Wenn ich also eine Frage stelle, die noch auf der DVD speziell bei dem 2 Spalten Layout kommt und dieses Problem beschreibt, so möge er mir das verzeihen.

Vielen Dank nochmals (Beim hochladen der Daten kam eine Fehlermeldung ("zu viele Zeichen"), deswegen diese Art der Datenübertragung)

olkostbe · 12. November 2017

Hallo Boardbetreiber,

kleine Frage: heute wollte ich 2 Dateien als Code hier in das Board "werfen". Eine HTML und eine CSS Datei. Dann kam die Fehlermeldung: zu viele Zeichen.

Als Dateianhang selbst als txt war es nicht möglich.

Wie kann ich dennoch die Profis nach dem Problem befragen?

Danke

olkostbe

olkostbe · 15. Oktober 2017

Übrigens (für den, den es interessiert):

Bin heute bei der DVD über den CSS Befehl z-index gestoßen: Funktioniert genauso als Variante, muss also nicht opacity sein.

olkostbe · 15. Oktober 2017

Hallo Sempervivum,

war heute mal nicht so fleißig. Danke für Deine Antwort. Bitte gib mir ein wenig Zeit um das obige zu verdauen und richtig durch zu gehen.

Trotzdem schon jetzt ein großes Dankeschön.

Melde mich dann, wenn alles verdaut ist.

olkostbe · 14. Oktober 2017

Hallo beisammen und auch Sempervivum (schon jetzt ein Dank für Deine Mühe),

bin heute mal wieder am Rechner und habe nochmal versucht alles irgendwie zusammen zu bringen. Es hat nicht sollen sein.

Daher werde ich mich mal als totalen Trottel outen und meinen hilflosen Versuch hier posten. Die Grundlagen des ganzen Versuches ist von der Javascript DVD herunter. Erst wurde da das Formular erstellt (mit Tieren); danach wurde mit Autos gezeigt wie das Objektorientierte Programmieren funktioniert.

Grundsätzlich habe ich die Vorgehensweise verstanden; - es hapert halt doch an der Umsetzung beides zusammen zu bringen.

Ich weiß, dass der Code voller Fehler ist, aber ich will hier keinen Schönheitspreis gewinnen.

Zuerst mein Ergebnis im Chrome Browser:

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

Die Idee ist:

Eingabe der Werte (Hersteller, Farbe , max. Geschwindigkeit) und Ausgabe am Bildschirm (siehe auch oben Kommentare).

Allerdings möchte ich dann mit den Werten weiter arbeiten. Dazwischen will ich dann, auch über Formular die Beschleunigung oder das Bremsen abfragen. So weit bin ich noch nicht mal gekommen; - deswegen habe ich auch nur die Daten fix im Programm gelassen.

Hier der Quellcode:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Beispiel mit Objektorientierter Programmierung</title>
    <meta charset="utf-8">
</head>

<body>

   <form name="Autodaten" action="" method="get" enctype="text/plain">
        Hersteller:             <input id="autohersteller" type="text" name="autoerzeuger" value="" size="20" maxlength="50" onkeyup="" /><br>
        Farbe:                  <input id="farbevonauto" type="text" name="" value="" size="5" maxlength="10"  onkeyup=""/><br>
        Max. Geschwindigkeit:   <input id="geschw" type="text" name="" value="" size="5" maxlength="10"  onkeyup=""/><br>
        <input  type="submit" name="" value="Sichern" />
  </form>
     
<script>
    
var autoerzeuger = document.getElementById ('autohersteller').value;
document.write
var autofarbe = document.getElementById ("farbevonauto").value;
var maximalGeschwindig = document.getElementById ("geschw").value;
document.write ( autoerzeuger + " " +  autofarbe + " mit Höchstgeschwindigkeit: " +  maximalGeschwindig +  " sind im Formular angegeben worden.");
    
    
    
    
    
function anzeige()
    {
        var autoerzeuger = document.getElementById ("autohersteller").value;
        var autofarbe = document.getElementById ("farbevonauto").value;
        var maximalGeschwindig = document.getElementById ("geschw").value;
        document.getElementById ("anzeige").innerHTML = autoerzeuger + " " +  autofarbe + " mit Höchstgeschwindigkeit: " +  maximalGeschwindig +  " sind im Formular angegeben worden.";
    }    
      
//    Objektbauplan über function
function Auto (autoerzeuger, autofarbe, maximalGeschwindig)
    {
//        Eigenschaften
        this.farbe      = autofarbe;
        this.hersteller = autoerzeuger;
        this.stillstand = 0;
        this.speedNow   = 0;
        this.maxSpeed   = maximalGeschwindig;
//        Methode die in der naechtsten Funtkion erlaeutert wird
        this.beschleunigen_um   = beschleunigen_um;
        this.bremsen_um         = bremsen_um
    }
//Hier nun die Methode
function beschleunigen_um (kmh)
    {
        this.speedNow +=kmh;
            
        document.write('<br>Beschleunigt um:  ');
        document.write( kmh);
        document.write(' km/h auf km/h: ');
        document.write(this.speedNow);
        
        if (this.speedNow > this.maxSpeed)
            {
                document.write('<p>' + this.speedNow);
                document.write (' km/h geht Nicht - daher wird gedrosselt auf ' + this.maxSpeed + ' km/h!<br>');
                this.speedNow = this.maxSpeed;
            }
        }
    
function bremsen_um (kmh)
    {
        this.speedNow -= kmh;
        
        document.write('<br>Abgebremst um:  ');
        document.write( kmh);
        document.write(' km/h auf km/h: ');
        document.write(this.speedNow);
        
        if (this.speedNow < this.stillstand)
            {
                document.write('<p> Geht nicht - Das Auto steht jetzt!<br>');
                this.speedNow = this.stillstand;
            }
     }

//Eingabe der Autodaten    

    
var erst = document.getElementById ("autohersteller").innerHTML
document.write (erst);
    
var meinAuto = new Auto (document.getElementById ("autohersteller").innerHTML.value,document.getElementById ("farbevonauto").innerHTML.value, document.getElementById ("geschw").innerHTML.value);


document.write (meinAuto.farbe);
document.write (meinAuto.hersteller);
document.write ('<p>Start im Stehen:')
meinAuto.beschleunigen_um(120);
meinAuto.beschleunigen_um(150);
meinAuto.beschleunigen_um(70);
meinAuto.bremsen_um(150);
meinAuto.bremsen_um(400);
    
</script>
    
 
    
    
</body>
</html>

Alles anzeigen

Den Hinweis mit event (siehe Kommentare von Sempervivum) habe ich hier zwar hoch und runter ausprobiert, bin aber bei der Übergabe nicht weiter gekommen.

Noch eine Bitte:

Das "document.write" bitte ich mir als Anfänger abzusehen. Ich will es eigentlich nur zur Kontrollausgabe verwenden. Der Hinweis von Sempervivum ist sicherlich berechtigt und würde auf jeden Fall mit innerHTML umgesetzt, wenn die Programmierung grundsätzlich stehen würde.

Ich hoffe, dass ich mein Problem klar erläutert habe. Nach 4 Stunden am Bildschirm mit immer dem gleichen "Sch..." wird man ganz gagaga.

Danke schon mal im Voraus.

olkostbe · 5. Oktober 2017

Die Axel Pratzner DVDs aus dem HTML - Seminar.

olkostbe · 5. Oktober 2017

Danke Sempervivum.

Das kam wirklich unerwartet. Ich habe ca. 3 Stunden damit verbracht eine Lösung zu finden (Internetrecherche eingeschlossen) - und da kommt die Lösung nach 4 Minuten aus dem Forum! Das ist wirklich Klasse.

Jetzt kommt natürlich die nächste Frage (Sorry für mein Laientum): Es geht um die Übergabe von Variablen von der Funktion heraus, um damit weiter arbeiten zu können.

Hier mal der überarbeitete aktuelle Code:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Beispiel Auto</title>
    <meta charset="utf-8">
</head>

<body>
     
<script>
function ausgabe (event)
    {
    event.preventDefault();
    var autoerzeuger = document.getElementById ('autohersteller').value;
    var farbevonauto = document.getElementById ('farbeauto').value;
    var maxgeschw = document.getElementById ('maxgeschwindigkeit').value;
    
    document.getElementById("anzeige").innerHTML = "Hersteller: " + autoerzeuger + "Farbe: " + farbevonauto + " maximale Geschwindigkeit: " + maxgeschw;
  }
    
</script>
    
  <form name="Autodaten" action="" method="get" enctype="text/plain">
        Hersteller:             <input id="autohersteller" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>
      Farbe:             <input id="farbeauto" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>
      Max.Geschwindigkeit:      <input id="maxgeschwindigkeit" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>
        
        <input  type="submit" name="" value="Sichern" onclick="ausgabe(event)" />
  </form>
    
<div id="anzeige">
    Test1
    </div>
    <p>
    <script>
        document.write ("Hallo Welt");
        var autobauer= document.getElementById("autohersteller").value;
        document.write (autobauer);
        </script>
    </p>

    
</body>
</html>

Alles anzeigen

Ganz am Schluss will ich versuchen mit den Daten aus dem Formular dann zu arbeiten.

Also später soll dann wie auf der DVD dann der Autobauer verändert werden können - halt mit Userabfrage über <form> etc. und nicht direkt im Programm wie auf der DVD.

Das wollte ich beginnend mit den unteren Zeilen erreichen:

Code

<script>
        document.write ("Hallo Welt");
        var autobauer= document.getElementById("autohersteller").value;
        document.write (autobauer);
        </script>

Wenn ich das richtig verstehe, muss ich die Variablen aus der Funktion herausholen und das vermutlich über die () Klammer. Hier steht dann schon der oben erwähnte event. Kann man das ohne Probleme mit den übergebenden Variablen erreichen?

Kann ich eventuell hier jemanden aus dem Forum bitten; mir da auf die Sprünge zu helfen?

Dieses Mal will ich vermeiden nochmal 3 Stunden mit Trial and Error zu verlieren und mit Nichts dann doch das Forum zu fragen.

Vielen Dank

Beiträge von olkostbe

Brauche kurz ein Testkaninchen

Brauche kurz ein Testkaninchen

Animation skalierbar?

Animation skalierbar?

Animation skalierbar?

Fußzeile bleibt beim scrollen stehen

Fußzeile bleibt beim scrollen stehen

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Toggle Menü mit :target - Menü öffnet sich nicht

Zeichenbegrenzung

Wie kann ich einen Text über CSS verschwinden lassen, wenn ich mit der Maus drüber fahre.

Javascript Anfängerfrage: Programmierung mit Datenübergabe unklar.

Javascript Anfängerfrage: Programmierung mit Datenübergabe unklar.

Javascript DVDs

Javascript Anfängerfrage: Programmierung mit Datenübergabe unklar.