Breite eines Dokument-Bereiches feststellen ?

[Martin]

Hallo,

Ich habe Probleme mit der Erzeugung des Tabellen-Layouts für unsere Homepage.

Das Grundgerüst ist folgendes:

+-------------+
|     (1)     |
+-------------+
|     (2)     |
+-------------+

(1)
In diese Zeile wird über PHP die Navigation (HTML-Register) dynamisch eingebunden, je nach Auswahl. Durch die Breite der Navigation, die bei allen Registern logischerweise gleich gross ist, wird die gesamte Breite des Layouts bestimmt.

(2)
In diese Zeile wird der übrige Teil des Layouts über eine weitere Tabelle 3 Spalten x 8 Zeilen eingebunden. Die Spalten 1 und 3 haben jeweils eine bestimmte Breits, die mittlere Spalte soll 100% breit sein und damit die Spalten 1 und 3 ausrichten, d.h. an den linken und rechten Rand der Zeile "drücken", deren Breite, wie bereits beschrieben, durch die Breite der Navigation bestimmt wird.

Problem ist nun, dass ich die mittlere Spalte nicht mit der Angabe width="100%" belegen kann, da sich die innere Tabelle dann über die gesamte Bildschirmbreite ausdehnt und das gesamte Layout (innere und äussere Tabelle) auseinanderzieht. Andererseits kann ich nicht feststellen, wie breit ein HTML-Register ist, da es aus festen Grafiken und reinem Text besteht, dessen Breite ich ja nicht herausfinden kann.

Die einzige Möglichkeit wäre wohl, die Breite der HTML-Register über Javascript festzustellen (Wert "x") und die Breite der mittleren Spalte auf x - {Breite Spalte 1) - {Breite Spalte 3) festzusetzen.

Nuuuuuuuuuuur: wie finde ich die Breite x heraus ?

Gruss, Martin

[Marc Reichelt]

Hi!

Schon mal CSS probiert? Da kannst du die linke und rechte Spalte mit der Option float:left und float:right jeweils ausrichten - alle weiteren Inhalte werden demnach in der Mitte angezeigt.

Problem damit gelöst? ;-)

cu

Marc Reichelt || http://www.marcreichelt.de/

[Martin]

Hi Marc,

Erstmal danke für Deinen Tip. Bin auch gleich fündig geworden :-))

Hab jetzt folgende Definitionen vorgenommen:

#links
{
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  border: 1px solid #ccc;
  background: #666;
  width: 150px
}

html>body #links
{
  width: 120px;
}

#mitte
{
margin: 0px;
padding: 0px;
border: 5px solid #ccc;
background: #666;
}

#rechts
{
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
  border: 5px solid #ccc;
  background: #666;
  width: 150px;
}

html>body rechts
{
  width: 120px
}

Die Zuweisung erfolgt folgendermassen innerhalb einer Tabellenzelle:

<td>
  <div id="links">L</div>
  <div id="mitte">M</div>
  <div id="rechts">R</div>
</td>

Nun füllt der mittlere Bereich zwar wirklich die gewünschte Breite komplett aus, allerdings werden die div's untereinander angezeigt:

Oben der div "L", darunter der div "M", darunter der div "R"

Was stimmt noch nicht ganz ?

Gruss, Martin

[Martin]

Hi,

Klappt alles perfekt, musste nur die Reihenfolge umstellen... :-))

Vielen, vielen, vielen Dank für Deinen super Tip !!!

Gruss, Martin

[Marc Reichelt]

Hi!

Vielen, vielen, vielen Dank für Deinen super Tip !!!

Gern geschehen!
Habe das neue Konzept von CSS und XHTML auch in meiner neuesten Webseite realisiert:
http://www.politag.de/
Ein Blick darauf lohnt sich allemal, denn es enthält zudem ein getrenntes Web- und Printlayout, ist in purem XHTML 1.0 Strict geschrieben und vieles mehr...

Freut mich dass es so schnell geklappt hat!

Marc Reichelt || http://www.marcreichelt.de/