nicht angemeldet
scrollbares div + 100% tabellenhöhe
Probleme gibt es nur bei Mozilla/Netscape...
Also der scrollbare Layer sieht folgendermaßen aus:
<div style="width: 100%; height: 100%; overflow : auto;">
wenn ich bei "width" und "height" keine prozentualen Werte, sondern pixel Werte angebe, dann funktioniert es bei Mozilla/Netscape !!!
Gebe ich im Body- und Head-Tag {height:100%} mit an, dann gibt es ein noch größeres Chaos...(bezug auf ältere Einträge im Archiv...)
Ich wollts eigentich mit Prozentangaben, wegen der unterschiedlichen Auflösungen der User auf der Website.
Wer kann hier weiterhelfen....
Danke schonmal...
Tina
-
Hallo,
Wer kann hier weiterhelfen....
genau hast du ja nicht beschrieben, was du erreichen willst.
hier ein funktionierendes (IE 6, Opera 7, Netscape 7) Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title> Test </title>
<meta name="author" content="Stefan Starke (NAG)" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:red;
overflow:auto;
}#eins {
height:100%;
background-color:#ff7f00;
overflow:auto;
}</style>
<!--[if gte IE 5]>
<style type="text/css"></style>
<![endif]--></head>
<body>
<div id="eins">
T E S T .... ist der Hintergrund komplett orange, so ist dieser Div-Container
100% hoch und breit, denn der Hintergrund des Body's ist rot!jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/>
jede menge text <br/> jede menge text <br/> jede menge text <br/></div>
</body>
</html>mfg NAG
--
signatur-
Hallo,
<meta name="author" content="Stefan Starke (NAG)" />
<br/>Mich würde mal interresieren, warum du manchmal ein Leerzeichen vor das / machst und manchmal nicht?
Grüße
Jeena Paradies--
"Of course it does not work, but look how fast it is!"-
Hallo,
Mich würde mal interresieren, warum du manchmal ein Leerzeichen vor das / machst und manchmal nicht?
das interessiert mich auch :)
ich glaube ich mache es zwecks besserer übersicht.
<meta http-equiv="expires" content="0" />
oder
<meta http-equiv="expires" content="0"/>im ersten Fall springt einen das content="0" gleich ins Auge.
<br/> ist kompakter als <br />, und da es nicht lesenswert ist, verzichte ich hier auf übersichtlichkeit.
das alles wird dir jetzt nicht weiterhelfen...
eine schöne Nacht wünscht NAG
--
signatur
-
-
Hallo!
Danke schonmal für deine Antwort.
Aber ich habe ein DIV in einer Tabelle und damit Probleme.
Folgende HTML-Datei meine ich:<html>
<head>
<TITLE></TITLE><style type="text/css">
html, body { height:100%; overflow:hidden; }
</style>
</head><body>
<table style="height:100%; width:100%" border="1" >
<tr align="left" valign="top">
<td height=575 > <!-- hier liegt das Problem -->
<div style="overflow:auto; height:100%; font-size:10pt; padding-left:5px; padding-right:5px; background-color:lime">
<script>for(i=0;i<2000;i++) document.write("Many text in here... ");</script>
</div>
</td>
</tr><tr align="left" valign="middle">
<td>
Statuszeile
</td>
</tr></table>
</body>
</html>Bitte kopiere den Code mal in eine HTML-Datei und starte diese mit Mozilla V1.5 und dann mit dem IE6.
Der Unterschied ist gleich sichtbar.
Dann ändere bei <td height=575> die height-Angabe auf die prozentuale Angabe 100%, also <td height=100%>, dann wird keine Scrollbalken mehr angezeigt und die Statuszeile verschwindet.Grüsse,
Tina-
Aber ich habe ein DIV in einer Tabelle und damit Probleme.
Folgende HTML-Datei meine ich:Ich hoffe mal, die Fehler sind jetzt nur weil du das teilweise kopiert hast.
Ich hab hier mal ein DOCTYPE eingefügt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
[...]
</html>
Bitte kopiere den Code mal in eine HTML-Datei und starte diese mit Mozilla V1.5 und dann mit dem IE6.
Der Unterschied ist gleich sichtbar.
Kann ich nicht nachvollziehen.
Ich kann in beiden mit Mühe und Not bei maximierten Fenster die Statuszeile lesen, ansonsten zeigen mir beide Browser das Gleiche.Dann ändere bei <td height=575> die height-Angabe auf die prozentuale Angabe 100%, also <td height=100%>, dann wird keine Scrollbalken mehr angezeigt und die Statuszeile verschwindet.
Das erste ist klar, die Zelle ist immer mindestens so hoch wie der Inhalt und die Statuszeile versteckst du durch overflow:hidden
Wenn du schon sowas machen willst, wozu dann die Tabelle?
Du hast doch ganz klar 2 Bereiche, also solltest du 2 DIV verwenden. Es ist sicher auch nicht sinnvoll im body overflow hidden anzugeben.Außerdem sind 'pt' keine Maßeinheit für die Bildschrimdarstellung, sinnvoller sind em oder % Angaben.
Struppi.
Grüsse,
Tina--
Vergeßt die Mail Adresse, ich schau da nur einmal in hundert Jahren vorbei.-
Es funktiert sowieso erst ab Mozilla 1.5 und IE6 SP1....
Dann funktioniert auch alles, wenn man keine 100% bei <td style="height:xxx"> angibt.
Ansonsten wird bei IE6 alles korrekt ausgegeben, bei Mozilla keine Scrollbalken mehr.
Mit Mühe und Not muss an deinem Browser liegen, da ca. 100 Leute keine Probleme mit IE6 haben.....Grüsse,
Tina -
Danke....
Problem gelöst, wenn ich die Tabelle entferne und "nur" 2 DIV's verwende... den einen z.B. mit 97% und den anderen mit 3%....
Dann geht es im IE6, Opera 7.20 und Mozilla 1.5Hier nun der Quellcode, jedoch ohne DOCTYPE, da es damit nicht funkt...
<html>
<head>
<title></title>
<style type="text/css">div.hauptbereich { height:97%; font-size:10pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue}
div.statusbereich { height:3%; font-size:8pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue; border-color:darkblue; border-top-style:solid; border-top-width:3px; }html, body { overflow:hidden; }
<!-- style="overlow:hidden" im html-Tag verhindern die Browserscrollbalken des Gesamtbildschirms bei Mozilla/Netscape -->
<!-- style="overlow:hidden" im body-Tag verhindern die Browserscrollbalken des Gesamtbildschirms beim IE6 -->
</style></head>
<body>
<div class="hauptbereich" style="overflow:auto">
<script>for(i=0;i<800;i++) document.write("Many text in here... ");</script>
</div><div class="statusbereich">Statuszeile</div>
</body>
</html>Darin steht auch warum body,head-Tag mit overflow:hidden;
Danke nochmals, ich dachte immer man muss eine Tabelle haben...
Grüsse,
Tina-
Danke....
Problem gelöst, wenn ich die Tabelle entferne und "nur" 2 DIV's verwende... den einen z.B. mit 97% und den anderen mit 3%....
Dann geht es im IE6, Opera 7.20 und Mozilla 1.5Hier nun der Quellcode, jedoch ohne DOCTYPE, da es damit nicht funkt...
Wie gesagt das bedeutet nur das du dem Browser sagst mein Code hat Fehler. Bei mitr funktioniert das im IE 6 und MZ 1.4 mit DOCTYPE
<html>
<head>
<title></title>
<style type="text/css">div.hauptbereich { height:97%; font-size:10pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue}
'pt' ist eine Einheit zum Drucken, der Monitor kent keine 'pt' bzw, es wird umgerechnet und je nach Betriebsystem und Einstellung hast du damit ziemlich unterschiedliche Ergebnise (10pt sind auf manchen Mac Versionen nicht mehr lesbar)
div.statusbereich { height:3%; font-size:8pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue; border-color:darkblue; border-top-style:solid; border-top-width:3px; }
html, body { overflow:hidden; }
<!-- style="overlow:hidden" im html-Tag verhindern die Browserscrollbalken des Gesamtbildschirms bei Mozilla/Netscape -->
<!-- style="overlow:hidden" im body-Tag verhindern die Browserscrollbalken des Gesamtbildschirms beim IE6 -->Das kannst du rausschmeissen.
Das die beiden DIV's ja 100% der Seite darstellen, folglich sind keine Scrollbalken nötig.
Struppi.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Dieser DOCTYPE funktioniert, aber ohne Dateiangabe....
Grüsse,
Tina -
Wie soll ich dann die Font-Grösse angeben...
-
Wie soll ich dann die Font-Grösse angeben...
Hab ich doch schon geschrieben :-(
em oder % sind die für Interneseiten sinnvollsten Angaben. aber aus deiner Fragestellung und dem Designansatz erkenne ich, das du es ohne feste Größe nicht aushälst und die läßt sich zumindest ein bisschen mit 'px' angeben (neuere Browser lassen damit aber zum Glück trotzdem noch die Fontgröße ändern, ich persönlich finde eine 10px kleine Schrift für längere Text unerträglich, darüber hinaus gibt es viele Menschen die unter starker Kurzsichtigkeit leiden oder vielleicht ihr System ungünstig eingestellt haben, die wesentlich größeren Schriften brauchen)
Struppi.
-
Habe jetzt die Hauptschrift auf 110% gestellt. Was meinst du dazu?
Ist das ausreichend, und wird das auf jedem System gleich gut angezeigt?
Was würdest du empfehlen oder raten?Grüsse,
TINA -
Noch eine Frage:
Du kannst bei Dir auf der Seite http://home.arcor.de/struebig/js/short/fullscreen.htm
innerhalb der Box mit der Mouse und Mozilla scrollen....
Wie geht das....Grüsse,
Tina-
Noch eine Frage:
Du kannst bei Dir auf der Seite http://home.arcor.de/struebig/js/short/fullscreen.htm
innerhalb der Box mit der Mouse und Mozilla scrollen....
Wie geht das....vermutlich gar nicht (hab hier grad keine Maus mit Rad).
Ist auch nicht dafür gedacht, ich auf der Seite den Quelltext zum kopieren in ein Textarea Feld gegeben, um die Seite nicht allzugross werden zu lassen (ist aber noch nciht des Weisheits letzter Schluß) und soll so funktionieren, das du in das Feld klickst und mit z.b. unter Win CTRL-A und CTRL-C den Quelltext in die Zwischenablage kopierst. Ich halte aber mittlerweile einen Link auf den puren Quelltext für besser.
Die Größe des Schrift kommt halt drauf an was du anbietest. Bei langen Text der auch gelesen werden sollte, musst du halt aufpassen das er nicht zu klein wird. Was optimal ist hängt wohl auch von der Schriftart ab, da z.b. Arial und Verdana sehr unterschiedlich wirken je nach Größe. Große Verdana sieht in meinem Augen schlecht aus. Lesbar ist wohl üblicherweise alles zwischen 80%-110%.
Für Naviagtionen oder Statusmeldungen verwende ich i.d.R. zwischen 0.6-0.8em.Allerdings musst du bei relativen Schriftgrößen aufpassen, das bei ineinander verschachtelten Elemten einige IE's Schwierigkeiten haben, bzw. diese summieren, also wenn du z.b einen Inhalt mit 90% hast und dort ein Bereich mit kleinere Schrift ist z.b. 80% ist dieser (in manchen IEs) 80% von 90% was sehr klein werden kann.
Struppi.
-
-
-
-
-
-
-
Hallo,
Folgende HTML-Datei meine ich:
warum nicht gleich so?
<html>
Doctype !
<head>
<TITLE></TITLE>Titel? (besser <title>...</title>)
<style type="text/css">
html, body { height:100%; overflow:hidden; }
</style>
</head><body>
<table style="height:100%; width:100%" border="1" >
<tr align="left" valign="top">
<td height=575 > <!-- hier liegt das Problem -->genau - da ist ein Fehler! ich empfehle:
http://validator.w3.org/<div style="overflow:auto; height:100%; font-size:10pt; padding-left:5px; padding-right:5px; background-color:lime">
<script>for(i=0;i<2000;i++) document.write("Many text in here...richtig: <script type="text/javascript">
...
hier der "neue" quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title> Titel </title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
</style>
</head><body>
<table style="height:100%; width:100%" border="0" >
<tr align="left" valign="top">
<td style="height:557px">
<div style="overflow:auto; height:100%; font-size:10pt; padding-left:5px; padding-right:5px; background-color:lime">
<script type="text/javascript">for(i=0;i<2000;i++) document.write("Many text in here... ");</script>
</div>
</td>
</tr><tr align="left" valign="middle">
<td>
Statuszeile
</td>
</tr></table>
</body>
</html>viel spaß damit...
BTW:
in scrollbaren div's funktioniert nicht in jedem Browser das Mausrad, was sehr schnell SEEEEHR nervig werden kann!mfg NAG
--
signatur-
Der Fehler wurde immer noch nicht behoben, wenn man statt px-Wert bei <td style="height:557px"> Prozenzangabe <td style="height:100%"> macht.
Dann geht bei Mozilla wieder gar nix mehr, keine Scrollbalken, keine Statuszeile mehr.Probier doch mal das mit 100% aus....
Grüsse,
Tina -
Danke....
Problem gelöst, wenn ich die Tabelle entferne und "nur" 2 DIV's verwende... den einen z.B. mit 97% und den anderen mit 3%....
Dann geht es im IE6, Opera 7.20 und Mozilla 1.5Hier nun der Quellcode, jedoch ohne DOCTYPE, da es damit nicht funkt...
<html>
<head>
<title></title>
<style type="text/css">div.hauptbereich { height:97%; font-size:10pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue}
div.statusbereich { height:3%; font-size:8pt; padding-left:5px; padding-right:5px; margin:0px; background-color:#F2F2F4; color:darkblue; border-color:darkblue; border-top-style:solid; border-top-width:3px; }html, body { overflow:hidden; }
<!-- style="overlow:hidden" im html-Tag verhindern die Browserscrollbalken des Gesamtbildschirms bei Mozilla/Netscape -->
<!-- style="overlow:hidden" im body-Tag verhindern die Browserscrollbalken des Gesamtbildschirms beim IE6 -->
</style></head>
<body>
<div class="hauptbereich" style="overflow:auto">
<script>for(i=0;i<800;i++) document.write("Many text in here... ");</script>
</div><div class="statusbereich">Statuszeile</div>
</body>
</html>Darin steht auch warum body,head-Tag mit overflow:hidden;
Danke nochmals, ich dachte immer man muss eine Tabelle haben...
Grüsse,
Tina
-
-
-
-
Die hier funktioniert einwandfrei in IE6 SP1, jedoch nur ohne DOCTYPE -Angabe....ansonsten geht es auch dort nicht....
<html>
<head>
<title> Titel </title><style type="text/css">
html, body { margin:0; padding:0; height:100%; overflow:hidden; }
</style>
</head><body>
<table style="height:100%; width:100%" border="0" >
<tr align="left" valign="top">
<td style="height:100%">
<div style="overflow:auto; height:100%; font-size:10pt; padding-left:5px; padding-right:5px; background-color:lime">
<script type="text/javascript">for(i=0;i<2000;i++) document.write("Many text in here... ");</script>
</div>
</td>
</tr><tr align="left" valign="middle">
<td>
Statuszeile
</td>
</tr></table>
</body>
</html>In Mozilla 1.5 geht es nicht, da muss ich bei <td style="height:100%"> statt 100% eine px-Angabe machen, dann auch dort wieder Scrollbalken.....
Also liegt der Fehler eindeutig nur an der %-Angabe, also wie löse ich das für Netscape/Mozilla - Browser.....
Grüsse,
Tina-
Die hier funktioniert einwandfrei in IE6 SP1, jedoch nur ohne DOCTYPE -Angabe....ansonsten geht es auch dort nicht....
dann zeigt er die Seite im Quirks Mode an, d.h. er versucht deine Fehler so gut es geht auszubügeln und ich hab dir schon angedeutet wo die Fehler liegen.
http://www.fabrice-pascal.de/artikel/dtd/
D.h. der IE zeigt dir die Seite falsch an.
Das ganze was du willst klappt wunderbar mit 2 Bereichen, wozu die Tabellen?
<body>
<div style="overflow:auto; height:90%; font-size:10pt; padding-left:5px; padding-right:5px; background-color:lime">
<script type="text/javascript">for(i=0;i<2000;i++) document.write("Many text in here... ");</script>
</div>
<Div style="10%">
Statuszeile
</div></body>
auch ohne das du mit Gewalt die Scrollbalken abschaltest.
Den Hinweis das das Mausrad nicht mehr funktioniert finde ich auch nicht unwichtig. Letztlich ist dieser Versuch eine Verschlechterung für den Benutzer.
Struppi.
-
Hast du eine Lösung wegen der Maus...
Sie geht nämlich in IE6, Opera 7.20, aber nicht in Mozilla 1.5.Wenn du eine hast, melde dich,
Ich wäre dir überaus dankbar....
Deine,
Tina
-
-