Scrollbar einfügen(erstellen)

Trickster0815 · 31.07.2011

Hallo!

Ich hab vom Homepage basteln nicht viel ahnung, hab mir hier und da was von Youtube und hier bei PSD angeeignet, bin momentan am Bau einer Homepage für unseren Clan, hab die auch soweit fertig, bis auf so ne tolle Scrollbar - rechts, möchte gerne sowas einbauen das alles in einem Fenster halt zum Scrollen ist, möchte in diesem bereich Text und evtl Grafik einfügen können.

Kann mir da jemand helfen wie ich dies umsetzten kann?

Gruß

cefuroX · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Du willst also ein extra Frame haben in dem du irgendeinen Inhalt anzeigen kannst den man scrollen kann? Wenn ja: warum ^^? Die meisten User haben keine Lust auf viel rum scrollen und würden dem Inhalt der Box wahrscheinlich wenig Aufmerksamkeit schenken.
Aber um deine Frage zu beantworten, les dir das mal durch:

Mfg und guts Nächtle
cefuroX

Trickster0815 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Moin!

Tausend dank für die Hilfe, ich habs geschaft dies bei mir einzufügen:
<iframe src="../../../index.htm" width="90%" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="../../../index.htm">SELFHTML</a></p> </iframe>

Aber wie kann ich jetzt da drin Text usw einbringen???

Gruß

cefuroX · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Nunja du gibst bei dem iFrame eine Source an (src="....) diese source verweist im Beispiel auf eine HTML Datei die dann im iFrame geladen wirde

.
Du musst an der Stelle deine Datei einbinden von wo der Inhalt geladen werden soll (natürlich muss der Pfad stimmen

)

Mfg cefuroX

MST123 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Es gibt auch eine Lösung ohne Iframe und zwar mit einem div.
Also so is z.B der div:

HTML:

<div class="scroll">
Viel zu hoher Inhalt
...
...
...
...
...
...
</div>

und CSS dazu:

Code:

div.scroll {
    height: 150px; //hier halt irgendne angabe
    width: 500px; //hier auch
    overflow: scroll; //so wird zu grosser inhalt scrollbar
    overflow-x: hidden; // damit es nicht noch ein Scrollbalken in x-Achenrichtung gibt
}

Das wäre meine IFrame freie Lösung. Müsste funktionieren hab ich auch schon benutzt.

Vorteil:
- Es ist sehr viel besser anzupassen an die Hompage als ein Iframe.

cefuroX · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Da gebe ich MST123 recht, die Lösung mit dem DIV ist in der Tat besser

Nimm am besten die, ist wesentlich einfacher anzupassen.

Mfg cefuroX

Trickster0815 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Ich hatte doch ein paar Probleme dies umzusetzten aber nach 4 stunden harter Arbeit hab ich die Geschichte irgendwie gepackt (aber auch noch net 100% verstanden)!!!!

1000 mal dank an die tolle Hilfe von euch!!!!

MST123 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

hmm...wenn du noch fragen dazu hast frag jetzt

Trickster0815 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

Ich hatte das problem nicht zu wissen wo ich den code einfügen sollte und das ich den text so eingeben kann das der sich auf der fläche (ebene) befindet das der sich dann mit scrollt, habs aber irgendwie geschaft,

so schauts aus:

HTML:

<div align="justify">
            <p><strong>Willkommen                               auf der Homepage des DREAM-TEAM Clan&acute;s !</strong></p>
<p>Hier findet ihr alles, was ihr über unseren Clan wissen wollt.            </p>
            <p>Man hat verschiedene Möglichkeiten,mit uns in Kontakt zu treten. </p>
            <p>Das Forum ("Der DTC Clan") ist hierbei die leichteste und schnellste Alternative.
            </p>
            <p>Nähere Informationen zum Clan oder zur Anmeldung findet ihr ebenso im Forum.
            </p>
            <p> Die Registrierung im Forum ist KOSTENLOS!
              
              
              
              Viel Vergnügen (!) wünscht euch euer ...
            </p>
            <p><img src="PNG Dateien/Logo´s/DTC logo 5.png" width="140" height="54" alt="DTC Logo"></p>
            <p><img src="PNG Dateien/Logo´s/emblem.png" width="268" height="268"></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>

          </div>

MST123 · 31.07.2011

AW: Scrollbar einfügen(erstellen)

wie hast du das mit dem scrollen jetzt gemacht?... Ich seh keine Klasse und auch keine id... Hast dus einem Element zugewiesen?

Trickster0815 · 01.08.2011

AW: Scrollbar einfügen(erstellen)

Moin!
Ich hab erst die Scrollbar eingefügt wie im Beispiel vom - (das erste hab ich benutzt).

<div align="justify"><strong><img src="../" width="710" height="613"></strong></div>

dann hab ich ein css stile eingefügt, wo ich höhe und weite + overscroll angegeben hab, also in den vorgegebenen Rahmen angepasst!

Hab viel aussprobiert bis ich eigentlich via zufall zum Ergebnis gekommen bin!

Gruß

MST123 · 01.08.2011

AW: Scrollbar einfügen(erstellen)

naja ich würde gerne die CSS dann sehen, weil mit dem HTML kann ich grad wenig anfangen.

Trickster0815 · 01.08.2011

AW: Scrollbar einfügen(erstellen)

Keine ahnung wie ich dir nur die CSS zeigen soll, hab wie gesagt nicht wirklich den Plan von der sache!

Hier ist der Ganze Code von der Startseite!

HTML:

<html>
<head>
<title>dreamteam-clan.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.diverse {
    overflow: scroll;
    height: 600px;
    width: 710px;
    color: #000;
    background-color: #FFF;
}
#Tabelle_01 tr td div p strong {
    text-align: center;
}
Willkommen {
    text-align: center;
}
#Tabelle_01 tr td div p {
    text-align: right;
}
#Tabelle_01 tr td div p {
    text-align: center;
}
#Tabelle_01 tr td div p #result_box {
    font-size: 18px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Homepage vorlage 01.psd) -->
<table id="Tabelle_01" width="1280" height="1001" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="25">
            <img src="Bilder/Top.gif" width="1280" height="92" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="Bilder/Links-Kurz.gif" width="285" height="96" alt=""></td>
        <td rowspan="4"><a href="http://www.xbox.com/de-DE/" target="_blank"><img src="Bilder/Xbox-Logo.gif" alt="" width="65" height="42" border="0"></a></td>
        <td colspan="22">
            <img src="Bilder/www.dreamteam-clan_04.gif" width="645" height="19" alt=""></td>
        <td rowspan="5">
            <img src="Bilder/Rechts-Kurz.gif" width="285" height="96" alt=""></td>
    </tr>
    <tr>
        <td colspan="19">
            <img src="Bilder/www.dreamteam-clan_06.gif" width="464" height="6" alt=""></td>
        <td colspan="3" rowspan="3">
            <img src="Bilder/Dreamteam-Clan-Schrift.gif" width="181" height="23" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/www.dreamteam-clan_08.gif" width="12" height="17" alt=""></td>
        <td colspan="4">
            <img src="PNG Dateien/Banner PNG/Deutsche Flagge.png" width="27" height="13"></td>
        <td rowspan="2">
            <img src="Bilder/www.dreamteam-clan_10.gif" width="6" height="17" alt=""></td>
        <td><a href="html/Willkommen Englisch.html"><img src="PNG Dateien/Banner PNG/Englische Flagge.png" width="27" height="13" border="0"></a></td>
        <td rowspan="2">
            <img src="Bilder/www.dreamteam-clan_12.gif" width="6" height="17" alt=""></td>
        <td><a href="html/Willkommen Franzoesisch.html"><img src="PNG Dateien/Banner PNG/Französische Flagge.png" width="27" height="13" border="0"></a></td>
        <td colspan="10" rowspan="2">
            <img src="Bilder/www.dreamteam-clan_14.gif" width="359" height="17" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/www.dreamteam-clan_15.gif" width="27" height="4" alt=""></td>
        <td>
            <img src="Bilder/www.dreamteam-clan_16.gif" width="27" height="4" alt=""></td>
        <td>
            <img src="Bilder/www.dreamteam-clan_17.gif" width="27" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="2"><a href="www.dreamteam-clan.html"><img src="Bilder/Home.gif" alt="" width="77" height="54" border="0"></a></td>
        <td colspan="2">
            <img src="Bilder/Abstand-01.gif" width="9" height="54" alt=""></td>
        <td colspan="7">
          <img src="Bilder/DTC-Clan.gif" alt="" width="109" height="54" border="0"></td>
        <td>
            <img src="Bilder/Abstand-02.gif" width="7" height="54" alt=""></td>
        <td><a href="html/News.html"><img src="Bilder/News.gif" alt="" width="63" height="54" border="0"></a></td>
        <td>
            <img src="Bilder/Abstand-03.gif" width="6" height="54" alt=""></td>
        <td><a href="html/Member.html"><img src="Bilder/Member.gif" alt="" width="98" height="54" border="0"></a></td>
        <td>
            <img src="Bilder/Abstand-04.gif" width="7" height="54" alt=""></td>
        <td>
          <img src="Bilder/Links.gif" alt="" width="67" height="54" border="0"></td>
        <td>
            <img src="Bilder/Abstand-05.gif" width="6" height="54" alt=""></td>
        <td colspan="3"><a href="html/Events.html"><img src="Bilder/Event´s.gif" alt="" width="88" height="54" border="0"></a></td>
        <td>
            <img src="Bilder/Zwischenraum.gif" width="82" height="54" alt=""></td>
        <td><a href="http://www.dreamteam-clan.com/forum/index.php?page=Index" target="_blank"><img src="Bilder/Forum.gif" alt="" width="91" height="54" border="0"></a></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="Bilder/Links-Lang.gif" width="285" height="812" alt=""></td>
        <td colspan="23">
            <img src="PNG Dateien/Banner PNG/Banner Willkommen.png" width="710" height="159"></td>
        <td rowspan="5">
            <img src="Bilder/Rechts-Lang.gif" width="285" height="812" alt=""></td>
    </tr>
    <tr>
        <td colspan="23"><div align="center" class="diverse">
        
          <div align="justify">
            <p align="center"><strong>Willkommen                               auf der Homepage des DREAM-TEAM Clan&acute;s !</strong></p>
            <p align="center">Hier findet ihr alles, was ihr &uuml;ber unseren Clan wissen wollt!</p>
            <p align="center">Man hat                               verschiedene M&ouml;glichkeiten, mit uns in Kontakt                               zu treten. </p>
<p align="left"><em>Das                               Forum ("<a href="http://www.dreamteam-clan.com/forum/index.php?page=Index" target="_blank">Der                               DTC Clan</a>") ist hierbei die leichteste                               und schnellste Alternative.</em></p>
            <p align="left">N&auml;here                               Informationen zum Clan oder zur Anmeldung findet ihr                               ebenso im Forum.</p>
            <p align="center"><em>Die                               Registrierung im Forum ist KOSTENLOS!</em></p>
<p align="center">Viel                               Vergn&uuml;gen (!) w&uuml;nscht euch euer ...</p>
<p align="center"><img src="PNG Dateien/Logo´s/DTC logo 5.png" width="128" height="50"></p>
<p align="center"><img src="PNG Dateien/Logo´s/emblem.png" width="249" height="249"></p>
<p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>

          </div>
     </tr>
    <tr>
        <td colspan="3" rowspan="3"><a href="html/Kontakt.html"><img src="Bilder/Kontakt.gif" alt="" width="82" height="40" border="0"></a></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/www.dreamteam-clan_36.gif" width="12" height="40" alt=""></td>
        <td colspan="7" rowspan="3"><a href="html/Impressum.html"><img src="Bilder/Impressum.gif" alt="" width="108" height="40" border="0"></a></td>
        <td colspan="11">
            <img src="Bilder/www.dreamteam-clan_38.gif" width="508" height="7" alt=""></td>
    </tr>
    <tr>
        <td colspan="7" rowspan="2">
          <img src="Bilder/www.dreamteam-clan_39.gif" width="263" height="33" alt=""></td>
        <td colspan="4">
            <img src="Bilder/www.dreamteam-clan_40.gif" width="245" height="24" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/www.dreamteam-clan_41.gif" width="245" height="9" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="285" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="65" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="12" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="5" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="4" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="63" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="98" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="67" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="6" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="64" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="8" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="82" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="91" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="285" height="1" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

MST123 · 01.08.2011

AW: Scrollbar einfügen(erstellen)

wenn du es so meintest wie die scrollleiste jetzt ist, dan brauchste dazu keine weitere Änderungen machen, das kommt automatisch wenn der Inhalt zu gross fürs Anzeigefenster ist.
Ansonsten würde ich mich mal ein bisschen damit beschäftigen (http://de.selfhtml.org/)

Trickster0815 · 01.08.2011

AW: Scrollbar einfügen(erstellen)

So wie es ist wollte ich es auch haben, ist meiner meinung nach vollkommen ausreichend!

Cool hier so geholfen zu bekommen!

Werde deinen Link mir näher anschaun!Danke nochmals!

Gruß

yanina112 · 02.08.2011

AW: Scrollbar einfügen(erstellen)

Da hast du dir aber viel Mühe mit der tabellarischen Darstellung gegeben!
Viel einfacher und benutzerfreundlicher wäre das Einsetzen von Div's. Im Webdesing werden heutzutage Tabellen nur eingesetzt, um eben tabellarisch Daten und Zahlen darzustellen.

Gruß