|
HTML - A Bar That Stays Along The Bottom Of The Screen Irrespective Of Scrolling
What HTML code creates a bar that stays at the bottom of the screen, even when the paged is scrolled
Like the Wibiya toolbar does http://wibiyareview.com/ Thanks James Similar TutorialsThis website has a skyscraper banner on the left that stays with you as you scroll down the page. http://www.vcdq.com Can this same effect be used on a skyscraper that's in a wordpress theme's sidebar.php? Hi all, I would like to create a fairly basic site where there are three areas. 1) The Banner which is pinned to the top of the screen. 2) The Main Body which will enlarge dependant on different screen sizes (Both width and depth) 3) The footer which is pinned to the bottom of the screen. The top banner is OK, and the enlarging widthways is OK, but I can't figure out how pin the footer to the bpottom of the screen and enlarge the main body to fill the gap. Any help you can offer is muich appreciated. I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both? Any help is appreciated. This is what I have so far: Code: HTML:
<div style="clear:both;" id="bottom">
<p class="left">Text to go on left.</p>
<p class="right">Text to go on right.</p>
</div>
CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
Hello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? Hi all, I'm trying to find a way to have my webpage scroll to the bottom automatically after the script: document.form1.submit() is called. I need to run the function/refresh in order to reload some different data into part of the page, but after the refresh the position of the page is always at the top... making the user have scroll down again. I could set some anchors or use window.scroll(0.500); on the page load, but i only want it to scroll down if that function of form1.submit() is called - and thats only called once the page has already loaded for the first time. So the first time a user goes to the page, it loads normally at the top of the page. Then they scroll down themselves and select an option. Once the select an option, the form1.submit() is called and the page refreshes with new data in it but is still at the top. Is what I want possible? Thanks, Mike Reference Link: {website taken off for personal reasons} If you visit the link I posted, what I want to happen, is when you click on the tabs Home, Giving Programs, Leave A Legacy or Make a Gift, I want the content of them to appear in the green box that is below the tabs. When you click on the tabs to the right - Events, Home, Home, I want their content to appear in the box that is below those tabs. I have that much figured out - but my question is - when you click on the links on the left, or on the right, the information in the opposite box (from the previous link that was clicked) goes away. Is there anyway to keep the information up in both boxes at all times? Example: If you click on Make a Gift - Tab content 4 here Tab content 4 here shows up in the green box below the tabs. BUT... when you click on Events to the right - TOOOOOOOOOOLS shows up - but 'Tab content 4 here' goes away. PROBLEM - I want 'Tab content 4 here' to stay up. Thanks so much in advance!! hello, everyone I know this is a pretty basic one on the account that it is currently everywhere on the internet now. But you know how you are on a page and you decide to click a link and the PAGE stays the same mean it doesn't reload but the content changes and loads... for example ... facebook... or http://diettogo.com/menu-nutrition/l...an-1600/week-4 when you click week one or week 2 the content changes but the entire layout doesn't reload... what is causing this.. how can I set my llinks up in this way.. is smooth and clean. I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> I'm attempting to insert a image map menu at the bottom of each page, however for some reason there is a 2-4 pixel gap between the menu and the bottom of the table and I can't figure out why. Here is the URL: http://www.knockoutwebsites4u.com/LSC/index.html Thanks for your help in this matter. Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie Hi, I have a very simple HTML. It has an rtl body that includes: * a left aligned table (400 width) * a ul In EE I see both of these elements inside the screen, but in FF2 the ul is displayed outside the screen! I also tried various doctypes. Any idea? Code: <html>
<body dir="rtl">
<table align="left" width="400">
<tr>
<td>In screen</td>
</tr>
</table>
<ul>
<li>Outside of screen in FF</li>
</ul>
</body>
</html>
TIA, Dror Hello, Problem/No Problem, I don't really know. However, it is a problem that I want to get rid off cause it completely annoys me. The problem is, I have set the body width/height to 100%, so the background image is going off screen a little. If I set the width lower, it will most likely leave a white spot in higher resolutions. I took a screenshot so you can see what I mean: Although I don't know if I am explaining correctly, I don't know how else to explain it. I'm sure you will get what I mean. Here is the method I am using in the CSS: Code: body { width: 100%; height: 100%; background: url(images/box.jpg); font-family: 'Arial'; color: white; margin: 4%; }
There is no need to show the HTML, all that's there is me calling the method. Thanks in advance How the screen to divide into four parts a line? Im really not sure if the title of this thread is right. Anyway, i dont know too much about HTML coding, but id like help with something on my .... MySpace haha Alright, so this is my myspace at the moment. www.myspace.com/cj_x3 As you can see, i have links on the sides, done by the following code example; Quote: <div style="width: 78px; height: 22px; position: absolute; bottom:5px;right:15px; background-color: transparent; border-width:0px;border-style:solid;border-color: transparent; font-family: verdana;"> <a href="LINK" style="color: dd4444; font-size: 9px; position: absolute; right: 0px; top: 0px">EXAMPLE LINK TEXT</a> </div> When you scroll down, the links on the sides scroll off the top. I dont like this... What i want to happen, is for them to be fixed, like the background, so when you scroll down, the links around the sides dont move. Thanks for the help in advance my page (http://www.zerofivezero.net/the_project102.html) is scrolling as if there's content down the page, but there isn't...I can't figure it out. I'm using the code below to hide the content and have it swapped when selecting an item from the nav. Code: .hidden {
position:absolute;
z-index:2;
visibility:hidden;
Code: <div id="section3_region" class="hidden"><div class="news"><fieldset>
<legend><img src="images/forum_leg.jpg" width="120" height="28" border="0" alt=""/></legend>
<br /><br />
<div class="img"><img src="images/news_thumb1.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb2.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
<div class="img"><img src="images/news_thumb3.jpg" width="80" height="75" border="1" alt=""/></div>
This is the news section<br />
Yep, this is where the news will be. This will be the short blurb about the story.
</fieldset></div>
Hey all. I have been working on this website that my friend had been designing, and was just wondering if this was possible. The way it is now, the topmost div's are supposed to stay in their position at all times, and the only part that would scroll would be the main body. The two body divs (left and right) have been placed inside the div that should be scrolling. I know there is the css overflow, but the problem is, there is no fixed height on the div, so this method isn't quite right. If anyone knows of a way where we could just start the scrolling at a certain point down the page, that would be great. Here is a link to the page so far - don't worry, it won't look close to that when finished... Image/text placeholders are horrid, I know. http://http://pixelconcepts.zxq.net/ -Thanks in advance. So, I would like to make a one-line textfield that will automatically scroll when too much text is added. So, for example, if I have a field that has room for 20 characters, and someone enters 10 characters, it looks as expected. However, if someone enters 30 characters, only characters 10-30 would be visible. Is this possible? Hello Folks, Okay, I am trying to finally master this. I am working with a CSS Joomla layout that has some flash as main content (for images). I would like for this layout to resize based on the visitors screen size. I've played around with the % in width and so-forth. However my embedded Flash starts to scoot around the page as I change the size of the window. Can someone guide me on exactly how to do this so that "all" the info scales and stays in place. I am assuming that there will be an issue for the site getting really big if the person uses a massive screen (say 27inch plus) In that case how do you limit the size? Any help will be most appreciated. Hello, On my site I've a WMP player, with video streams from other sites. It is possible to watch those video's by clicking a link (for example "BNN at Work"). You first see some add, and after that you can watch the video. Now I've created an option to make the size of the Windows media player bigger by the slidebar above the player. The mention is that the video you're watching will grows to the same size the player has. But this doesn't work :S When you are watching a video and make the player bigger, the video will grow to the size it is streamed on, while the player will grow for x cm. This results in a black list around the video itself. Is there a posibility to stretch the video to the same size as the player? so there is (almost) no black list around the video... Here is the code I use: Code: <object id="mediaPlayer" width="320" height="270" standby="Kijk TV Online.nl" type="application/x-oleobject">
<param name="FileName" value="'. $zenderinfo['bron'] .'">
<param name="AudioStream" value="'. $zenderinfo['bron'] .'">
<param name="TransparentAtStart" value="true">
<param name="AutoStart" value="true">
<param name="AnimationatStart" value="false">
<param name="ShowStatusBar" value="true">
<param name="ShowControls" value="false">
<param name="autoSize" value="false">
<param name="ShowPositionControls" value="false">
<param name="DisplaySize" value="0">
<param name="AudioStream" value="true">
<embed id="mediaPlayer_2" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&"
src="'. $zenderinfo['bron'] .'"
autostart="1"
width="320"
height="270"
transparentatstart="0"
animationatstart="0"
showcontrols="0"
showstatusbar="1"
autosize="0"
DisplaySize="0"
audiostream="1">
</embed>
Best regards, JBtje Hello, im trying to set my screen size with a div tag to 1024x768 any help would be very helpful and i'd be very thankful |
|||||||