horizontal scrolling portfolio

Discussion in 'Web Design and Development' started by JonD25, Sep 26, 2007.

  1. JonD25 macrumors 6502

    Joined:
    Feb 9, 2006
    #1
    I've seen some sites that have horizontal scrolling to showcase their photography or design portfolio, and I wanted to try and do the same for mine I'm designing now.

    On one of the sites that is most like what I had in mind, I checked the source code and he used a table for putting his work in. Is this the best way to go about this? At first I thought just setting each image to float left would work, but once it gets to the end of the page, it won't stretch and just breaks to the next line. I thought of putting it in a wrapper div, but I don't know if it's possible to set the width to be expanding since my portfolio will also be expanding with time. Ideally, I want something that's easily updateable (which is why I'm not going with Flash). Any thoughts as to how the best way to do go about creating a page like I have in mind?
     
  2. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #2
    Just having each image in a div will work. Word wrapping needs to be disabled and scrolling enabled. Here is an example:
    HTML:
    <div style = "overflow:auto;width:500px;height:120px;background-color:blue;white-space:nowrap;">
        <!-- your images here -->
    </div>
    
    (I used a blue background color so you can see the container during testing. This is, naturally, optional)
     
  3. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #3
    It's not really what I'm going for.

    Here. This website is essentially my idea.

    http://photo.paoloboccardi.com/street-photography.html

    Notice the fixed navigation. I know how to do that easy. My problem is that when I try to get images to not wrap to the next line, it doesn't do it. This guy's solution is to put the images in table cells, but if I can do it without a table, I'd like that. The only way it'll do it is if I set a specific pixel amount for the width, which I'd rather not have to change every time I add a new photo. I'd like the least amount of extra post-maintenance and code changing as my portfolio expands, which might even include some php if I get around to figuring that out, but that's a different topic entirely.
     
  4. rajfantastic macrumors member

    rajfantastic

    Joined:
    Jun 9, 2007
    #4
    just remove the width from the wrapper div. you could also adjust the overflow on body and html.
     
  5. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #5
    You know, I think that's my problem a lot of times. I always make things more complex than they need to be. That got it. Thanks.
     
  6. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #6
    That was a very nice portfolio site.
    Thanks for the tips, will maybe do something like that for mine.
     
  7. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #7
    How can I get the horizontal scroll to the bottom of the page?
     
  8. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #8
    Don't set a height for the wrapper div.
     
  9. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #9
    So it would look like this?

    Sorry I am not so good on this yet.
     
  10. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #10
    Yeah. I've been testing it out, and really, the only thing you need to make sure about is that "white-space" is set to "nowrap", so that when you float your images left, when it gets to the end it doesn't wrap and just keeps going on to the right.
     
  11. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #11
    I had to skip the overflow to get the scroll on the bottom of the page. But then the bakground stop after the first image.
     
  12. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #12
    Hmm, it seems you have to put a specific width and height to get a background to show up, or some other content besides the images, because floating them makes it as if there isn't even any content in it and thus the div contracts to 0 by 0. This isn't a problem for me since my background is just going to be white anyways.
     
  13. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #13
    Do you have any good tips how to get some air between the pictures?
     
  14. JonD25 thread starter macrumors 6502

    Joined:
    Feb 9, 2006
    #14
    #content img { margin: 10px; }

    Of course, you can change the amount to whatever you want.

    EDIT: I figured out the background issue. (As you can tell, I'm not an expert at this either)

    How are you setting your images to float? I put float:left; in the #content div, and all my images float inside it, and the background color is present. So try that.
     
  15. giganten macrumors 6502a

    Joined:
    Jan 23, 2006
    #15
    Thanks mate will try that. :D
     

Share This Page