HTML - Scrolling Images

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>

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.

Hi, I'm making a website for my clan and I was hoping that someone here could help me with a problem. The test site is: http://deltagaming.org/matt/testweb/

As you can see the bottom seems to cut out with no scroll bars to help out. I tried adding an overflow command to the css styles sheet but no dice. I also added it to the template file too and still nothing. I couldn't post the main index here because its too big but my style sheet fit + you can view it through my website using a page source.

Any help would be greatly appreciated.

Code:

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 
{
overflow: scroll
}
body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
}

a:link, a:visited, a:hover {
	color: #006699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}

h2{
 font-size: 114%;
 color: #006699;
}

h3{
 font-size: 100%;
 color: #334d55;
}

h4{
 font-size: 100%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 100%;
 color: #334d55;
}
.style4 {
	font-size: small;
	color: #000000;
	font-weight: bold;
ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #FFFFFF;
}
				

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
{
overflow: scroll
}
#masthead{
	margin: 0;
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{
	margin: 0 79% 0 0;
	padding: 0px;
	background-color: none;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
}

#content{
  float:right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
	margin: 0px;
	padding: 0px 0px 10px 10px;
}


/*************** #pageName styles **************/

#pageName{
	padding: 0px 0px 10px 10px;
}


/************* #globalNav styles **************/
{
overflow: scroll
}
#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0px 4px 0px 0px; 
}


/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story p{
	padding: 0px 0px 10px 0px;
}
p 
{
overflow: scroll
}


/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
	the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************* #search styles ***************/

#search{
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	position: relative;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	padding: 2px 0px 2px 10px;
	border-top: 1px solid #cccccc;
	width: 100%;
  voice-family: "\"}\""; 
  voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	border-top: 1px solid #cccccc;
}

#advert img{
	display: block;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}

#headlines p{
	padding: 5px 0px 5px 0px;
}

Hello! New to the HTML forums, nice to meet everybody ^^. I have a problem with my website, http://christopherortiz.webs.com/advertisingproject.htm , for some reason I have horrible scrolling lag on all of the pages, mainly on that one! Check out the source and tell me what I have done wrong o.o

Quote:
<HTML><HEAD><TITLE>Advertisement Project</TITLE></HEAD>
<BODY>
<body style="background-attachment: fixed; background-position: center top; background-repeat: repeat;" background="al432s.jpg">
<center><h2><img src="christopher.png"></h2>
<p><a href="index.htm"><img src="home.png" style="border-style: none"/></a><a href="advertisingproject.htm"><img src="prjct.png" style="border-style: none"/></a><a href="blog.htm"><img src="blog.png" style="border-style: none"/></a><a href="guest.htm"><img src="cmnt.png" style="border-style: none"></a></p>
<img src="projecthead.png">
<br>
<div style="width:750px;height:2300px;border:2px inset red; background-image:url(http://flyingredhorses.com/GalleryIm...gGrayBox.jpg); background-attachment: fixed; background-position:left center; background-repeat:yes-repeat; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
"><center><p style="font-family:verdana;font-size:90%;color:green">ORIGINAL</p></center><center><img src="originalcamel.png"></center>
<center><p style="font-family:verdana;font-size:90%;color:green">PARODY VERSION</p></small><center><img src="camel.png"></center><br><center><p style="font-family:verdana;font-size:110%;color:green"><large>Analysis</large></p></center></center><p style="font-family:verdana;font-size:90%;color:green">&nbsp;&nbsp;&nbsp;&nbsp;Camel Lights: Who on earth would want to buy these? What makes their advertising appealing enough to make you want to shove a cancer stick down your throat? Camel cigarette ads use rhetorical means to fool its demographic, you, into the habit of smoking.</p>
<p style="font-family:verdana;font-size:90%;color:green">&nbsp;&nbsp;&nbsp;&nbsp;The central illusion which the advertisement aims to create is an image of a rugged man, which the customer in turn can become--provided that he buys a pack of Camel Lights. The first words that come to mind are cool, masculine, and rugged. The tattoo makes him appear to be a ruffian, a delinquent, a desperado. These are all rhetorical justifications that make one want to smoke Camel Lights, just once. But what really defines the ad is its sleek image, orange velour and the cancer sticks dancing around like they were in Vegas as if they were going to die tomorrow.</p>

<p style="font-family:verdana;font-size:90%;color:green">&nbsp;&nbsp;&nbsp;&nbsp;Who on earth would want to buy these cunningly disguised serpents. We look at the man smoking cigarettes, his apparent countenance of ruggedness and individualistic style which we long to obtain, when in reality he is masquerading himself in a body of lies and deception. This is a form of ethos, which we, as viewers convinced to be truthful; reliable. But little do we know that its true nature hides behind a face of lies. We put our trust in the supposition that the advertisers are telling the truth; that camel lights will make us a little more like him. A brief glance at this advertisement might not make us question if what we're told is the truth. That's when Logos comes into the play. Looking at the advertisement, its reasoning seems logical: people who smoke, like the man in the advertisement, are cool; those who don't are not. What this carefully woven structure neglects to mention is that those cool kids are far more likely to contract cancer and other dangerous ailments.</p>
<p style="font-family:verdana;font-size:90%;color:green">&nbsp;&nbsp;&nbsp;&nbsp;Our society is built around these stereotypes of the rugged man and the classic Marilyn Monroe pose. The cigarette companies purposefully create these rhetorical devices, which appeal to us, the consumers. This not only makes you want to buy the product, it makes you buy into the delusion which cigarette companies have createdl</p>
<p style="font-family:verdana;font-size:90%;color:green">&nbsp;&nbsp;&nbsp;&nbsp;In conclusion, not only do Camel Light advertisements use certain rhetorical devices, but influence they way society thinks and acts. In short, advertising perpetuates stereotypes. Camel Lights, just chooses to perpetuate the stereotype of the rugged man.</p>
</p>
<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
</center>
</FONT></Body></HTML>

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

people are telling me that have to horizon scroll (left to right) to see this page:

http://www.girlsincsoaz.org

I tried it on different machines, including a laptop and I don't have to, what can be the problem?

TIA

ima noob. To this forum and html as well so please be gentle. i brought lube...lol

I'm trying to change the color of the 'bar' between two frames. The frame on the left I have set to 'no scroll' and i want to change the color of it. I know how to change the color of scroll bars, arrows... but how do i change just the bar? I've been using JS to change the colors of the scroll bar. Is there another way? like css.

Hi,

I'm really, really new to HTML so any advice given to me would be amazing. I've put a website together using Indexhibit but I'm not happy about the layout of my "Projects" pages.

Please visit my website: www.andrewjenkinsphoto.com

Ideally I'd like to be able to manually scroll across the page from Left to Right, having a gap of a centimeter between each image. Is this possible using Indexhibit?

Hope I've made myself clear.

Thanks for any help.

Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How?

Thanks

Hi,

How can I create a row of images with a horizontal scrollbar?


I'd be really grateful to your help!

Regards
Rain Lover

How would I get a scrolling news bar in my webpage? I am extremely new, so please post code.

Thanks

Hi everyone,

I'm having some trouble with the scrolling functionality on my page. Basically I want only one vertical scrollbar down the left hand side of the page but I have a frameset document with three columns and two rows down the middle column (with the bottom frame of these two rows being the 'content' frame). I've tried setting this document within another frameset to get the whole thing scrolling with no luck. Can anyone provide an insight on how this is usually achieved as it seems fairly commonplace but I am having a hard time making it happen.

Cheers
Matt

Hi,
I'm working on a movie database for a device that supports html. It only supports basic html though. For my index page I the characters A-Z (as well as genres) to select movies starting with that certain letter. The movie covers display in a row underneath. I want to find a way keep the characters A-Z centered in the top of the screen so when I browse further right (or left) of the screen it stays there similar to the way the background stays in place. At the moment when I browse left and right the A-Z moves with it (so it ends up moving off the screen). Does anyone know a way to keep it in place like the background. The files I'm editing are in .xsl format. They are used inconjunction with movie collectorz to make html pages. Anyhelp would be greatly appreciated.
Remeber it only supports basic html, no javascript.
Thanks.