Webseite automatisch an Bildschirmgröße anpassen?

Hallo,

ich habe mit einem bekannten WYSIWYG-Editor eine Homepage erstellt. Dort kann ich im Design- sowie im HTML-Modus arbeiten. Nun habe ich die Homepage an einem Quadratischen Monitor erstellt. Wenn ich die Seite jetzt an meinem Laptop (16/9 Format Widescreen) öffne, ist alles recht linksbündig und nicht schön mittig. Logisch, da halt die Seite etwas breiter ist. Nun meine Frage:
wie bekomme ich es hin, dass sich die Homepage automatisch an die Bildschirmbreite anpasst? Gibt es da einen html code für? Die meisten benutzen ja doch Widescreenmonitore. Ich habe es umgekehrt auch ausprobiert und die Seite an Widescreen angepasst. Allerdings muss dann derjenige, der noch einen quadratischen Monitor hat nach rechts scrollen, um alles zu sehen. Bin echt ratlos. Wer kann helfen??

Renate K.O.2013-02-05T16:16:34Z

Beste Antwort

Die Breite automatisch an das Browserfenster anpassen zu lassen, ist sehr unpraktisch, weil so im Vollbildmodus viel zu lange Zeilen entstehen. Und das ist nicht besonders nutzerfreundlich.

Besser ist es, den Inhaltsbereich deiner Website auf eine Breite von ca. 900 Pixeln festzulegen. Das lässt sich auch auf alten Monitoren darstellen. Damit der Inhaltsbereich nicht an die linke Kante geklatscht wird, sondern schön zentriert auf dem Bildschirm erscheint, musst du dafür im HTML-Modus einen Container einfügen.

Kopier dir den folgenden Code und schreibe ihn im Quelltext in die Zeile unmittelbar unter <body>.

<div style="
width:900px;
text-align:center;
margin:auto;
padding:10px;
background-color:#f0f0f0;
border-color:#808080;
border-style:solid;
border-width:1px;
">

Und unmittelbar vor </body> schreibst du </div>.

Fertig ist dein Container! Die Style-Angaben sorgen dafür, dass er zentriert wird, 900 Pixel breit ist, einen hellgrauen Hintergrund und einen dunkelgrauen, dünnen Rahmen hat. Diese Eigenschaften sind beliebig veränder- und erweiterbar.

Das funktioniert in Firefox, Opera, Chrome und Safari. Nur der Internet-Explorer 8 stellt sich mal wieder quer (der braucht wahrscheinlich einen Container im Container, aber das habe ich noch nicht getestet).

Probier es mal aus! Wenn es Schwierigkeiten gibt, kannst du mich mit einer privaten Nachricht kontaktieren.

🐟 Fish 🐟2013-02-05T18:51:45Z

<frameset cols="*,250,*">
<frame src="rechts.htm" name="RandRechts">
<frameset rows="*,250,*">
<frame src="obenmitte.htm" name="RandOben">
<frame src="ZENTRUM.HTM" name="Zentrum">
<frame src="untenmitte.htm" name="RandUnten">
<noframes>
<body>
<p><a href="verweise.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
</body>
</noframes>
</frameset>
<frame src="links.htm" name="RandLinks">
<noframes>
<body>
<p><a href="verweise.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
</body>
</noframes>
</frameset>
</html>

Statt ZENTRUM.HTM bitte deine Seite einbinden. Die Grösse von 250 ist variierbar. Die Ränder werden dann automatisch kleiner.
Dann kannst du auch mit deinem WYSIWYG-Editor arbeiten.

Jo2013-02-05T13:39:30Z

relative statt absolute Werte.

Anonym2013-02-05T11:45:10Z

Ja, das kann man machen, allerdings erzeugen diese WYSIWYG-Editoren eben den mittels CSS-Einstellungen festgemauerte Design, damt es eben möglichst genau so aussiht, wie du die Elemente mit der Maus platzierst, und nicht alles bunt durcheinander wirbelt.

Die Lösung: Lerne selnst HTML und CSS, z.B. hiert:
http://de.selfhtml.org

Und schreibe direkt den Quelltext der Seite. Nötige Muster-Code-Schnipsel kannst du von der angegebenen Seite direkt kopieren.

Wenn du nämlich mit "reinem" HTML deine Seite baust, passt sie sich an die Fenstzerbreite an, das ist quasi der Urzustand, erst mittels CSS in diesen mehr einem DTP-Programm ähnlichen Editorenb wird ein festes Layout künstlich erstellt.

Letztlich musst du also nicht zusätzlichen Code in deine Serite einbauen, sondern für dein Vorhaben überflüssigen Code entfernen.

Adelheit2013-02-05T11:41:06Z

Ich habe für die Tabellen per html immer angegeben, in welchem Prozentsatz sie zur Seite stehen sollen. Habe das über den Mozilla Composer gemacht. Wenn man es nicht über die grafische Oberfläche bestimmen kann, geht es wohl mit diesem Code: <PRE WIDTH=?></PRE>. Für das Fragezeichen Pixel oder Prozent eintragen. Tabelle: Breite in Prozent <TABLE WIDTH=%>

Bin auch nur ein Laie, hatte aber lange ein ähnliches Problem.