Anzeige

Scrollbar im CSS in HTML einbinden

Scrollbar im CSS in HTML einbinden | PSD-Tutorials.de

Erstellt von Cath, 02.11.2008.

  1. Cath

    Cath Noch nicht viel geschrieben

    Dabei seit:
    26.11.2007
    Beiträge:
    9
    Geschlecht:
    weiblich
    Scrollbar im CSS in HTML einbinden
    Hallo
    Steh hier irgendwie total an:
    Ich hab in mein CSS Dokument den Code für den Scrollbar mit dem Titel "body" erstellt.

    body {
    scrollbar-face-color: #2B60BA;
    scrollbar-highlight-color: #2B60BA;
    scrollbar-arrow-color: #A8C0EA;
    scrollbar-track-color: #2B60BA;
    scrollbar-3dlight-color: #A8C0EA;
    scrollbar-shadow-color: #A8C0EA;
    scrollbar-darkshadow-color: #A8C0EA;
    }

    Nun frage ich mich, wie das ganze in meine HTML Seite einbaue. Ich hab keine Ahnung wo ich jetzt was entsprechend einbauen muss, damit es mir die die table height nicht andauernd verzieht. Denn der Text ist ziemlich lang.

    <table width="639" height="350" border="0" align="left" cellpadding="0" cellspacing="3">
    <tr>
    <td colspan="5" class="titel">Der Beauceron</td>
    </tr>
    <tr>
    <td colspan="5" class="text">dkjoiwf eijcoiwe ciojcioj </td>
    </tr>

    </table>

    Wäre Euch total dankbar für eine kurze Antwort.
    Gruss
    Cat
     
    #1      
  2. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    was ist die Frage ?
    das eine hat meines Erachtens nix mit dem anderen zu tun:
    ohne externe CSS musst du deine Stile in den head jeder html packen
    z.B.:
    Code (Text):
    1. <style type="text/css">
    2. <!--
    3. body {....}
    4. .Stil1 {font-size: 16px}
    5. -->
    6. </style></head>
    7.  
    und eine fixe Tabellenhöhe bekommst du nur mit einen Blatzhalter-Bild hin
     
    Zuletzt bearbeitet: 02.11.2008
    #2      
  3. Cath

    Cath Noch nicht viel geschrieben

    Dabei seit:
    26.11.2007
    Beiträge:
    9
    Geschlecht:
    weiblich
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    Hallo

    Ich habe ein externes CSS mit dem Dokument verlinkt. Funktioniert auch einwandfrei. Hab den Code nur als Info einkopiert.

    Die Frage ist, wie ich es hinbekomme, dass in meiner Tabelle der Scrollbar erscheint und das Fenster in der definierten Höhe bestehen bleibt und man mit dem Srollbar sich in der definierten Tabelle bewegen kann.

    Gruss
    Cath
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    du mußt im Tabellenbereich ein div erzeugen mit höhe und breite und per css einen overflow:auto


    Beispiel:


    HTML:
    1.  
    2.  
    3. ...
    4. <tr>
    5. <td style="width:500px; height:350px; vertical-align:top;"><div style="width:500px; height:350px; overflow:auto;"><h1>Überschrift</h1>
    6. <p>Text ...</p></div></td>
    7. </tr>
    8. ...
    9.  
    10.  


    Werte anpassen und die dürfen natürlich nicht größer sein als die Tabellenzeile
     
    #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
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    das stimmt so nicht, und ich gehe mal davon aus, dass deine Tabelle schon eine bestimmte höhe hat,wie es sich aus dem Eingangsposting ergibt.
    die Tabelle nimmt immer die Höhe in der Summe ihrer Einzelinhalte (<td>s) an.

    nimm aus dem <table> tag die height heraus, und weise den <td> die jeweilige höhe zu,die diese haben müssen.

    dann dem Vorschlag von Herrn_D folgend in die betreffende Zelle das div: hier reicht:
    Code (Text):
    1.  
    2. <td class="text" height="300"><div style="height:100%; overflow:auto">dein Text</div></td>
    3.  
    vorausgesetzt die anderen Tabellenzellen bekommen die korrekte height zugewiesen.
     
    #5      
  6. Cath

    Cath Noch nicht viel geschrieben

    Dabei seit:
    26.11.2007
    Beiträge:
    9
    Geschlecht:
    weiblich
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    Hi
    Also das mit dem DIV Tag etc innerhalb des TDs funktioniert tadellos - vielen Dank.
    Hier nun aber noch eine Frage:
    Es handelt sich um eine verschachtelte Tabelle und ich möchte gerne, dass die ganze Tabelle, welche innerhalb eines TDs platziert ist mit dem Scrollbar funktioniert.
    Setz ich jetzt in jeden TD den DIV und Auto Tab?
     
    #6      
  7. 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
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    deine 'innere' Tabelle liegt ja auch in eine Tabellenzelle :<td><table....>...</table></td>
    um diesen bereich scrollbar zu machen musst du das div um die Tabelle legen:
    Code (Text):
    1.  
    2. <td>
    3. <div style="height: ...px; overflow:auto;">
    4. <table... ... >
    5. ...bla
    6. </table>
    7. </div>
    8. </td>
    9.  
     
    #7      
  8. Cath

    Cath Noch nicht viel geschrieben

    Dabei seit:
    26.11.2007
    Beiträge:
    9
    Geschlecht:
    weiblich
    Scrollbar im CSS in HTML einbinden
    AW: Scrollbar im CSS in HTML einbinden

    Vielen Dank - jetzt funktioniert auch das.

    Nur jetzt noch kommt auch schon das nächste. Ich möchte, dass der Scrollbalken nur rechts zu sehen ist, unten brauch ich keinen (verschieben von links nach rechts. Könnt mir jemand sagen wo der Fehler liegt im folgenden Code-Abschnitt.
    Sorry hab das noch nie gemacht!:schmoll:

    <td height="350" colspan="2" valign="top">
    <div style="width:650px;height:350px; overflow:auto;">
    <!-- InstanceBeginEditable name="hauptfenster" -->
    <table width="638" border="0" align="left" cellpadding="0" cellspacing="3">
    <tr>
    <td colspan="5" class="titel">Der Beauceron</td>
    </tr>
    <tr>
    <td colspan="5" class="titel"><p class="lauftext">Kein Hund für Stubenhocker</p>

    Vielen Dank für Eure Hilfe
    Cath
     
    #8      
x
×
×
teststefan