Hintergrund und Tabellenlayout an Bildschirmauflösung anpassen

[nb79]

Ich habe Probleme mit meinem Hintergrundbild und meiner Layouttabelle in verschiedenen Browserauflösungen.
Eine Bildschirmauflösung-abfrage habe ich bereits.
Ich verweise auf 3 Auflösungen (1280x1024, 1024x768, 800x600)
mit dem jeweiligen HG.Bild in den entsprechenden Größen.

Wie programmiere ich nun meine Layouttabelle
die sich den jeweiligen Auflösungen anpassen soll?
Leider bleibt sie immer stehen und dadurch passt sie nicht mehr auf meinem Hintergrund.

Muss ich nun auch 3 Layouttabellen bauen?
Wie bekomme ich das ganze stimmig?
Gibt es ein JavaScript oder CSS dafür?

Da ich mich noch nicht so gut in der Programmierung auskenne, wäre ich euch sehr dankbar über Antworten.
Viele Grüße

 

[aGeNET]

Hallo,

da du ja schon eine Abfrage für die Bildschirmauflösung hast (dürfte JavaScript sein), nutze doch einfach das Script weiterhin.

Füge in der Definition der Tabelle folgendes ein:

<!-- auf das style="" und id="" achten, die anderen Werte kannst du frei bestimmen -->
<table id="tabelle" cellspacing="0" cellpadding="0" border="0" style="">
 <tr>
  <td width="30%">Spalte 1</td>
  <td width="70%">Spalte 2</td>
 </tr>
 ...
</table>

Da du die Bildschirmauflösung kennst, kannst du dann mittels JavaScript die Breite der Tabelle an die entsprechende Auflösung anpassen. zb mit:

<script type="text/javascript">
 // die beiden Werte solltest du ja schon kennen
 // width = screen.width
 // height = screen.height
 // Tabellenbreite bestimmen:
 // für die volle Breite zb:
 document.getElementById('tabelle').style.width = width + 'px';
 // 100px weniger als Vollbild
 newwidth = width - 100;
 document.getElementById('tabelle').style.width = newwidth + 'px';
</script>

 

[Maik]

Hi,

mal abgesehen davon, dass nicht die Bildschirmauflösung, sondern die Größe des Anzeigebereichs im Browserfenster entscheidend ist, lädst du eben mit der Scriptabfrage das entsprechende Stylesheet in das HTML-Dokument, in dem die jeweiligen Dimensionen festgelegt sind.

 

[aGeNET]

Hi,

mal abgesehen davon, dass nicht die Bildschirmauflösung, sondern die Größe des Anzeigebereichs im Browserfenster entscheidend ist, lädst du eben mit der Scriptabfrage das entsprechende Stylesheet in das HTML-Dokument, in dem die jeweiligen Dimensionen festgelegt sind.

Stimmt, da hab ich gar nicht drauf geachtet. Die Javascriptbefehle für den Anzeigebereich des Browserfensters:

<script type="text/javascript">
 width = screen.availWidth;
 height = screen.availHeight;
</script>

Ansonsten bietet sich wie Maik schon sagte die CSS-Lösung an.

 

[nb79]

Ersteinmal vielen Dank, für Eure Antworten.

Ich bin gerade dabei, dass irgendwie da hineinzuwuseln, was schon schwierig für mich ist.
Frage mich aber: wenn ich in der Tabelle die id="tabelle" und style="" hinzufüge, muss ich sie doch letztendlich im css-stile definieren? Aber meine Ausgangstabelle ist schon fertig. Sie hat feste Werte.
Das mit dem 100px weniger Vollbild, leuchtet mir irgendwie nicht ein
hmm

 

[aGeNET]

zu den Attributen id und style:
- id="tabelle": eindeutige Bezeichnung der Tabelle, damit du mit JavaScript darauf zugreifen kannst
-> document.getElementById('tabelle') ... klingelts?

- style="": es reicht hier eine leere Zeichenkette, da du die Werte für style später mit JavaScript veränderst. du brauchst aber die leere Zeichenkette, sonst kannst du die Eigenschaften nicht mit javascript ändern.


Das mit den 100px war ein Beispielwert, falls deine Tabelle nicht 100% Breite haben soll, sondern zb 100px schmaler ist

 

[nb79]

Was die Attribute bedeuten, ist mir schon klar. Ich bekomm das jedenfalls so nicht hin. Meine Tabelle bewegt sich beim minimieren immer mit. Bin keine Programmiererin, woher soll ich wissen, wo und wie welche Werte eingetragen werden.
Menno
Trotzdem vielen lieben Dank.

 

[Maik]

Wie ich es gestern schon kurz angedeutet habe, legst du dir für jedes der drei Hintergrundbilder ein eigenes Stylesheet (CSS-Datei) an, in dem du dann den jeweiligen Seitenhintergrund, die Tabellendimensionen, und weitere Unterschiede zwischen den einzelnen Layouts festlegen kannst, um mit der Scriptabfrage die entsprechende CSS-Datei in das HTML-Dokument zu laden.

Wenn die Tabelle eine ID besitzt, wird diese im CSS als ID-Selektor eingesetzt - also z.B.:

style_1280.css

body {
background: url(pfad/zur/grafik_1280x1024.png);
}

table#Name_der_ID {
width: 1280px;
}

/* usw. */

style_1024.css

body {
background: url(pfad/zur/grafik_1024x768.png);
}

table#Name_der_ID {
width: 1024px;
}

/* usw. */

style_800.css

body {
background: url(pfad/zur/grafik_800x600.png);
}

table#Name_der_ID {
width: 800px;
}

/* usw. */

<table id="Name_der_ID> ... </table>

Vielleicht hilft dir dieser Denkanstoss weiter.

 

[aGeNET]

Meine Tabelle bewegt sich beim minimieren immer mit.

Das ist der Nachteil an der JavaScript-Lösung. Die Tabelle passt sich immer der maximalen Größe der Browserfenstergröße an, wird folglich beim Minimieren oder Verkleinern des Browserfensters kleiner.

In dem Fall bleibt dir nur die CSS Lösung.
Du kannst je nach ermittelter Auflösung ein anderes Stylesheet einbinden und definierst in den verschiedenen Stylesheets unterschiedliche Größen für die Tabelle.

Der einzige Nachteil ist auch hier wieder, dass ein User bei deaktiviertem JavaScript keine korrekte Anzeige bekommt.

Ansatz für deinen Quelltext:

<html>
<head>
<title>Seitentitel</title>
<!-- Test für die Auflösung -->
<script type="text/javascript">
 var width = screen.width; // Bildschirmbreite
 var height = screen.height; // Bildschirmhöhe
 if ( width == '1280' )
 {
  document.writeln('<link rel="stylesheet" type="text/css" href="styles1280.css" media="projection, screen">');
 }
 else if ( width == '1024' )
 {
  document.writeln('<link rel="stylesheet" type="text/css" href="styles1024.css" media="projection, screen">');
 }
 else
 {
  // für Auflösungen, die größer oder kleiner sind als die oben angeführten
  document.writeln('<link rel="stylesheet" type="text/css" href="styles.css" media="projection, screen">');
 }
</script>
<!-- Test für die Auflösung -->
</head>
<body>
...
</body>
</html>

Das kannst du dir natürlich selber anpassen, ist nur ein Vorschlag.
Falls es dich tröstet, wir haben alle mal angefangen zu Programmieren und haben uns genauso gefühlt wie du momentan.

 

[nb79]

Dankeschön.
Ich baue nun alles neu. So hab ich noch nie begonnen. Hoffe es funktioniert.