Homepage auf Bildschirm vergrößern

Bache

Hallo,

hier eine einfache Frage für Profis, für mich als Laien aber unlösbar?
Hab meine Homepage auf meinem Laptop formatiert und möchte eigentlich, daß die Seite z.B. auf einem 19'Monitor genau so aussieht.
Gibt es da einen Trick, wie sich die Seite automatisch der jeweiligen Bilschirmgröße anpasst.

Danke schon mal.

MfG
Bache

jojo87

die ganze Seite innen div und diesen wie folgt formatieren:

Code

<div style="margin: 0 auto; width: 80%;">


</div>

Gruß,
Jojo

Bache

Hallo jojo87,

tut mir leid, wenn ich jetzt so blöd frage, aber ich hab halt einfach keine Ahnung. Was meinst du mit die ganze Seite innen div?

Gruß
Bache

jojo87

Du programmierst deine Webseite offensichtlich nicht selbst.
Dann sag doch bitte, was du verwendet hast, um die Seite zu erstellen (CMS, Frontage, etc.). Zwar habe ich davon su gut wie keine Ahnung, aber es wird sich sicher jemand anderes finden.
Beim nächsten mal wäre es schön, wenn du
a) Deine Frage ins richtige Forum posten würdest (in diesem Fall das HTML-Forum) und
b) gleich mit angibst, welche Software du verwendet hast.

Gruß,
Jojo

sejuma

Wenn sie überall gleich aussehen soll, musst du ihr einen bestimmten Breitenwert in Pixeln zuweisen. Prozentangabe wäre relativ zum Bildschirm.

Ein Wert von ca. 1000px sollte bei den heutigen Bildschirmauflösungen hinkommen.

Der Grundcode nach dem Head-Bereich wäre dann z.B. folgender:

Code

<body>
<div style="width: 1000px; margin: 0 auto; border: 1px solid black;">
Hier kommt der gesamte Inhalt rein
</div>
</body>

Ein Layout-Beispiel findest du z.B. hier

Willst du dagegen, dass sie sich unterschiedlichen Auflösungen anpasst, dann wäre das die richtige Lösung (hat bei zu breiten Bildschirmen aber auch Nachteile).

Bache

Zitat von sejuma
Wenn sie überall gleich aussehen soll, musst du ihr einen bestimmten Breitenwert in Pixeln zuweisen. Prozentangabe wäre relativ zum Bildschirm.

Ein Wert von ca. 1000px sollte bei den heutigen Bildschirmauflösungen hinkommen.

Der Grundcode nach dem Head-Bereich wäre dann z.B. folgender:
Code
<body>
<div style="width: 1000px; margin: 0 auto; border: 1px solid black;">
Hier kommt der gesamte Inhalt rein
</div>
</body>
Ein Layout-Beispiel findest du z.B. hier

Willst du dagegen, dass sie sich unterschiedlichen Auflösungen anpasst, dann wäre das die richtige Lösung (hat bei zu breiten Bildschirmen aber auch Nachteile).

Hallo,

hab jetzt auf meiner ersten Seite im Quelltext gleich nach der ersten <head> Klammer folgendes eingefügt:
<body>
<div style="width: 1000px; margin: 0 auto; border: 1px solid black;">
Am Ende des Inhalts stand aber schon:
</div>
</body>
Muß ich das dann nochmal eingeben?

sejuma

Du musst erst den head mit

Code

</head>

schließen, bevor du den body mit

Code

<body>

öffnest.

Hallo,

ich krieg´s einfach nicht hin.
Hilft´s was , wenn ich den Quelltext mitsende?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="de">
<head>
<title> index.htm </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<meta name="Author" content="'Jennerwein-Schützen' Oberlauterbach e.V.">
<meta name="Keywords" content="Jennerwein, Jennerwein-Schützen, Jennerweinschützen, Oberlauterbach">
<meta name="Description" content=""jennerwein-schützen" oberlauterbach e.v.">
<link rel="shortcut icon" href="vereinswappen%20neu%20web.jpg">
<script src="jennerwein_g.js" type="text/javascript" language="JavaScript1.2"></script>
<script src="index_a.js" type="text/javascript" language="JavaScript1.2"></script>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#0000ff" leftmargin="0" topmargin="0" onload="if(V4) OnWeLoad()" onresize="OnWeResize()">
<div style="position:absolute;left:0;top:500;width:994;height:25;">

</div>
<div style="position:absolute;left:0;top:0;width:184;height:476;">

</div>
<div style="position:absolute;left:265;top:47;width:450;height:438;">

</div>
<div class="f01" style="position:absolute;left:213;top:0;width:561;height:48;text-align:center;">
Ein herzliches Grüß Gott bei den
</div>
<div id="e25" class="f02" style="position:absolute;left:19;top:-20;width:642;height:20;">
Vorschau: 4.4. Ramadama, 18.4. Aktivenfeier, 22.4. Werbeveranstaltung
</div>
<div class="f03" style="position:absolute;left:21;top:409;width:84;height:32;padding-top:8;">
Besucher
</div>
<div style="position:absolute;left:82;top:400;width:96;height:36;">
[Blockierte Grafik: http://www.counter-up.de/cgi-bin/counter.cgi?id=218351504707781]
</div>
<div class="f03" style="position:absolute;left:21;top:451;width:120;height:19;">
Stand: 17.3.2008
</div>
<div style="position:absolute;left:22;top:60;width:15;height:15;">

</div>
<div style="position:absolute;left:22;top:96;width:15;height:15;">

</div>
<div style="position:absolute;left:22;top:132;width:15;height:15;">

</div>
<div style="position:absolute;left:22;top:168;width:15;height:15;">

</div>
<div id="e17" class="f04" style="position:absolute;left:46;top:58;width:110;height:22;">
<a id="a17" href="jennerwein_002.htm" onmouseover="if(V4) OnWeOver(0,IDP[10],0,0,0,'jennerwein_002.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[10],'#000000',0,0,0,0)">
Sportliches</a>
</div>
<div id="e16" class="f04" style="position:absolute;left:47;top:94;width:123;height:22;">
<a id="a16" href="jennerwein_003.htm" onmouseover="if(V4) OnWeOver(0,IDP[9],0,0,0,'jennerwein_003.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[9],'#000000',0,0,0,0)">
Verein</a>
</div>
<div id="e15" class="f04" style="position:absolute;left:46;top:131;width:124;height:24;">
<a id="a15" href="jennerwein_004.htm" onmouseover="if(V4) OnWeOver(0,IDP[8],0,0,0,'jennerwein_004.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[8],'#000000',0,0,0,0)">
Fotogalerie</a>
</div>
<div id="e14" class="f04" style="position:absolute;left:46;top:165;width:131;height:37;">
<a id="a14" href="jennerwein_005.htm" onmouseover="if(V4) OnWeOver(0,IDP[7],0,0,0,'jennerwein_005.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[7],'#000000',0,0,0,0)">
Geschichte

Oberlauterbachs</a>
</div>
<div style="position:absolute;left:22;top:24;width:15;height:15;">

</div>
<div class="f04" style="position:absolute;left:47;top:22;width:110;height:22;">
Home
</div>
<div style="position:absolute;left:22;top:256;width:15;height:15;">

</div>
<div style="position:absolute;left:22;top:292;width:15;height:15;">

</div>
<div style="position:absolute;left:22;top:328;width:15;height:15;">

</div>
<div id="e8" class="f04" style="position:absolute;left:46;top:253;width:110;height:22;">
<a id="a8" href="jennerwein_007.htm" onmouseover="if(V4) OnWeOver(0,IDP[6],0,0,0,'jennerwein_007.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[6],'#000000',0,0,0,0)">
Kontakt</a>
</div>
<div id="e7" class="f04" style="position:absolute;left:46;top:290;width:111;height:24;">
<a id="a7" href="jennerwein_008.htm" onmouseover="if(V4) OnWeOver(0,IDP[5],0,0,0,'jennerwein_008.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[5],'#000000',0,0,0,0)">
Termine</a>
</div>
<div id="e6" class="f04" style="position:absolute;left:46;top:328;width:110;height:22;">
<a id="a6" href="jennerwein_009.htm" onmouseover="if(V4) OnWeOver(0,IDP[4],0,0,0,'jennerwein_009.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[4],'#000000',0,0,0,0)">
Links</a>
</div>
<div style="position:absolute;left:22;top:220;width:15;height:15;">

</div>
<div id="e4" class="f04" style="position:absolute;left:46;top:218;width:120;height:21;">
<a id="a4" href="jennerwein_006.htm" onmouseover="if(V4) OnWeOver(0,IDP[3],0,0,0,'jennerwein_006.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[3],'#000000',0,0,0,0)">
Jennerwein</a>
</div>
<div id="e3" class="f05" style="position:absolute;left:452;top:524;width:69;height:17;">
<a id="a3" href="jennerwein_069.htm" onmouseover="if(V4) OnWeOver(0,IDP[2],0,0,0,'jennerwein_069.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[2],'#000000',0,0,0,0)">
Impressum</a>
</div>
<div style="position:absolute;left:22;top:364;width:15;height:15;">

</div>
<div id="e1" class="f04" style="position:absolute;left:46;top:364;width:110;height:20;">
<a id="a1" href="jennerwein_017.htm" onmouseover="if(V4) OnWeOver(0,IDP[1],0,0,0,'jennerwein_017.htm',1)" onmouseout="if(V4) OnWeOver(0,IDP[1],'#000000',0,0,0,0)">
Aktuell</a>
</div>
</body>
</html>

sejuma

Das bringt so nichts.
Du kannst eine Seite auf diese Weise nicht zentrieren und dann die Navi-Link-Grafiken alle einzeln absolut positionieren, was ohnehin keinen Sinn macht .

Am meisten bringt es, wenn du dir zunächst mal einige HTML und CSS-Kenntnisse aneignest, damit du künftig auch den Quelltext und seine Zusammenhänge verstehst.

Thonixx

http://www.html-seminar.de/

Zitat

HTML lernen und die eigene Homepage erstellen - HTML lernen - HTML Kurs / Seminar

Arbeite dich da mal durch.

The User

Sejuma, was ich durchaus schon benutzt habe, und bei Selfhtml steht, ist, dass position: absolute; keines wegs absolut ist, sondern relativ zum übergeordneten Container, der absolute oder relative ist.
Du musst das jetzt einfach so machen:

Code

...
<body>
<div style="margin: 0 auto; width: 1000px;">
<div style="position: relative; left: 0px; top: 0px;">
[i]der ganze Inhalt[/i]
</div>
</div>
<body>
</html>

die zwei divs sind nur für so Internet Explorer und AOL und solchen Kram nötig, ansonsten interpretieren die das position: relative; als ganz oben links, für FF, Opera, Kazehakase und Konqueror ist das nicht nötig, und man könnte beides in einen div packen.

Viele liebe Grüße
The User

Edit:
Arghh, jetzt hab ich relative undabsolute Größe durcheinander geworfen.
Jetzt noch für relative Größe:

Code

...
<body>
<div style="position: absolute; left: 10%; width: 80%;">
[i]der ganze Inhalt[/i]
</div>
<body>
</html>

Also bei 80%, sind links und rechts je 10%, daher left: 10%;.

Homepage auf Bildschirm vergrößern

Tags

Benutzer online in diesem Thema