1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Variable Breite

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von andy911sl, 12 Januar 2018 um 14:38 Uhr.

  1. andy911sl

    andy911sl Neues Mitglied

    Registriert seit:
    2 Dezember 2014
    Beiträge:
    15
    Punkte für Erfolge:
    1
    Ich habe seinerzeit, beim Erstellen meiner Seite
    www.gerwin-oberflaechentechnik.de
    eine feste Breite definiert. Bei Höheren Auflösungen sieht das nun recht bescheiden aus.
    Besteht die Möglichkeit die Breite automatisch anzupassen, ohne das ganze Design
    kapttzumachen.
    Vielen Dank.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    597
    Punkte für Erfolge:
    43
    In diesem Falle wirst du mit Prozenten und max-width arbeiten müssen.
    Damit die Seite einen nicht "erschlägt" bei höheren Auflösungen, empfehle ich eine max-width festzulegen (z.B.: max-width: 1350px).
    Dann kannst du bei width: z.B. 95% eintragen.
    Den Effekt wirst du bemerken, wenn du dein Fenster größer und kleiner ziehst.
    Allerdings wirst du wohl einige Teile deiner Seite umstylen müssen, da diese nicht automatisch für ein responsive Design ausgelegt sind.
     
  3. Felixprogram

    Felixprogram Neues Mitglied

    Registriert seit:
    18 Dezember 2017
    Beiträge:
    25
    Punkte für Erfolge:
    1
    Wäre auch Vorteilhaft, wenn die Seite auch auf dem Handy bzw. allgemein Mobilgeräten gut aussehen würde, nicht nur, wie eine verkleinerte Version der Seite auf dem Computer.
    Man sollte nicht vergessen, dass heutzutage die meisten eher am Handy sind.

    Grüße,
    Felixprogram
     
  4. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    597
    Punkte für Erfolge:
    43
    Und damit nicht weitere Fragen zum Thema responsive-Design für Handys (ggf. auch PC) entstehen, empfehle ich dir außerdem, dich mit media-queries zu befassen. Damit solltest du schonmal weit kommen.
     
  5. Felixprogram

    Felixprogram Neues Mitglied

    Registriert seit:
    18 Dezember 2017
    Beiträge:
    25
    Punkte für Erfolge:
    1
    Damit die Handyansicht danch nicht noch immer verkleinert aussieht würde ich zudem die Verwendung folgender Meta empfehlen (falls nicht vorhanden):
    Code (html5):
    1. <meta name="viewport" content="width=device-width, initial-scale=1">
    Grüße,
    Felixprogram
     
  6. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.422
    Punkte für Erfolge:
    63
    Hallo

    Ganz deutlich: Nein.

    Der Quelltext enthält abenteuerliche Konstruktionen, die nur mit einem starren Layout funktionieren.

    Abstände durch mehrere aufeinanderfolgende br-Elemente sind da noch relativ harmlos.

    Aber zum Beispiel das Wort "Unterboden-schutz" mit einem manuellen Trennungstrich (auf der Startseite) so einzupassen funktioniert natürlich nur bei einer starren Breite.

    Es ist sinnvoller, einfacher und schneller die Seite komplett neu zu erstellen und dabei gleich auf aktuelles HTML und CSS umzustellen. Der Inhalt ist ja bereits vorhanden.

    Gruss

    MrMurphy
     
  7. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Mal eine Detailfrage zu dieser Seite:
    div#main-pic ist 975px breit. Das Bild darin 680px. Wie wird das Bild ausgerichtet, so dass es die richtige Position hat? Vielleicht kannst Du, MrMurphy, es erklären.
     
  8. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    597
    Punkte für Erfolge:
    43
    Ich bin zwar nicht Mr Murphy, aber ich kann es auch erklären ;)
    Schau dir mal die Sidebar an. Sie ist mit left gefloatet. Das heißt main-pic ist dementsprechend rechts rangehängt, ohne es floaten zu müssen (Prinzip: Text um ein Bild rumlegen). Da das Bild aber ja nicht im Text sein kann, kommt diese Linke Fläche zusammen, die weder margin, noch padding ist:
    Unbenannt.PNG
     
  9. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Ah ja, leuchtet ein. Danke!