nicht angemeldet
Kein Scrollbalken bei über php erzeugtem Inhalt trotz Überlänge
0 0 0 0 0 0 0 
Der Martin
0 0 0 0 0 0 0 Der Martin
Kein Scrollbalken bei über php erzeugtem Inhalt trotz Überlänge
Hallo,
ich kann folgendes Problem nicht nachvollziehen:
Ich setze über php einen String zusammen...
$Ausgabe .= '<table>';
$Ausgabe .= '<tr>';
$Ausgabe .= '<td>' . $Datum . '</td>';
$Ausgabe .= '</tr>';
$Ausgabe .= '<tr>';
$Ausgabe .= '<td>' . $Inhalt . '</td>';
$Ausgabe .= '</tr>';
$Ausgabe .= '</table>';
$Ausgabe .= '<br>';
...den ich in einem div ausgeben lasse:
<div id="Inhalt">
<?php
echo $Ausgabe;
?>
</div>
Die css-Definitionen für html und body sehen folgendermassen aus:
html
{
overflow-y: scroll;
}
body
{
background: url(../Grafiken/Layout__Hintergrund.png) repeat fixed;
height: 100%;
overflow-y: hidden;
width: 100%;
}
Trotz Überlänge wird mir hier am rechten Rand des Browserfensters kein Scrollbalken angezeigt (siehe Fall_1).
Wenn ich hingegen den div-Bereich im Quelltext direkt mit überlangem Inhalt fülle...
<div id="Inhalt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo [...]
</div>
..erhalte ich am rechten Rand des Browserfensters einen Scrollbalken (siehe Fall_2) und dies bei unveränderten css-Angaben.
Woran liegt dieses Verhalten des Browsers?
Hattet ihr schon mal dieses Problem?
Was muss ich ändern/anpassen, damit mir auch bei überlangem und über php erzeugtem Inhalt der Scrollbalken angezeigt wird?
Vielen Dank für eure Mithilfe :-)
Gruß
Enrico
-
Hi,
dass serverseitiger Code uns bei einem clientseitigen Problem wenig interessiert, wurde dir doch sicher schon mal gesagt.
Und ein paar Screenshots lassen idR. auch nicht erkennen, wo der Seitenbastler Mist gebaut hat.
Also: Validiere bitte dein HTML.
Und wenn das Problem dann immer noch besteht - dann zeige uns ein Online-Beispiel, an dem wir das beschriebene Verhalten nachvollziehen können.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo,
...den ich in einem div ausgeben lasse:
<div id="Inhalt">
[...] eine Tabelle
</div>
Die css-Definitionen für html und body sehen folgendermassen aus:
Trotz Überlänge wird mir hier am rechten Rand des Browserfensters kein Scrollbalken angezeigt (siehe Fall_1).
zeige bitte keine Bilder, zeige lieber den erzeugten HTML-Code und das ganze dazugehörige CSS. Noch besser wäre ein Online-Beispiel.
Woran liegt dieses Verhalten des Browsers?
an Deinem Code (HTML + CSS)
Hattet ihr schon mal dieses Problem?
Nein.
Was muss ich ändern/anpassen, damit mir auch bei überlangem und über php erzeugtem Inhalt der Scrollbalken angezeigt wird?
Browser interessieren sich nicht für PHP. Ob der Code statisch ist, ob er per PHP, Ruby, Perl, Python, C# oder Shellscript dynamisch erstellt wird, ist Browsern völlig gleichgültig. Sie interessieren sich für HTML, sie nutzen für die Darstellung CSS, sie führen gegebenenfalls Javascript aus.
*Wie* sieht also *Dein* CSS aus?
Freundliche Grüße
Vinzenz
-
Hallo Vinzenz & ChrisB,
danke für eure schnellen Antworten.
Hier der Quelltext (1:1 aus dem Browser herauskopiert):
<!doctype html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css"><title>Willkommen beim Ersten Dartverein Altdorf e.V.</title>
<link rel="stylesheet" href="../Module/Standard.css"><link rel="stylesheet" href="../Module/Blaettern.css">
<link rel="stylesheet" href="../Module/Tabelle.css">
</head>
<body><div id="Layout__Abschnitt_oben__oben">
<div id="Startseite"></div>
<div id="Verein"></div><div id="Gaestebuch"></div>
<div id="Kontakt"></div>
<div id="Rechtliches"></div>
</div>
<div id="Layout__Abschnitt_oben__unten"></div>
<div id="Layout__Abschnitt_mitte__Hintergrund"></div>
<div id="Layout__Abschnitt_mitte__mitte"></div>
<div id="Layout__Abschnitt_unten__oben"></div>
<div id="Layout__Abschnitt_unten__unten"><div id="Anfang_nicht_verfuegbar"></div><div id="Zurueck_nicht_verfuegbar"></div><a href="Startseite.php?Seite=2"><div id="Vor"></div></a><a href="Startseite.php?Seite=4"><div id="Ende"></div></a>
</div>
<div id="Inhalt"><table><tr><td>01.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>02.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>03.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>04.06.2011</td></tr><tr><td>Dies ist ein Test</td></tr></table><br><table><tr><td>05.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>06.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>07.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>08.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>09.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br><table><tr><td>10.06.2011</td></tr><tr><td>Dies ist ein Test
</td></tr></table><br>
</div>
</body>
</html>Und hier der css-Code für die Ausgabe der Inhalte (die Definitionen für die Navigationen habe ich weggelassen, da diese mit meinem Problem nichts zu tun haben sollten):
*
{
color: #ffffff;
font-family: Verdana;
font-size: 14px;
margin: 0px;
padding: 0px;
}html
{
overflow-y: scroll;
}body
{
background: url(../Grafiken/Layout__Hintergrund.png) repeat fixed;
height: 100%;
overflow-y: hidden;
width: 100%;
}div#Inhalt
{
bottom: 52px;
left: 50%;
margin-left: -388px;
position: absolute;
top: 59px;
width: 776px;
}Ich hoffe, das bringt euch weiter.
Gruß
Enrico-
Hi,
Hier der Quelltext (1:1 aus dem Browser herauskopiert):
Abgesehen davon, dass du HTML ziemlich weitab jeder sinnvollen Struktur einsetzt, kann ich damit kein Problem erkennen - zumindest nicht, was Scrolling angeht.
body
{
background: url(../Grafiken/Layout__Hintergrund.png) repeat fixed;Sowas ist übrigens auch Mist - wir haben deine Bilder nicht vorliegen.
Und zusammen mit der Schriftfarbe weiß sorgt ein fehlendes, vermutlich dunkles Hintergrundbild dafür, dass man erst mal gar nichts sieht.Nicht zuletzt deshalb bat ich um ein *ONLINE*-Beispiel.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo ChrisB,
kannst Du mir einen Provider nennen, bei dem ich schnell den Code hochladen kann?
Gruß
Enrico-
Hallo ChrisB,
so, ich hoffe, es klappt:
http://ersterdartverein.funpic.de/
Dann einfach auf die Datei "Index.html" klicken.
Habe alle Dateien, weil ich hier keine Unterverzeichnisse anlegen kann, ins root-Verzeichnis hochgeladen.
Hoffe, Du kommst zurecht und kannst mir nun weiterhelfen.
Gruß,
Enrico-
Hallo,
http://ersterdartverein.funpic.de/
Dann einfach auf die Datei "Index.html" klicken.wozu? Deiner Beschreibung nach geht es doch eher um die "Startseite", also verlinke die einfach:
http://ersterdartverein.er.funpic.de/Startseite.phpAber was dein Problem ist, erkenne ich noch nicht - meine Testbrowser (Opera 8.54, 11.11, 11.50; Firefox 3.0, 3.6) zeigen alle einen Scrollbalken an, wenn ich das Browserfenster ausreichend klein mache.
So long,
Martin--
Abraham sprach zu Bebraham: Kann i mal dei Cebra ham?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
meine Testbrowser zeigen alle einen Scrollbalken an, wenn ich das Browserfenster ausreichend klein mache.
Ah, das ist interessant, denn wenn ich das Fenster kleiner mache, dann habe ich jetzt auch den gewünschten Balken.
Was ich aber nicht nachvollziehen kann, ist die Tatsache, dass im maximierten Fenster keiner angezeigt wird, da der letzte angezeigte Testeintrag definitiv den zur Verfügung stehenden Rahmen sprengt (es wird auch nur knapp die Hälfte des Datums angezeigt, der Inhalt "Dies ist ein Test" aber nicht mehr).
Und der div "Inhalt" geht unten auch nur bis zu der Stelle, ab der alle Inhalte abgeschnitten werden (siehe css-Datei "Standard")
Gruß
Enrico-
Hi,
Was ich aber nicht nachvollziehen kann, ist die Tatsache, dass im maximierten Fenster keiner angezeigt wird, da der letzte angezeigte Testeintrag definitiv den zur Verfügung stehenden Rahmen sprengt
Nein, den sprengt er nicht - es ist noch genügen Platz im Viewport vorhanden, um den absolut positionierten Container komplett darzustellen, also gibt es auch keine Scrollbalken.
(es wird auch nur knapp die Hälfte des Datums angezeigt, der Inhalt "Dies ist ein Test" aber nicht mehr).
Da liegen nun mal deine unteren Layout-Elemente über dem Inhaltscontainer.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo ChrisB,
Der div-Bereich, der den oberen Abschluss bildet, ist 59px hoch:
div#Layout__Abschnitt_oben__oben
{
height: 59px;
...
}Der untere div-Bereich 52px:
div#Layout__Abschnitt_unten__unten
{
...
height: 52px;
...
}Der mittlere div-Bereich, in dem alle Inhalte ausgegeben werden, beginnt mit oberem Abstand 59px und endet mit unterem Abstand 52px:
div#Inhalt
{
bottom: 52px;
...
top: 59px;
...
}Somit kann es doch gar nicht sein, dass unten noch genügend (unsichtbare) "Luft" ist, um in meinem Fall den Scrollbalken zu "verhindern".
Versteh das nicht.
Gruß
Enrico-
Hi,
Der mittlere div-Bereich, in dem alle Inhalte ausgegeben werden, beginnt mit oberem Abstand 59px und endet mit unterem Abstand 52px
Das heißt, das überlanger Inhalt über seine Grenzen hinaus fließen muss.
Somit kann es doch gar nicht sein, dass unten noch genügend (unsichtbare) "Luft" ist, um in meinem Fall den Scrollbalken zu "verhindern".
Doch.
Nicht dein Inhalts-Container erzeugt im Zweifelsfalle Scrollbalken, sondern sein Inhalt.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo ChrisB,
Ah, ok, es wird ja die gesamte Länge aller Inhalte des body betrachtet und danach entschieden, ob ein Scrollbalken angezeigt werden muss oder nicht, logisch, hatte hier den Denkfehler, dass hierfür mein div "Inhalt" herangezogen werden würde.
Denn letztendlich will ich ja folgendes Vorhaben realisieren:
Wenn die Länge des Inhalts des div-Containers "Inhalt" größer als die verfügbare Höhe des div-Containers "Inhalt" ist, dann Scrollbalken des Browserfensters anzeigen, ansonsten nicht.
Gibt es denn hierfür eine vernünftige Lösung, ohne mit Javascript arbeiten zu müssen bzw. gibt es hierfür überhaupt eine Lösung?
Gruß
Enrico-
Hi,
Wenn die Länge des Inhalts des div-Containers "Inhalt" größer als die verfügbare Höhe des div-Containers "Inhalt" ist, dann Scrollbalken des Browserfensters anzeigen, ansonsten nicht.
overflow kann an dem Element, dessen Inhalt länger ist als der zur Verfügung stehende Platz, für Scrollbalken sorgen.
Gibt es denn hierfür eine vernünftige Lösung
Erst mal solltest du den Container nicht absolut positionieren, sondern im normalen Fluss belassen.
Und dafür, dass die unteren Designelemente keinen Inhalt überdecken, kann ein entsprechendes padding unterhalb der Inhalte sorgen.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo,
Wenn die Länge des Inhalts des div-Containers "Inhalt" größer als die verfügbare Höhe des div-Containers "Inhalt" ist, dann Scrollbalken des Browserfensters anzeigen, ansonsten nicht.
das ist nur möglich, wenn der div-Container mit seinem Inhalt mitwächst und dadurch irgendwann größer wird als sein Elternelement, so dass dieses wieder einen Scrollbalken anzeigt.
Gibt es denn hierfür eine vernünftige Lösung, ohne mit Javascript arbeiten zu müssen bzw. gibt es hierfür überhaupt eine Lösung?
Wenn du den Scrollbalken im body- oder html-Element willst, muss der Inhalt, der das bewirkt, der Inhalt eben dieses Elements sein. Da du die umgebenden Elemente sowieso absolut positioniert hast, könntest du die verfügbare Fläche des body mit padding rundum einschränken und dann auf einen separaten div-Container für dessen Inhalt verzichten.
Ciao,
Martin--
Die letzten Worte des Neandertalers:
Möchte doch zu gern wissen, was in der Höhle ist ...
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
Gut, d.h. konkret, dass ich im ersten Schritt das Layout auf drei Bereiche reduzieren könnte:
1.) Dunkler Bereich oben mit Seitenauswahl, Teil des Anzeigebereiches inkl. oberem Abschluss des helleren Mittelteil
2.) Mittelteil selber
3.) Dunkler Bereich unten mit Aktionsmenüs, Teil des Anzeigebereiches inkl. unterem Abschluss des helleren Mittelteil
Im nächsten Schritt die Ausmasse des body durch "padding-top" und "padding-bottom" limitieren und den div "Inhalt" ganz weglassen?
Gruß
Enrico
-
-
-
-
-
-
-
-
-
-
-
-