Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive.css anpassen

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

  • Responsive.css anpassen

    Hallo zusammen,

    ich bin gerade dabei für unseren Verein eine neue HP zu generieren.
    Ich will diese auf dem neuesten technischen Stand haben und probiere mich zum ersten mal mit der responsive.css damit auf Smartphones und Tablets die HP gescheit angezeigt wird.
    Der Rohbau der HP steht aber mit der responsive komme ich nicht so ganz klar.
    Muß ich die komplette CSS ändern oder nur bestimmte Werte?
    Komme da einfach nicht weiter.
    Habe schon gegoogelt aber nichts verständliches gefunden.
    Für Eure Tips wäre ich sehr sehr dankbar.
    Bin halt am lernen und entschuldige mich schon mal für die ein oder andere unklarheit.
    Hier auch mal ein Link zum momentanen Stand der Seite.

    http://www.garfield1711.bplaced.net

    Wie gesagt, der Rohbau steht, es geht nur noch um die Einstellungen in der Responsive CSS.
    Habe da etwas herum probiert aber ohne Erfolg.
    Was muß da rein?

    Schon mal vielen Dank im voraus.

    Gruß
    Garfield

  • #2
    AW: Responsive.css anpassen

    Du baust dir - in aller Regel - deine Standardseite für den Desktop zusammen. In den Media - Queries überschreibst du nur einzelne Werte, damit die Webseite zu den "anderen" Geräten passt. Da du ja bereits eine Desktop - Webseite gebaut hast, würdest du in den Media - Queries nur kleine Geräte abfangen und z.B. die Kästen auf der Startseite untereinander platzieren.

    Viele machen es heutzutage auch anders - d.H. erst die mobile Webseite, darauf basieren die Desktop - Seite erstellen. Da der Internet Explorer 8 - welchen ich für meine Kunden leider viel zu oft noch berücksichtigen muss - die Media Queries schlichtweg ignoriert, ist die Standard - Variante bei mir immer die Desktop - Seite. Diese wird dann im IE8 ausgeliefert. Alle Styles komplett neu zu überschreiben, ist zuviel Redundanz. Ausser, du nutzt bspw. SCSS mit relativ schlau eingesetzten Mixins. Dann hast du für jedes Endgerät eine "vollwertige" CSS - Datei.

    // Kleiner Nachtrag:

    Eine gute responsive Webseite springt nicht nur zwischen den einzelnen Breakpoints auf verschiedene Darstellungen um. Vielmehr ist es wichtig, trotzdem mit prozentualen Werten zu arbeiten, damit auch innerhalb einer Darstellung die Größe dynamisch ist.

    LG notepad

    Kommentar


    • #3
      AW: Responsive.css anpassen

      Habe noch ein wenig versucht Einstellungen hin zu bekommen aber ich bekomme zum beispiel nicht hin das sich die obere Grafik mit dem Veteinswappen und dem Vereinsamen auf 480px verkleinert.
      Auch die Navigation bekomme ich nicht untereinander wie es eigentlich sein sollte.
      Es gibt aber auch einen Erfolg. Die 3 boxen die in der Desktop Ansicht nebeneinander sind werden jetzt in der Smartphone Ansicht untereinander dargestellt.
      Das sollte ja auch so sein.
      Nur die Header Probleme bekomme ich nicht hin.
      Habe schon eine Menge Einstellungen ausprobiert aber nicht die richtige gefunden.
      Habt ihr vielleicht einen Tipp oder Lösungsvorschlag?
      Ich wäre euch sehr dankbar.
      Ist für mich auch Neuland und versuche es zu lernen.
      Schon mal vielen Dank.

      Gruß
      Garfield

      Kommentar


      • #4
        AW: Responsive.css anpassen

        Ich habe jetzt soweit die Einstellungen hinbekommen.
        Das einzige Problem ist aber immer noch die Grafik im Header.
        Das Vereinswappen und der Vereinsnamen bestehen aus einer Gafik.
        Diese paßt sich aber dem Smartphone Layout nicht an sondern schneidet einfach ab.
        Ich bin bald am verzweifeln.
        Was hab ich den verkehrt gemacht?

        Gruß
        Garfield

        Kommentar


        • #5
          AW: Responsive.css anpassen

          Hi,
          Zitat von garfield1711 Beitrag anzeigen
          Das einzige Problem ist aber immer noch die Grafik im Header.
          Das Vereinswappen und der Vereinsnamen bestehen aus einer Gafik.
          Diese paßt sich aber dem Smartphone Layout nicht an sondern schneidet einfach ab.
          Ich bin bald am verzweifeln.
          Was hab ich den verkehrt gemacht?
          Du hast für die Box 950px Breite definiert, was hier natürlich nicht hinein passt.
          Eine Möglichkeit wäre, den Schriftzug als Text zu setzen, eine andere, diese Grafik in drei floatende Teile zu splitten.

          Gruß
          Ingo
          Ingo Webdesign

          Kommentar


          • #6
            AW: Responsive.css anpassen

            Zitat von Ingo Beitrag anzeigen
            Hi,

            Du hast für die Box 950px Breite definiert, was hier natürlich nicht hinein passt.
            Eine Möglichkeit wäre, den Schriftzug als Text zu setzen, eine andere, diese Grafik in drei floatende Teile zu splitten.

            Gruß
            Ingo
            Welche Box den genau?
            Soll ich die Grafik einfach in 3 teile schneiden?
            Trotzdem schon mal ein Danke schön.
            Die Displays von Smartphones sind ja verschieden groß.
            Bringt es da was mit min-width und max-width zu arbeiten?

            Gruß
            Garfield

            Kommentar


            • #7
              AW: Responsive.css anpassen

              Habe es jetzt hin bekommen, das sich das Logo ohne Teilung minimiert.
              Das Logo war zuerst in der CSS Datei Header mit eingebunden.
              Ich habe sie da gelöscht und in den Headerbereich im Quelltext eingefügt.
              Siehe da, auf einmal hat es funktioniert.
              Jetzt ist es aber immer noch so das ich die Seite im Smartphone Horizontal etwas nach rechts schieben kann.
              Das hätte ich gerne auch weg, aber wie?
              Ich probere in der responsive.css alles aus aber irgendwie ist das der letzte Fehler den es zu überwinden gibt (außer Ihr findet noch Fehler).

              Gruß
              Garfield

              Kommentar


              • #8
                AW: Responsive.css anpassen

                Hallo

                Ich will diese auf dem neuesten technischen Stand haben
                und

                Jetzt ist es aber immer noch so das ich die Seite im Smartphone Horizontal etwas nach rechts schieben kann.
                Du wählst leider immer noch einen falschen Ansatzpunkt. Deine Seite sollte bei jeder Bildschirm- bzw. Browserfenstergröße (Viewpoint) vernünftig angezeigt werden. Das ist der Sinn vom Responisive Design.

                Einfacher Test: Wenn du dein Browserfenster immer schmaler machst, sollte sich der Inhalt immer bestmöglich anpassen, ohne das du seitlich scrollen musst oder kannst.

                Die Aufteilung bzw. die Ansicht im Browser hängt vom Inhalt ab, nicht von der Browserfenstergröße. Das ist die Klippe, die man nehmen muss, um Responisive Design sinnvoll einsetzen zu können.

                Du denkst leider nur in Stufen: PC, Tablet, Smartphone. Dabei gibt es für die keine festen Breiten, an denen du dich offensichtlich aber gerne orientieren möchtest.

                Das ist auch daran ersichtlich, das du die Seite ohne sinnvollen Inhalt erstellst, sondern nur irgendwelche Dummy-Texte nimmst. Bei dieser Vorgehensweise wirst du, sobald du den "echten" Inhalt einfügen musst, erfahrungsgemäß noch Probleme bekommen.

                Um den Inhalt vernünftig auf der Seite zu verteilen, musst du die meisten Größenangaben in der css-Datei in %-Werte umwandeln. Bei dir gibt es noch viel zu viele feste Werte. Allerdings, und das ist die Schwierigkeit, so sinnvoll, das die Seite auch mit wechselndem Inhalt immer vernünftig angezeigt wird.

                Dazu sollte aber bereits echter Inhalt vorhanden sein. Im Moment gibt es zum Beispiel nur Text. Kommen später keine Bilder, Aufzählungen, Spalten und ähnliches hinzu? Ist der Inhalt in den Boxen immer gleich groß wie jetzt?

                Darüber solltet du dir schon mal Gedanken machen. Durch deine Vorgehensweise machst du dir das Erstellen der Seite unnötig schwer und kommst doch nur zu Ergebnissen, die mit Responisve Design nur ansatzweise etwas zu tun haben.

                Eine Seite wird nicht dadurch responsive, das man ohne Sinn und Hintergrundwissen ein paar media-Angaben in die css-Datei einbaut.

                Gruss

                MrMurphy

                Kommentar


                • #9
                  AW: Responsive.css anpassen

                  Hallo Murphy,
                  Danke für deine ausführliche Informationen.
                  Inhalte kommen noch. Wollte erst mal eine Vorlage erstellen.
                  Bin noch am lernen und war schon froh soweit gekommen zu sein.
                  Ich Danke dir für deine "Mahnung" zu meinen Fehlern.
                  Handelt es sich um alle width Angaben die ich in Prozente angeben muß?
                  Wie finde ich die richtigen prozentwerte heraus?

                  Gruß Garfield

                  Kommentar


                  • #10
                    AW: Responsive.css anpassen

                    Hallo

                    Wie finde ich die richtigen prozentwerte heraus?
                    Durch Wissen, Übung und Erfahrung.

                    Einen automatischen oder halbautomatischen Weg gibt es nicht.

                    Bei deiner Vorgehensweise bleibt dir wohl nur, das Browserfenster immer wieder in der Breite zu ändern, schauen wie die einzelnen Elemente sich verhalten und dann die zugehörigen CSS-Angaben so anzupassen, das die Breite optimal ausgenutzt wird und niemals ein seitliches Scrollen notwendig ist.

                    Beim Firefox ist da zum Beispiel das AddOn Firebug hilfreich. Ähnliches gibt es auch für die meisten anderen Browser.

                    Oder du sucht in den CSS-Dateien gezielt nach festen Werten und änderst die dann entsprechend. Das ist ohne wirkliches Hintergrundwissen aber schwieriger.

                    Gruss

                    MrMurphy

                    Kommentar


                    • #11
                      AW: Responsive.css anpassen

                      Ich danke Dir schon einmal für die wichtigen Infos.
                      Die werden mir bestimmt hilfreich sein.
                      Nur noch eins, gibt es bestimmte CSS Werte in der Responsive die auf jedenfall geändert werden müssen, z.B. Wrapper, Header usw. damit das Gesamtbild erst mal stimmt?

                      Gruß
                      Garfield

                      Kommentar


                      • #12
                        AW: Responsive.css anpassen

                        Zitat von MrMurphy Beitrag anzeigen
                        Browserfenstergröße (Viewpoint) vernünftig angezeigt werden. Das ist der Sinn vom Responisive Design.

                        Einfacher Test: Wenn du dein Browserfenster immer schmaler machst, sollte sich der Inhalt immer bestmöglich anpassen, ohne das du seitlich scrollen musst oder kannst.

                        Die Aufteilung bzw. die Ansicht im Browser hängt vom Inhalt ab, nicht von der Browserfenstergröße. Das ist die Klippe, die man nehmen muss, um Responisive Design sinnvoll einsetzen zu können.

                        PC, Tablet, Smartphone. Dabei gibt es für die keine festen Breiten,

                        Allerdings, und das ist die Schwierigkeit, so sinnvoll, das die Seite auch mit wechselndem Inhalt immer vernünftig angezeigt wird.

                        Eine Seite wird nicht dadurch responsive, das man ohne Sinn und Hintergrundwissen ein paar media-Angaben in die css-Datei einbaut.

                        Gruss

                        MrMurphy
                        Hallo,

                        ich suche ja auch immer nach eine "ideal Lösung". Bloß die scheint es nicht zu geben ohne Media - Queries.

                        Ich habe mal eine Testseite gebaut bei der ich % und Viewportbreite (1VW = 1% Viewportbreite) nutze. Hier habe ich was dazu gefunden. (deutsche Übersetzung). Leider wird das aber nicht von Android sowie bei mir Opera und Safari 5.1 für Windows unterstützt. Der Safari 6 soll das wohl unterstützen, aber den gibt es nicht für Windows. Die Browser welche das unterstützen können das richtig gut anpassen, wenn ich die Browserfenstergröße durch zusammenschieben ändere.

                        Sollte es wirklich so gehen, müsste ich nur für 320px Media - Queries nutzen. (@media (max-width: 320px)). Allerdings kann ich das nicht ganz testen, da ich kein Tablet und kein iPhon habe. Auf meinem S2 von Samsung und dem Mini von meiner Frau sowie den Simulator für iPhon2 scheint es zu gehen.

                        Liebe Grüße
                        Andre
                        Wir gestalten ihre Webseite

                        CO-Webdesigen.de
                        Mein Facbook

                        Kommentar


                        • #13
                          AW: Responsive.css anpassen

                          hy,
                          nu mach ich mir mal ganz ein auf dumm!!
                          Verein?? Anpassung der Auflösung auf das öffnende Gerät??
                          warum verwendest da net gleich von Anfang an ein CMS System.

                          Verein: Mitglieder= Memberbereich
                          CMS: bei Joomla haste Browser-weiche & unterschiedliche css


                          so ein Joomla Lehrgang an der VHS kostet dir:
                          Grundkurs ca 80-90€ (allg. Einstellungen)
                          Aufbaukurs nochmal 80-90€ (Temples)
                          Sehr gut wird man nur, wenn einem gut nicht gut genug ist

                          Kommentar

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

                          Einklappen

                          Themen: 56.504   Beiträge: 427.331   Mitglieder: 28.081   Aktive Mitglieder: 49
                          Willkommen an unser neuestes Mitglied, Coni1726.

                          Online-Benutzer

                          Einklappen

                          145 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 141.

                          Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

                          Die neuesten Themen

                          Einklappen

                          • daniel5959
                            Antwort auf Gästebuch für meine Homepage
                            Nachtrag




                            Was jetzt stimmt - Kommentarfunktion oder Gästebuch - mal selber herausfinden....
                            Heute, 01:25
                          • daniel5959
                            Antwort auf Gästebuch für meine Homepage
                            Hallo,

                            muss es denn unbedingt ein Gästebuch sein?

                            Früher gab es Gästebücher auf sehr vielen Homepages. Heute sind sie selten, da meistens gar nichts geschrieben wird oder es wird mit Spam überflutet, so dass es dauernd überprüft und vom Spam gesäubert werden muss....
                            Heute, 01:03
                          • arnego2
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Post ihn doch einfach passiv...
                            Gestern, 22:50
                          • Coni1726
                            Gästebuch für meine Homepage
                            Hallo zusammen,
                            ich brauche dringend Hilfe. Ich habe bei 1&1 ionos eine Homepage angelegt über das Baukastenprinzip. Die bieten kein Gästebuch an. Ich habe im Internet gesucht aber da gibt es immer nur welche die auf anderen Homepages liegen. Wie bekomme ich eins nur auf meine Seite. habe...
                            Gestern, 22:22
                          • ThegreenY
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Vielen Dank für deine Antwort, ich habe eine der einfachsten aber auch nicht so tolle methode nicht bedacht, es gibt diverse Converter die einem eine einfache htaccess in nginx code umwandeln, da bin ich auf der Suche nach einer erklärung zu nginx config code drüber gestolpert, damit war es dann...
                            Gestern, 21:39

                          Die neuesten Beiträge

                          Einklappen

                          • Coni1726
                            Gästebuch für meine Homepage
                            Hallo zusammen,
                            ich brauche dringend Hilfe. Ich habe bei 1&1 ionos eine Homepage angelegt über das Baukastenprinzip. Die bieten kein Gästebuch an. Ich habe im Internet gesucht aber da gibt es immer nur welche die auf anderen Homepages liegen. Wie bekomme ich eins nur auf meine Seite. habe...
                            Gestern, 22:22
                          • daniel5959
                            Antwort auf Gästebuch für meine Homepage
                            Nachtrag




                            Was jetzt stimmt - Kommentarfunktion oder Gästebuch - mal selber herausfinden....
                            Heute, 01:25
                          • daniel5959
                            Antwort auf Gästebuch für meine Homepage
                            Hallo,

                            muss es denn unbedingt ein Gästebuch sein?

                            Früher gab es Gästebücher auf sehr vielen Homepages. Heute sind sie selten, da meistens gar nichts geschrieben wird oder es wird mit Spam überflutet, so dass es dauernd überprüft und vom Spam gesäubert werden muss....
                            Heute, 01:03
                          • ThegreenY
                            Wartungs .htaccess auf nginx zum Laufen bringen?
                            Hallo Forum,

                            ich weiß nicht wo ich dass hier sonnst posten sollte, falls es hier nicht rein passt, einfach verschieben.

                            Ich habe nun eine .htaccess Datei erstellt, die im falle einer anstehenden Wartung auf den Server geladen werden soll und dann die Nutzer auf die Wartungs...
                            Gestern, 18:09
                          • arnego2
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Post ihn doch einfach passiv...
                            Gestern, 22:50
                          • ThegreenY
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Vielen Dank für deine Antwort, ich habe eine der einfachsten aber auch nicht so tolle methode nicht bedacht, es gibt diverse Converter die einem eine einfache htaccess in nginx code umwandeln, da bin ich auf der Suche nach einer erklärung zu nginx config code drüber gestolpert, damit war es dann...
                            Gestern, 21:39
                          • Localfu
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            HiThegreenY,
                            leider wird das nix mit .htaccess und nginx. Denn nginx ist ein sehr hochperformanter Webserver, der auf .htaccess deswegen verzichtet. Also bringt deine .htaccess-Datei auf dem Server leider nichts.

                            Da funktioniert die Apache-Konfigurationsdatein nicht. Such doch im...
                            Gestern, 21:09
                          • daniel5959
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Hallo,

                            bei mehrere IPs müssten diese wohl in die IF-Zeile mit "or" hinzugefügt werden

                            PHP-Code:
                            if ($remote_addr != 127.0.0.1 or 127.0.0.2 or 127.0.0.3
                            Es heißt im Link oben



                            Wie heißt den die Konfigurationdatei in diesem Verzeichnis?...
                            Gestern, 19:54
                          • ThegreenY
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Bei google habe ich die meißten Sachen jetzt schon Durch.

                            Ich würde es gerne so haben dass ich entweder eine Datei ins Verzeichnis reinladen oder umbennen muss damit die Wartung Aktiv wird, z.B. eine .htaccess datei ins Verzeichnis laden oder aber wartung_off.php in wartung_on.php umbenennen....
                            Gestern, 19:27
                          • daniel5959
                            Antwort auf Wartungs .htaccess auf nginx zum Laufen bringen?
                            Hallo,

                            bei Google gibts noch weitere Funde - auch dort mal geschaut?

                            Und wenn es nicht so funktioniert wie gewünscht, dann schildern was anders sein soll, damit die Helfer wissen, ob und wie sie helfen können.

                            daniel5959 ...
                            Gestern, 19:19
                          Lädt...
                          X