Seite an Bildschirmauflösung anpassen

[poison]

Hallo Zusammen,

ich bin neu hier und auch noch ein blutiger Anfänger, was HTML, CSS und alles andere betrifft. Bis jetzt habe ich meine 0815-Seiten mit NOF (netobjects fusion) gestaltet und bin damit auch zurecht gekommen. Nun bastle ich an einem Online-Adventure, bei dem ich mit NOF nicht mehr weiter komme.
Nun zu meiner Frage:

Ich möchte meine Seite dem Bildschirm der Benutzer anpassen. Bestimmt kam die Frage schon öfter, leider habe ich über die Suchfunktion nichts gefunden. Vielleicht habe ich da auch die falschen Suchbegriffe eingegeben. Sei's drum, ich bin am verzweifeln.

Das ist die Formatierung, mit der ich meine Tabelle für mein Layout erstellt habe:

  
  
<table border="2" cellspacing="0" cellpadding="0" width="75%" height="100%" align="center">  
<tr>  
<td width="70%">  
  
<table border="2" cellspacing="0" cellpadding="0" width="100%" height="100%">  
<tr>  
<td background="transparent"><br>  
</td>  
</tr>  
<tr>  
<td><img src="" alt="" align="center">  
</td>  
</tr>  
<tr>  
<td background="transparent"><br>  
</td>  
</tr>  
</table>  
  
</td>  
<td rowspan="2" width="30%">  
  
<table border="2" cellspacing="0" cellpadding="0" width="100%" height="100%">  
<tr>  
<td width="15" background="transparent">  
</td>  
<td width="200"><iframe src="menu.html" width="100%" height="95%" name="menu" align="center" frameborder="0"></iframe>  
</td>  
<td background="transparent">  
</td>  
</tr>  
</table>  
  
</td>  
</tr>  
<tr>  
<td>  
  
<table border="2" cellspacing="0" cellpadding="0" width="100%" height="100%">  
<tr>  
<td rowspan="3" width="20" background="transparent">  
</td>  
<td background="transparent"><iframe src="" width="100%" height="90%"name="content" align="center" frameborder="0"></iframe>  
</td>  
<td rowspan="3" width="20" background="transparent">  
</td>  
</td>  
</table>  
  
</td>  
</tr>  
</table>  

Sieht auch wunderschön aus, ist genau so, wie ich es haben möchte. Aber leider nur solange, bis ich noch was anderes in die html-Datei schreibe, z.B. die Doc Type.
Danach sehe ich auf meinem Bildschirm zwar immer noch die gleiche Tabelle, allerdings nimmt sie nicht mehr die ganze Bildschirmhöhe ein, sondern nur noch 1/3 davon. Die Breite bleibt gleich.

Ich verstehe einfach nicht, wo der Fehler liegt. Ich verändere ja nichts mehr an der Tabelle selbst. Habe Doc Type "Transitional" verwendet und auch schon "Frameset" ausprobiert, weil eingebettete Frames enthalten sind. Genau dasselbe. Dann dachte ich, vielleicht sieht es nur auf meinem Rechner derart seltsam aus und sobald es online ist, hat sich der Fehler aus dem Staub gemacht. Ebenfalls Fehlanzeige. Es ist zum ...

Kann mich bitte jemand "erleuchten"?

Liebe Grüße
Poison

[Deus Figendi]

Aus mindestens drei Gründen wirst du es schwer haben auf dieser Plattform eine Antwort zu erhalten, die du dir im Moment vorstellst.
1. Du willst irgendein Online-Dokument an die "Bildschirmauflösung" anpassen. Was ein sinnarmes Unterfangen ist, wenn jemand nicht im Vollbild surft und schwierig ist, wenn jemand eine 640x480 Auflösung fährt (viele Mobiltelefone).
2. Du verwendest Frames, was hier - zu recht - verpönt ist.
3. Du verwendest Tabellen ohne tabellarische Daten, was ebenfalls zu recht verpönt ist.

Und nun ein bisschen konstruktiver:
Ändere die oben genannten Umstände. Bau deine Seite ohne Layout-Tabellen und - soweit möglich - ohne Frames auf. Normalerweise _sollte_ die Seite dann in einer großen Bandbreite von Browser-Fenster-Größen funktionieren, falls nicht kannst du hier fragen und erhältst mit großer Wahrscheinlichkeit eine Antwort, wie du das anpassen kannst.

[poison]

Vielen Dank für die prompte Antwort.

OK, dann mal anders gefragt.

Wie schaffe ich es, dass mein Layout (sprich Banner...) im Bildschirm stehen bleibt und sich nur der Rest bewegt, ohne Frames oder iframes zu verwenden?

Wie funktioniert es, meine Navigation links oder rechts immer neben meinem restlichen Inhalt zu haben, wenn dieser so lang ist, das der Benutzer, ewig nach unten scrollen muss?
(Bis jetzt konnte ich sie nur fixieren, am unteren Ende der Seite muss man dann wieder hochscrollen oder mit der funktion "nach oben" zum Anfang der Seite springen.)

Wie schaffe ich es, dass der Bereich meiner Seite, auf der sich der Inhalt befindet, eine andere Hintergrundfarbe hat, wie der Rest, ohne eine Tabelle zu erstellen, in der ich eine andere Hintergrundfarbe einstellen kann, oder ohne iframes, die ja auch eine andere Hintergrundfarbe haben können?

Ich habe mal eine Seite im Internet gesehen, die hatte einen Hintergrund mit Muster und der Bereich, in dem sich die Bilder, der Text usw. befanden, sah aus, wie ein altes Pergament. Das war mit iframes gemacht. Wie bekomme ich sowas ohne hin?

Liebe Grüße
Poison

[Deus Figendi]

OK, dann mal anders gefragt.

Aus deinen Fragen schließe ich, dass du Anfänger bist, lies dich in das CSS-Kapitel von selfHTML ein, es wird dich erleuchten :)

Wie schaffe ich es, dass mein Layout (sprich Banner...) im Bildschirm stehen bleibt und sich nur der Rest bewegt, ohne Frames oder iframes zu verwenden?

position: fixed
Beispielcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Position fixieren</title>  
  
  <style type="text/css">  
   #banner {  
    position:fixed;  
    top:0;  
    background-color:#123456;  
    height:100px;  
    width:100%  
   }  
   body{  
    padding-top:150px;  
   }  
   body p {  
    width:100px;  
    height:1000px;  
    background-color:#654321;  
   }  
  </style>  
 </head>  
 <body>  
  <h1 id="banner">Das Banner</h1>  
  <p>  
   Blindtext... zum Ausprobieren mit viel Inhalt fuellen.  
  </p>  
 </body>  
</html>  

Wie funktioniert es, meine Navigation links oder rechts immer neben meinem restlichen Inhalt zu haben, wenn dieser so lang ist, das der Benutzer, ewig nach unten scrollen muss?

Genauso ^^
Positioniere die Navigation "fixed" am linken oder rechten Rand und rücke alle Inhalte entsprechend ein.
Dabei allerdings kannst du Probleme mit sehr kleinen Displays bekommen...

(Bis jetzt konnte ich sie nur fixieren

Ach du kennst das Stichwort!? :)

Wie schaffe ich es, dass der Bereich meiner Seite, auf der sich der Inhalt befindet, eine andere Hintergrundfarbe hat, wie der Rest, ohne eine Tabelle zu erstellen, in der ich eine andere Hintergrundfarbe einstellen kann, oder ohne iframes, die ja auch eine andere Hintergrundfarbe haben können?

Die Frage ist irgendwie derart trivial, dass ich es schwierig finde sie zu beantworten.
Also du kannst jedem sichtbaren Element einen Hintergrund zuweisen, ob Hintergrundfarbe oder Hintergrundgrafik.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>Hintergruende</title>  
  
  <style type="text/css">  
   body {  
    background-color:#FDB;  
   }  
  
   div {  
    background-color:#AAA;  
    width:400px;  
    height:400px;  
    margin-left:1em;  
   }  
  
   p {  
    background-color:#CDE;  
    width:300px;  
    height:200px;  
    margin-left:1em;  
   }  
  
   span {  
    background-color:#248;  
    margin-left:1em;  
   }  
  </style>  
 </head>  
 <body>  
  <div>  
   <p>  
    <span>Beispieltext</span>  
   </p>  
  </div>  
 </body>  
</html>  

Aber wie gesagt, du solltest dich in die Thematik "CSS" einfach mal einlesen, ist nicht besonders schwer.

[poison]

Hi,

danke, dass du dich bei meinen etwas blöden Fragen, überhaupt nochmal gemeldet hast. Habe deinen Rat befolgt und mich eingelesen. Es ist mir gelungen etwas zu basteln, was ungefähr meiner Vorstellung entspricht. Feinheiten sind noch nicht fertig. Das mit der Navi-Leiste ist eines meiner Probleme, habe nämlich eine Unmenge Verweise. Aber: es ist mir gelungen, dem fixierten Bereich der Navi mit

  
  
style="position:relative; width:200px; height:450px; overflow:auto;  
  

einen Scrollbalken aufzuzwingen. Funktioniert auch, zumindest bei mir auf dem Rechner. Was auf dem Server passiert, habe ich noch nicht getestet.

Weitere Fragen: (ich weiß, ich nerve!!) :-))

Kann ich das, was ich nun zu dem im head des html-Dokuments habe, also das hier

  
#fixiert { position: absolute; top: 50px; right: 100px; width: 200px; background-color: white;  
border: 1px solid silver; }  
  
html>body #fixiert {  /* nur fuer moderne Browser! */ position: fixed; }  
  
#Inhalt { margin-right: 320px; margin-left: 200px; padding: 0; }  
  
* #Inhalt {  /* versteckt vor Netscape 4 */ background-color: #ffffcc }  
  
#Inhalt h2 { font-size: 1.2em; margin: 2em 5% 2em; color: maroon; }  
  
#Inhalt p { font-size: 1em; margin: 1em 0; }  
  
#Navigation { font-size: 14px; margin: 2px; padding: 0px; }  
  
#Navigation li { list-style: none; margin: 2; padding: 2px; }  
  
ul#Navigation a { display: block; }  
  
ul#Navigation a:link { color: black; }  
  
ul#Navigation a:visited { color: #666; }  
  
ul#Navigation a:hover { color: black; }  
  
ul#Navigation a:active { color: white; }  

ohne Probleme in meine style.css einbinden?

Muss ich meine ganzen Verweise, in jede einzelne Seite reinschreiben oder kann ich das ebenfalls in eine separate Datei packen und als Objekt einbinden?

Boah, ich krieg noch einen Knoten ins Hirn...

Liebe Grüße
Poison

[Deus Figendi]

Kann ich das, was ich nun zu dem im head des html-Dokuments habe, also das hier

(...)

ohne Probleme in meine style.css einbinden?

Ja kannst du, würde ich auch empfehlen, ich habe es nur deshalb ins HTML geschrieben, damit copy&paste leichter geht und ich nicht so Sachen schreiben muss wie "das unter Dateiname soundso speichern und dann so einlinken" etc.

Muss ich meine ganzen Verweise, in jede einzelne Seite reinschreiben oder kann ich das ebenfalls in eine separate Datei packen und als Objekt einbinden?

Ja und nein, das Stichwort lautet SSI und ist abhängig von der Konfiguration und Ausstattung deines Webservers.
Das ganze funktioniert so, dass du es nicht als "Objekt" einbindest, sondern der Server es für dich ins HTML direkt reinschreibt, für den Endanwender ist es dann so als stünde es da fest drin.

Wenn dein Webserver irgendeine serverseitige Programmiersprache (typischerweise Perl oder PHP vielleicht auch Ruby oder gar Python es ist auch jede andere Programmiersprache denkbar, aber das sind die die real angeboten und verwendet werden) beherrscht, dann geht es. Außerdem gibt es noch <http://de.selfhtml.org/servercgi/server/ssi.htm@title=andere SSI-Techniken>, von denen ich aber keinen blassen Schimmer habe ^^