Ankündigung

Einklappen
Keine Ankündigung bisher.

W3C-Tutorial für responsives Design - Probleme bei der Umsetzung

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

  • W3C-Tutorial für responsives Design - Probleme bei der Umsetzung

    Hallo,

    ich versuche nun in etwas größerem Stil, eine Webseite mit komplett responsivem Design aufzubauen. Als Grundlage dazu dient mir das englische W3C-Tutorial "Responsive Web Design Introduction", von dem ich schon wegen der schrittweisen Erklärungen viel halte. Ich habe die Beispiel-Hauptseite dort ein wenig an meine Vorstellungen angepasst, es sind jedoch nur Äußerlichkeiten, der innere Aufbau ist völlig unverändert. Diese Seite funktioniert, das Layout wird an verschiedene Viewports angepasst. Die CSS ist bei den Beispielen dort allerdings immer in den Header integriert. Zur Ansicht habe ich sie wieder temporär in die sensibel-heilen eingepackt:

    www.sensibel-heilen.de/template_modif.htm

    Ich verstehe mittlerweile bereits ein wenig von den Grundlagen und wollte mich jetzt weiter damit beschäftigen. Ich dachte, es sei eine gute Idee, zunächst einmal die CSS-Informationen als separate Datei auszulagern (der Übersichtlichkeit wegen). Bei meinen eigenen Seiten funktioniert das ohne Probleme - da gibt`s allerdings auch keine Medie Queries. Nachdem ich eine separate Datei mit den ausgelagerten CSS-Infos angelegt hatte, funktioniert die Anpassung an die Vieports nicht mehr richtig.

    www.sensibel-heilen.de/testtemplate.htm

    Hat jemand eine Idee, woran das liegen kann ? Vielen Dank im Voraus und
    viele Grüße

    Bernhard
    Willkommen beim Gitarrenunterricht A. Hertel in Neuss mit preisgünstigen Angeboten für Erwachsene, Kinder und Jugendliche. <META NAME=
    Zuletzt geändert von Bernhard; 14.03.2019, 15:44.

  • #2
    Hi,
    HTML-Elemente haben in einer CSS-Datei nichts zu suchen!

    Gruß
    Ingo
    Ingo Webdesign

    Kommentar


    • #3
      Danke, Ingo

      habe aus Versehen den <Style> Tag beim Rauskopieren in die separate CSS nicht gelöscht. Ist mir gestern Abend selber aufgefallen. Im Upload die korrigierte Version.
      Ich werden den Thread ganz sicher weiter brauchen, da kommen (fast garantiert) weitere Probleme bei der Umsetzung - und Fragen. Generell mal Danke für Eure Hilfe !
      Ich versuche, das Template zu verstehen, nehme es als Grundlage, verändere es und versuche, meine "alten" Seiten umzustellen...

      Gruß Bernhard
      Willkommen beim Gitarrenunterricht A. Hertel in Neuss mit preisgünstigen Angeboten für Erwachsene, Kinder und Jugendliche. <META NAME=

      Kommentar


      • #4
        Hallo,

        ich baue weiter an der Umsetzung des Templates. Wenn Ihr mir auf dieser Baustelle weiterhelfen könntet, wäre ich Euch dankbar. Den aktuellen Stand findet Ihr wieder unter www.sensibel-heilen.de/testtemplate.htm.

        Bin gerade dabei, Bilder einzufügen. Das sieht auf den Viewports für Mobile und Tablet ganz gut aus, sie werden so breit und so groß dargestellt,, wie ich mir das vorstelle. Für die Desktop-Version ist es (bei kleineren Desktops) eingangs unverhältnismäßig klein. Was kann ich da tun ? Muss ich über die mediaqueries die Verteilung anders (z.B. 3 x 33 %) definieren ? Generell hätte gern weniger Schrift im Mittelfeld und dafür mehr Bildbreite rechts. Das gillt für den unteren Abschnitt ganz besonders, die Textzeile ist einfach viel zu lang.
        Liege ich da richtig, oder muss ich das anders machen ?

        Noch wichtiger fast : Kann ich die Navi-Elemente links und das Foto rechts in den Divs irgendwie vertikal zentrieren ?

        Viele Grüße Bernhard
        Willkommen beim Gitarrenunterricht A. Hertel in Neuss mit preisgünstigen Angeboten für Erwachsene, Kinder und Jugendliche. <META NAME=

        Kommentar


        • #5
          Zitat von Bernhard Beitrag anzeigen
          ch dachte, es sei eine gute Idee, zunächst einmal die CSS-Informationen als separate Datei auszulagern (der Übersichtlichkeit wegen).
          Tja dachte ich auch bis ich bei verschiedenen Webseiten Speedtestern gesehen habe das sie das CSS lieber im Quellcode haben wollen. Bei allen Tipps die du aus dem Netz ziehst kann ich dir nur raten mit Vorsicht vorzugehen und geschriebenes zu überprüfen bevor du es letztendlich einbaust.

          https://arnego2.com <Webseiten ab €50 und einiges mehr>

          Kommentar


          • #6
            Hallo Arnego, danke für den Tipp. Mein

            Ich dachte, es sei eine gute Idee, zunächst einmal die CSS-Informationen als separate Datei auszulagern (der Übersichtlichkeit wegen).

            stand in Zusammenhang mit einem anderes Problem, das ich mittlerweile gelöst habe: die Anpassung an die Viewports macht mittlerweile - auch mit ausgelagerter CSS-Datei - keine Probleme. Ich brauche, da Anfänger, zur Zeit die strikte Trennung von HTML und CSS. Seitdem blicke ich erst durch diverse Tutorials durch. Wenn die Seiten fertig sind, reduziere ich die CSS eh auf das Nötigste und baue sie dann möglicherweise zusammen mit dem HTMLCode auf eine Seite.
            Ich arbeite an der vertikalen Zentrierung, erstmal über Tabellen-Darstellung.

            Viele Grüße Bernhard

            Kommentar


            • #7
              Hi,
              bis auf wenige Ausnahmen für spezielle Formatierungen einer einzelnen Seite lagere ich CSS grundsätzlich aus. Zwar dauert das Laden einen Tick länger, aber der Aufruf weiterer Seiten dürfte dann dank Browser-Cache schneller gehen.

              Gruß
              Ingo
              Ingo Webdesign

              Kommentar


              • #8
                Danke Ingo,

                mittlerweile habe ich aus zwei Quellen ein neues Template zusammengebaut, für insgesamt vier Viewports. Ich kam mit der alten Vorlage, die auf die 12-Spalten-Grids aufbauen, einfach nicht weiter.Musste ständig nachgucken, was wo für welchen Viewport definiert ist. Kam gar nicht mehr zum Gestalten.
                So wie in der neuen Version ist das Wechselspiel CSS-Quelltext für mich viel übersichtlicher. Interessant sind die teilweise fest definierten Desktop-Varianten, die kommen meiner alten (neuen) Site entgegen. Vor allem: Google mag das Ganze (getestet: für Smartphones okay). Zu sehen wie immer unter www.sensibel-heilen.de/testtemplate.htm
                Die CSS hängt noch dran, ich werde sie aber auslagern und alles nett aufräumen....

                Viele Grüße
                Bernhard

                Kommentar


                • #9
                  Hallo,


                  Ich habe mein Template Stück für Stück weiter entwickelt und bin eigentlich ganz zufrieden. Eine Sache gibt es, die ich nicht verstehe: bei der Smartphone-Darstellung (zumindest ist es mir dort aufgefallen) wird der Text im content-div beim vertikalen Zusammenschieben abgeschnittten, er verschwindet irgendwo hin (ohne overflow: hidden), auch, wenn ich die festen Höhenangaben in siderbar_links, content und siderbar2 komplett herausnehme (der wrapper selber hat keine Höhenangabe). Der "abgeschnittene" Text ist übrigens irgendwann schonmal im Footer aufgetaucht (kann ich im Moment leider nicht reproduzieren).

                  Hat das so seine Richtigkeit ? Dann müsste ich ausreichend Platz nach unten lassen. Die Schriften sind per em wenigstens ein klein wenig responsiv..
                  Gibt es einen Befehl oder Trick, mit demsich die Höhe des content-div sich nach unten je nach Test-Bedarf ausweiten lässt ?

                  Das Ganze zu sehen unter www.sensibel-heilen.de/testtemplate.htm

                  Viele Grüße Bernhard

                  Willkommen beim Gitarrenunterricht A. Hertel in Neuss mit preisgünstigen Angeboten für Erwachsene, Kinder und Jugendliche. <META NAME=

                  Kommentar

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

                  Einklappen

                  Themen: 56.415   Beiträge: 428.251   Mitglieder: 27.807   Aktive Mitglieder: 71
                  Willkommen an unser neuestes Mitglied, avabrooks.

                  Online-Benutzer

                  Einklappen

                  574 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 570.

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

                  Die neuesten Themen

                  Einklappen

                  • daniel5959
                    Antwort auf Googleplatzierung
                    Hallo,

                    ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                    Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                    Heute, 06:41
                  • Haris
                    Googleplatzierung
                    Hallo,

                    ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                    Heute, 00:58
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                    Ich danke Dir für die Hilfe.
                    Gestern, 16:40
                  • seoNaster
                    Antwort auf Suche Filehoster
                    Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                    Gestern, 10:53
                  • Rauch17
                    Antwort auf Fliesen im Wohnzimmer
                    Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                    20.05.2019, 19:07

                  Kostenlose Homepage bei Jimdo!

                  Einklappen

                  Jimdo

                  Die neuesten Beiträge

                  Einklappen

                  • Haris
                    Googleplatzierung
                    Hallo,

                    ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                    Heute, 00:58
                  • daniel5959
                    Antwort auf Googleplatzierung
                    Hallo,

                    ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                    Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                    Heute, 06:41
                  • föni
                    Zusätzliche fusszeile
                    Hallo Leute

                    Ich hab eine html Seite am laufen mit folgendem Code:

                    HTML-Code:
                     <!DOCTYPE HTML>
                    <html lang="de">
                    <head>
                        <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
                    <title>x.ch</title>
                    ...
                    17.05.2019, 22:00
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                    Ich danke Dir für die Hilfe.
                    Gestern, 16:40
                  • andi656
                    Suche Filehoster
                    hallo,

                    welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                    Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                    19.05.2019, 10:34
                  • seoNaster
                    Antwort auf Suche Filehoster
                    Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                    Gestern, 10:53
                  • Rauch17
                    Antwort auf Fliesen im Wohnzimmer
                    Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                    20.05.2019, 19:07
                  • Rauch17
                    Antwort auf Geschenk fur Chefin?
                    Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
                    20.05.2019, 19:05
                  • Rehnat
                    Antwort auf Geschenk fur Chefin?
                    Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
                    Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
                    20.05.2019, 12:48
                  • Mr.Kennedy
                    Antwort auf Webseite Domain Namen ändern?
                    Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
                    20.05.2019, 12:32
                  Lädt...
                  X