horizontal scrolling portfolio

[JonD25]

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?

 

[CoreWeb]

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?

Just having each image in a div will work. Word wrapping needs to be disabled and scrolling enabled. Here is an example:

<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)

 

[JonD25]

Just having each image in a div will work. Word wrapping needs to be disabled and scrolling enabled. Here is an example:

<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)

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.

 

[rajfantastic]

just remove the width from the wrapper div. you could also adjust the overflow on body and html.

 

[JonD25]

just remove the width from the wrapper div. you could also adjust the overflow on body and html.

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.

 

[giganten]

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.

That was a very nice portfolio site.
Thanks for the tips, will maybe do something like that for mine.

 

[giganten]

How can I get the horizontal scroll to the bottom of the page?

 

[JonD25]

How can I get the horizontal scroll to the bottom of the page?

Don't set a height for the wrapper div.

 

[giganten]

Don't set a height for the wrapper div.

So it would look like this?

<div style = "overflow:auto;background-color:blue;white-space:nowrap;">
<!-- your images here -->
</div>

Sorry I am not so good on this yet.

 

[JonD25]

So it would look like this?



Sorry I am not so good on this yet.

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.

 

[giganten]

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.

 

[JonD25]

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.

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.

 

[giganten]

Do you have any good tips how to get some air between the pictures?

 

[JonD25]

Do you have any good tips how to get some air between the pictures?

#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.

 

[giganten]

#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.

Thanks mate will try that.