# Tabelle auf dem Bildschirm entprechend zentrieren



## dsolianyi (1. Juli 2004)

Hallo!

Mal ganz 'ne simple Frage: ich habe 4 PC's zum testen und alle haben 4 verschiedene Auflösungen - unter 800x600 geht es nicht weiter, da das für mich schon das Minimum heutzutage ist. Nun habe ich das "800"-Version der Seite erstellt und möchte es auch so belassen, nur wie zentriere ich diesen Inhalt - welches in einer Tabele verschachtelt ist - auf dem Bildschirm...unabhängin von der Auflösung? Bei mir klappt es nur dann, wenn alles in der zu zentrierenden Tabelle Grafik oder Flash ist. Aber es muss noch eine HTML-Version(mit Text) geben...

Ich habe versucht, die Tabelle mit dem Inhalt in eine Tabelle mit _width="100%" height="100%"_ zu verschachteln, wobei ich bei dem <TD>-Tag _align="center"_ und _valign="middle"_ gesetzt habe. Aber das hat - wie gesagt - nur geklappt, wenn es keinen Text gab.

Helft mir bitte - ist dringend...

Mit freundlichen Grüssen
SOLIANYI Dmitri


----------



## Xaicon (1. Juli 2004)

Wenn ich das richtig verstanden habe, müsste Dir folgendes weiterhelfen.

```
<DIV align='center' valign='middle'>
<TABLE ....
Inhalt Deiner Tabelle
</TABLE>
</DIV>
```


----------



## King Euro (1. Juli 2004)

Oder: (ohne div)


```
<table width="100%" height="100%">
  <tr>
    <td width="100%" align="center">TEXT...</td>
  </tr>
</table>
```

Hoffe ich habe die "Aufgabenstellung" richtig verstanden!


----------



## dsolianyi (1. Juli 2004)

Hi!

Das mit dem horizontalen zentrieren klappt's schon, aber das vertikale bereitet mir immer noch Probleme. Was soll ich tun?


----------



## King Euro (1. Juli 2004)

Also meins klappt auch in der vertikalen!


----------



## dsolianyi (1. Juli 2004)

> _Original geschrieben von King Euro _
> *Also meins klappt auch in der vertikalen! *



Hast du ein Glück!  

Mal 'ne Frage: besteht deine zu zentrierende Tabelle (oder was du auch zentrierst) *nur aus Bildern*, oder ist dort reines Text auch drin?


----------



## Tobias Menzel (1. Juli 2004)

Hi,

wenn ich das richtig verstanden habe, könntest Du "notfalls" auch mit
solch einer Konstruktion arbeiten:

Einfach eine "verschachtelte" Tabelle anlegen, wobei die Randzellen
jeweils gleiche prozentuale Werte erhalten - und dann damit experimentieren
auch Bilder und Text in eigene Zellen zu packen...


----------



## zg peripherals (1. Juli 2004)

Hi,

also eigentlich wollte ich grade einen eigenes Thema aufmachen. Aber das hier passt voll.

Also ich bin jetzt seit zwei Tagen (mit Unterbrechung) dabei, meine Tabelle in der Mitte des Browsers zu zentrieren. Ich hab es hinbekommen, ein Bild vert. und horiz. zu zentrieren, auch Text und noch einiges mehr.

Mein Ziel ist es allerdings, ein Bild am oberen Rand zu fixieren und horiz. zu zentrieren und links und rechts quasi "unendlich"-Bilder zu setzten, die unabhängig von der Auflösung immer bis zum Rand gehen. Das muss doch Möglich sein; hab  jedes Thema das ich unter SUCHEN gefunden habe probiert, Von keinem Thema ist dieses Problem abzuleiten.

ich hoffe ihr könnt dieses Thema so ausweiten, dass auch diese Frage beantwortet wird.

Vielen Dank schon jetzt für eure Hilfe

zg

p.s.: Genau das meine ich. Schaut euch einfach mal das einfache aber schöne Menü oben an. Und unter "unendlich"-Bildern verstehe ich die grauen Streifen, die immer bis zum Rand gehen! So was will ich!


----------



## Tobias Menzel (1. Juli 2004)

Hi,

die "unendlich"-Bilder  sitzen in eigenen Zellen.
Und mit "width=100%" bekommst Du es hin, dass diese immer die
ganze Zelle ausfüllen, wenn diese ihre Größe ändert.

Hoffe, das war was Du meintest.

Gruß


----------



## King Euro (1. Juli 2004)

Musst du dir aber noch überarbeiten!


```
<table width="100%">
<tr>
<td width="25%" background="bild.jpg"></td>
<td>Text oder Buttons<td>
<td width="25%" background="bild.jpg"></td>
</tr>
</table>
```


----------



## Tobias Menzel (1. Juli 2004)

@ zg peripherals :

Ups, ich hatte garnicht bemerkt, dass es sich um Hintergrundbilder handelt:-( 
Ist natürlich eleganter!


----------



## King Euro (1. Juli 2004)

Danke!


----------



## zg peripherals (2. Juli 2004)

naja, eigentlich sollte es sich ja gar nicht um Hintergrundbilder handeln. Aber ich versuch es mal. Klingt gut.

Aber das eigentliche Problem ist noch nicht gelöst. Die Tabellellen: ich habe also drei Tabellen: eine in der Mitte mit der absoluten Grösse von 800x600 Pixeln. Dann müssen die aüsseren sich ja automatisch strecken. Also mit "xx%" arbeiten. auch das habe ich versucht. Allerdings ändert sich die linke Tabelle nicht. Ich arbeite mit Dreamweaver. Wie sieht da das Skript aus. Wie gesagt: meins klappt nicht. ich kanns ja mal posten. Aber nacher kopiert das noch jemand und macht sich verdammt unglücklich.

Ich hoffe weiter auf eure Hilfe. Vielen Dank schonmal

zg


----------



## Tobias Menzel (2. Juli 2004)

> Aber nacher kopiert das noch jemand und macht sich verdammt unglücklich.


 .. der ist dann selber Schuld. Also poste ruhig (oder zumindest einen Ausschnitt).

Mit den prozentualen Werten für die Zellen/Bilder habe ich bisher noch
keine Probleme gehabt.
Ich könnte mir höchstens vorstellen: wenn Du *keine* Werte für die
Zellen (links und rechts) angegeben hast, hat der Browser etwas mehr
Freiraum und _könnte_ so einen Fehler verursachen...
Ich gebe deshalb den Randzellen immer (identische) prozentuale Werte
(z.B. 50%) - damit werden sie in der Regel gleich groß (breit).

Gruß



> *Tabellellen*


 der gefällt mir!


----------



## zg peripherals (2. Juli 2004)

Hi,

also hier ist der Skript-Ausschnitt:



<body bgcolor="#FFFFFF" text="#000000">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="25%" valign="top" rowspan="3">&nbsp;</td>
    <td width="631" height="70"></td>
    <td width="25%" rowspan="3" valign="top" align="right">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" height="604" bgcolor="#000000">&nbsp;</td>
  </tr>
  <tr> 
    <td height="119"></td>
  </tr>
  <tr> 
    <td height="0"></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="1"><img height="1" width="314" src="/sibg.jpg"></td>
    <td><img height="1" width="631" src="/sibg.jpg"></td>
    <td></td>
  </tr>
</table>
</body>

Ich habe hier statt 50% (jeweils) nur 25% benutzt. Allerdings habe ich von 10% bis 100% einiges ausprobiert!

Ich weiss nicht wo das Problem ist!


----------



## Tobias Menzel (2. Juli 2004)

Hi,

folgendermaßen sollte es funktionieren:
	
	
	



```
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%"></td>
    <td width="640"></td>
    <td width="25%"></td>
  </tr>
  <tr>
    <td width="50%"></td>
    <td width="640"><img name="TestBild" src="" width="640" height="400" alt="" style="background-color: #00CC66"></td>
    <td width="50%"></td>
  </tr>
  <tr>
    <td width="50%"><img src="" alt="L" name="Links" width="100%" height="32" id="Links"></td>
    <td width="640"><div align="center"><img name="LeisteMitte" src="" width="640" height="32" alt="Leiste Mitte"></div></td>
    <td width="50%"><img src="" alt="R" name="Rechts" width="100%" height="32" id="Rechts"></td>
  </tr>
</table>
</body>
```

Ich hatte schon des öfteren Probleme, wenn ich mit verbundenen Zellen gearbeitet
habe - also z.B. nicht in jeder Spalte die selbe Zeilenanzahl habe (rowspan).
Frag mich nicht, warum...

Wenn es wichtig ist, dass die Zellen an den Seiten die ganze Höhe der
Tabelle ausnutzen, mach lieber eine Tabelle mit einer Zeile und setze eine
weitere *Tabelle* in die mittlere Spalte.

Gruß


----------



## zg peripherals (2. Juli 2004)

Hi Datic,

erst mal vielen Dank für deine schnelle und ausführliche Hilfe - vor allem um diese Uhrzeit.

Das Skript funktioniert (natürlich?). Bevor ich mich jetzt allerdings an die FehlerDiagnose mache, habe ich noch eine letzte Frage: Wie mache ich das jetzt, dass sich die Bilder in den äusseren Tabellen dezent strecken oder kürzen, je nach dem, wie es erforderlich ist. Also so (wie oben schon erwähnt), dass die Bilder eine Art "unendlich"-Bild ergeben. Und das Bild in der Mitte weiter zentriert bleibt?

Gruss

zg


----------



## Tobias Menzel (2. Juli 2004)

Hi,

Wirf mal einen Blick auf diese Zeile:
	
	
	



```
<img src="" alt="L" name="Links" width="100%" height="32" id="Links">
```

Dadurch, dass Du den Bildern eine Breite von 100% zuweist, füllen sie immer
die ganze Zelle aus, egal wie breit diese aktuell ist.

Aus diesem Grund habe ich ja diese Bildplatzhalter eingebaut, um das zu
demonstrieren.

Du könntest allerdings auch (wie King Euro sagte) Hintergrundbilder
verwenden; in dem Fall wird das Bild nicht gestreckt, sondern wiederholt.

Im ersten Fall  sollten die verwendeten Bilder horizontal gleichförmig sein,
also jeder vertikale Querschnitt des Bildes sollte identisch sein.
Im zweiten Fall genügt es, wenn sich linke und rechte Kante genügend
ähneln, um eine "sanfte" Wiederholung zu ermöglichen.

Gruß


----------



## zg peripherals (2. Juli 2004)

Hi,

also fast perfekt.... nur.... es geht nicht. Ich verzweifel noch... und das so kurz vorm Ziel. Wenn ich da meinen eigenen Bilder hinhänge, dann gehts nicht. Die Linke Tabelle ist weiter bei der Grösse des Bildes (trotz 100%) Schau dir doch bitte nochmal das Skript jetzt an, und sag mir wo der Fehler ist! 

Danke schonmal

zg


Skript:


```
<body bgcolor="#FFFFFF" text="#000000"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="25%"></td>
    <td width="100%"></td>
    <td width="25%"></td>
  </tr>
  <tr> 
    <td width="50%"></td>
    <td>&nbsp;</td>
    <td width="50%"></td>
  </tr>
  <tr> 
    <td width="50%"><img src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sibg.jpg" alt="L" name="Links" width="395" height="600" id="Links"></td>
    <td> 
      <div align="center"><img name="LeisteMitte" src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sim.jpg" width="800" height="600" alt="Leiste Mitte"></div>
    </td>
    <td width="50%"><img src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sibg.jpg" alt="R" name="Rechts" width="395" height="600" id="Rechts"></td>
  </tr>
  <tr> 
    <td height="1"><img height="1" width="100%" src="/sibg.jpg"></td>
    <td></td>
    <td><img height="1" width="100%" src="/sibg.jpg"></td>
  </tr>
</table> 
</body>
```


----------



## Tobias Menzel (2. Juli 2004)

```
<img src="file:///someting very long.jpg" alt="L" name="Links" width="395" height="600" id="Links">
```

Wenn ich das richtig sehe, ist die Bildbreite hier noch auf 295 Pixel gestellt.
Sollte aber *100%* sein.

Ich hoffe, ich habe jetzt das richtige Bild erwischt -werde nachher Deinen
Code mal testen; jetzt muss ich leider mal kurz weg.  

Gruß


----------



## zg peripherals (2. Juli 2004)

ja nee äh. Sollte nicht so sein. Hab es immer mit 100% getestet und da gings nicht. Muss den alten Code geladen haben. hier nochmal der aktuelle, der funktionieren sollte, aber nicht geht!:


```
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="25%"></td>
    <td width="100%"></td>
    <td width="25%"></td>
  </tr>
  <tr> 
    <td width="50%"></td>
    <td>&nbsp;</td>
    <td width="50%"></td>
  </tr>
  <tr> 
    <td width="50%"><img src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sibg.jpg" alt="L" name="Links" width="100%" height="600" id="Links"></td>
    <td> 
      <div align="center"><img name="LeisteMitte" src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sim.jpg" width="800" height="600" alt="Leiste Mitte"></div>
    </td>
    <td width="50%"><img src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/sibg.jpg" alt="R" name="Rechts" width="100%" height="600" id="Rechts"></td>
  </tr>
  <tr> 
    <td height="1"><img height="1" width="395" src="/sibg.jpg"></td>
    <td></td>
    <td><img height="1" width="395" src="/sibg.jpg"></td>
  </tr>
</table> 
</body>

</html>
```

Gruss zg


----------



## Tobias Menzel (2. Juli 2004)

Herrje, HTML und Tabellen!

Ich weiß schon, warum ich sie nie einsetze.  

Versuch mal, den beiden Seitenspalten *keine* Breite zu geben:
	
	
	



```
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td>&nbsp;</td>
    <td width="600">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><div align="center"><img name="Links" src="" width="100%" height="32" alt="L" style="background-color: #990000"></div></td>
    <td width="600">
        <div align="center"><img name="Mitte" src="" width="600" height="32" alt="M" style="background-color: #000033"></div></td>
    <td><div align="center"><img name="Rechts" src="" width="100%" height="32" alt="R" style="background-color: #006600"></div></td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td width="600">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
```

Damit hat's bei mir nun funktioniert.

Gruß


----------



## zg peripherals (2. Juli 2004)

Ich glaube ich dreh noch durch... so blöd kann man doch gar nicht sein. Ich habe nichts weiter gemacht, als dein Bild gegen meins zu tauschen (also Pfad zu ändern) und schon... GEHT ES NICHT MEHR... WAS SOLL DAS? Ich dreh mich den ganzen Tag im Kreis man. Hilf mir Was soll ich noch machen?

Code:


```
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td>&nbsp;</td> 
    <td width="600">&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>
      <div align="center"><img name="Links" src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/pic-left-el.jpg" width="100%" height="257" alt="L" style="background-color: #990000"></div>
    </td> 
    <td width="600"> 
        
      <div align="center"><img name="Mitte" src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/pic-main.jpg" width="800" height="257" alt="M" style="background-color: #000033"></div>
    </td> 
    <td>
      <div align="center"><img name="Rechts" src="file:///D|/Programme/Macromedia/Dreamweaver%204/Lessons/Lesson%20Files/pic-right-el.jpg" width="100%" height="257" alt="L" style="background-color: #990000"></div>
    </td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td width="600">&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
</table>
```


----------



## Tobias Menzel (2. Juli 2004)

Also - bei mir geht Dein Script!

Du musst allerdings beachten, dass Dein Mittelbild schon recht breit ist.

Noch ein Tipp: Nimm die &bsp; raus, dann wird die Mindestgröße der Randbilder
noch weiter reduziert.

Allerdings glaube ich langsam, dass ich auch zu wenig Ahnung von HTML habe,
um hier konstruktiv weiterhelfen zu können  
Es gibt sicher eine viel einfachere und elegantere Lösung...

Gruß


----------



## zg peripherals (2. Juli 2004)

weiss nicht... glaub ich eigentlich auch nicht. Aber wieso geht es bei dir und bei mir nicht? 

Kann sich sonst noch jemand zu diesem Problem aüssern?

Danke

zg

p.S.: @ Datic: auch wenn das Mittelbild ziehmlich Gross ist, dürfte es doch eigentlich trotzdem nichts aus machen. also meine Auflösung ist 1024x... . Woran kann es denn dann noch liegen?


----------



## zg peripherals (3. Juli 2004)

Datic? verlass mich nicht.... bitte! Ich brauch doch deine Hilfe!


----------



## zg peripherals (3. Juli 2004)

AAAAAAHHHHHHHHHH ICH HABS...

Apple (s.Bsp.) war so freundlich zu helfen!

Ich poste es mal, für alle die auch daran verzweifelt sind!

Der Trick ist, Layouttabellen in Layouttabellen zu erstellen und nicht, die Tabellen zu "layouten". Nicht klar was ich meine? Dann schaus dir an:



```
<body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>

<div id="tabs">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="49%" valign="TOP" background="... .jpg" height="186">&nbsp;</td>
        <td width="635" valign="TOP" align="CENTER"> 
          <table width="635" border="0" cellpadding="0" cellspacing="0">
            <tr> 
              <td width="2%" height="186" valign="TOP"><img src="... .jpg" width="635" height="186"></td>
            </tr>
          </table>
        </td>
        <td width="49%" valign="TOP" background="... .jpg">&nbsp;</td>
      </tr>
    </table>
</div>

<br>
  <br>
  <br>
</center>
</BODY>
```

Danke trotzdem für eure Hilfe!

@ Datic. Bis zum nächstem mal! ;-)


----------



## Tobias Menzel (3. Juli 2004)

Hi,

na, prima, dass es klappt!

Die Idee, Tabellen zu verschachteln, ist mir übrigens auch gekommen, aber
da es bei mir bisher immer mit Zellen funktioniert hat, habe ich gedacht:
wozu die Mühe?  

Ok, da hab ich hier wohl falsch gedacht.

Grüße


----------

