Scroll-Textfeld: Probleme bei %-Angabe im Firefox und Netscape
Pietro
- css
Hallo,
ich habe folgendes Problem bei der Darstellung in Firefox und Netscape:
habe innerhalb einer Tabelle einen scrollbaren Text-Bereich über css definiert - wenn ich die Höhe mit px fix definiere, zeigen alle Browser das gewünschte Ergebnis (Bsp. 1)
Wenn ich die Höhe mit % definiere, zeigt nur der IE das gewünschte Ergebnis. (Bsp. 2)
<head>
Bsp. 1 - alle Browser zeigen das gewünschte Ergebnis:
<style type="text/css">
<!--
.scroll {
width:392px;
height:200px;
overflow:auto;
}
-->
</style>
Bsp. 2 - nur der IE zeigt das gewünschte Ergebnis:
<style type="text/css">
<!--
.scroll {
width:392px;
height:90%;
overflow:auto;
}
-->
</style>
<body>:
Das gewünschte scrollbare Textfeld binde ich dann über <div class="scroll"> innerhalb einer <td> ohne Höhenangabe ein. Die Tabelle besteht aus 3 Zeilen - Header und Footer haben eine fixe Höhe - die mittlere <td> passt sich automatisch der Seitenhöhe an, da die gesamte Tabelle 100% Höhe hat.
Ziel ist es, in der mittleren <td> ein sich automatisch der Fenster-Höhe anpassendes scrollbares Textfeld zu platzieren, wobei Header und Footer mit fixer Höhe am oberen bzw. unteren Seitenrand platziert sind.
Hat jemand eine Idee/Lösung?
Habe schon nach verschiedensten Beiträgen zum Thema Firefox/%-Höhe recherchiert und bin bisher leider nicht fündig geworden.
Vielen Dank,
Pietro
Hat jemand eine Idee/Lösung?
a) nimm keine Tabellen zum Layouten von Seiten - ich denke du meinst mit "header" und "footer" nicht <thead /> und <tfoot />
b) nutze html so wie es gdacht ist. es ist nicht notwendig, dass die "fusszeile" einer seite am viewport endet - hast du dir schon mal gedanken gemacht, wie das auf einem pivot-fähigen monitor aussieht - ich liebe solche seiten kann ich dir sagen!
html-dokumente sind KEINE din A4 fetzen auf denen auf jeder seite ein fusszeile ganz unten stehen muss - im hypertext sollte es maximal eine fusszeile für alle seiten geben, auch wenn das dokument 20 "seiten" hat - oder auf einem grossen monitor nur 10 seiten und auf einem pda 250
zusammenfassend:
viewport != seitenende
Hi suit,
danke für Deine Antwort! Leider hat sich dadurch meine Frage nicht wirklich beantwortet. Dass man möglichst keine Tabellen fürs Layout nimmt ist mir klar. Nur leider bin ich gerade bei einem Projekt, wo gewisse Dinge Fact sind. Es gibt Tabellen, den Header (Erklärung: damit meine ich nur den "oberen Bereich" - unabhängig von der technischen Lösung) einer jeden Seite schmückt das Firmenlogo und im Footer (Erklärung: wie bei Header) sollen Sponsor-Logos auf jeder Seite sichtbar sein und zwar immer - ohne zu scrollen. Dazwischen soll Content rein, der möglichst die komplett verfügbare Seitenhöhe ausfüllen soll. - Egal ob normaler Monitor oder Pivot. Die Breite ist definiert - die Höhe soll maximal ausgefüllt werden. Nachdem keine Frame-Lösung in Frage kommt, wollte ich das Ganze gerne mit dem css-Skript lösen.
Ist das möglich? ... oder gibt es Alternativen?
Danke,
Pietro
wollte ich das Ganze gerne mit dem css-Skript lösen.
css ist keien scriptsprache sondern eine deklarationssprache ;)
wenn du das ganze mit css lösen möchtest, solltest du tunlichst keine tabellen nehmen, da diese von den browsern gesondern meist "ausserhalb der css regeln" gerendert werden bzw ihre eigenen kleinen regeln verwenden
Ist das möglich? ... oder gibt es Alternativen?
das ist wohl eine der wenigen dinge, die nicht ohne viel aufwand möglich sind, wenn man KEINE tabellen nutzt
in diesem fall ist eine tabelle die wohl einfachste lösung
header und footer zeile jeweils so hoch wie gewünscht und den inhaltsbereich 100% geben - die komplette tabelle ist ebenfalls 100% hoch
extrem einfach, extrem schmutzig und nicht zu empfehlen
es hört sich für mich an, als baust du das ding gerade neu, ansonsten würdest du nicht an der grundstruktur mäkeln - ich verstehe also absolut nicht, warum du die sache nicht mit css versuchst
hier ein artikel dazu:
http://www.alistapart.com/articles/footers/
Hi,
nochmals danke für deine Antworten + den Link zum alistapart-Artikel!
Ich glaube meine Problematik ist noch nicht ganz klar, deshalb möchte ich per E-Mail 2 Files mitschicken, um sie zu visualisieren - ich möchte NUR den Content-Teil in der Mitte scrollen, sobald der Text länger als die Seitenhöhe ist. Der Footer soll immer im Bild sein. (wie bei ner Frame-Lösung - aber ohne Frames)
Beim File "test.html" passt sich die Höhe des Scroll-Feldes mit 85% an die Seitenhöhe an (funkt nur im IE), beim File "test+.html" ist die Höhe des Scroll-Feldes mit 160px fix definiert (funkt in allen Browsern).
Ich suche nach einer Lösung wie bei "test.html", die bei allen Browsern funkt.
Das Ganze ist für jemanden der mit nem WYSIWYG-Programm die Inhalte selbst einpfelgen möchte und Tabellenlayouts gewöhnt ist ;-)
Thx,
Pietro
Das Ganze ist für jemanden der mit nem WYSIWYG-Programm die Inhalte selbst einpfelgen möchte und Tabellenlayouts gewöhnt ist ;-)
ich möchte nicht mit einem WYSIWYG-Programm arbeiten, ich mag mein Notepad++ - vor Tabellenlayouts hab ich Angst bzw ich bin traumatisiert
wieso E-Mail, dann können andere nicht davon lernen - poste einen Link zu einer Online-Demo