[JavaScript] Scrollbar in HP einbauen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von S2k, 31. Dezember 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 31. Dezember 2009
    Hi Leute

    Vorweg erstmal: Im Bereich htm, html, php, css und was es sonst noch alles gibt, bin ich ein Anfänger.

    Ich bin dabei eine neue HP zu erstellen. Voraussetzungen sind: Übersichtlich und schlicht sollte sie sein. Hier der Link

    Diese behinhaltet auch einige Seiten mit Fotos. Damit aber das header, sidebar und das footer nicht verschoben werden sollte, möchte ich gerne eine scrollbar einrichten. Das heisst, dass nur der Titel (z.B. Pässetour) und die Fotos zum scrollen sein sollten.

    Ich wäre euch daher dankbar, wenn mir jemand den folgenden Code anpassen könnte

    Link zu einer Foto Galerie

    Im Anhang sind ist die html und die css Datei

    Danke schon mal im voraus

    Die Dateien werden nicht angehängt?(

    html Code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>S2k Passion Website</title>
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .style1 {
     color: #3B3B3B;
    }
    .style2 {
     font-family: FrankRuehl;
     color: #000000;
     font-size: 28pt;
    }
    </style>
    </head>
    <body>
    <div id="header">
     <div id="logo">
     <h1 class="style2">S2k Passion</h1>
     <h2 class="style1">Honda 
     s2000 Owners</h2>
     </div>
     <div id="menu">
     <ul>
     <li class="#"><a href="http://www.s2k-passion.ch/index1.html" style="width: 65px">Home</a>
     <li><a href="http://www.s2k-passion.ch/wbb2/" style="width: 65px"target="_blank">Forum</a></li> 
     <li><a href="contact.html" style="width: 65px">Contact</a></li>
     <li><a href="http://www.s2k-passion.ch/wbb2/gaestebuch.php"target="_blank" style="width: 65px">Guestbook</a></li>
     <li><a href="sponsors.html" style="width: 65px">Sponsors</a></li>
     </li>
     </ul>
     </div>
    </div>
    <div id="splash">
     <p><img height="24" src="images/S2000-logo%20weiss.png" width="185" /></p>
    </div>
    <div id="page">
     <div id="content" style="width: 548px">
     <h1>Pässetour 2009</h1>
     <blockquote class="style3"> 
     
     <p><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20001.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20003.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20015.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20016.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20017.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20018.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20019.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20020.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20021.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20022.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20024.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20026.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20027.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20031.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20032.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20033.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20034.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20035.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20036.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20037.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20038.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20040.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20041.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20042.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20043.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20044.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20045.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20046.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20047.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20054.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20055.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20056.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20057.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20058.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20059.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20060.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20063.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20064.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20066.jpg" width="448" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20067.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20069.jpg" width="336" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20070.jpg" width="336" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20071.jpg" width="336" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20072.jpg" width="336" /><img height="336" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20073.jpg" width="448" /><img height="448" src="homepage_files/paessetour_2009/S2K%20Weekend%20and%20frends%20074.jpg" width="336" /></p>
    
     </div>
     <div id="sidebar">
     <h2>News &amp; Updates</h2>
     <ul>
     <li>
     <h3><span>Current Forum Themes</span></h3>
     <a href="http://www.s2k-passion.ch/wbb2/jgs_portal_checker.php?sid="target="_blank">
     The last five Themes…</a></li>
     <li>
     <h3><span>Galleries</span></h3>
     <a href="http://www.s2k-passion.ch/wbb2/autogalerie.php"target="_blank">
     Car Gallery…</a>
     <br/>
     <a href="excursions_gallery.html">Excursions Gallery…</a>
    
     <li>
     
     <h3><span>Various</span></h3>
     <a href="http://www.s2k-passion.ch/wbb2/jgs_treffen.php?sid="target="_blank">
     Events…</a>
     <br/>
     <a href="http://www.s2k-passion.ch/wbb2/board.php?boardid=21"target="_blank">
     Market Place…</a>
     <br/>
     <a href="http://www.s2k-passion.ch/wbb2/mapg.php"target="_blank">
     Map…</a>
     <br/>
     <a href="http://www.s2k-passion.ch/wbb2/linkus.php"target="_blank">
     Link Us…</a>
     <br/>
     <a href="http://www.s2k-passion.ch/wbb2/jgs_portal_links.php?sid="target="_blank">
     Link List…</a>
     </li>
     </div>
     
     <font color="#DBDBDB" face="Helvetica" size="1">
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Updatet 
     <!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d.%m.%Y" -->
     </font>
     <br/>
     &nbsp;&nbsp;&nbsp;&nbsp;
     <img src="http://counter.green.ch/count.exe?
     ft=2&frgb=000000&dd=E&df=cabrio-passion.ch" width="40" height="14" align="absmiddle">
     </div>
    
     
    
    <div id="footer">
     <p id="legal">Copyright © 2010 by S2k Passion. All Rights Reserved. Designed 
     by <a href="http://www.s2k-passion.ch"target="_blank">S2k</a>.</p>
     <p id="links"><a href="http://www.s2k-passion.ch/wbb2/impressum.php"target="_blank">
     Privacy Policy</a> | <a href="http://www.s2k-passion.ch/wbb2/thread.php?threadid=10"target="_blank">
     Terms of Use</a></p>
    </div>
    </body>
    </html>
    



    css Code

    Code:
    * {
     margin: 0;
     padding: 0;
    }
    
    body {
     margin: 20px 0;
     background: #3B3B3B url(images/img1.gif) repeat-x;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     color: #BABABA;
    }
    
    
    h1, h2, h3 {
     font-weight: normal;
     color: #FFFFFF;
    }
    
    h1 { font-size: 197%; }
    h2 { font-size: 167%; }
    h3 { font-size: 100%; font-weight: bold; }
    
    
    p, ul, ol {
     margin-bottom: 1.8em;
     line-height: 167%;
     font-size: 100%;
    }
    
    a:link {
     color: #94B0C8;
    }
    
    a:hover {
     text-decoration: none;
     color: #FFFFFF;
    }
    
    a:visited {
     color: #BABABA;
    }
    
    /* Header */
    
    #header {
     width: 800px;
     height: 80px;
     margin: 0 auto;
    }
    
    #logo {
     float: left;
     width: 206px;
     height: 78px;
     background: #9BAFCB;
     border: 1px solid #000000;
     border-right-width: 5px;
    }
    
    #logo h1 {
     padding-top: 20px;
     text-align: center;
     letter-spacing: -1px;
     font-size: 36px;
    }
    
    #logo h1 a {
     color: #000000;
    }
    
    #logo h2 {
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 8px;
     font-weight: bold;
    }
    
    #logo h2 a {
     color: #3B3B3B;
    }
    
    #logo a {
     text-decoration: none;
    }
    
    /* Menu */
    
    #menu {
     float: right;
    }
    
    #menu ul {
     margin: 0;
     padding: 30px 0 0 0;
     list-style: none;
    }
    
    #menu li {
     display: inline;
    }
    
    #menu a {
     display: block;
     float: left;
     padding: 0 25px;
     text-decoration: none;
     font-size: 100%;
     font-weight: bold;
    }
    
    #menu a:hover, #menu .active a {
     background: #000000;
    }
    
    #menu .active a {
    }
    
    /* Splash */
    
    #splash {
     width: 800px;
     height: 175px;
     margin: 0 auto;
     background: url(images/img2.jpg) no-repeat right top;
    }
    
    #splash p {
     padding: 80px 650px 80px 10px;
    
    
     }
    
    /* Page */
    
    #page {
     width: 800px;
     margin: 0 auto;
    }
    
    #page h1, #page h2 {
     margin-bottom: 20px;
    }
    
    
    /* Content */
    
    #content {
     float: right;
     width: 490px;
     padding: 20px;
    }
    
    #content ol, #content ul {
     margin-left: 3em;
    }
    
    /* Sidebar */
    
    #sidebar {
     float: right;
     width: 165px;
     padding: 25px 20px 20px 20px;
     background: #2F2F2F;
     border: 1px solid #000000;
     border-right-width: 5px;
    }
    
    #sidebar h2 {
     padding-top: 6px;
     font-size: 100%;
     font-weight: bold;
    }
    
    #sidebar h3 {
     font-size: 87%;
    }
    
    #sidebar h3 span {
     padding: 3px 5px;
     background: #000000;
    }
    
    #sidebar ul {
     margin: 0;
     padding: 0;
     list-style: none;
    }
    
    #sidebar li {
     margin: 0 0 20px 0;
     padding: 20px 0 0 0;
     border-top: 1px dotted #000000;
    }
    
    /* Footer */
    
    #footer {
     clear: both;
     width: 780px;
     height: 15px;
     margin: 0 auto;
     padding: 10px;
     border: 1px solid #000000;
     border-top-width: 5px;
    }
    
    #footer p {
     margin: 0;
     padding: 0;
     line-height: normal;
     font-size: 77%;
    }
    
    #legal {
     float: left;
    }
    
    #links {
     float: right;
    }
     

  2. Anzeige
    Heute: Deals & Sale mit stark reduzierten Angeboten finden.
  3. #2 31. Dezember 2009
    AW: Scrollbar in HP einbauen

    Code:
    css:
    #bilder {
    width:500px;
    height: 200px;
    overflow: auto;
    }
    
    <div id="bilder">
    <img src="...">
    <img src="...">
    <img src="...">
    </div>
    
     
  4. #3 31. Dezember 2009
    AW: Scrollbar in HP einbauen

    sorry für die doppelpost:eek:

    wo genau muss ich diesen code einfügen?


    EDIT

    habs herausgefunden



    danke für die schnelle antwort
     

  5. Videos zum Thema
Die Seite wird geladen...
Similar Threads - JavaScript Scrollbar einbauen
  1. Antworten:
    0
    Aufrufe:
    3.538
  2. Antworten:
    0
    Aufrufe:
    3.794
  3. Antworten:
    6
    Aufrufe:
    3.098
  4. Antworten:
    1
    Aufrufe:
    1.341
  5. Antworten:
    5
    Aufrufe:
    1.283
  • Annonce

  • Annonce