vertical-align Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
code
eigentlichen problem
erwarten
gecko
grafik
inhalt
jemand
layout
machen
normalfall
ohr
opus
papier
problem
safari
testen
tip
url
zeile
zelle
-
Hallo,
ich bin gerade ein wenig am Homepage-Basteln und war eigentlich auch soweit fertig. Habe immer schön mit Mozilla Seamonkey getestet und es sah auch recht gut aus. Nu dachte ich mir das ich es auch mal im IE testen sollte und wie zu erwarten war hatte dieser was gegen die Seite.
Nun zum eigentlichen Problem: Ich habe an der Linken Seite ein, über zwei mit rowspan verknüpfte Tabellen-Zeilen gehendes, Menü. Rechts daneben sind dementsprechend 2 Tabellenzellen. Die eine soll 100px hoch sein (für den Seitenbanner) und die 2. Zeile der gesamte Rest für den Content. Die 2. Zeile soll dabei nach oben hin ausgerichtet sein. Das habe ich mit vertical-align gemacht. Wie gesagt Mozilla hat es akzeptiert nur der IE nicht. Als ich dann jedoch die Zelle mit dem Content eine Höhe von 100% gegeben habe klappte es im IE einigermaßen (nur ein lästiger Scrollbalken) aber Mozilla ist nicht damit klargekommen.
Hier habe ich noch mal eine gekürzte Version des Quelltextes:
... <body> <table style=\"text-align: left; width: 100%; height: 100%;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <tbody> <tr> <td id=\"Navigation\" colspan=\"1\" rowspan=\"2\"> <!-- Navigationsleiste --> <table style=\"width: 150px; margin-left: 0px;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> ... </table> </td> <td style=\"vertical-align: top; height: 100px;\"> </td> </tr> <tr> <td style=\"vertical-align: top; height: 100%;\"> <!-- Seiteninhalt --> <table style=\"width: 550px; text-align: left; font-size: 16px; margin-left: 50px; margin-top: 50px;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <!-- der eigentliche Content --> </table> </td> </tr> </tbody> </table> </body> </html>
Und nu noch das wichtige aus der Stylesheet.css:
html { height: 100%; width: 100%; } body { height: 100%; width: 100%; font-size: 12px; font-family: Georgia; margin: 0px; background-image: url(../Grafiken/Papier.jpg); } table { font-size: 12px; text-align: center; }
Kann mir da vielleicht jemand weiterhelfen?
MfG
DCBlaze
Habe noch etwas weiter probiert und festgestellt das nur die Gecko-Engine probleme macht. Opera, IE & Safari zeigen die Seite korrekt an.
Inhalt des 2. Posts:
Hi, ich bin es noch mal.
Habe jetzt eine Lösung für mein Problem gefunden. Habe die Content-Zelle eine Größe in Pixeln gegeben, den Rowspan von der Navi-Spalte auf 3 gesetzt und dann unter der Content Zelle noch eine Zelle mit der Höhe 100% angelegt.
Ich weiß, ist keine schöne Lösung aber immerhin klappt es (auch wenn mich die Scrollbar im IE etwas stört)
Also wenn einer ne elegante Lösung kennt bin ich trotzdem ganz Ohr
Gruß
DCBlaze
Editiert von moritzpeuser: Doppelpost zusammengefasst. Bitte unterlasse zukünftig Doppelpostings!
Beitrag geändert: 7.6.2008 14:06:01 von moritzpeuser -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Gegen die Scrollleiste im IE hilft im Normalfall
body { [...] overflow: hidden; }
im CSS-Code... Du musst das nur ergänzen, schon ist die Scrollleiste weg!
-
@staymyfriend
das mit dem
overflow: hidden;
ist sehr, sehr, sehr gefährlich. bei <body> eingesetzt und schon kann man die seite nicht mehr scrollen... weder in ie noch in anderen browsern.
Ryan
-
Danke für den Tipp mit dem hidden. Dran gedacht hatte ich auch schon an so etwas aber ich habe die Befürchtung das wenn der Content zu groß wird dass dieser dann bei kleineren Auflösungen nicht mehr komplett angezeigt werden kann.
Aber trotzdem thx.
MfG
DCBlaze -
@staymyfriend
das mit dem
overflow: hidden;
ist sehr, sehr, sehr gefährlich. bei <body> eingesetzt und schon kann man die seite nicht mehr scrollen... weder in ie noch in anderen browsern.
Ryan
Mag sein, wenn man nicht weiß, was man tut... wenn du deinem CONTENT DIV aber eine Scrollleiste verpasst oder einen IFRAME benutzt, sieht das Layout meistens schöner aus, wenn nur der Inhalt gescrollt wird... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
