|
CSS - Scroll To Bottom Of Div On Page Load...
I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.
Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. Similar TutorialsHi all, Is it possible to automatically scroll the scrollbar to the bottom in the css. This is how you do it in html: var objDiv = document.getElementById("leftHand"); objDiv.scrollTop = objDiv.scrollHeight; Regards, Stephen Hi, I have a site with a large Flash header. I'm trying to remove the scroll bar for the width of the site, but I can't figure out how. you can see the site he my site Any ideas of how to go about this? Can a Flash file be made into a background image? thanks I'm using this code to center an image on a page, and place other images over it. The image stays centered if the window is resized. But there seems to be some space at the bottom of the window that results in a scroll bar. I would like to get rid of that, but so far, no luck. You can see it in action he http://www.siliconsatan.com/CSS_test.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<style type="text/css">
* {
margin: 0;
overflow:none;
}
html {
height: 100%;
background: black;
color: white;
}
body {
position: absolute;
top: 50%;
left: 50%;
width: 442px;
}
div#frame {
position: relative;
top: -258px;
left: -221px;
}
img#background {
display: block;
}
div#button {
position: absolute;
top: 78px;
left: 48px;
}
div#button1 {
position: absolute;
top: 78px;
left: 86px;
}
div#button5 {
position: absolute;
top: 122px;
left: 258px;
}
div#button6 {
position: absolute;
top: 122px;
left: 296px;
}
div#button10 {
position: absolute;
top: 332px;
left: 232px;
}
div#button11 {
position: absolute;
top: 332px;
left: 270px;
}
div#button15 {
position: absolute;
top: 288px;
left: 22px;
}
div#button16 {
position: absolute;
top: 288px;
left: 60px;
}
</style>
</head>
<body>
<div id="frame"> <img id="background" width="442" height="516" src="images/test_image.jpg" alt="">
<div id="button"><a href="#"><img border="0" src="images/blue_one.gif" alt=""></a></div>
<div id="button1"><a href="#"><img border="0" src="images/blue_two.gif" alt=""></a></div>
<div id="button5"><a href="#"><img border="0" src="images/green_one.gif" alt=""></a></div>
<div id="button6"><a href="#"><img border="0" src="images/green_two.gif" alt=""></a></div>
<div id="button10"><a href="#"><img border="0" src="images/red_one.gif" alt=""></a></div>
<div id="button11"><a href="#"><img border="0" src="images/red_two.gif" alt=""></a></div>
<div id="button15"><a href="#"><img border="0" src="images/yellow_one.gif" alt=""></a></div>
<div id="button16"><a href="#"><img border="0" src="images/yellow_two.gif" alt=""></a></div>
</div>
</body>
</html>
i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as: header record1 record2 record3 record4 column1 column1 column1 column1 column1 column2 column2 column2 column2 column2 column3 column3 column3 column3 column3 column4 column4 column4 column4 column4 what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work. Here is the code, its in php but its not big or too hard to figure out. PHP Code: echo '<div id="tableheader">'; for ($i=0; $i<count($info); $i++) { echo '<p>'.$info[$i][name].'</p>'; } echo '</div>'; for ($i=0; $i<count($data); $i++) { if (!($i & 1)) { echo '<div class="even">'; } else { echo '<div class="odd">'; } for ($j=0; $j<count($data[$i]); $j++) { if ($j == 0) { echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>'; } else { echo '<p> '.$data[$i][$j].' </p>'; } } echo '</div>'; } echo '</div>'; ?> </div> and my css is: Code:
#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;}
.even {position: relative; float: left;}
#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black;display: block;}
Any ideas? Thanks Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote: <div id="footer">Data...</div> The declaration of style is Quote: <style type="text/css"> #footer { position: fixed; width: 100%; height: 180px; top: auto; right: 0; bottom: 0; left: 0; } </style> The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page. Help! When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!! Toni Lynne HTML <td width="247" class="splitright"> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Welcome to Joy!</h2> <p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p> <br /> </div></div> </div> </td> CSS /* background box */ .box { background: url(images/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 4%; } .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 4%; } .box h2, .box p { padding-left: 4%; padding-right: 4%; } .splitright { background: #ffffff; width:38%; float: right; overflow: hidden; text-align:justify; } a:link { color: #fea11d; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } I'm using CSS to create a gradient, and all is well except for the bottom of the page: http://www.area51entertainment.co/gradient_problem.png For some reason it's placing a red bar at the bottom of the gradient. Any ideas why? http://www.area51entertainment.co/index.php EDIT: Fixed using the following: Code: background-repeat: no-repeat; background-attachment: fixed; http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. Hi all, I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div. Here is the code I have used: html, body { padding: 0; margin: 0; background-color: #D3D3D3; font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 14px; color: #000000; } #page-container { margin-top: 0; margin-left: auto; margin-right: auto; padding: 0; background-image:url('back.jpg'); background-repeat:repeat-y; text-align: center; width: 800px; } I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?) Any help would be greatly appreciated! Rich i tried searching for this and wasn't able to find any threads. i have a container div with my content, and then i have a footer div that i want to always be at the bottom of the page. i've got it to work in FireFox, but IE is a pain as usual. can anyone look at this and tell me if i'm doing it right and/or what i'm doing wrong? thx. css Code:
#container {min-height: 87%; width:620px; margin: 30px auto; position:relative; text-align: center; clear: both; background-image: url(images/backgroundCol.gif); background-repeat: repeat-y;}
#container_footer { margin:auto; height:50px; width:620px; text-align:center; background:#FF0000; clear:both; position:relative; margin-top: -80px; clear: both; background-image: url(images/footerBackground.gif); background-repeat: repeat-y;}
html Code: <div id="container"> container <br class="clearall" /> </div> <div id="container_footer"> this is the footer <br class="clearall" /> </div> here is the page in action so far http://www.photography139.com/index.html Is there a way to align something from the bottom of the page? Link To Site Dear CSS Guruz If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this? Louis alright I'm stumped so please please please help me out! I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html and this is the code: Code:
html,body {
background-image: url('../images/bg.gif');
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Trebuchet MS";
font-size: 13px;
height: 100%;
}
#center {
text-align: center;
width: 100%;
height: 100%;
}
#container {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
border: 1px solid #B8B8B8;
background-color: #FFFFFF;
text-align: left;
}
thanks for any suggestions! OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS. thanks Hi, I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue. The HTML is as follows: <div id="db-overlay-popup-box" class="overlay-popup-box"> <div id="database-list-popup"><form>....</form></div></div> The CSS used for the div elements is given below. #db-overlay-popup-box { min-height: 200px; height: 400px; position: absolute; width: 40%; margin-left: 30%; top: 15em; border: 2px solid #3282b6; z-index: 999; padding: 10px; background-color: #fff; } #databaselist-databases { list-style-type : none; clear: both; overflow: auto; position: absolute; width: 90%; margin-left: 1em; padding-left: 1em; right: 1em; white-space: nowrap; } .overlay-popup-box { position: absolute; z-index: 999; width: 40%; margin-left: 30%; border: 2px solid #3282b6; padding: 10px; background-color: #fff; } I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? Hello Trying to position an image at the bottom of my webpage which: a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for) b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do) c) I can layer divs on top of so far this is as close as I've got: in the html <!-- container for site info --> <div id="container"> <!-- other content in divs here --> <!-- other content in divs here --> <!-- footer for bottom image --> <div id="footer"> <!-- footer details, who / when / copyright --> <div id="footerdetails"> details here </div> <!-- footer details, who / when / copyright --> </div> <!-- footer for bottom image --> </div> and in the css #container { position: absolute; top: 0px; width: 750px; height: 100%; } #footer { position: absolute; bottom: 0px; height: 230px; width: 750px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: bottom left; } #footerdetails { position: relative; margin: 0px 0px 0px 0px; padding: 9px 0px 10px 70px; top: 195px; width: 680px; text-align: left; voice-family: "\"}\""; voice-family:inherit; } I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this? Thanks in advnace. a+ gar Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you |
|||||||