[JavaScript] Scrollbar in HP einbauen

S2k · 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;
}

Anzeige

funland · 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>

S2k · 31. Dezember 2009

AW: Scrollbar in HP einbauen

sorry für die doppelpost

wo genau muss ich diesen code einfügen?

EDIT

habs herausgefunden

danke für die schnelle antwort

Nützliche Suchen

[JavaScript] Scrollbar in HP einbauen

Videos zum Themenbereich