100% hohe Tabelle u. untige Ausrichtung (link inside!)

[hendrik]

Hallo zusammen,

ich habe ein Problem mit einer 100% hohen Tabelle und der "untigen" Ausrichtung einer Tabellenzelle:

Ich habe ein HTML-Layout entwickelt, welches teilweise durch CSS-Angaben positioniert und "auf Höhe" gebracht wird.
Das Layout ist in grob vereinfachter Form hier zu sehen:

http://www.stey.de/test

Mein Problem liegt nun in der unterschiedlichen Interpretation des Layouts durch den Microsoft Internet Explorer und den Mozilla Firefox:

Der Mozilla Firefox stellt alles so, dar wie ich es haben möchte, nämlich:

Die untere violette Zeile sowie der hellbraune mehr oder wenige quadratische Bereich (in dem das Wort "Sticky" steht) sollen sich immer am unteren Browserrand befinden.
Das funktioniert (hoffentlich nicht nur bei mir) im Mozilla perfekt aber im IE und auch im Opera leider weniger perfekt - dort klappt nämlich die untige Ausrichtung des "Sticky"-Bereiches nicht.

Kann mir jemand sagen, wie ich dieses Problem lösen kann?!

Bin für jeden Tipp dankbar.
Gruß
Hendrik.

[Zeromancer]

Hallo Hendrik,

Das Layout ist in grob vereinfachter Form hier zu sehen:
http://www.stey.de/test

Ich sehe nix ;-) Sollte ich vielleicht hier gucken http://www.stey.de/test während du mal hier </faq/#Q-19> guckst?

Mit freundlichen Grüßen

André

[hendrik]

hups.

entschuldigung, das wusste ich nicht.
nächstes mal mach ich's richtig.

gruss,
h.

Ich sehe nix ;-) Sollte ich vielleicht hier gucken http://www.stey.de/test während du mal hier </faq/#Q-19> guckst?

[Zeromancer]

Hallo,

kein Problem. Du könntest deine Seite mal validieren:

http://validator.w3.org/

oder

http://validator.de.selfhtml.org/

Da offenbaren sich die ersten Fehler.

Hinterher noch http://jigsaw.w3.org/css-validator/ dein CSS validieren.

Und vielleicht schmeißt du die Tabllen raus und arbeitest mit <div>?

Mit freundlichen Grüßen

André

[hendrik]

Hallo,

kein Problem. Du könntest deine Seite mal validieren:

hi.
habe gerade die paar fehler entfernt, waren ja nur zwei, ein fehlender alt-tag und eine höhenangabe einer tabelle, die ich stattdessen der zelle gegeben habe.
das xhtml ist nun valid, dass css war es bereits.

Und vielleicht schmeißt du die Tabellen raus und arbeitest mit <div>?

damit kenn ich mich wenig aus, wüsste gar nicht, wie ich anfangen sollte.
gruss,
h.

[Zeromancer]

Hallo,

wenn ich mir deinen Entwurf so ansehen, frage ich mich, wofür der rote rechte Rand gut sein sein? Und auch sonst wäre die Beschriftung der einzelnen Zellen hilfreicher, so dass man nach Alternativen zu deinem Layout suchen könnte.

Möglich wäre die Anordnung per gefloatetem <div>:

<schnipp>
-----------

<div id="head" style="clear:both; width:100%; height:100px;">
<h1>Meine Webseite</h1>
</div>

<div id="leftnavi" style="width:140px; float:left;">

<ul>
   <li>Navigation
     <ul>
       <li>Link1</li>
       <li>Link2</li>
     </ul>
   </li>
  </ul>

</div

<div id="inhalt" style="padding-left:160px;">
<p>Inhalt</p>
</div>

<div id="footer" style="clear:both; height:100px; width:100%;">
<p>FußZeile</p>
</div>

------------

</schnipp>

Mit freundlichen Grüßen

André

[hendrik]

wenn ich mir deinen Entwurf so ansehen, frage ich mich,
wofür der rote rechte Rand gut sein sein?

das ist eine skalierbare Zelle, in der sich eine Schlagschattengrafik "kacheln" soll.

Und auch sonst wäre die Beschriftung der einzelnen Zellen
hilfreicher, so dass man nach Alternativen zu deinem Layout
suchen könnte.

hab ich gerade mal gemacht.

die gesamte linke "spalte" ist übrigens eine eigene tabelle - ich bekomme sie halt nur nicht so hin, dass ihre obere Zelle (die, in der "Subnavigation01" usw. steht) von variabler Höhe ist und sich auf diese weise die tabelle über die gesamte Höhe der Zelle, in der sie sich befindet, erstreckt,

das mit den divs muss ich mir mal näher anschauen.
gruss,
h.

[Zeromancer]

Hallo,

dann such mal bei http://www.google.de nach den Stichworten Spaltenlayout mit CSS

http://www.google.de/search?q=css+spalten+layout+2+spalten&ie=UTF-8&hl=de&meta=

Da wirst du ganz schnell fündig. Den Schatteneffekt kannst du ja auch mit CSS realisieren.

Mit freundlichen Grüßen

André

[hendrik]

ok, danke, ich werd's mir mal anschauen.

aber kann ich denn mit css den effekt, den ich haben möchte, überhaupt realisieren, d.h. kann ich mit css elemente überhaupt am unteren browserrand ausrichten, so wie ich es in

http://www.stey.de/test/

getan habe, OHNE dass diese am unteren rand positionierten elemente andere elemente überlagern, z.b. meinen dunkelroten textbereich,  wenn der text darin sehr lang wird?

in diesem beispiel

http://www.stey.de/test/index2.html

sieht man ja, dass -wenn es sehr viel text gibt- sich die untere violette Zeile sowie der hellbraune quadratische Bereich MIT nach unten verschieben.

und dass muss natürlich sein, falls die textmenge halt mal etwas grösser ist.

gruss,
h.

[Zeromancer]

Hallo,

http://www.stey.de/test/index2.html

Seite wird nicht gefunden.

Mit freundlichen Grüßen

André

[hendrik]

http://www.stey.de/test/index2.html
Seite wird nicht gefunden.

jetzt geht's, sorry.

[Zeromancer]

Hallo,

http://www.stey.de/test/index2.html

Drei-Spalten-Layout sollte deinen Ansprüchen genügen und ist gar nicht schwer. Dein Schlagschatten als Hintergrund gekachelt geht auch im zu erwartenden rechten <div>.

<div> mit externem Stylesheet machen die Seite schlanker, übersichtlicher und leichter zu pflegen. Versprochen ;-)

Mit freundlichen Grüßen

André

[Zeromancer]

Hallo,

kleiner Nachschlag: Schau mal weiter oben zum Thema <div> zentrieren.

Mit freundlichen Grüßen

André

[Zeromancer]

Hallo,

und dass muss natürlich sein, falls die textmenge halt mal etwas grösser ist.

Zu diesem Zweck kann man zum Beispiel http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow nutzen.

Mit freundlichen Grüßen

André