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
die ganze Seite innen div und diesen wie folgt formatieren:
<div style="margin: 0 auto; width: 80%;">
</div>Gruß,
Jojo
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
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
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:
<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).
Zitat von sejumaWenn 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?
Du musst erst den head mit
</head>schließen, bevor du den body mit
<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>
<style type="text/css"><!--
.f01 {font: 29px 'old english text mt';color:#000000; }
.f02 {font: italic bold 15px 'arial', helvetica, sans-serif;color:#000000; }
.f05 {font: 12px 'arial', helvetica, sans-serif;text-decoration:underline;color:#000000; }
.f04 {font: 15px 'arial', helvetica, sans-serif;color:#000000; }
.f03 {font: 13px 'arial', helvetica, sans-serif;color:#000000; }
#a16 {text-decoration :none;color:#000000; }
#a17 {text-decoration :none;color:#000000; }
#a1 {text-decoration :none;color:#000000; }
#a3 {color:#000000; }
#a4 {text-decoration :none;color:#000000; }
#a6 {text-decoration :none;color:#000000; }
#a7 {text-decoration :none;color:#000000; }
#a8 {text-decoration :none;color:#000000; }
#a14 {text-decoration :none;color:#000000; }
#a15 {text-decoration :none;color:#000000; } -->
</style>
</head>
<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>
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.
HTML lernen und die eigene Homepage erstellen - HTML lernen - HTML Kurs / Seminar
Arbeite dich da mal durch.
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:
...
<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:
...
<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%;.