|
CSS - Css And Scrolling Text
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> Similar Tutorialsdoes anyone know the code for a scroll text box? plz help Hi, I have a webpage that has a fixed background with a header. I want my content to be able to scroll without overlapping my header. Meaning, the content needs to be masked? Or on a different z-index? Or in a frame? I know these are possible but nothing seems to be working. Please help!!! HTML CODE: Code:
<div id="background">
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="safaris.html">Safaris</a></li>
<li><a href="lodging.html">Lodging</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></div>
<div id="content">
<h1><span>About Us</span></h1>
<p> Welcome to Trompettersfontein. Our expertise is to create exclusive and
unique safaris, professionally assisting you in your most unforgettable
hunting experience. Originally a cattle ranch during the 1960's, we are
now a prominent name in the gaming and ranching industry. Located in the
Elisraas region, Lepahale, in the Limpopo province close to thabazambi and
the waterburg area creating a wildlife oasis making it a prime hunting ground
of South Africa. Situated on 1000 hectors, with special hunting permission
our total hunting area extends over 3000 hectors of typical bushveld area.
The terrain makes makes excellent meat hunting and bow hunting grounds.
Owned and managed by Marius Moolman, a professional game hunter since 1986.
An exceptional tracker with a vast knowledge of the bush and game, he has
studied the age-old natural relationship between predator and prey. He has
also had the privilege of hunting the Big 5 and is a great host and sense
of humour that will leave you with a longing of coming back soon.</p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
<p>Our motto 'conservation through sustainable utilisation' is closely followed.
Ours is a self sufficient game ranch with solar energy utilisation, rainwater
harvesting and sustainable breeding herds. Though we use the resources available,
we make sure never to destroy the integrity of the land. Fire is a natural
part of the ecosystem, control of runaway fires is vital, but correct burning
is essential for the long-term health of the natural environment. Waste-water
is cleaned naturally through oxidization dams. The cleaned water runs back
into drainage lines, which ultimately feed underground aquifers, thus creating
a full natural water cycle. </p>
</div>
</div>
CSS CODE: Code:
body {
background:#000000;
margin:0px;
padding:0px;
width:100%;
}
#background{
background-image: url('Images/background2.jpg');
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
margin:0px;
padding:0px;
width:100%;
height:100%;
z-index:-10;
}
#menucontainer {
width:650px;
margin:auto;
padding:150px 0 0 0;
}
#menu{
width:650px;
margin:0px;
position:fixed;
z-index:5;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
a:visited, a:active {
color: #FF6600;
text-decoration: none;
}
#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
text-decoration: none;
list-style-type:none;
margin:0px;
text-transform: uppercase;
font-weight: bold;
}
#menu ul li{
display:inline;
margin: 0px;
padding:3px 14px 3px 14px;
}
#content{
width:500px;
margin:auto;
padding:0 0 400px 0;
position:relative;
top:30px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align:justify;
z-index:1;
}
h1 {
background: url('Images/about.png') no-repeat top left;
width:168px;
height:38px;
}
h1 span {
visibility:hidden;
}
p {
line-height: 18pt;
}
As I am pretty new to CSS (about 3 months now) please be patient if I dont understand very advanced coding. Thanks for your time and effort. Any help is much appreciated. Hi All, I am experementing with a fixed watermark image/background on my webpage.The code worked fine to prevent the image from tiling however when I scroll the whole lot goes as well,the table of rolovers and the header image. I need a code to keep the table of javascript and the image fixed while only the text scrolls. Also as you will see the bg image takes up the whole page which results in the text scrolling over the entire height of the page.Is there any code I can apply to make a cut off point for the text,for appearance sake lets say the top bar of the image .Here is the url of the page I am working on. Thanks URL I've got some text setup in a <div> of mine, and the lines of text are so long that they scroll off the side of the screen. I want these lines to wrap to a new line so they don't scroll off the screen. How do you make text in a <div> not be able to be more wide than like, x% of the screen? To view my problem go to my url he my site I'm trying to make one of my current websites compliant with W3C standards by not using marquee tags. The problem is that I still want to keep my horizontal scrolling text (yes, I know there is an issue with accessibility standards but I still need the scrolling text). Anyways, I have found all sorts of ways to use CSS and JavaScript for vertical scrolling text while still being compliant however I have no clue how to do it with horizontal scrolling text. The site I am trying to update is www.gpfbarracudas.org , specifically the scrolling text under the title image. Any help would be greatly appreciated! Josh In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes? This is the HTML I have so far: Code: <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>
<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>
</html>
[A view of what I want the final product I made in photoshop is attached.] When it comes to the technical aspect of design I BS my way through most of it or pick it up as I go along. On top of this, I'm too anal to use anything but Notepad to edit my code, but that's not the problem. This is: The image at the bottom of the page is what I'd like the damn page to look like without the use of Flash (I could do that, but I want to make a seperate site design that uses flash and keep this to HTML, CSS and maybe Javascript). So, I found this: URL and I think it's what I want, but, my first thought was that it was an arhived post. It actually appears to be an unanswered post. I tried it out, and sure enough it doesn't work. Well, I was hoping it would, because I'm more geared towards Graphic Design and no coding. I tend to design em first and fill in the blanks later. Well, this time, my code isn't the only thing that's blank and I'm just this page and another very similer one away from finishing the site, so I need help. Here's how I planned to put the thing together: It's an HTML table centered in the middle of the page. I was planning on planting the CSS in the gaping hole left by removing a section of table, and praying it fit snugly. Am I going about this wrong? And if I'm not and that link is the solution to my problems, how do I implement it into my code? I tried a test version of it, and couldn't get it to work, but I'll tell you now, I only have a theoretical graps of CSS and haven't dove into it as of yet...thus I know nothing really. And on top of this, I want to make those two left side text pieces link to anchors in the scrolling text. And those things on the right side are customized scoll bars. The latter is not nesscary (I know that's java script. I had it on a site I did a while ago, but the site is lost and I didn't code that section), but it would be optimum. So that's it, and, well, if it works, it will look pretty. Thanks for your help before hand, if this is too rambling, please feel free to tell me to better describe it. I'm in a bit of a rush, and as soon as I hit "Submit" I'm running out the door. ------->Jeff Compton I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods ie testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something how can I make css break that up so the browser window won't scroll vertically? 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. 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 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! 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>
Dear all, I have been working to implement a scrolling table into an xml / xsl interface and so far have managed to put together an acceptable version using <thead> and <tbody> syntax. Indeed, for the html examples that I found out there, this seems to work perfectly. On the surface it also works perfectly in my xml / xsl implementation too (html underneath). Indeed, using IE6*, you can take a look at a cut-down example by going to this link ... http://alse.load4.net/scrollproblem/scrollproblem.xml ... and then selecting 'Milan', 'Report Test' and clicking on 'Run'. This gives a nice scrolling list which is exactly what I want. However ... If you scroll to the bottom of the list in the scrolling area (the list is short as I have removed most of the data and all the reports except for this one) and then resize the window, the headers are distorted. With more data (which is normally the case for us) the distortion is even worse. I have spent many hours tweaking my CSS (contain in the XSL file for convenience) and the HTML but just can't get rid of the 'distortion-on-resize' problem. I am hoping that either ... a.) There is a way to block the browser from being resized (I don't know if there is?) ... or ... b.) Someone can take a look at my syntax and offer a suggestion to sort this out. The source code can be obtained by clicking on the two hyperlinks 'xml file' and 'xsl file' included in the link. Indeed, I believe that the problem (and solution) may lie in some dynamic CSS declarations ( e.g. top: expression(offsetParent.scrollTop); /*IE5+ only*/ ) which I have obtained from various examples but don't understand completely. Many thanks for any help that you can give as this could be a great little tool if we can sort out this last hurdle. Regards, Alan Searle *: This solution is only designed to work with IE as that is what we have in-house. CSS: Here are the CSS declarations which are contained in the XSL file ... [code] <style type="text/css" media="screen"> table {width: 99%; background-color: #E2EFFE; border-style: solid; border-collapse:collapse; border-color: #316AC5;} table.displayframe { background-color: white; border: solid 1px #316AC5;} h1 {margin-top: 1em; font-variant: normal;} h2 {margin-left:5px;} h3 {margin-left:5px;} div.tableContainer { width: 100%; /* table width will be 99% of this*/ height: 344px; /* must be greater than tbody*/ overflow: auto; margin: 0 auto;} table.cont { width: 98%; /*100% of container produces horiz. scroll in Mozilla*/ border: none; background-color: #E2EFFE;} table.cont>tbody { /* child selector syntax which IE6 and older do not support*/ overflow: auto; height: 301px; overflow-x: hidden;} thead.cont tr { border: none; position:relative; top: expression(offsetParent.scrollTop); /*IE5+ only*/ } thead.cont td, thead.cont th { font-size: 14px; background-color: white; color: blue; border: none; /* border-top: solid 1px #d8d8d8; */ } td.cont { color: #000; padding-right: 2px; font-size: 8px; border-bottom: solid 1px #d8d8d8; border-left: solid 1px #d8d8d8;} table.cont tfoot tr { /*to help IE*/ position: relative; overflow-x: hidden; top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0); } a:link {text-decoration: underline;} a:hover {text-decoration: underline; color: #851D9E;} a:visited {text-decoration: underline; color: #8080C0;} </style> 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!... 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 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 guys, So i'm working on the site www. paulfenton .tk. My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt. if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how... Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow. Any help or ideas would be great, let me know if you have any questions. -Paul http://www.rodoslovlje.com/ Use IE e.g. Does anyone know how I can fix this. Thnx 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. |
|||||||