WCM Forum - Kleines html-Chaos?

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - Kleines html-Chaos? (http://www.wcm.at/forum/showthread.php?t=132927)

Kleines html-Chaos?

Liebe Forenten!

Gefordert sind dieses Mal die HTML-Experten - siehe nachfolgende Problembeschreibung:

Meine Seiten gliedern sich in 4 horizontale Bereiche:

1. Seitenkopf
2. Navigationsleiste
3. Content (Inhalt)
4. Fußzeile

Meine Lösung sieht folgendermaßen aus:

<table border="0" width="100%" height="100%">
<tr height="90">
<td>

</td>
</tr>
<tr height="25">
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
<tr height="25">
<td>

</td>
</tr>
</table>

An sich funktioniert dies sehr gut. Die Fußzeile befindet sich entweder genau am Ende der Seite (egal, wie groß das Fensterl ist) - oder darunter, falls der Seiteninhalt ein Scrollen der Seite notwendig macht. Ganz in meinem Sinne.

ABER: beim Opera 6.01 funktioniert's nicht. Dort wird scheinbar der height-Parameter total ignoriert. Zumindest sieht die Seite exakt gleich aus, auch wenn ich die height-Parameter nicht verwende. Gleiches Ergebnis gibt es übrigens auch, wenn ich die Höhe der Zeilen mittels CSS definiere (style="height:90px").

Bin dankbar für jeden Lösungsansatz, der an Frames vorbei geht - many thanks!!

Soweit ich weiß ist das height Attribut für den <tr>-Tag nicht in der Spezifikation (4.01). Es gibt aber die Möglichkeit den <td>-Tag eine height-Attribut zu hängen.

hr_ralph

hi, hr_ralph!

das stimmt zwar, was du schreibst - nur hilft es leider nicht. wie geschrieben: das problem betrifft nur den (doofen?) opera!

:ms:

Werter Satan_666, ein Layout mit Tabellen zu machen ist doch sehr 90er Retro. Warum nicht mit CSS?

Schoenes Beispiel:
http://www.csszengarden.com/

P.S.: das height-Attribut ist bereits in HTML 4.01 deprecated, sollte also nicht mehr verwendet werden. Ich denke mal, dass sich Opera da sehr genau an den Standard haelt.

hi, _m3!

Beleidigt? Ich meine, weil Du mich gar so förmlich anredest.... *lol*

Also: Wer lesen kann, ist klar im Vorteil! In meiner Anfrage steht doch klar geschrieben, dass ich dieses Verfahren auch mit

style="height:90px"

probiert habe; mit dem selben Erfolg! Somit KANN es meiner meinung nach gar nicht daran liegen, dass sich die anderen Browser nicht an die Norm halten.

Desweiteren habe ich nicht verstanden, was Du mir mit dem Link sagen willst....

Betrachte mal den Quellcode des Links ;)

Irgendwie habe ich das Gefühl, dass ich mein Problem noch nicht verständlich artikulieren konnte. Daher mal einen anderen Ansatz:

Meine Vorgabe ist, die Fußzeile möglichst am Ende des Darstellungsbereiches anzuzeigen. Nehmen wir folgende Beispiele an:

1. Darstellungsbereich ist 550 Pixel hoch
In diesem Falle müsste der Contentbereich mit "min-height:410px" definiert werden: 550 - 90 (Logo) - 25 (Navigation) - 25 (Fußzeile) = 410

2. Darstellungsbereich ist 432 Pixel hoch
In diesem Falle müsste der Contentbereich mit "min-height:292px" definiert werden: 432 - 90 - 25 - 25 = 292

Damit sollte mein Problem klar sein: ich weiß nicht und kann es nicht wissen, wie groß der Darstellungsbereich im Browser ist, wenn die Seite angezeigt wird. Somit folgt, dass ich hier keinen fixen Wert in der Höhe definieren kann. Ganz abgesehen davon, dass bei einer fixen Höhenangabe auch keine automatische Anpassung vorgenommen wird, wenn sich die Fenstergröße ändert.

Meine Lösung ist deswegen "elegant", weil ich jene Rows, die eine fixe Höhe haben, entsprechend deklarieren kann und die restliche Row ohne Höhenangabe. Hat die Tabelle eine Höhe von 100%, dann funktioniert es (bei IE und Mozilla). Und zwar auch dann, wenn sich die Fenstergröße ändern sollte, weil der Browser intern die Größe des Contentbereiches neu errechnet, wenn sich die Fenstergröße ändert.

Ich fürchte, dass mir der Tag <div> kaum weiterhelfen kann, zumal ich hier ja auch nicht sagen kann, dass die Höhe abgängig von der Fenstergröße ist.

Möglich, dass das ganze mit JavaScript lösbar ist. Leider bin ich in JavaScript zu wenig firm.....

Zitat:

Original geschrieben von Satan_666

Also: Wer lesen kann, ist klar im Vorteil!

Ja, das sehe ich auch so. :ms:

Zitat:

In meiner Anfrage steht doch klar geschrieben, dass ich dieses Verfahren auch mit

style="height:90px"

probiert habe; mit dem selben Erfolg! Somit KANN es meiner meinung nach gar nicht daran liegen, dass sich die anderen Browser nicht an die Norm halten.

Desweiteren habe ich nicht verstanden, was Du mir mit dem Link sagen willst....

Was ich meinte ist, dass Du komplett auf Tabellen verzichten willst, und NUR mit CSS arbeiten solltest (div, span, ...).

Zitat:

Original geschrieben von _m3
Ja, das sehe ich auch so. :ms:

Was ich meinte ist, dass Du komplett auf Tabellen verzichten willst, und NUR mit CSS arbeiten solltest (div, span, ...).

Dem kann ich nur dringlichst Zustimmen! Tabellen waren mitte der 90er in. Layout = CSS, alles andere macht keinen Sinn.

Beim Link von Pong hast ein wunderschönes Beispiel. Das brauchst eigentlich eh nur mehr bei dir einfügen und fertig.

hab zwar wenig ahnung von HTML, aber hier mein Lösungsvorschlag:

Vergiss Opera 6.01 - der ist nicht mal aktuell

und wenn das Problem mit 7.5 immer noch hast darfst dich wieder melden :p

*seufz* genau solche Aussagen sind nicht sehr hilfreich um den Leuten beizubringen sich an Standards zu halten. *kopfschüttel*

na so schlecht ist mein vorschlag doch auch wieder nicht.
denn wenn man sich an alten browserversionen orientiert müsste man auch die damaligen standards einhalten, was doch wirklich nicht alzu sinnvoll ist.

auserdem (ehrlich gesagt und zugegeben) war ich zu faul den thread zu lesen *schäm* - und wollte einfach nur eine Lösung vorschlagen.
Hirnwichsen nennt man sowas ;)

lg und bitte nicht böse sein...

Zitat:

Original geschrieben von Jaguar
*seufz* genau solche Aussagen sind nicht sehr hilfreich um den Leuten beizubringen sich an Standards zu halten. *kopfschüttel*

Um weila ein bisschen Beistand zu leisten, hast du dir mal eine mit CSS formatierte Seite unter Netscape 4.x angesehen? Auch IE 5.x hat teilweise Probleme damit.

Netscape 4 ist aber nichte mrh wirklich Stand der Dinge. Detto der IE 5.
Und mit CSS kann man sich die Seiten trotzdem ansehen, sehen halt nciht sooo toll aus. Nennt man dann "graceful degradation".
http://www.anybrowser.org/campaign/a...#degradability

Ich wollte ja damit nicht unbedingt ausdrücken, dass NS4/IE5 Standardkonform sind, sondern dass weilas Rat schon so seine Berechtigung hat.

Im übrigen, nur weil ein Attribut 'deprecated' ist, sollte es nicht sofort vom Browser ignoriert werden.

Zitat:

Original geschrieben von ruffy_mike
Im übrigen, nur weil ein Attribut 'deprecated' ist, sollte es nicht sofort vom Browser ignoriert werden.

Nein, aber vom Seitenschreiber nicht merh verwendet werden.

Hi!

Danke für die rege Diskussion. Und sorry, dass ich mich erst jetzt wieder melde. Ich musste mich mal durch den mir ziemlich unverständlichen englischen Kauderwelsch durchkämpfen.

Schön langsam beginne ich, zu verstehen, wie die Lösung aussehen sollte. Dennoch - so ganz klar komme ich damit auch nicht.

Wieso? Nun, mein jetziger Code sieht so aus:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test 1</title>
<style type="text/css">

</style>
</head>
<body>
<div id="logo" style="background:#ccccff; border:solid 2px blue;">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><h1>Hier wäre das Logo</h1></td>
<td align="right"><h3>Hier wäre das zweite Logo</h3></td>
</tr>
<tr>
<td>Hier wäre die Adresse</td>
<td align="right">Hier wäre die Zusatzinfo</td>
</tr>
</table>
</div>
<div id="menu" style="background:#ffffcc; border:solid 2px black;">
Home - Über mich - Was ist neu? - Nochwas
</div>
<div id="inha" style="background:#ffffff; border:solid 2px green;">
Hier ist der Content der Seite!
</div>
<div id="fuss" style="background:yellow; border:solid 2px red;" align="center">
Copyright-Angabe
</div>
</body>
</html>

So gut das auch aussehen mag (und mir sogar besser gefällt als die "veraltete" Lösung mit der Tabelle), so gleich ist trotzdem mein Problem. Der Grund: der Fuß-Bereich (mit der Copyright-Angabe) steht zwar schön brav ganz unten, jedoch wird dieser vom Content-Bereich überlappt, wenn dieser so groß ist, dass der Platz zwischen Menu und Fuss zu klein ist. Womit wir wieder exakt dort wären, wo ich begonnen habe. Ich muss also auch bei dieser Lösung wissen, wie viel Platz der Content-Bereich einnehmen wird, um den Fuß-Bereich korrekt platzieren zu können. Die Angabe "botton:??px" setzt diesen Block lediglich an die untere Kante des Browser-Fensters, nicht mehr und nicht weniger! Danach scrollt dieser einfach an dieser Position mit!

Fazit: für mich unbrauchbar, auch wenn es derzeit "state of the art" sein soll!

Weitere Ideen?

es gibt auch

position: relative;

gruss,
snowman

Stimmt - aber das hilft auch nicht, weil dann der Fuß-Bereich oben statt unten ist.

relativ bedeutet (wenn ich es richtig deute), dass es ein Eltern-Element geben muss, auf das es sich beziehen kann.....

Was da eher gemeint war ist das du deine DIVS nicht mit absolut ausrichten sollst sondern mittels floating.. dann wird ein div nach dem andern angezeigt.. dh. wenn dein contentbereich aus ist kommt hinten dran die fußzeile..

da ist aber das problem, dass wenn zu wenig text auf der seite ist, der footer nicht am ende der seite ist, sondern nur am ende des textes! das will er so nicht ;)

dann soll er halt eine höhe im content-div angeben und wenns größer ist, wird der container gestreckt.

gruss,
snowman

Hi snowman!

Bitte mein Beispiel genau lesen: im Style-Tag habe ich eine Höhe angegeben!

Das Problem bleibt: die Höhe muss genau den Wert haben, der sich aufgrund der Fensterhöhe ergibt. Die Fensterhöhe weiß ich aber nicht, damit kann ich nur einen Pseudowert angeben. Und durch Zufall den richtigen Wert erwischen, aber den halte ich für ziemlich unwahrscheinlich. Also wird entweder die Fußzeile etwas höher oder tiefer stehen als geplant.

Auch wenn's depricated sein soll: mit der Tabelle funktionierts zumindest mit dem IE und auch mit dem Mozilla! Dass es keine andere Lösung geben soll, kann ich nicht glauben....