# Hintergrund und Tabellenlayout an Bildschirmauflösung anpassen



## nb79 (8. August 2007)

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 (8. August 2007)

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 (8. August 2007)

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 (8. August 2007)

Maik hat gesagt.:


> 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 (8. August 2007)

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 (8. August 2007)

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 (8. August 2007)

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 (9. August 2007)

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 (9. August 2007)

nb79 hat gesagt.:


> 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 (9. August 2007)

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


----------



## nb79 (9. August 2007)

TaTa, naja ... also soweit hat es geklappt ich habe einfach eine layoutbox definiert und darin dann die tabelle erstellt.
Etwas fiel mir nun aber auf: es sind absolut keine scrollbalken vorhanden, die aber beim minimieren zu sehen sein sollen. 
Und ich kann mir die Vorschau auf 1024 nicht ansehen. Habe einen Monitor umgestellt (wie auch für 1280), da funktioniert es. Nur auf der 1024.html springt er nicht. Habe ich vielleicht fehler im script oder woran kann das liegen?
Jedenfalls schonmal großen Dank für Eure Hilfe.


----------



## Maik (9. August 2007)

Hi,

kannst du die Seite mal online stellen, damit man sich das anschauen kann?

Ansonsten wird es schwierig, den entscheidenden Hinweis zu geben.


----------

