scrolling text with a still background (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

mjmtravel -> scrolling text with a still background (1/2/2007 20:44:51)

I have a table on a page split in two. I have a photo gallery on the right cell and I would like to scroll text in the left cell, with the background staying put and staying the same size as the photo gallery. The background is not a image, just color. How can I easily do this in front page 2003.
I have tried the watermark on the background but the table keeps growing with the text.
Thanks for the help in advance.



rdouglass -> RE: scrolling text with a still background (1/2/2007 22:00:32)

I frequently use a <div> element with the overflow:auto; style something like this:

http://www.quirksmode.org/css/overflow.html

Hope it helps.



Larry M. -> RE: scrolling text with a still background (1/2/2007 22:02:01)

Use >>Insert>>Web Component>>Dynamic Effects>>Marquee. Width, height, speed, behavior, direction and background color are all controllable.



Tailslide -> RE: scrolling text with a still background (1/3/2007 4:10:26)

Doesn't marquee only work with IE?



sticks464 -> RE: scrolling text with a still background (1/3/2007 8:48:00)

Take a look http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment



Larry M. -> RE: scrolling text with a still background (1/3/2007 9:53:28)

quote:

Doesn't marquee only work with IE?


The FrontPage >>Insert>>Web Component command is misleading insofar only a handful out of the two dozen or so result in IE Browser specific viewing and/or require publishing/FPSE's.

The FrontPage Marquee works fine in FireFox 2.0.



womble -> RE: scrolling text with a still background (1/3/2007 10:11:55)

I don't think it's a marquee that mjmtravel wants though, rather text that scrolls, while the background stays in place, when it's bigger than the container as in the examples given by Roger and Sticks.



Larry M. -> RE: scrolling text with a still background (1/3/2007 10:44:37)

quote:

I don't think it's a marquee that mjmtravel wants though, rather text that scrolls, while the background stays in place, when it's bigger than the container


Hmm... Probably you're right. Do you think the scroller mjmtravel wants looks like the one on www.wrightmetalproducts.com/ under the "Who We Are" button? If so, I got it at www.frontlook.com/ but I'm sure equivalent script freebies are available via Google search.

FrontPage 2003 doesn't have this same capability AFAIK.



womble -> RE: scrolling text with a still background (1/3/2007 11:01:35)

I suspect it's not an automatically scrolling one Larry - just a container where the text will scroll with a scroll-bar if it's longer than the container's height. Automatic scrolling scripts btw aren't good for accessibility because they're pretty much inaccessible to screen readers and those using keyboard navigation.



Larry M. -> RE: scrolling text with a still background (1/3/2007 11:39:47)

Your points well taken. I sure flunked this one for reading comprehension [:@]. Will try to do better next time [sm=whistling.gif]



mjmtravel -> RE: scrolling text with a still background (1/3/2007 17:56:22)

quote:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

What sticks464 sent is exactly what I'm looking for but can I put that type of code in a table to make it work. I can see using it on the whole page background, but not sure in a table. Thanks again guys, any other idea's.



rubyaim -> RE: scrolling text with a still background (1/3/2007 19:36:49)

quote:

but can I put that type of code in a table to make it work

You could try putting the image on the table cell, and then using a div with overflow:auto in that cell (as per rdouglass's post above).

Below is a test page, used an inline style for the td image: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>

<style type="text/css">
<!--
div {
  height: 7.5em;
  width : 100%;
  overflow: auto;
 }

table {
  width : 100%;
}

td {
  width : 50%;
}
-->
</style>

</head>

<body>

<table>
	<tr>
		<td>test</td>
		<td style="background-image: url('smiley.gif'); background-repeat: no-repeat; background-position: top left; ">
			<div>blah blah blah blah<br>
      			 blah blah blah blah<br>
          		 blah blah blah blah<br>
                         blah blah blah blah<br>
     			 blah blah blah blah<br>
    			 blah blah blah blah<br>
  			 blah blah blah blah<br>
  		         blah blah blah blah<br>
     			 blah blah blah blah<br>
    			 blah blah blah blah<br>
   			 blah blah blah blah<br>
      		</div>
		</td>
	</tr>
</table>

</body>

</html>


NOTE: above is a quick test only. It might give you something to play with.



mjmtravel -> RE: scrolling text with a still background (1/3/2007 19:59:03)

I try this in the table and in a div, but all I get is a improper html error, saying make sure your quotations are proper.



rubyaim -> RE: scrolling text with a still background (1/3/2007 20:06:55)

Would you be able to post a link to the page, or the html code?

I've not seen that error message before (that I can recall anyway, have probably had every other error appear at some stage [:D] ). When and where is the error coming up?




mjmtravel -> RE: scrolling text with a still background (1/3/2007 20:10:34)

When typing the code into my table tag line or in the div tag line, when I hit enter it gives me the quotations out of place error. I will try to post the code.



rubyaim -> RE: scrolling text with a still background (1/3/2007 20:13:36)

Ah, okay. Are you working in design view and editing the tags with the quick tag editor?



mjmtravel -> RE: scrolling text with a still background (1/3/2007 20:14:32)

Yes I am, is that not the correct place?



mjmtravel -> RE: scrolling text with a still background (1/3/2007 20:17:18)

Here is my code.
<HTML>
<HEAD>
<TITLE>Home</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style="margin:0px;padding:0px ">
<!-- ImageReady Slices (Home.psd - Slices: 01, 02) -->
<TABLE WIDTH=100% height="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0 background="images/bg4_01.jpg" >
<TR>
<TD valign="top" align="center" WIDTH=100% height="100%">
<TABLE WIDTH=100% height="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD valign="top" align="center">
<TABLE WIDTH=730 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<TABLE WIDTH=366 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="568" style="background: #DDD3BF url('images/Spa-%26-resorts-1_10.jpg') no-repeat fixed center center">
<TR>
<TD background="images/Spa-%26-resorts-1_06.jpg" WIDTH=366 HEIGHT=497 valign="top">
<div style="padding-left: 10px; padding-right: 10px; padding-top: 5px">
text on the page<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</p>
<p>text on the page</div>


</TD>
</TR>
</TABLE></TD>
<TD>
<TABLE WIDTH=354 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/Home3_02.jpg" WIDTH=346 HEIGHT=5 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="images/Home3_03.jpg" WIDTH=8 HEIGHT=580 ALT=""></TD>
</TR>
<TR>
<TD>
<applet code="fprotate.class" codebase="./" width="346" height="568">
<param name="rotatoreffect" value="blindsVertical">
<param name="time" value="5">
<param name="image1" valuetype="ref" value="images/j0146143.jpg">
<param name="image2" valuetype="ref" value="images/j0148948.jpg">
<param name="image3" valuetype="ref" value="images/j0181982.jpg">
</applet></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/Home3_14.jpg" WIDTH=346 HEIGHT=7 ALT=""></TD>
</TR>
</TABLE></TD>
</TR>
</TABLE></TD>
</TR>
<TR >
<TD WIDTH=100% height="100%" background="images/Home_02.jpg" >
</TD>
</TR>
</TABLE>
</td></TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>



rubyaim -> RE: scrolling text with a still background (1/3/2007 20:21:13)

I've never tried that so I can't help much with the error. Larry can probably help out with the quick tag editor - I'm not sure that it will work with inline styles.

You could try going directly to code view and making the changes there. The TD needs to have the image added as a background, not the actual table, if that is any use.

Edit: I'll look at your code now [:)]



rubyaim -> RE: scrolling text with a still background (1/3/2007 20:35:43)

Wild guess, you could try this: 

<TABLE WIDTH=366 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="568" style="background: #DDD3BF">
<TR>
<TD style="vertical-align: top; background-image: url('images/Spa-%26-resorts-1_06.jpg'); background-repeat: no-repeat; background-position: top left; ">
<div style="padding-left: 10px; padding-right: 10px; padding-top: 5px; width: 100%; height: 25.0em; overflow: auto; ">


and see if it gets you close. I moved the background image to the cell and put the overflow on the div.

Unfortunately it's been a long time since I've worked on pages with tables for layout in use like this so am very rusty.

Hopefully someone else will be able to help out if the above is no good. If it does work it will probably only be okay in IE and no other browser.



mjmtravel -> RE: scrolling text with a still background (1/3/2007 20:43:16)

Sally that works, the image is messed up but that is my problem. The only thing I need to adjust is the length of the box. Do I do that with the bottom height size?



rubyaim -> RE: scrolling text with a still background (1/3/2007 20:54:59)

Yes, you can adjust the height in the div tag. I set it at 25 em as a guess.

When you get time, it might be an idea to have another look at the page. I think you could cut down on the code (and future problems / browser rendering issues) by reducing the number of tables and using styles for things.

I'm only mentioning the above as I remember the pain of having to rebuild a large website, much easier to get things right as you go along [:)]



mjmtravel -> RE: scrolling text with a still background (1/3/2007 20:57:17)

Ok Sally, thanks a lot for all your help, I really enjoy working with everyone at outfront. thanks again.



mjmtravel -> RE: scrolling text with a still background (1/3/2007 21:33:59)

One last thing I promise. When I change the height from 25 em. It does change the height of the scroll bar and box but I loose the scrolling text action. Crazy? If I change the 25em to any other size I loose the scroll. Any ideas?



rubyaim -> RE: scrolling text with a still background (1/3/2007 21:55:23)

Never feel bad about asking things [:)]

Basically, the way the scroll works (using overflow:auto) is that if the content is too long for the space provided, the browser will show the scroll bars. I'm guessing that you are increasing the height and the text actually fits so the scroll bars do not appear.

You could try using a fixed height in pixels instead of em if it's easier at this stage, maybe try 500px initially and play around a little.

If you would like the scroll bars to be displayed all the time, you could try overflow:scroll instead of overflow:auto .

Hope this makes sense. Here is more info on overflow and clipping.





Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375