Anzeige

Scrollbalken erstellen + positionieren

Scrollbalken erstellen + positionieren | PSD-Tutorials.de

Erstellt von pacapa, 19.02.2011.

  1. pacapa

    pacapa Noch nicht viel geschrieben

    Dabei seit:
    26.02.2009
    Beiträge:
    42
    Geschlecht:
    weiblich
    Ort:
    Nähe Mosbach
    Software:
    Photoshop CS2 / CS4
    Scrollbalken erstellen + positionieren
    Hallo,

    vorweg: ich setze mich zum ersten mal mit HTML / CSS auseinander.

    Ich habe mir ein Template runtergeladen & möchte meinen Inhalt einfügen.
    Leider ist der Bereich viel zu klein, also von der Höhe! Und somit benötige ich eine Scrollbar.

    Hab das mal skizziert:
    http://img218.imageshack.us/img218/9020/32073947.jpg
    In den grünen Bereich soll mein Inhalt rein.

    Meine Frage ist also, wie erstell ich ein Scrollbalken & positionier den richtig?

    Von hier hab ich das Template:
    Browsing deviantART
     
    #1      
  2. MaedeG

    MaedeG Nicht mehr ganz neu hier

    Dabei seit:
    31.07.2008
    Beiträge:
    90
    Geschlecht:
    männlich
    Software:
    Photoshop CS4, Notepadd++
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    Hallo pacapa

    Was du brauchst, lässt sich mit der CSS-Eigenschaft overflow lösen. Des Weiteren musst du dem Content-Bereich eine bestimmte Höhe zuweisen, sobald der Inhalt dann grösser wird als der Bereich definiert ist, wird automatisch eine Scrollbar angezeigt.

    Gruss, MaedeG
     
    #2      
  3. rockscientist01

    rockscientist01 Nicht mehr ganz neu hier

    Dabei seit:
    10.08.2008
    Beiträge:
    232
    Geschlecht:
    männlich
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    Also bei dem template hast du ja ein 2-spaltiges Layout mit div#textleft und div#textright. Machst du zu viel Inhal rein, werden diese divs zu groß und erstrecken sich über das template, weil sie float gesetzt sind. Du musst beiden divs zuweisen:
    height: 330px;
    overflow: scroll;
    overflow-x:hidden;

    weitere stylemöglichkeiten für die scrollbalken:

    scrollbar-face-color:
    scrollbar-3dlight-color:
    scrollbar-arrow-color:
    scrollbar-darkshadow-color:
    scrollbar-shadow-color:
    scrollbar-track-color:
    scrollbar-highlight-color:

    Aber alles in allem finde ich scrollbars in diesem template eien schlechte Lösung. Hmm aber besser wirds wohl erst, wenn du selbst mit html und css stylest...
    Na ja hoffe, ich konnte helfen.

    AO
     
    #3      
  4. pacapa

    pacapa Noch nicht viel geschrieben

    Dabei seit:
    26.02.2009
    Beiträge:
    42
    Geschlecht:
    weiblich
    Ort:
    Nähe Mosbach
    Software:
    Photoshop CS2 / CS4
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    erstmal danke für eure Antworten!

    @rockscientist01
    das ist schonmal genau das was ich brauch.

    ich hab jetzt bei textright folgendes dastehen:
    .textright {
    float:left;
    line-height:14px;
    padding-left:60px;
    padding-top:50px;
    text-align:justify;
    width:550px;
    font-family:'arial';
    font-size:14px;
    color:#818181
    height:340px;
    overflow:scroll;
    overflow-x:hidden;}

    wenn ich jetzt zuviel Inhalt reinpack, hab ich zwar den scrollbalken auf der rechten seite, aber nicht in einer gewissen höhe!!
    was hab ich falsch gemacht?
    der scrollbereich darf ja nicht über den weisen hintergrund hinausragen! (also nach unten)
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    wenn das Ganze nur eine "gewisse Höhe" haben soll, kannst du die genau per "height" (bei dir derzeit 340px) angeben.
    diese styles sind kein css Standard, und gelten nur für den IE.
     
    #5      
  6. pacapa

    pacapa Noch nicht viel geschrieben

    Dabei seit:
    26.02.2009
    Beiträge:
    42
    Geschlecht:
    weiblich
    Ort:
    Nähe Mosbach
    Software:
    Photoshop CS2 / CS4
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    @ sokie

    so hab ich das bisher auch verstanden.
    aber wenn ich bei der höhe den wert änder, passiert nichts! :-/

    ich hab ".textright" im ".css" reingeschrieben. ist das richtig?
     
    #6      
  7. ben3plus

    ben3plus Member

    Dabei seit:
    18.06.2010
    Beiträge:
    272
    Geschlecht:
    männlich
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    Wenn es dementsprechend im HTML verlinkt ist,schon.
     
    #7      
  8. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    dir fehlt hinter der definition der "color" das semikolon, weswegen color und height nicht gelesen werden können.
     
    #8      
  9. Frank_B_punkt

    Frank_B_punkt Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    06.08.2010
    Beiträge:
    12
    Geschlecht:
    männlich
    Ort:
    Bremen
    Software:
    CS4, notepad++, Poser7
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    Moin,
    das Stylen von scrollbalken find ich spannend.

    Gibts denn solche Anweisungen auch für den FF und Konsorten?

    Grüße vom Frank
     
    #9      
  10. pacapa

    pacapa Noch nicht viel geschrieben

    Dabei seit:
    26.02.2009
    Beiträge:
    42
    Geschlecht:
    weiblich
    Ort:
    Nähe Mosbach
    Software:
    Photoshop CS2 / CS4
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    super, jetzt klappt´s! :)
    danke
     
    #10      
  11. MegaAdi

    MegaAdi Freak

    1
    Dabei seit:
    20.11.2009
    Beiträge:
    610
    Geschlecht:
    männlich
    Ort:
    Görlitz
    Software:
    Rassierwasser vom Lidl :D
    Scrollbalken erstellen + positionieren
    AW: Scrollbalken erstellen + positionieren

    Habs mal mit css javascript eigene scroll bars bei google Probiert =) und klick druff dann haste nen schönes ergebnis.
     
    #11      
x
×
×