Wichtiges Problem mit Scrollbar! Hilfe

Status
Nicht offen für weitere Antworten.
M

master_t2

Grünschnabel
Hallo,

ich habe ein Problem mit einer Scrollbar. Es geht um folgende Seite:
http://www.web-assistants.de/hp/
In der Rechten Spalte soll die Scrollbar nur bis zum unteren Rand gehen nicht bis zum Brwoserrand wie jetzt. (->nur bei IE) Beim Firefox sieht das schon ganz anders aus. Da gibt es 2 Scrollbars Kann mir jemand helfen, ich will das nur die Scrollbar in der zweiten Spalte angezeigt wird sonst keine... Ich habe eigentlich schon alle mir bekannten Variationen ausprobiert...

Danke schonmal!
 
Kannst Du mal bitte den entsprechenden Quelltext posten?
Irgendwie macht es keinen allzu großen Spaß, sich den Quelltext auf Deiner Seite anzuschauen, der springt immer so weit rüber und geht dann über mehrere Zeilen, ...
Ach und eine Frage noch, wieso packst Du soviel CSS Code mit in Deinen HTML Code? Das kannst Du doch mit in Deine CSS Datei legen, ...

redlama
 
3d scrollbars werden aber nur bei IE angezeigt und bei opera 7+ nachdem man farbige scrollbars erlaubt hat (soweit ich weiß)

firefox und co zeigt farbige scrollbars gar net an!
 
Ach und eine Frage noch, wieso packst Du soviel CSS Code mit in Deinen HTML Code? Das kannst Du doch mit in Deine CSS Datei legen, ...
Zum Vergrößern anklicken....

Ja das kommt noch. Das it ja nur ein erster Entwurf eines Templates. Aufgeräumt wird bei mir immer hinterher, das geht schneller...

Hier der relevante Quelltext. Eigentlich geht es sich nur um diese Stelle:
Code: 
<div style="width: 100%; height: 91%; overflow: auto;"></div>
Der Container umschließt den scrolbaren Teil der rechten Spalte.

3d scrollbars werden aber nur bei IE angezeigt und bei opera 7+ nachdem man farbige scrollbars erlaubt hat (soweit ich weiß)

firefox und co zeigt farbige scrollbars gar net an!
Zum Vergrößern anklicken....

Wer hat den hier was von farbigen Scrollbars gesagt?
 
Hast Du schonmal versucht, die Höhenangabe des div zu verkleinern?
Was passiert, wenn Du es kleiner machst?

redlama
 
Habe es jetzt mal verkleinert, so das es passt. Wenn ich jedoch das Fenster resize und die Größe des Browserfenster was veränder, verrutscht das manchmal... :/
 
Hallo master_t2,

einfach mit einem Patchwork-DIV lässt sich das wahrscheinlich nicht regeln. Vielleicht solltest du Tabellen nur dort einsetzen, wo sie wirklich sinnvoll sind und alles andere mit der Technik von Nicholls (siehe 'Fixed' laout v3) realisieren.
Das würde etwa so aussehen:
HTML: 
<body>
   
   <div id="headerbarR"><div class="inhaltDiv">
   Aufgaben
   </div></div>
   
   <div id="aufgaben"><div class="inhaltDiv">
   Inhalt Aufgaben
   </div></div>
   
   <div id="headerbarL"><div class="inhaltDiv">
   &Uuml;bersicht
   </div></div>
   
   <div id="uebersicht"><div class="inhaltDiv">
   Inhalt &Uuml;bersicht
   </div></div>
   
   </body>
und die entsprechenden Stylesheets:
Code: 
html, body {
   	width: 100%;
   	height: 100%;
   }
   html, body, div {
   	margin: 0;
   	border: 0;
   	padding: 0;
   }
   body {
   	background-color: #cdf;	/* Hintergrundfarbe statt -bild! */
   	overflow: hidden;	/* Scrollbalken im Fenster unterbinden */
   
   /* fontnormal: */
   	font-family: tahoma, arial, verdana, helvetica, sans-serif;
   	font-size: 101%;
   	color: #000;
   }
   #aufgaben {
   	position: absolute;
   	top: 31px;		/* Abstand zum oberen Fensterrand */
   	left: 261px;		/* Abstand zum linken Fensterrand */
   	bottom: 5px;		/* Abstand zum unteren Fensterrand */
   	right: 5px;		/* Abstand zum rechten Fensterrand */
   }
   * html #aufgaben {
   	top: 0;
   	left: 0;
   	bottom: 0;
   	right: 0;
   	width: 100%;
   	height: 100%;
   	border-top-width: 31px;		/* = Rand oben */
   	border-left-width: 261px;	/* = Spaltenbreite links + Ränder */
   	border-bottom-width: 5px;	/* = Rand unten */
   	border-right-width: 5px;	/* = Rand rechts */
   	border-style: solid;
   	border-color: #cdf;		/* = Hintergrundfarbe (BODY) */
   }
   #uebersicht {
   	position: absolute;
   	top: 31px;		/* Abstand zum oberen Fensterrand */
   	left: 5px;		/* Abstand zum linken Fensterrand */
   	bottom: 5px;		/* Abstand zum unteren Fensterrand */
   	width: 252px;		/* Blockbreite */
   	background-color: #cdf;
   	z-index: 1;
   }
   * html #uebersicht {
   	top: 0;
   	height: 100%;
   	border-top-width: 31px;		/* = Rand oben */
   	border-left-width: 0;
   	border-bottom-width: 5px;	/* = Rand unten */
   	border-right-width: 0;
   	border-style: solid;
   	border-color: #cdf;		/* = Hintergrundfarbe (BODY) */
   }
   #headerbarR {
   	position: absolute;
   	top: 5px;
   	left: 261px;
   	right: 5px;
   	height: 26px;
   	z-Index: 2;
   }
   * html #headerbarR {
   	left: 0;
   	right: 0;
   	width: 100%;
   	border-top-width: 0;
   	border-left-width: 261px;	/* = Rand links */
   	border-bottom-width: 0;
   	border-right-width: 5px;	/* = Rand rechts */
   	border-style: solid;
 	border-color: #cdf;		/* = Hintergrundfarbe (BODY) */	
   }
   #headerbarL {
   	position: absolute;
   	top: 5px;
   	left: 5px;
   	width: 252px;
   	height: 26px;
   	z-Index: 3;
   }
   .inhaltDiv {
   	border: 1px solid #002D96;
   	border-top-width: 0;
   	height: 100%;
   	overflow: auto;		/* Scrollbalken, falls notwendig */
   	background-color: #fff;
   }
   #headerbarR .inhaltDiv, #headerbarL .inhaltDiv {
   	line-height: 24px;
   	border-top-width: 1px;
   	border-bottom-width: 0;
   	padding-left: 0.3em;
   	background-image: url(images/bg_headerbar_1x24.gif);
   	background-repeat: repeat-x;
   	font-family: arial, tahoma, verdana, helvetica, sans-serif;
   	font-size: 17px;
   	font-weight: bold;
   	color: #fff;
   }
Wichtig: Dokumenttypdeklaration am besten beibehalten (also HTML 4.01 Transitional ohne URI), da der Internet-Explorer im Quirksmode arbeiten muss.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück