HTML - Horizontal Scrolling Thumbnails To Open Images In Same Page

Hello,

I have a demonstration site set up at: http://www.sikhfaith.com/demo

The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar.

I haven't been able to pinpoint what is causing this. Any help would be appreciated.

Thank you.

I'm trying to get horizontal scrolling of images that scroll behind a block of fixed text.

I attached a mock up.

And here is one of the staging pages if you want to see the html/css.

I'm trying to accomplish a "layered" effect of image gallery and text. As you can see in the mockup, the block of text has a transparent background to help this effect.

I tried to do a hiden overflow for the horizontal navigation container and have the block of text be a container with a fixed position. But its a mess.

Any advice on achieving this?


**Edit: This site has the same kind of architecture I'm looking for -

http://csaustodesign.com/work_ns.html

I can't seem to figure out how this person did it though, their source code is a mess...

I figured this out. Three hours of searching before posting, then 30 minutes later it is resolved.

http://knexinnovation.net/store/

I thought that if your background is wider than the window, it won't create a scrollbar to show the full image. Or is this not the case?


Currently it has a horizontal scroll bar for 1024px users. The footer image is actually the
body { } background, aligned to the bottom center.

Hi all,

I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read.

I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read.

With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself?

Many thanks

Joe

Evening one and all,

I'm having a little problem. I've created a webpage that's 1280 pixels wide using HTML tables to structure my layout.

I've tried viewing my page on a lower screen resolution - for example 800x600 but the page doesn't hold it's structure and allow me to view the page properly by placing a horizontal scroll bar at the bottom of the screen.

Instead the browser squashes all the data to fit within the 800 pixel width of the screen.

Is there some code I can insert in the page that commands the browser to display a scroll bar instead of squashing all the data to fit the 800 pixel width?

I'm testing at the moment in Firefox 3.6.15 on Mac OSX 10.6.3.

Thanks.

I've seen on some sites that images show up within a block and they scroll left and right when user clicks a button. And many times, these are not flash files, but html, or xhtml or dhtml or asp or php or some other extensions.

I am trying to create a database of images all with labels (multiple), so that I can pull all images of a label to a window and have them scroll right and left with buttons.

does anyone here know how this may be done?
Thanks
Navs

Hello. First time here asking for help. Hope there's a solution!

The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped.

The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms.

On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen.

So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation.

On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE)

The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly.

In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE.

Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up.

The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer.

Hope someone can help me out here! Cheers, Jason.

I am designing a website for a local city park on a volunteer basis and am a bit of a newbie at this. Quite a simple but I hope effective layout with a row of tabs on the top of the index page which takes one to web pages on flora, fauna, geology, history, etc.

The design basis is "informative" rather than glitzy. There is a fair amount of text and I have minimized the graphics within each page to make for rapid page loading and more "substance" rather than glitz. However, there does need to be a web page showing photos of fauna, flora, etc. There will be about 80-100 photos available for viewing. At the moment these are all on one page as thumbnails, using a table and this sort of thumbnail code:

HTML Code:

<td><a href=
"photos/IMG_1036.JPG"><img src="photos/IMG_1036.JPG" width="150" height="100"></a></td>

However, even with just 30 photos so far, the page takes a while to load, and the thumbnails reload as one scrolls up and down the page.

I know part of my problem is many of these photos are 1600x1200 - I will be reducing them to 800x600 which I think is the best viewing size. That reduces image file size to 1/4 at about 200KB each. It might make page loading quicker but with just 80 photos it would be a 16MB page.

Any ideas how to make this more efficient, besides having more than one page of photos, would be greatly appreciated.

Larry

Hi,

I have seen sites that has a series of images scrollng from right to left, any idea how to achieve this? Thanks.

A.C.

I've been working on a new project and I'm using tables to create a layout, I know it's not a good idea but I don't know CSS enough to use DIV's.

But I have the table set up into 3 columns, and 2 rows.

Top right row has images layered on top of each other for navigation... Everything works fine but the problem is there is spacing in between each of the images.



They have no code in between or spacing, it is just messed up. If anyone has any idea help would be greatly appreciated.

I will be working on a site soon and what I want to do is have a small box in which images scroll automatically from right to left. Similar to the image at the top of this page - http://www.huntingground.freeserve.c...mgscroll3h.htm - but I want it to be less wide and have one image showing at a time, at most two show at one time. I don't know if this is possible with HTML or if it is Javascript. I want it to repeat the images too.

Thanks in advance.

i have 3 images, 2 are feather's images and 1 is text image
i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above)
as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends

i have attached a sample image

please help me in writing its code

Hi,
How can I stop the table bacground image in this page from scrolling:

http://augustineleudar.110mb.com/music.htm

Its the bacground image of a table not the whole page

any help appreciated

Some mouses today have horizontal scroll, some call the tilt.
It looks something like:
http://www.htmlforums.com/attachment...1&d=1242556560

I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward)

How do I code like that? Or any examples?