Ankündigung

Einklappen
Keine Ankündigung bisher.

Mobile und Desktop-Version kombinieren

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

  • Mobile und Desktop-Version kombinieren

    Hallo,

    mittlerweile habe ich eine kleine Homepage erstellt (mit MS Expression web 4), die nur einige Buttons mit Links zur Weiterleitung enthält.
    da das Hintergrundbild teils gekachelt wurde, habe ich 2 Versionen erstellt, die unter verschiedenen URLs aufgerufen werden und einmal ein Hintergrundbild im Hochformat haben und einmal im Querformat.
    Ich frage mich, ob es einen einfachen Weg gibt, dass man nur eine Version verwendet und der Browser slebst entscheidet, welches Hintergrundbild er nehmen soll.

    Hier jeweils der erste Teil der Index.html-Datei (nur die vorletzte Zeile unterscheidet sich):

    mobil:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="de" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Ohne_Titel_4</title>
    <style type="text/css">
    .auto-style1 {
    text-align: center;
    }
    .auto-style2 {
    color: #7FDBFC;
    }
    .auto-style3 {
    margin-left: 267px;
    margin-top: 26px;
    margin-bottom: 0px;
    }
    .auto-style4 {
    font-size: x-large;
    font-family: "Belwe Bd BT";
    }
    .auto-style6 {
    margin-left: 32px;
    }
    .auto-style7 {
    color: #B2E7FA;
    font-size: xx-large;
    }
    .auto-style8 {
    font-family: "Belwe Bd BT";
    }
    </style>
    </head>

    <body style="background-image: url('Hintergrund-schmaler.jpg')">

    <p class="auto-style1">
    ...
    ...
    ...

    und hier die Desktop-Version:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="de" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Ohne_Titel_4</title>
    <style type="text/css">
    .auto-style1 {
    text-align: center;
    }
    .auto-style2 {
    color: #7FDBFC;
    }
    .auto-style3 {
    margin-left: 267px;
    margin-top: 26px;
    margin-bottom: 0px;
    }
    .auto-style4 {
    font-size: x-large;
    font-family: "Belwe Bd BT";
    }
    .auto-style6 {
    margin-left: 32px;
    }
    .auto-style7 {
    color: #B2E7FA;
    font-size: xx-large;
    }
    .auto-style8 {
    font-family: "Belwe Bd BT";
    }
    </style>
    </head>

    <body style="background-image: url('Hintergrund.jpg');background-size: 100% 100%">

    <p class="auto-style1">
    ...
    ....
    ...

    Gibt es da eine Lösung für Laien wie mich?

  • #2
    Das geht mit Media Queries.

    Hintergrundbilder sind aber seit über 20 Jahren eher out, deshalb sind die Möglichkeiten eingeschränkt und werden auch nicht weiter entwickelt. Kurz: Große Hintergrundbilder, speziell hinter Text, nerven deine Besucher nur. Viele Browser gehen mit der unterschiedlichen Auswahlmöglichkeit von Hintergrundbildern deshalb auch fahrlässig um - sprich: Das funktioniert nicht immer.

    Ähnlich ist das von dir verwendete XHTML bereits vor über 10 Jahren offiziell begraben worden. Wenn du Media Queries verwenden willst solltest du gleichzeitig auf HTML5 und CSS3 umsteigen.

    Kommentar


    • #3
      Moin Gnosius,
      jetzt muss ich auch ein paar Worte schreiben. Hintergrundbilder sind weiterhin kein Problem und können weiterhin verwendet werden. Und mithilfe von object-fit und object-position kannst du auch auf Elemente wie DIV-Elemente Hintergrundbilder anpassen. Hintergrundbilder funktionieren immer, wenn diese richtig eingebunden wurden --> Quellenangaben, etc. Das Hintergrundbild-Modul wurde sogar vom W3C erst im Juli weiterentwickelt.

      Zu Media-Queries: Media-Queries bieten die Möglichkeit auf bestimmte Ausgabe-Eigenschaften an das anzeigende Endgerät anzupassen. Dazu gehört auch die Breite des Anzeigebereiches auch Viewport genannt.

      So sieht der Einsatz von Media-Queries aus:
      Code:
      @media screen and (max-width: 599px) {
      body {
      background-image: url('kleinesBild.jpg');
      }
      
      }
      @media screen and (min-width: 600px) {
      body {
      background-image: url('grossesBild.jpg');
      }
      }
      Im oberen Media-Query wird bei einer maximalen breite bis 599 Pixel das kleinere Bild als Hintegrund hinterlegt. Im unteren Media-Query wird das große Bild bei einer minimalen Breite von 600 Pixel in der Breite dann angezeigt. Sprich also ab 600 Pixel kommt das große Bild davor nur das Kleine.

      Mithilfe von der CSS Eigenschaft 'background-position' und 'background-size' kannst du zusätzlich bestimmen wie und wo das Bild im Hintergrund gezeigt wird. Mithilfe von 'background-repeat' kannst du verhindern dass es 'gekachelt' wird.

      Gruss Localfu
      PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

      Kommentar


      • #4
        Gnosius Verwende doch in zukunft den neuen HTML5-Standard. Weil das Feature Media-Queries für HTML5-Standard gedacht ist.

        Hier ein Beispiel:
        HTML-Code:
        <!DOCTYPEhtml>
        <htmllang="de">
        <head>
            <metacharset="UTF-8">
            <metahttp-equiv="X-UA-Compatible"content="IE=edge">
            <metaname="viewport"content="width=device-width, initial-scale=1.0">
            <title>Dein Titel</title>
        </head>
        <body>
            Hier dein Inhalt
        </body>
        </html>
        Gruss Localfu
        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

        Kommentar


        • #5
          Du kannst auch die Orientierung, Hoch- oder Querformat mit einer Mediaquery abfragen:
          Code:
          @media (orientation: landscape) {
              body { background-image: url(images/bg-landscape.jpg); }
          }
          @media (orientation: portrait) {
              body { background-image: url(images/portrait.jpg); }

          Kommentar


          • #6
            Vielen Dank an alle, ich habe versucht, die Tipps mit meinen linken Händen umzusetzen.....

            Der Text beginnt jetzt so...:

            <!DOCTYPEhtml>
            <htmllang="de">
            <head>
            <metacharset="UTF-8">
            <metahttp-equiv="X-UA-Compatible"content="IE=edge">
            <metaname="viewport"content="width=device-width, initial-scale=1.0">
            <title>Titel</title>


            <style type="text/css">
            .auto-style1 {
            text-align: center;
            }
            .auto-style2 {
            color: #7FDBFC;
            }
            .auto-style3 {
            margin-left: 267px;
            margin-top: 26px;
            margin-bottom: 0px;
            }
            .auto-style4 {
            font-size: x-large;
            font-family: "Belwe Bd BT";
            }
            .auto-style6 {
            margin-left: 32px;
            }
            .auto-style7 {
            color: #B2E7FA;
            font-size: xx-large;
            }
            .auto-style8 {
            font-family: "Belwe Bd BT";
            }
            </style>
            </head>

            <body>

            @media (orientation: landscape) {
            body { background-image: url('Hintergrund.jpg'); }
            }
            @media (orientation: portrait) {
            body { background-image: url('Hintergrund-schmaler.jpg'); }


            <p class="auto-style1">
            <a href="https://products.hasb..................
            ..................

            Jetzt bekomme ich allerdings einen weißen Hintergrund angezeigt, wo oben ein Teil des html-Texts steht: (@media {orientation...... bis .....schmaler.jpg');]

            Darunter dann die Schaltflächen.
            Könnte nochmal jemand über die Syntax schauen?

            Kommentar


            • #7
              Das hätte ich dazu schreiben sollen: Was Du da unerwünschter Weise siehst, ist CSS und gehört in die <style> Tags, also aus dem <body> löschen und dort hinzu fügen:
              Code:
              /* alles was darüber steht wie bisher */
              .auto-style8 {
              font-family: "Belwe Bd BT";
              }
              @media (orientation: landscape) {
              body { background-image: url('Hintergrund.jpg'); }
              }
              @media (orientation: portrait) {
              body { background-image: url('Hintergrund-schmaler.jpg'); }</style>
              </head>
              
              <body>
              Außerdem fehlt hier ein Leerzeichen zwischen doctype und html, so muss es aussehen:
              Code:
              <!DOCTYPE html>

              Kommentar


              • #8
                Hi,
                nach DOCTYPE und meta fehlt ein Leerzeichen.
                Bei font-family mindestens eine gererische Angabe wie serif hinzufügen.
                Statt .auto-style mit Nummern würde ich "sprechende" Namen wählen.

                Gruß
                Ingo
                Ingo Webdesign

                Kommentar


                • #9
                  So, habe ich erledigt:

                  <!DOCTYPE html>
                  <htmllang="de">
                  <head>
                  <metacharset="UTF-8">
                  <metahttp-equiv="X-UA-Compatible"content="IE=edge">
                  <metaname="viewport"content="width=device-width, initial-scale=1.0">
                  <title>Titel</title>


                  <style type="text/css">
                  .auto-style1 {
                  text-align: center;
                  }
                  .auto-style2 {
                  color: #7FDBFC;
                  }
                  .auto-style3 {
                  margin-left: 267px;
                  margin-top: 26px;
                  margin-bottom: 0px;
                  }
                  .auto-style4 {
                  font-size: x-large;
                  font-family: "Belwe Bd BT";
                  }
                  .auto-style6 {
                  margin-left: 32px;
                  }
                  .auto-style7 {
                  color: #B2E7FA;
                  font-size: xx-large;
                  }
                  .auto-style8 {
                  font-family: "Belwe Bd BT";
                  }
                  @media (orientation: landscape) {
                  body { background-image: url('Hintergrund.jpg');background-size: 100% 100%"}
                  }
                  @media (orientation: portrait) {
                  body { background-image: url('Hintergrund-schmaler.jpg'); }

                  </style>
                  </head>

                  <body>



                  <p class="auto-style1">
                  <a href="https://products.ha......
                  ...

                  auf dem PC-Monitor zeigte er mir, wie ganz zuvor, das Hintergrundbild einaml ganz an und dann am rechten Rand nochmal ca. 3cm.

                  Auf dem Handy zeigt er nun hochkant einen weißen Hintergrund und wenn ich es drehe, wird das Hintergrundbild angezeigt, aber nur ca. 60%. Wenn ich es wieder drehe, wird es weiß.
                  Das " ;background-size: 100% 100%" .....bei landscape habe nachträglich ich zum Test hinzugefügt, da das bei der separaten PC-Version, die ich habe, gut funktioniert. Da wird das Hintergrundbild genau einmal angezeigt.
                  Hier ändert sich aber nichts.

                  Kommentar


                  • #10
                    Bei dem
                    Code:
                    background-size: 100% 100%"
                    muss das Gänsefüßchen durch ein Semikolon ersetzt werden.
                    Und bei portrait fehlt die letzte schließende Klammer.
                    Mit diesem CSS sieht es bei mir ganz gut aus:
                    Code:
                            @media (orientation: landscape) {
                                body {
                                    background-image: url(images/bild3.jpg);
                                    background-size: 100% 100%;
                                }
                            }
                            @media (orientation: portrait) {
                                body {
                                    background-image: url(images/burgtor_01.jpg);
                                }
                            }

                    Kommentar


                    • #11
                      Ja, das war's. PC jetzt super, Smartphone hochkant auch. Smartphone (S20 ultra) quer: zeigt noch 1 cm von der nächsten Kachel an. Warum er da nicht auf 100% streckt weiß ich nicht. Vielleicht weil das Bild 1670 breit x 1880 hoch ist (unten abgeschintten ist ok). Das S20 hat 1440x3200 Pixel, läuft bei mir aber auf 2400x1080. Vieleicht liegt es daran.

                      Kommentar


                      • #12
                        Moin Sempervivum,
                        verwende doch bitte mal bitte:
                        Code:
                        @media (orientation: landscape) {
                        body {
                        background-image: url('images/bild3.jpg');
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        }
                        }
                        
                        @media (orientation: portrait) {
                        body {
                        background-image: url('images/burgtor_01.jpg');
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        }
                        }
                        Ich glaube das bringt dich weiter...

                        Gruss Localfu
                        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                        Kommentar

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

                        Einklappen

                        Themen: 57.079   Beiträge: 432.031   Mitglieder: 29.259   Aktive Mitglieder: 54
                        Willkommen an unser neuestes Mitglied, Antoniomip.

                        Online-Benutzer

                        Einklappen

                        266 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 264.

                        Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                        Die neuesten Themen

                        Einklappen

                        Die neuesten Beiträge

                        Einklappen

                        Lädt...
                        X