• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontal Scrolling + Bilder anstelle von Scrollbars

Status
Für weitere Antworten geschlossen.
C

cashboxx

Neues Mitglied
hey,
also ich bin grade dabei, eine portofolio zu machen. Hab halt so zur probe schon eine seite gemacht.
Jetzt hab ich halt schon eine div-tabelle gemacht und habe einen hässlichen Scrollbalken ( horizontal ).
MH jetzt hab ich einen Code gefunden, wie man diesen Scrollbalken durch kleine pfeil bilder ersetzen kann!
Hab alles so gemacht aber es klappt trotzdem nicht :(
Kann einer mir helfen?

Ist mein code doch falsch?
Hier mal der Quelltext von meiner seite:
HTML: 
<html>
<head>
<title>L A L A L A L A L A L A</title>
<style type="text/css">
div#wn    { 
    position:relative; 
    width:380px; height:280px; 
    overflow:hidden;    
    }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    wndo.setUpScrollControls('scrollLinks');
}

// if necessary objects exists link in the style sheet and call the init function onload
if ( document.getElementById && document.getElementsByTagName ) {
    //dw_writeStyleSheet('css/scroll.css');
    addLoadEvent(init_dw_Scroll);
}

</script>
</head>
<body>

<h1>S C R O L L I N G</h1>



<div id="wn">
    <div id="lyr1">
    <table id="t1" border="0" cellpadding="0" cellspacing="6">
        <tr>
            <td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
            
        </tr>
    </table>
    </div>
</div>  <!-- end wn div -->


<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
<div id="scrollLinks">
    <a class="mouseover_left" href="#"><img src="http://img6.myimg.de/trilft08f7a.gif" alt="" border="0" /></a>
    <a class="mouseover_right" href="#"><img src="http://img6.myimg.de/trirta5a3a.gif" alt="" border="0" /></a>
</div>


<p>Back to <a href="index.html">index</a></p>



</body>
</html>
 
Ich sehe da keine "Div Tabelle" nur unnützen Tabellen müll...
Zudem empfehle ich dir für HTML Code [noparse]
Code: 
[/noparse] zu verwenden da [noparse][html][/noparse] manchmal spinnt ;)
 
cashboxx schrieb:
Jetzt hab ich halt schon eine div-tabelle gemacht
Zum Vergrößern anklicken....
Oh-uh, das ist ja schon seelische Vergewaltigung! "div-Tabelle"!

und habe einen hässlichen Scrollbalken ( horizontal ).
Zum Vergrößern anklicken....
Dass ist entweder Dein Inhalt zu breit oder Du hast irgendwo Abstände, die nicht sein sollten.

jetzt hab ich einen Code gefunden, wie man diesen Scrollbalken durch kleine pfeil bilder ersetzen kann!
Zum Vergrößern anklicken....
So dass der normale Nutzer nicht weiß, wie er den Inhalt scrollen kann? Weil er seine gewohnten Scrollbalken nicht findet?
Auf einer Website würde ich von solchen Spielereien aufgrund der Usability dringend abraten.

Gruß,
-Efchen
 
alsooo
es ist so.

Ich erkläre es mal als beispiel:

Bild1 Bild 2 Bild 3 Bild 4 Bild 5 Bild 6 und so weiter
Darunter ist natürlich ein scrollbalken, weil mehr Bilder da sind, als die seite breit sein kann!

So. Ich habe eine div-box erstellt, deshalb muss man nur den bereich wo die bilder sind scrollen.

Aber, die scrollbar, wollte ich mit 2 pfeilen ersetzen.
Wie z.B. hier: P O R T F O L I O - 89outtakes & 88steps.

Nur da scrollt man von oben nach unten, ich will es halt horizontal.
Wo ist also der fehler? hier dann nochmal mein script:
Code: 
<html>
<head>
<title>L A L A L A L A L A L A</title>
<style type="text/css">
div#wn    { 
    position:relative; 
    width:380px; height:280px; 
    overflow:hidden;    
    }
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    wndo.setUpScrollControls('scrollLinks');
}

// if necessary objects exists link in the style sheet and call the init function onload
if ( document.getElementById && document.getElementsByTagName ) {
    //dw_writeStyleSheet('css/scroll.css');
    addLoadEvent(init_dw_Scroll);
}

</script>
</head>
<body>

<h1>S C R O L L I N G</h1>



<div id="wn">
    <div id="lyr1">
    <table id="t1" border="0" cellpadding="0" cellspacing="6">
        <tr>
            <td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
<td><img src="http://i297.photobucket.com/albums/mm228/linchen01/portofolio/cc.jpg" width="340" height="240" alt="" /></td>
            
        </tr>
    </table>
    </div>
</div>  <!-- end wn div -->


<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->
<div id="scrollLinks">
    <a class="mouseover_left" href="#"><img src="http://img6.myimg.de/trilft08f7a.gif" alt="" border="0" /></a>
    <a class="mouseover_right" href="#"><img src="http://img6.myimg.de/trirta5a3a.gif" alt="" border="0" /></a>
</div>


<p>Back to <a href="index.html">index</a></p>



</body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben