Variable Breite

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aaron3219

Aktives Mitglied
6 Oktober 2015
863
177
43
17
#2
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.
 
18 Dezember 2017
71
3
8
#3
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
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
863
177
43
17
#4
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.
 
18 Dezember 2017
71
3
8
#5
Damit die Handyansicht danch nicht noch immer verkleinert aussieht würde ich zudem die Verwendung folgender Meta empfehlen (falls nicht vorhanden):
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Grüße,
Felixprogram
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.464
215
63
#6
Hallo

Besteht die Möglichkeit die Breite automatisch anzupassen, ohne das ganze Design
kapttzumachen.
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#7
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.
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
863
177
43
17
#8
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