Ankündigung

Einklappen
Keine Ankündigung bisher.

Fotos mit "einfachem" responsivem Design

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • #16
    Danke !

    Ich habe jetzt eine Unterseite aufgelegt, die noch nicht indexiert ist - bin vorsichtig bis paranoid :-)
    Falls Google auf die Idee kommt, sich ausgerechnet heute auf der sensibel-heilen umzuschauen, möchte ich mir keinen Duplicate Content einfangen, was natürlich mehr als äußerst unwahrscheinlich ist.

    Es gibt einen paradoxen Effekt. Auf welchem Smartphone hast Du das Ganze beobachtet ? Auf meinem Galaxy J3 verhält sich IMO alles genau umgekehrt, als ich es erwartet hätte:

    Alles, was mit Prozentangaben eigentlich responsiv gemeint ist, wird auf die linke Hälfte zusammengeschoben. Das gilt für die obere Navigations-Leiste, dann ausgerechnet die Gitarre, den Main Header und die Navileiste unten. Alles mit festen Pixelangaben wird ansonsten aber völlig korrekt, lediglich etwas zu breit, dargestellt, dass man horizontal scrollen muss.
    Ich mache morgen mit einem zweiten Handy mal ein Photo, wie das hier auf dem Galaxy rüberkommt. Hast Du eigentlich Zugriff auf meine CSS ? Sonst kopiere ich morgen mal die entsprechenden Teile in meinen nächsten Post.
    Bin natürlich gern bereit, mit der Umsetzung Deiner Tipps anzufangen. Nur mit dem Hamburger-Menü habe ich Null Ahnung, da muss erstmal ein Tutorial her.
    Ist schon ein bißchen spät, morgen mehr...

    Viele Grüße Bernhard

    Kommentar


    • #17
      Alles, was mit Prozentangaben eigentlich responsiv gemeint ist, wird auf die linke Hälfte zusammengeschoben.
      Alles mit festen Pixelangaben wird ansonsten aber völlig korrekt, lediglich etwas zu breit, dargestellt, dass man horizontal scrollen muss.
      Das ist nicht paradox, sondern genau das, was zu erwarten ist: Container mit Prozentangaben passen sich an die Fensterbreite an, solche mit festen Pixelangaben tun es nicht. Wahrscheinlich meinst Du jedoch, dass das Layout bei den Pixelangaben erhalten bleibt, mit der Einschränkung dass man scrollen muss, während es bei Prozentangaben, die ja eigentlich eine gute Darstellung auf einem kleinen Bildschirm gewährleisten sollen, zerlegt oder chaotisch wird, weil bei einem schmalen Display der Platz nicht reicht.

      Mein Handy ist übrigens ein Samsung S4, ein einfaches Modell.
      Und Zugriff auf HTML und CSS habe ich, und jeder andere Sachkundige auch, über die Entwicklerwerkzeuge meines Browsers.

      Leider finde ich auf die Schnelle kein gutes Tutorial für ein Hamburger Menü. Ich habe aber selber Beispiele und könnte ein passende heraus suchen.

      Kommentar


      • #18
        Hier mein Code für ein Hamburger-Menü:
        Code:
        <!DOCTYPE html>
        <html lang="de">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        <title>Hamburger-Menü/title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style>
        label.hamburger {
        display: block;
        position: relative;
        background: #555;
        width: 75px;
        height: 50px;
        margin-left: 0;
        border-radius: 4px;
        transition: border-radius .5s;
        z-index: 500;
        }
        input#hamburger {
        display: none;
        }
        .topmenu ul {
        overflow: hidden;
        height: 0;
        transition: all 0.5s ease-out;
        }
        input#hamburger:checked~ul {
        height: auto;
        }
        .line {
        position: absolute;
        left: 10px;
        height: 4px;
        width: 55px;
        background: #fff;
        border-radius: 2px;
        display: block;
        transition: 0.5s;
        transform-origin: center;
        }
        .line:nth-child(1) {
        top: 12px;
        }
        .line:nth-child(2) {
        top: 24px;
        }
        .line:nth-child(3) {
        top: 36px;
        }
        input#hamburger:checked~label.hamburger .line:nth-child(1) {
        transform: translateY(12px) rotate(-45deg);
        }
        input#hamburger:checked+label.hamburger .line:nth-child(2) {
        opacity: 0;
        }
        input#hamburger:checked+label.hamburger .line:nth-child(3) {
        transform: translateY(-12px) rotate(45deg);
        }
        </style>
        </head>
        <body>
        <nav class="topmenu">
        <!-- unsichtbare Checkbox, um die Togglefunktion zu steuern -->
        <input type="checkbox" id="hamburger">
        <!-- das Hamburger Symbol -->
        <label for="hamburger" class="hamburger">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        </label>
        <!-- die eigentliche Navigation -->
        <ul>
        <li><a href="#" title="Startseite">Home</a></li>
        <li><a href="#" title="Webdesign">Webdesign</a></li>
        <li><a href="#" title="Fotoservice">Fotoservice</a></li>
        <li><a href="#" title="Webspace">Hosting</a></li>
        </ul>
        </nav>
        <script>
        // Set max-height of top menu to the appropriate value:
        vinp = document.querySelector('input#hamburger');
        vlbl = document.querySelector('label.hamburger');
        vul = document.querySelector('nav.topmenu ul');
        vlbl.addEventListener("click", function (event) {
        if (!vinp.checked) {
        vul.style.height = vul.scrollHeight + "px";
        } else {
        vul.style.height = "0";
        }
        });
        </script>
        </body>
        </html>
        Leider hat dieses Forum die Einrückungen verschluckt.
        Das CSS ist etwas lang, weil das Hamburger-Symbol aus drei Linien zusammengebaut und animiert wird.
        Der Checkbox-Trick ist hier erklärt:
        https://wiki.selfhtml.org/wiki/CSS/T..._Checkbox-Hack
        Zuletzt geändert von Sempervivum; 24.02.2019, 06:58.

        Kommentar


        • #19
          Danke. Sehr nett, dass Du Dir so viel Mühe machst. Ich habe den Code heruntergeladen und werde das die nächsten Tage ausprobieren. Leider verstehe ich erstmal so gut wie nichts, aber das ist ja klar.
          Muss mir erst einmal auch den Checkbox-Trick erarbeiten, möchte halbwegs verstehen, was da so alles los ist...

          Viele Grüße Bernhard

          Kommentar


          • #20
            Hallo,

            wegen Überforderung habe ich das Thema Responsive & Co erstmal hintenan gestellt. Ich weiß, ich wollte ja selber eher locker (siehe Titel) responsives Design ausprobieren, wusste aber nicht um das ganze Drunherum. Es scheint mir, als gäbe es auch einen regelrechten Responsive-Hype,.Im Web geht das an den Punkt "Mobile only" statt "mobile first".
            Hallo Sempervivum, ich finde Deinen Code gut, aber ich verstehe absolut gar nichts, und das ist irgendwie nicht mein Ding. Das gillt auch für die Checkbox. Ich habe den Coide zumindest in einen Editor gepackt und sie als .htm abgespeichert. Brachte leider so erstmal nichts. Und es scheint mir so, als könne ich mich z. Zt. weder in das Hamburger-Menü so einarbeiten, dass es funktioniert, noch in das "richtige" responsive Umsetzen für verschiedene Viewports per x/y-Achse. Vielleicht versteht Ihr, dass ich zur Zeit auch nicht auf mein gerade mühsam erarbeitetes Design verzichten möchte.

            Was ich mir am ehesten zutraue:: alle Pixelangaben durch Prozentangaben ersetzen, es gibt jaTools zum Umrechnen. Schriften per em, Höhenangabe raus wegen vermutlich überfießendem Text, Darstellung auf 960 px setzen. Naiv ? Wahrscheinlich ! Ich möchte die Navileiste links gern erstmal drin behalten.

            So habe mich entschlossen, erstmal die Site, wie sie ist, konsequent zu verbessern. Heißt, ich habe den Inhalt verbessert und sie samt aller Unterseiten durch den W3C-Validator geschickt (bin ja neu mit CSS3) und habe anschließend alle Fehler beseitigt. Die Navistruktur im Menü oben muss ich nochmal überarbeitern, ist noch ziemlich unübersichtlich.
            Alle Seiten sind mittlerweile bei Google indexiert, die Index rankt unter den Top-Ten zur Zeit auf Pos. 9. Damit kann ich erstmal gut leben.
            Dies als Rückmeldung. Ist der Weg mit den relativen Größenangaben gangbar ?
            BtW. Habe die Testseite hier erstmal rausgenommen. Google hatte sich irgendwie trotz Sperre in der robots indexiert bzw. kannte sie (möchte keinen DC).

            Für Interessierte hier noch mal die Site, wie sie jetzt ist: www.gitarrenunterricht-neuss.de

            Viele Grüße Bernhard
            Zuletzt geändert von Bernhard; 03.03.2019, 09:52.

            Kommentar

            homepage-forum.de - Hilfe für Webmaster! Statistiken

            Einklappen

            Themen: 56.375   Beiträge: 428.047   Mitglieder: 27.714   Aktive Mitglieder: 77
            Willkommen an unser neuestes Mitglied, Jugl.

            Online-Benutzer

            Einklappen

            621 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 618.

            Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

            Die neuesten Themen

            Einklappen

            • arnego2
              Antwort auf hreflang Tags
              2 Domains eins für Französisch eins für Deutsch.
              Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

              Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
              Gestern, 16:13
            • TheBablegum
              Meine Webseite, eure Meinung!
              Mooin,
              ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
              Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
              Sei es jetzt zum Layout, der...
              Gestern, 15:30
            • Sempervivum
              Antwort auf Ausgabe als Link
              Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
              Gestern, 14:22
            • Ingo
              Antwort auf Ausgabe als Link
              Hi,
              urlencode wird ggf. nicht funktionieren. Besser wäre wie gesagt eine ID abzufragen und in den Link zu setzen.

              Gruß
              Ingo
              Gestern, 13:13
            • Sempervivum
              Antwort auf Ausgabe als Link
              Grundprinzip müsste etwa so aussehen:
              PHP-Code:
              $titel urldecode($_GET['titel']);
              $interpret urldecode($_GET['interpret']);
              $sql "SELECT text FROM texte where titel='" $titel "' and interpret='" $interpret "'";
              foreach (
              $pdo->query($sql) as 
              ...
              Gestern, 10:31

            Kostenlose Homepage bei Jimdo!

            Einklappen

            Jimdo

            Die neuesten Beiträge

            Einklappen

            • Atlan
              hreflang Tags
              Hallo,
              habe immer noch ein Problem mit den hreflang Tags

              unsere Seite: https://www.*****.com, besteht aus dem Deutschen Teil unter *****.com und dem französischen Teil unter *****.com/fr/.
              -----------
              <!DOCTYPE html>
              <html lang="de">
              ...
              23.03.2019, 16:41
            • arnego2
              Antwort auf hreflang Tags
              2 Domains eins für Französisch eins für Deutsch.
              Bei den Franzosen bin ich recht sicher das ihnen eine voll Französische Seite mehr gefallen würde als eine mit Deutschen geteilte. Das meinte ich mit dem Eigensinn der Menschen.

              Eine Webseite muss dem User gefallen, ihm was abzunehmen,...
              Gestern, 16:13
            • TheBablegum
              Meine Webseite, eure Meinung!
              Mooin,
              ich betreibe nun seit geraumer Zeit meine eigene Webseite zum Thema Paidmailer und Werbemöglichkeiten.
              Da ich noch relativ weit am Anfang stehe und das meine erste Webseite ist, suche ich auch immer wieder Meinungen und Verbesserungsvorschläge.
              Sei es jetzt zum Layout, der...
              Gestern, 15:30
            • Fragman
              Ausgabe als Link
              Hallo...

              habe eine Datenbank mit Songtexten mit Ausgabe auf einer Webseite. Es gibt eine Vorauswahl der Titel nach Buchstaben.
              Angezeigt wird dann eine Liste der Titel und des Interpreten.
              Wie mache ich aus der Ausgabe der Titel einen Link der dann den entsprechenden Text anzeigt??...
              21.03.2019, 21:05
            • Sempervivum
              Antwort auf Ausgabe als Link
              Danke für den Hinweis, PHP und Datenbanken sind weniger meine Stärke. Wenn man eine ID verwendet, wird das Ganze dann wesentlich einfacher.
              Gestern, 14:22
            • Rudolfo
              Antwort auf Online Speicherplatz / Storage / Cloud gesucht!
              Also ich bin auch ein überzeugter Cloud-Nutzer. Deswegen würde ich dir die Ratgeber von G Data empfehlen. Dieser zeigt alle Angebote, wichtige Information und erklärt auch ein paar Hintergründe. Ich bin selber auch durch den Ratgeber auf die Option der Cloud aufmerksam geworden und er hat mich überzeugt....
              ☁ Fotos, Videos, Dokumente: Einfach in die Cloud laden und teilen.☀ Wir zeigen Ihnen, wie sie funktioniert und wie im Cloud-Speicher alles sicher bleibt! ☁
              Gestern, 14:20
            • Ingo
              Antwort auf Ausgabe als Link
              Hi,
              urlencode wird ggf. nicht funktionieren. Besser wäre wie gesagt eine ID abzufragen und in den Link zu setzen.

              Gruß
              Ingo
              Gestern, 13:13
            • Sempervivum
              Antwort auf Ausgabe als Link
              Grundprinzip müsste etwa so aussehen:
              PHP-Code:
              $titel urldecode($_GET['titel']);
              $interpret urldecode($_GET['interpret']);
              $sql "SELECT text FROM texte where titel='" $titel "' and interpret='" $interpret "'";
              foreach (
              $pdo->query($sql) as 
              ...
              Gestern, 10:31
            • Fragman
              Antwort auf Ausgabe als Link
              ..und jetzt die Frage aller Fragen:
              Wie sieht das als PHP-Code aus?????
              Gestern, 08:12
            • Sempervivum
              Antwort auf Ausgabe als Link
              Nein, überhaupt nicht: Du brauchst nur eine PHP-Seite, diese bekommt Interpret und Titel als Parameter übergeben, liest den Text aus der Datenbank und zeigt ihn an....
              23.03.2019, 18:58
            Lädt...
            X