HTML - Horizontal Scrolling <div>

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

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.

Hey all. I have been working on this website that my friend had been designing, and was just wondering if this was possible.

The way it is now, the topmost div's are supposed to stay in their position at all times, and the only part that would scroll would be the main body.

The two body divs (left and right) have been placed inside the div that should be scrolling.

I know there is the css overflow, but the problem is, there is no fixed height on the div, so this method isn't quite right.

If anyone knows of a way where we could just start the scrolling at a certain point down the page, that would be great.

Here is a link to the page so far - don't worry, it won't look close to that when finished... Image/text placeholders are horrid, I know.

http://http://pixelconcepts.zxq.net/

-Thanks in advance.

Im really not sure if the title of this thread is right.

Anyway, i dont know too much about HTML coding, but id like help with something on my .... MySpace haha

Alright, so this is my myspace at the moment.
www.myspace.com/cj_x3

As you can see, i have links on the sides, done by the following code example;
Quote:
<div style="width: 78px; height: 22px; position: absolute; bottom:5px;right:15px; background-color: transparent; border-width:0px;border-style:solid;border-color: transparent; font-family: verdana;">
<a href="LINK" style="color: dd4444; font-size: 9px; position: absolute; right: 0px; top: 0px">EXAMPLE LINK TEXT</a>
</div>
When you scroll down, the links on the sides scroll off the top. I dont like this...

What i want to happen, is for them to be fixed, like the background, so when you scroll down, the links around the sides dont move.

Thanks for the help in advance

So, I would like to make a one-line textfield that will automatically scroll when too much text is added.

So, for example, if I have a field that has room for 20 characters, and someone enters 10 characters, it looks as expected.

However, if someone enters 30 characters, only characters 10-30 would be visible.

Is this possible?

my page (http://www.zerofivezero.net/the_project102.html) is scrolling as if there's content down the page, but there isn't...I can't figure it out.

I'm using the code below to hide the content and have it swapped when selecting an item from the nav.

Code:

.hidden {
	position:absolute; 
	z-index:2; 
	visibility:hidden;

Code:

<div id="section3_region" class="hidden"><div class="news"><fieldset>
        <legend><img src="images/forum_leg.jpg" width="120" height="28" border="0" alt=""/></legend>
        <br /><br />
        <div class="img"><img src="images/news_thumb1.jpg" width="80" height="75" border="1" alt=""/></div>
        This is the news section<br />
		Yep, this is where the news will be.  This will be the short blurb about the story.
	    <div class="img"><img src="images/news_thumb2.jpg" width="80" height="75" border="1" alt=""/></div>
		This is the news section<br />
		Yep, this is where the news will be.  This will be the short blurb about the story.
	    <div class="img"><img src="images/news_thumb3.jpg" width="80" height="75" border="1" alt=""/></div>
		This is the news section<br />
		Yep, this is where the news will be.  This will be the short blurb about the story.
        </fieldset></div>

Problem Fixed

Hi,

I'm trying to add scrolling affect to my website using marguee tag but nothing work can somebody help me with this?

this is the script

<VAR_MAIN_TITLE>%%TEXT_LATEST_JOBS%%</VAR_MAIN_TITLE>
<VAR_MAIN_HEADER_HEIGHT>0</VAR_MAIN_HEADER_HEIGHT>
%%MAIN_HEADER%%
<table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="1" cellpadding="2" class="tablelist">
<tr bgcolor="%%LIST_HEADER_COLOR%%">
<th width="15%">&nbsp;%%TEXT_POST_DATE%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_TITLE%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_JOBCATEGORY%%&nbsp;</th>
<th width="28%" align="center">&nbsp;%%TEXT_LOCATION%%&nbsp;</th>
</tr>
<marquee WIDTH=100% BEHAVIOR=scroll SCROLLAMOUNT=3 DIRECTION=up BGColor="">

<BEGIN REPEAT>

<tr bgcolor="%%TABLE_LINE_BGCOLOR%%">
<td width="15%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBDATE%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBTITLE%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_CATEGORY%%</a></td>
<td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_LOCATION%%</a></td>
</tr>
<END REPEAT>

</MARQUEE>

<BEGIN NORESULT>
<TR>
<TD colspan="4" align="center" valign="middle" bgcolor="%%TABLE_LINE_BGCOLOR%%"><font class="default_text"><b>%%TEXT_NO_RESULT%%</b></font></TD>
</TR>
<END NORESULT>
</table>
</td></tr>
</table>
%%MAIN_FOOTER%%

Hello, I made this little scrolling text but it has some problem when using FireFox, so I wanted ti know if there is any way that I can make the scrolling text only appear when the page is finish loading?

Okay...so here's a tricky situation that I cannot find ANY examples of how it can work...IF it can even work. I'm trying to create this without the use of flash...Thanks for any help! Seriously!

So...I'll try to explain this in the best way that I can as I don't have an example to show...

There's a fixed background image. On top of that image is another image (exactly the same as the one below but a different color). There is a horizontal scrollbar below that controls the visibility of the image on top. Naturally, I thought a mask would be the best idea...but can a mask be scrolled. The image itself would not scroll at all....just the visibility of the image on top, think of it as a scroller that highlights a specific "strip" of an image and can be moved from side to side without the actual image scrolling...

Man...I really hope this makes sense!

Thanks for helping a girl out!

Ok I have developed the following website www.megacom-int.com. On firefox the scrolling of the latest projects on the left are displayed correctly. However when I use Internet Explorer the Latest Projects has blue background.

Whats more interesting is that if you click on Methodology using Internet Explorer, its like viewing it on firefox!

I dont understand why this is happenning, I have looked at the code and I see no difference!
p.s.Methodology file is in the same folder as it is on Our Team and Partners.

I hate everything microsoft, but I have no choice in the matter as it has to work on Internet Explorer as well.

Any help in the matter would be great

Best Regards
K4L

Hello everyone!
I am currently working on a project that requires the following object to auto-scroll at user defined speeds:


<td width='75%' valign='top'><object width='500' height= '1000' type='text/plain' data='bird.txt' border='0'>

The embedded object is always a text file but each one will be a different size. I need some kind of auto-scroll mechanism that will allow the user to scroll down the text box at a speed that suits the size of the text file itself.
Does anyone have any suggestions about how this could be achieved?
Thanks