zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS: Unterer Pfeil der Scrollbar nicht sichtbar - bessere Möglichkeit?

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2013, 15:20
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard CSS: Unterer Pfeil der Scrollbar nicht sichtbar - bessere Möglichkeit?
Hallo, ich habe eine Frage zu einem CSS-Beispiel, siehe Code unten...
Und zwar wird bei diesem Beispiel mittig ein scrollbarer Textbereich angezeigt, jedoch ist der untere Scrollpfeil nicht sichtbar!
Ich weiß sogar, warum der Scrollpfeil nicht sichtbar ist: Das leigt am overflow:hidden im äußersten Container.

Aber wie schaffe ich es denn sonst, einen Scrollbereich in der Mitte zu haben wobei die Seite insgesamt nur 100% des Browserfensters groß sein darf?
HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<title>test</title>
</head>
<body>
<div style="border:2px solid black; height:100%; overflow:hidden">
	<div style="clear:both"><p>OBEN test</p></div>
	<div style="float:left; width:33.33%"><p>LINKS test</p></div>
	<div style="float:left; height:100%; width:33.33%; overflow-y:auto">
		<p>MITTE test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc </p>
	</div>
	<div style="float:left;width:33.33%"><p>RECHTS test</p></div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.06.2013, 22:26
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard
Im Full Standards Mode gibt es keinen Scrollbalken für dein overflow-y:auto-Element. Die Höhenangaben haben in deinem Beispiel (+ Doctype) keine Wirkung.
Du testest im Quirks Mode.

Der »DOCTYPE-Switch« und seine Auswirkungen
__________________
MfG
Jens
Geändert von plastiko (12.06.2013 um 23:02 Uhr) Grund: (+ Doctype)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.06.2013, 14:26
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard
Hmmm....

Ich hab mein Beispiel nochmal etwas überarbeitet und ergänzt und auch validieren lassen, aber merkwürdigerweise scrollt jetzt gar nichts mehr:

HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
<!--
* {margin:0px;padding:0px}
html,body{
	height:100%;
	max-height:100%
	}
	
#oben{background:LightGreen}
#links{
		background:Lavender;
		float:left;width:33.33%
	}

#mitte{
		float:left;
		width:33.33%;
		overflow:auto
	}

#rechts{
	background:Aqua;
	float:left;
	width:33.33%
	}

#unten{
	clear:both;
	background:Lime
	}
-->
</style>
</head>
<body>
<div>
	<div id="oben"><p>OBEN test</p></div>
	<div id="links"><p>LINKS test</p></div>
	<div id="mitte">
		<p>MITTE test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc test 123 abc Ende!</p>
	</div>
	<div id="rechts"><p>RECHTS test</p></div>	
	<div id="unten"><p>UNTEN test</p></div>
</div>
</body>
</html>
Eigentlich sollte die Webseite so groß sein wie das Browserfenster (Ist sie nicht!) Und das mittlere div sollte scrollen (tuts nicht)
Im Quirksmode sollte das jetzt nicht mehr laufen, oder?

Jemand noch eine Idee zum Thema scrollen?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.06.2013, 15:53
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.776
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Dieses "mittlere Div" wächst ganz normal mit seinem Inhalt in die Höhe -- warum sollte es etwas anderes tun?
"Pseudo-Frame-Layouts" erfordern mehr Aufwand, ein Beispiel bei Stu Nicholls: stu nicholls | CSS PLaY | cross browser fixed header/footer/left column layout scrolling middle area
(Mehr unter "fixed layout" auf Stu Nicholls | CSSplay | CSS Layouts Listing)

Aber: Das ist absolut nicht empfehlenswert. Lass den Inhalt normal wachsen und den User ganz normal im Browser scrollen. Glaub mir, niemand will deinen zusätzlichen Scrollbalken.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.06.2013, 16:04
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard
Ja, vielen Dank!
Mal probierenen, ob das mittlere scolldiv sein muss oder nicht. Versuch macht klug!
Mit Zitat antworten
  #6 (permalink)  
Alt 13.06.2013, 16:09
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.776
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Es "muss" bestimmt nicht.
Teste bei deinen Versuchen auch mit Touch-Bedienung. Dann lässt du es sicher bleiben.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.06.2013, 17:54
?!?
XHTMLforum-Kenner
  
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard
Ich habe das mal so umgesetzt, wie du es dir vorstellst.
Fricca hat aber recht, dass auf kleinen Displays damit Probleme auftreten, daher sollte man, wenn schon, das Layout ab einer kleineren Auflösung wechseln.

CSS 3 column layout 100% height center scrolling
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.06.2013, 18:14
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.776
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Zitat:
Fricca hat aber recht, dass auf kleinen Displays damit Probleme auftreten,
Mit "Touch-Bedienung" sind nicht unbedingt kleine Geräte gemeint; es geht darum, dass das Scrollen nicht flüssig funktioniert, wenn nicht "normal" im Browser gescrollt werden kann. Überaus nervig.

edit: Und weil ich das gerade sehe: Der Inhalt der fixed positionierten Randspalten ist potentiell komplett unzugänglich. Da muss auch eine Scrollmöglichkeit rein.
100% ist für die Randspalten keine sinnvolle Höhenangabe. Höhe weglassen, nur top und bottom angeben (siehe auch die Beispiele von Stu Nicholls).
Geändert von fricca (13.06.2013 um 18:21 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 13.06.2013, 18:37
Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard
@explanator: Danke für dein Beispiel!
Mit den evtl. uneinsehbaren Bereichen links und rechts hat fricca einen wichtigen Punkt angesprochen.

Hmmm....

Und das Ende vom mittleren Inhalt ist auch nicht durch scrollen erreichbar (Opera)
Geändert von Stadtmensch (13.06.2013 um 18:42 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.06.2013, 18:44
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.776
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Und wenn man mit dem Mauszeiger nicht zufällig in der mittleren Spalte ist funktioniert das Scrollrad nicht. Wie soll das jemand verstehen.
Eine Usability-Katastrophe. Bitte einfach nicht machen. Man muss im Jahr 2013 kein Frame-Layout nachbauen.
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Formularfeld-Eigenschaft: Zweites wird erst sichtbar, wenn erstes voll...= CSS?? Forgetta CSS 2 27.02.2011 18:49
css html flash In Safari nur text sichtbar!? gekoo CSS 1 02.06.2008 15:23
CSS Layout mit scrollbar?? carly CSS 1 13.12.2006 17:07
CSS Rahmen ohne Scrollbar... CYBERSTYLE CSS 4 30.10.2006 13:28
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:38 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2023, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023