Scrollbar einbauen

B

Benedict

Angesehenes Mitglied
Hallo,

ich wollte eine Scrollbar in meine Praktikumssite für den Informatik-Unterricht einbauen.
Hab es schon mit einer scrollbar als css versucht, aber da wurde gar nicht angezeigt.
Habs auch schon mit Scrolllayers versucht...
Vielleicht könnt ihr mir da helfen.
(Zu der Site: Ist nicht toll, aber besser, als die von allen andern (aus meinem Kurs), da die nur mit html (grundkenntnisse, der grundkenntnisse
biggrin.gif
erstellt worden sind). Klar ginge das noch besser, aber der lehrer mag mich eh schon nicht so, da ich dem zu viel ahnung von html hab
tongue.gif
)

so die site: http://home.arcor.de/digital-web
 
Das sieht echt wild aus, ein ganzes Framesset zubenutzen nur um den Inhalt mittig darzustellen. Wo möchtest Du denn die Scrollbar hinhaben?


MfG Sascha Ahlers
 
Ja, das stimmt.
Aber ich wollte ein Hintergrundbild haben, und dieses halt nicht über die ganze größe der site. War mit dem Framesset jetzt das einfachste.
Die scrollbar wollte ich in dem Mittlerm Frame(das mit dem Hintergundbild) haben.
Am besten wäre, wenn die scrollbar in einen div wäre.
 
Nun, das erste Problem hätte man auch relative einfach über CSS regeln können. Bei dem zweiten Problem kann man overflow verwenden, entweder mit dem Wert "auto" oder "scroll".

CODE div#id {
overflow: auto;
}




MfG Sascha Ahlers
 
Ciao Ben,

Ich baue Scrollbars dort ein, wo es mir gefällt. Ich habe zwar von den Ayoms schon einiges auf's Dach bekommen, aber das gehört ja zu unserer Kultur.

Zutaten:
DIV und CSS

Wie es gemacht wird:
1) Die Seite mit DIVs aufbauen.
2) Die DIVs welche zu grossen Text haben mitdem Attribut "overflow="auto"" versehen. (gross = lang oder breit)
3) Im CSS die Farben für die Scrollbars festlegen (funktioniert nur im IE)

Hier ein paar Code Schnipsel:
Zuerst ein DIV um den Scroller zu provozieren
CODE <div id="Content" style="position:absolute; width:401px; height:418px; z-index:2; left: 7px; top: 12px; overflow: auto">
Hier mindestens 40 Zeilen bla-bla-bla reinschreiben
</div>


Und den CSS Inhalt, um den Scroller einzufärben:


CODE body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#D8C491;
scrollbar-face-color: #A0A778;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #D8C491;
scrollbar-arrow-color: #000000;
}


Natürlich musst du das CSS File im HTML deklarieren, etwa so:

CODE <html>
<head>
...
...
...
<link rel="stylesheet" href="MeinCSS.css" type="text/css">
</head>
usw.



Fals du noch mehr Infos brauchst, kann ich dir http://de.selfhtml.org/ Kapitel HTML und CSS wärmstens empfehlen.

Ich habs geschafft, damit die Scrollbars dahin zu legen wo ich will. Aber wie gesagt die Ayom Gemeinde ist da gespalten. Die einen wollen die Scrollbars am Rand , die anderen gar keine, und so weiter.

Falls du noch mehr Eindrücke benötigst, kannst du die Sites in meinem Footer anklicken und auch den Code dort holen.

Cheers, René


 
Hallo René,

deine Scrollnbar finde ich echt klasse. So was hab ich gesucht. Dankeschön.
Gibt es auch eine Möglichkeit, die Scrollbar an der Seite (rechts) zu positionieren?

EDIT: Hat sich schon geklärt.
 
Jo, wie in alten Zeiten.

Selfhtml und geklaut (zB http://www.newsnavigators.de auf den Unterseiten mit Scrollbalken im Contentbereich).

Wer hat nicht so angefangen? Runtergesaugt und verändert...

Ich hab´ so alles gelernt
smile.gif


Viel Glück - und lass Dich nicht entmutigen!
 
@ Ben:
Wow, wie kriegst du denn den Scrollbalken auf die rechte Seite. Interessiert mich eigentlich nur des Wissens willen, denn seit Mac-OS 0.o scrollt ja alles rechts. Und politisch habe ich damit auch nichts im sinn, aber llinks scrollen würde mich schon interessieren.

@ Philipp:
Hast du HTML, CSS und XML mit der Muttermilch zu dir genommen. Falls ja, Cheers.
Nun ehrlich, alles Wissen dieser Welt beruht auf anschauen, nachahmen, verbessern und weitergeben.
Falls du mit meiner Meinung nicht einverstanden bist, dann freu ich mich jetzt schon auf eine lebhafte Diskussion.

Happy sliding, René
 
@René: hängt davon ab, wie das Verhältniss zwischen den werten im div und im Editor. d.h. das wenn du Breite von 300px angibst, aber du hast da z.Bsp. ein Bild von einer Breite von 400px drinne, kann man ja nur zur Seite scrollen und die Scrollbar ist unten.
Wenn die Scrollbar an der Seite ist, genau umgekehrt.
 
Ciao Ben,

Also Scroller rechts oder unten habe ich verstanden. Das ist ja "auto".
Aber oben oder links habe ich noch nie gesehen. Wenn du das hinbekommst, dann bist du reif für einen Web-Oscar.

Cheers, René
 
Scrollbar links

QUOTE

<body dir="rtl">
<div dir="ltr">
Hier der Seiteninhalt
</div>
</body>



 
QUOTE (Lanza @ Mi 8.3.2006, 0:07)Scrollbar links [...]

Mit Opera klappt das Ganze auf jedenfall nicht, Firefox ändert die Scrollbar nur für den <div>-Tag. Und der MSIE 6 stellt sich bei mir dabei nur stur (gibt eine Fehlermeldung und schließt sich), mag vielleicht daran liegen, dass ich ihn nur emuliert laufen lasse mittels Wine.



MfG Sascha Ahlers
 
@ Lanza: Besten Dank. Das ist aber eine Microsoft Extension und funktioniert nur im IE

@ Sascha: Im MSIE 7 (beta) funktioniert es

 
Bei dem Attribut dir handelt es sich nicht um eine Microsoft Erweiterung; der eigentliche Zweck von dir ist es, die Schreibrichtung anzugeben. Bei arabischen und hebräischen Texten sollte dir="rtl" (right to left) verwendet werden, dir="ltr" (left to right) ist der Normalfall, und braucht deswegen nicht angegeben werden. Ob die Browser bei dir="rtl" die Scrollbar nach links verschieben, ist dann eine sekundäre Angelegenheit. Die Konstruktion von Lanza würde ich jedenfalls nicht benutzen, solange es die verwendeten Sprachen nicht erfordern
 
Man kann statt "dir" auch das CSS-Attribute "direction" verwenden, zumindestens unter Firefox hat es noch den gleichen Effekt, wie ich ihn bereits oben beschrieben habe.



MfG Sascha Ahlers
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben