|
CSS - Scrolling Div Content?
Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page):
Thanks!... Similar TutorialsNot sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes: Please refer to: http://www.larreamma.com/ When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated? The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply. Thank you in advance. I have a fixed top header and menu with 20% height and 19% width respectively. I can not get the content to scroll under the header or have the footer to be scrolled at the bottom of the content along with it. Code: .content {
position: relative;
top: 20%;
left: 19%;
width: 80%;
height: 75%;
background-image: url("image.jpg");
}
#footer {
position: relative;
text-align: center;
left: 19%;
width: 80%;
height: 5%;
top: 95%;
background-color: grey;
}
Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken Hi guys, I've this div with overflow:auto. This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up. What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted. I'm somewhat newbie at this stuff so, any help in the right direction would be great! Thx Hugo Hey guys!! I got a quick question. I have a CSS layout page with 2 scrollbars. The first one for a news section and the second for a product. I have a lot of content for both sections, The scrollbars work fine, but on the main IE the scrollbars keep adjusting to the content that I have. if i have less content then its small..... I want to have no scrolling on my main window. Good morning, I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated. I am attaching my code: window.onbeforeunload=new Function("Procesando.style.visibility='visible';"); window.onblur=new Function("Procesando.style.visibility='hidden';"); //window.onfocus=new Function("Procesando.style.visibility='hidden';"); document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+ '<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+ '<option> </option>\n'+ '<option> Procesando su petici'+unescape("%F3")+'n. </option>\n'+ '<option> Espere por favor... </option>\n'+ '<option> </option>\n'+ '</select></div>\n'); Hi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> Can anyone tell me where I can get some info on CSS? Specifically I am trying to create sort of a news page, which will have a box that contains news articles that slowly scroll upwards until they disppear and then raeppear at the bottom at the bottom of the box again. I know this can be done with CSS and I've kind of accomplished what I want. The problem is that I'm using seperate elements for each article title. Therefore, only one article title scrolls through the box at the time since I can only make one element visible. Mabye, it will make more sense when you see my code. I want to basically be able to have the other news article titles begin to scroll underneath each other, not having to wait for the news article title above it to finish scrolling before the next article enters the box. I hope this makes sense! here is the code: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function init() { nos = 1; items = 6; posY = 130; scroller(); } function scroller() { if (nos == items + 1) { nos = 1; } elemID = 'elem'.concat(nos); objDOM = document.all[elemID].style; objDOM.visibility = "visible"; posY -= 1; objDOM.top = posY; if (posY <= 50) { objDOM.visibility = "hidden"; posY = 130; nos += 1; } setTimeout ("scroller()",10); } // --> </SCRIPT> <STYLE TYPE="text/css"> <!-- #elem1 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem2 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem3 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem4 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem5 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #elem6 {position:absolute; visibility:hidden; left:35; top:0; z-index:5} #screen {position:absolute; visibility:visible; left: 20px; top:50px; z-index:0} --> </STYLE> </HEAD> <BODY onLoad="init()"> <DIV ID="elem1"><FONT COLOR="#000000"> News & Events- article 1 </FONT></DIV> <DIV ID="elem2"><FONT COLOR="#000000"> News & Events- article 2 </FONT></DIV> <DIV ID="elem3"><FONT COLOR="#000000"> News & Events- article 3 </FONT></DIV> <DIV ID="elem4"><FONT COLOR="#000000"> News & Events- article 4 </FONT></DIV> <DIV ID="elem5"><FONT COLOR="#000000"> News & Events- article 5</FONT></DIV> <DIV ID="elem6"><FONT COLOR="#000000"> News & Events- article 6</FONT></DIV> <DIV ID="screen"> <TABLE WIDTH=350 HEIGHT=120 BORDER=0 BGCOLOR=#808080> <TD></TD></TABLE> </DIV> </BODY> </HTML> I've made an image to explain my problem pretty well : imgur dot com /n8uOX (apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it) basically i want my page to always be rendered as I intended it to. I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread. Thanks Hi I have a html menu which seems to be causing some problems to my stylesheet. Everything was working before I used the following code to create a menu using a separate external stylesheet The HTML PHP Code: <div id="submenu"> <a class="MySubMenu" href="#">Link 1</a> | <a class="MySubMenu" href="#">Link 2</a> | <a class="MySubMenu" href="#">Link 3</a> | <a class="MySubMenu" href="#">Link 4</a> | <a class="MySubMenu" href="#">Link 5</a> | <a class="MySubMenu" href="#">Link 6</a> | <a class="MySubMenu" href="#">Link 7</a> | <a class="MySubMenu" href="#">Link 8</a> | <a class="MySubMenu" href="#">Link 2</a> | <a class="MySubMenu" href="#">Link 3</a> | <a class="MySubMenu" href="#">Link 4</a> | <a class="MySubMenu" href="#">Link 5</a> | <a class="MySubMenu" href="#">Link 6</a> | <a class="MySubMenu" href="#">Link 7</a> | <a class="MySubMenu" href="#">Link 8</a></div> The CSS PHP Code: #submenu { padding:2px 0px 1px 0px; position:absolute; top:53px; left:1px; color:Silver; font-size:8pt; width:800px; } .MySubMenu:a, .MySubMenu:a:visited { font-family:Arial; font-size:8pt; color:rgb(119,119,119); text-decoration:none; border:solid 1px rgb(241,241,241); padding:0px 5px 0px 5px; } .MySubMenu:a:hover { font-family:Arial; font-size:8pt; color:rgb(119,119,119); background-color:rgb(230,230,230); text-decoration:none; border:solid 1px rgb(153,153,153); padding:0px 5px 0px 5px; } I have attached 2 images so you can see what the problem is. As you can see, everything looks ok in the default.gif, but the scrolled.gif is what the screen looks like when I scroll to the right, the CSS style gets chopped off even thought the width is 100%. The strange thing is, if I go to a page without that menu, I can scroll to the right without the pages css getting chopped off. Can anyone help me fix this problem. Thanks Hi! I am a new member brand new to CSS. The page is my first CSS attempt and I am having problems. The images on the right are not visible without scrolling. Thanks, Twillie Code: <style type="text/css">
body
{
background-image: url('background.png');
background-repeat: repeat-x;
background-position: top;
background-color: #cc99ff;
height: 100%;
width: 100%;
}
div.main
{
background: White;
width: 100%;
overflow: hidden hidden;
margin-left: 15%;
margin-top: 0px;
}
b.rtop, b.rbottom
{
display: block;
background: #cc99ff;
clear: both;
}
b.rtop b, b.rbottom b
{
display: block;
height: 1px;
overflow: hidden hidden;
background: White;
clear: both;
}
b.r1
{
margin: 0 5px;
clear: both;
}
b.r2
{
margin: 0 3px;
clear: both;
}
b.r3
{
margin: 0 2px;
clear: both;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px;
height: 2px;
clear: both;
}
div.logo
{
width: 100%;
height: 100%;
padding-top: 10px;
}
div.search
{
width: 100%;
height: 100%;
text-align: right;
vertical-align: top;
padding-top: 10px;
border-bottom: 1px solid #cc99ff;
}
input.search
{
margin-right: 15px;
margin-bottom: 4px;
}
div.leftmenu
{
width: 10%;
font-family: Century Gothic;
font-style: italic;
font-weight: bold;
float: left;
}
ul.leftmenu
{
list-style: none;
font-family: Verdana;
font-size: medium;
}
li.leftmenu
{
padding-top: 4px;
}
div.footer
{
width: 80%;
text-align: center;
margin-left: 30%;
margin-right: 30%;
}
div.description
{
text-align: center;
font-size: small;
padding: 4px;
}
span.description
{
font-weight: bold;
font-style: italic;
}
div.bottommenu
{
color: #FF0000;
font-size: small;
text-align: center;
padding: 4px;
}
a.bottommenu
{
color: Black;
padding-left: 4px;
padding-right: 4px;
}
div.content
{
width: 80%;
height: 100%;
float: right;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="main">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b>
<div>
<div class="logo">
<img src="images/MP_header2.jpg" alt="Monogram Plus Logo" />
</div>
<div class="search">
<input name="sp-q" type="text" />
<input name="submit" type="submit" value="Search" class="search" />
<input name="sp-a" type="hidden" value="sp0535f800" />
</div>
<div>
<div class="leftmenu">
<ul class="leftmenu">
<li class="leftmenu"><a href="index.html">Home</a></li>
<li class="leftmenu"><a href="links.html">Links</a></li>
<li class="leftmenu"><a href="online_store.html">Online Store</a></li>
<li class="leftmenu"><a href="products.html">Services</a></li>
<li class="leftmenu"><a href="faqs.html">FAQ'S</a></li>
<li class="leftmenu"><a href="catalogs_all.html">Catalogs</a></li>
<li class="leftmenu"><a href="form_online_quotes.html">Quick Quote</a></li>
<li class="leftmenu"><a href="forms.html">Forms</a></li>
<li class="leftmenu"><a href="about_us.html">About Us</a></li>
<li class="leftmenu"><a href="contact_us.html">Contact Us</a></li>
<li class="leftmenu"><a href="sitemap.html">Site Map</a></li>
</ul>
</div>
<div class="content">
<div style="float: left; width: 700px;">
<div style="float: left; width: 380px;">
<div style="float: left;">
<div style="padding-bottom: 10px;">
<a href="spirit.html">
<img src="mplus/images3/Index_spirit_pict2.jpg" alt="Spirit" style="width: 239px; height: 246px;
border: 0px;" /></a>
</div>
<div style="color: Red; font-size: large; width: 239px; text-align: center;">
<a href="web_service.html" style="color: Black; font-size: large; font-weight: bold;">
Need an Online Store for your club or business?</a>
<br />
We create FREE Custom Apparel Stores!
</div>
</div>
<div style="width: 100px; text-align: center; float: right;">
<a href="business_wear.html">
<img src="images/logowear_sm.jpg" alt="Starter Special" style="width: 132px; height: 83px;
border: 0px;" /></a> <a href="starter_special.html">Embroidered Logo Shirts Starter
Special<span style="color: Red;">-ONLY $85!</span></a>
</div>
</div>
<div style="float: right; font-size: medium; width: 270px;">
Phone/ Fax: (518) 374-5220<br /><br />
1819 State Street<br />
Schenectady, NY 12304<br />
<p style="font-size: small; font-style: italic;">(3 Buildings east of Blue Ribbon Diner)<br />
Parking: Right at our front door or in shared lot to the right of our building.</p><br /><br />
Hours: Mon-Fri 9:00 - 5:00 EST<br />
<p style="font-size: small; font-style: italic;">Weekend and After Hours happily by Appointment</p><br />
</div>
</div>
<div style="float: right; text-align: center; padding-right: 20px;">
<a href="/wool_jackets.html" style="display: block;">
<img src="images/w_guild_front_sm.jpg" alt="Guild Front" style="width: 109px; height: 112px;
border: 0px;" /></a> <a href="blanket.html" style="display: block;">
<img src="images/Blanket_sweat_red.jpg" alt="Blanket Sweat Red" style="width: 136px; height: 92px;
border: 0px;" /><div>
Sweatshirt Blankets</div>
</a><a href="wool_capital.html" style="display: block;">
<img src="mplus/images3/w_SHS_back_sm.jpg" alt="SHS Back" style="width: 122px; height: 112px; border: 0px;" /></a>
Capital District NY
</div>
</div>
</div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
<div class="footer">
<div class="description">
Since 1981, <span class="description">Monograms Plus</span> has been providing high-quality
imprinted sportswear in Schenectady, NY. We offer custom screen printing and embroidery
to the community at large, with friendly customer service, quality custom work,
and competitive pricing. Come by and get your school, business or company apparel.</div>
<div>
<div class="bottommenu">
<a href="/index.html" class="bottommenu">Home</a>| <a href="/about_us.html" class="bottommenu">
About Us</a>| <a href="/online_store.html" class="bottommenu">Online Store</a>|
<a href="/products.html" class="bottommenu">Services</a>| <a href="/search.html"
class="bottommenu">Search</a>| <a href="/faqs.html" class="bottommenu">FAQ's</a>|
<a href="/contact_us.html" class="bottommenu">Contact Us</a>| <a href="/links.html"
class="bottommenu">Links</a>| <a href="/return_policy.html" class="bottommenu">Returns</a>|
<a href="catalogs_all.html" class="bottommenu">Catalogs</a>
</div>
</div>
<div style="font-size: small; text-align: center; padding: 4px;">
Monograms Plus All rights reserved. Updated 7/04/11</div>
</div>
</body>
</html>
I have been unable to resolve several problems with my first CSS attempt, most interestingly Firefox's inability to scroll through the main text div. Also, in IE I have been unable to overlap certain divisions and text is not properly limited in width. Both the html and css validate at W3C, and other than not scrolling, Firefox displays ideally. I can't say I expected anything less than the present errors from IE. A comparison of these issues is presented he URL The main page and CSS are available, respectively, at URL URL I suspect the improperly-located div problem is somewhere in here (and likely due to a simple error) Code: #quotes {
position: fixed;
bottom: 0px; right: 15%;
width: 85%; height: 35px;
padding: 5px;
margin: 10px;
overflow: hidden;
text-align: center;
color: #CCCCCC; background-color: #336633;
}
#sig {
position: fixed;
z-index: 1;
bottom: 25px; left: 85%;
width: 20%; height: 35px;
padding: 0.5em;
/* Make the sig noticeable */
font-size: 3.25em;
font-weight: 600;
}
As for the scrolling issue, which is my primary concern, I have read extensiively for similar problems, but cannot find any assistance. Solutions to the other issues are secondary at this point, but will be fixed eventually. If anyone has any ideas, I would appreciate them. Thanks. .dd. Hey, I was half-way through doing an Unreal Tournament (fab game) related site using CSS and XHTML Strict, and suddenly IE6 decides it's going to mess me about. Surprise surprise! A current version of the site can be found he URL The CSS of which can be found he URL In Mozilla and Konquerer it's perfect, but IE6 is shaving off the bottom bit of the document, leaving me unable to scroll all the way to the bottom. I find that it only renders one 'full screen' (F11) worth of content, before cutting it off, which is quite frankly bizarre. There should be five paragraphs of placeholder text visible. I'm also getting strange text-selection bugs, which I suspect are related. I've found a few sites that tell of a common IE6 CSS scrolling bug, which can be fixed by either refreshing the page, or pressing F11 twice, or putting a clearing <div> underneath the content. This isn't the case here. I've also tried making the #main div relatively positioned (I hear IE6 doesn't like absolutely positioned divs all that much), and also setting 'height: 100%' in the body and #all divs, but to no avail. Oh, and I'm using WinXP SP1, if that makes any difference. Please please please help, I'm fast running out of hair to pull out. Cheers. Hello all, I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own. I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time. bcode. =========== CSS File============ .wdlogo { visibility:visible; position:absolute; z-index:0; left:10px; top:10px; } .slidingtext { visibility:visible; position:relative; z-index:2; left:245px; top:-200px; } .blacklink { text-decoration: none; color: #000000; } .blacklink:hover { text-decoration: none; color: #000000; } .intro { text-align: left; color: #000000; font-size: 12pt; font-family: Lithograph, sans-serif; position: absolute; visibility: visible; z-index: 2; left: 360px; top: 300px; } .center { visibility: visible; position: absolute; z-index: 0; top: 165px; left: 85px; } .shadowleft { width:32px; background-image: url(images/Working/jpg/left_ver_5.jpg); background-repeat: repeat-y; background-position: right top; } .background { background-image: url(images/Working/jpg/background.jpg); background-repeat: repeat; } .shadowright { width: 32px; background-image: url(images/Working/jpg/right_ver_3.jpg); background-repeat: repeat-y; background-position: left top; } .top { position: absolute; visibility: visible; top: 0px; } .dots { position: relative; visibility: visible; z-index: 2; left: 160px; top: -150px; } .nav { position: relative; visibility: visible; z-index: 2; left: 5px; top: 250px; } .bar1 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -460px; } .bar2 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -420px; } .bar3 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -380px; } .welcometext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -455px; width:330px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .whytext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -415px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .empowertext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -375px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } ================================= ==========XHTML File=============== <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Author: Mathew Pridham Date: April 2004 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Web Diligence</title> <link rel="stylesheet" type="text/css" href="wd.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="wdiespecific.css" /> <![endif]--> <!--webbot bot="Include" endspan i-checksum="11150" --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body topmargin="0" bottommargin="0" class="background"> <table cellpadding="0" cellspacing="0" align="center" width="800px"> <td class="shadowleft" height="100%" width="32px" rowspan="20"> </td> <td width="800px" height="100%" bgcolor="#FFFFFF"> <img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" /> <object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="flash/banner/textslide_ver_2.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed> </object> <img src="images/Working/gif/dotted4.gif" class="dots" border="0" /> <table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0"> <tr> <td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td> </tr> <tr> <td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td> </tr> </table> <img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" /> <div class="welcometext"> We are a small web design & development company, specialized in quality web design for small businesses. </div> <img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" /> <div class="whytext"> We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price. We create websites that are an effective combination of functionality, style, and creativity. We specialize in custom web design as well as website makeovers. </div> <img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" /> <div class="empowertext"> Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for. Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination, but also fits into a small business budget. </div> </td> <td class="shadowright" height="100%" width="32px" rowspan="20"> </td> </table> </body> </html> I was wondering if there was a way with CSS, to create a box, where the text within automatically scrolls. For example, I have a box that has a date, and then the latest news. Say that there are about 20 lines worth of text, but the box itself, is only 10, I wanted the text to scroll from bottom to top automatically. I know I could probably do something like this in flash, and I'm guessing javascript as well. But don't want to use javascript. Any help would be appreciated. Thanks. |
|||||||