|
HTML - Customized Scroll Bar
HEllo Friends,
I am newbie to HTML, I Am trying toa dd a scroll bar to a HTML but couldt do so. Please help me. heres the code for the page <!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=iso-8859-1"> <title>Stunting Souls - The Hell of Power</title> <style type="text/css"> <!-- body { background-image: url(); background-color: #000000; scrollbar-face-color:#DBDBDB; scrollbar-shadow-color:#DBDBDB; scrollbar-highlight-color:#DBDBDBC; scrollbar-3dlight-color:999999; scrollbar-darkshadow-color: 000000; scrollbar-track-color:000000; scrollbar-arrow-color:#333333; color: #FFFFFF; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: underline; color: #FFFFFF; } a:active { text-decoration: none; color: #FFFFFF; } body { background-color: #000000; } --> </style> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .style1 {color: #FFFFFF} .style2 {font-size: 9px} --> </style> </head> <body> <table width="781"> <tr> <td width="773" height="35"><table width="30"> <tr> <td> </td> <td><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="763" height="115"> <param name="movie" value="menu1.swf"> <param name="quality" value="high"> <embed src="menu1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="115"></embed> </object></td> </tr> </table></td> </tr> <tr> <td><table width="200"> <tr> <td> </td> <td><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="763" height="262"> <param name="movie" value="header.swf"> <param name="quality" value="high"> <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="262"></embed> </object></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <tr> <td><table width="742"> <tr> <td width="219" height="99" class="lt_text"> <table width="200" height="83"> <tr> <td height="17" class="lt_text"><img src="images/t1.gif" width="223" height="32"></td> </tr> <tr> <td width="191" height="17" class="lt_text"><img src="images/back.gif" width="21" height="7"><a href="safe.htm">Safe Riding Tips </a></td> </tr> <tr> <td height="18" class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="helmet">Helmet Buying Guide</a> </td> </tr> <tr> <td height="19" class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="night.htm">Tips for Riding in Nigh</a>t </td> </tr> <tr> <td class="lt_text"> <img src="images/back.gif" width="21" height="7"><a href="rain">Monsoons and Motorbikes</a></td> </tr> </table></td> <td width="318"><table width="318" height="63"> <tr> <td><div align="center" class="m_text"> Wallpaper of The Month </div></td> </tr> <tr> <td height="36"> </td> </tr> </table></td> <td width="189"> </td> </tr> </table></td> </tr> <tr> <td><div align="center" class="h1_text"> <p class="h_text style1"> </p> </div></td> </tr> <tr> <td class="m_text"><div align="center"><span class="l_text">Copyright© stuntingsouls.com. All Right reserved. </span></div></td> </tr> <tr> <td class="m_text"><span class="m_text">Website Design: Aman Singh (.A.D.S.) (Layout Designer, Graphics Designer, Coder, Administrator) & Fatima Boura, France (Logo and Graphics Designer) </span></td> </tr> <tr> <td class="m_text"><div align="center"><span class="h_text style1"><img src="images/excyellow_tri.gif" width="21" height="18" align="bottom"><span class="style2">Please do not Try any of the stunts/activities shown here in. These Stunts are performed by Professionals within a controlled enviornment. Doing/Trying these stunts may harm you and may cause you a major injury. </span></span></div></td> </tr> </table> </body> </html> Similar TutorialsHow extensive/difficult is it to customize a scroll area? I've seen the very simple table versions which automatically generate a scroll bar based on your browser/system. But I want a very clean, simple, minimal scroll area. Even if it were two arrows. I have a mock up here where its just a line with a dot on the right side of a small fixed text area. Is this a flash or javascript thing? Or can it be done with css, html? Thanks Hi could someone tell me or link me to a site where I can learn how to create a web page that resizes itself and has no menus/status bar/address bar? I think I saw it a long time ago but I can only remember that the code is placed between the two <head> </head> tags. Thanks in advance for any help. Hi, I am trying to create a scrollable menu for my website and I am looking for either code for what I am trying to do, or the url of any website with a similar type of menu implemented. i have looked around quite a bit and I can't find a site with what I am trying to create. part 1: I want to customize the appearance of my scroll bar so that it uses one small Jpeg for the scroll bar and another one for the scroll handle. part 2: as different titles and sub titles on the menu are clicked the menu expands to reveal new sub categories. I need the scroll handle to only show up once the list has reached the limits of the box. the attached image is a mock up of what i am trying to create to give you a better idea. thank you very much to anyone who can help. Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J Ive been looking EVERYWHERE for a site with a code for a scroll box with a trasparent scroll bar, Ive seen the code where I can edit the size of the box as well as the color of the box itself and I know how to do THAT. how do I make it where the code displays the scroll code as well so I can fully customize it? it seems that its always hidden.. hi i have a large text i want to make it into a scroll bar and i want it to be set up like how i typed it and i really need help on this Im developing a homepage, www.hallevikslagret.se My problem is, when your using a small resolution or if you make the browserwindow to small the menu at the top disapears. Ive tried many different ways to show a scroll but i cant solve it. How do i get a scroll when the content gets to big. I know that im not using correct XHTML-language on the page. I will get to that as soon as possible when i solve this problem. Thank you for your time! Best Regards Jens Ok I have a dive that scrolls and when i scroll it, it goes behind another div, which is what i want , but the problem is i don't want it to apear on the other side of the div but i still want to see the background. so i was wondering if there is a way i can make the scrolling div go behind another div that is invisible or something and make the scrolling div go invisible at this section so you can still see the rest of the scrolling div, but not the part behind the invisble div. if someone knows how to do this or a more simple way, that does not involve changing the size of the scrolling div as i want the scrollbar to be the height of the page. I had the problem of my page shifting to the right whenever it was too long for the window to allow a scroll bar so I added this overflow-y:scroll; to the body information in the css sheet. It works fine in most browsers but I've noticed that with IE7 the scroll appears in the top part of the margin and not on the browser side. It just doesn't look right. Please advise. Here's the link. http://www.yotti.de/indextemp.html I have looked through thousands of templates and this is the only one I like. The only problem is I hate the orange thing in the middle keeps moving up and down as I scroll the page. Can somebody download a copy and tell me how to make the orange thing in the middle static so it never scrolls, thanks. http://www.free-css.com/free-css-tem....php#bookmarks Trying to create a simple scrolling for fitting my template. sample: http://www.hottunaint.com/press1.html template sample to fit in the main panel (image size) http://www.hottunaint.com/product.html thanks Hello. I'm currently trying to help my friend develop his website. He wants to put a banner that's linked back to his site, and then underneath a scroll box which contains the code to put the banner in anywhere. The problem is, whenever I try, and I put the code in the scroll box, it shows the banner, instead of the actual code. How can I stop the banner from showing up? Thank you I'm just wondering, is it possible to stop the main page from scrolling down, and instead, add the scroll bar in the table cell that i want it in. if it is possible...what is the code i can use to operate this? help much appriciated... ^-^ Anchieh I have a table with three cells in it, one cell at the top and one cell at the bottom with an image in i.e borders. I then put text in the middle cell, enough that it forces the cell to be greater than the height of my screen and then pushes the bottom cell off the bottom of the screen. How do i make the middle cell (with the text in) a fixed size and create a scroll bar for the text that is off the screen thus keeping the bottom border nice and tidy at the bottom of my screen? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="820" border="0" cellpadding="0" cellspacing="0" height="100">
<!--DWLayoutTable-->
<tr>
<td width="953" height="45" valign="top"><img src="site/images/slice_03.jpg" width="953" height="45"></td>
</tr>
<tr>
<td height="353" valign="top">
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
<p>This text needs to stay in the middle of the screen and not push the bottom border off the page</p>
</td>
</tr>
<tr>
<td height="44" valign="top"><img src="site/images/slice_20.jpg" width="953" height="43"></td>
</tr>
</table>
</body>
</html>
i need a code for a scroll box that when you put a code inside like <img src="www... and so on it will show the code and not the image or anything else i put it...i just want it to show the code thanks in advance -dorota I've created a simple layout for a myspace and want to post the code on my 'myspace'. I want to put the code into a scroll box where if you click on the box it automatically highlights the whole box. Can somebody please give me a code for such a box. Here is my layout code. Code: <div style="width:200px;height:200px;overflow:auto;border-width:2px;border-color:000000;border-style:solid;">
<strong>Halo Layout</strong><br>
<style type='text/css'>body{background-color:FFFFFF;background-image:url('http://aycu01.webshots.com/image/12280/2002524089993516905_rs.jpg');background-repeat:repeat;background-attachment:Fixed;background-position:Top
Left;border-color:ff0000;border-width:2;border-style:Ridge;scrollbar-face-color:
cccccc;scrollbar-track-color: 000000;scrollbar-arrow-color: ffffff;scrollbar-shadow-color:
undefined;scrollbar-3dlight-color:undefined;scrollbar-darkshadow-color:undefined;scrollbar-highlight-color:
000000;cursor:url('Paste Url or Choose one Below'), default};color:000000 !important;font-family:Verdana;}table,
tr, td{background:transparent;border:0px;}table table table{border:2 Solid
000000; background-color:}table table table
table{border:0px;border-style:;}table table table td{background-image:url('');background-color:996600;filter:alpha(opacity=99);-moz-opacity:.99;
opacity:.99; -khtml-opacity:99}table, tr, td, th, li, p,
div{font-family:Arial,Helvetica,Sans-Serif;color:000000;font-size:12;font-style:none}.nametext,
.whitetext12, .btext, .orangetext15, .redtext,
.redbtext{font-family:Arial,Helvetica,Sans-Serif;color:993300;font-size:14;font-weight:bold;font-style:none}.blacktext12,
.text,
.lightbluetext8{font-family:Arial,Helvetica,Sans-Serif;color:000000;font-size:12;font-style:none}a:active,
a:visited,
a:link{color:000000;font-family:Arial,Helvetica,Sans-Serif;font-size:12;font-style:none}a:hover{font-family:Arial,Helvetica,Sans-Serif;font-size:12;color:999999;font-style:none}a.navbar:active,
a.navbar:visited,
a.navbar:link{color:000000;font-family:Arial,Helvetica,Sans-Serif;font-size:12;font-style:none}a.navbar:hover{color:999999;font-family:Arial,Helvetica,Sans-Serif;font-size:12;font-style:none}img{border:0;}Table,
Td{background-color:transparent;}table table
table{width:100%;background-color:transparent;}.netlogo{padding-top:0px;position:absolute;z-index:7;width:45px;height:45px;left:95%;top:12px;text-align:center;background-color:transparent;color:E67070;}</style><style
type='text/css'>table table table
td{vertical-align:top}span.blacktext12{visibility:visible !important;background-color:transparent;background-image:url();font-size:12px;letter-spacing:1px;width:435px;height:75px;display:block}span.blacktext12
img{display:none;}</style><div class="netlogo">&nbsp;</div><br>
<style type="text/css"> .contactTable { width:300px !important; height:150px
!important; background-image:url("http://aycu34.webshots.com/image/12673/2002531323961939314_rs.jpg");
background-repeat:no-repeat; background-color:transparent; background-attachment:scroll;
background-position:center center; padding:0px !important;} .contactTable table,
table.contactTable td { background-color:transparent; background-image:none;
padding:0px !important;} .contactTable a img {visibility:hidden; border:0px
!important;} .contactTable .text {font-size:1px !important;} </style><br/><div
style="position:absolute;left:100px;top:45px;width:120px;height:46px;">&nbsp;</div></p>
</div>
Its pretty tricky because myspace thinks it is the layout itself.Thanks in advance Is there any way for me to hide the scroll bar? Any way to lock it? -------------------------------------------------------------------------------- I'm hoping someone has fresher eyes than I do. I've been working on this for nearly 3 hours and just can't figure out what is wrong. the page works great in firefox, chrome, but in IE 7 it does not like me at all. I'm getting no scroll bars and the page stops at one of the fields rather than continuing to the end of the page. Can you help? Here is the page, thanks. http://www.sentrylogin.com/sentry/me...40&Ppl_ID=2977 Laura Hi Guys, l came after a long time with one query... I do have a page it have top header, left images vertically like 1,2,3 top to down and right content. Wat I want:- images should scroll down with the browser scroll bar but the content & header shouldn't scroll. please help me out..... Thanks JB Hello, This is probably a simple question for most but its driving me nuts... I added an iframe to my page and I would like to remove the up and down scroll from the page since its not being used (and just leave the side to side scroll). Take a peak at the page in question: sorry Chris Would apprecaite any comments. Chris A Hughes |
|||||||