Horizontal Scrolling Portfolio

Author's Comments

Look carefully for specific instructions

This is my personal code that I am lending out!

- To change the width and height of the scroll box: increase/decrease the width and height in the div id "#SCROLL"
- To make the whole page a portfolio: delete the "#scrolling" ID plus the div

Script Code

Copy and paste to HTML

Help

CSS CODE

.photos {
         width:5300px;   <-- CHANGE TO INCREASE SPACE IN BOX
         height:400px;   <-- CHANGE TO INCREASE HEIGHT AVAILABLE IN BOX
         position:absolute; 
         left:50%;
         margin-left:-400px; <-- KEEP EXACTLY THE SAME AS IN #SCROLL BELOW
         margin-top: 200px; <-- KEEP EXACTLY THE SAME AS IN #SCROLL BELOW
}

#scroll{ 
        position:absolute;  
        width:789px;   <-- WIDTH OF SCROLLING BOX
        height:600px;  <-- HEIGHT OF SCROLLING BOX
        overflow-x:scroll; <-- overflow-x scroll = horizontal scrolling
        overflow-y:hidden; <-- keep hidden for no vertical scrolling
        margin-left:-400px; <--CHANGE (ex. -500px = more to left)
        left:50%;
        margin-top: 200px; <-- CHANGE (ex. 0px = exactly at top)

}

HTML CODE

</div>