|
HTML - Fixed Header Are There Any Working
Without using an Iframe is it possible to make the header and footer fixed and keep it stable?
I found this site with some ode but it s from years ago and not sure if it is correct way now. here is a link if it is allowed: http://limpid.nl/lab/css/fixed/header-and-footer I figure there is a reason I rarely see anything using a fixed header. Im not sure if I have ever seen a functioning website with a fixed scrollable header ever. My reason for asking is to try and make a site where the navigation stays fixed on top and auction listings will scroll underneath them. Sorry if the link is inappropriate CODE: <!-- IE in quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <title>Fixed header and footer</title> <style type="text/css"> body{ margin:0; padding:header-<length> 0 footer-<length> 0; } div#header{ position:absolute; top:0; left:0; width:100%; height:header-<length>; } div#footer{ position:absolute; bottom:0; left:0; width:100%; height:footer-<length>; } @media screen{ body>div#header{ position:fixed; } body>div#footer{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } </style> <div id="header"> header </div> <div id="footer"> footer </div> <div id="content"> content </div> Similar TutorialsFirst of all im sorry if i double posted but i dunno what to search for and i tried lookin thru the forum b4 i posted .. Well, my problem is im a total beginner (noob) in html/css/javascript codin..but i was doin site to try coding..i divided my site into 4 main sections usin <div> as u can see in the pic (pic at end of ma post), but the my problem is i had to copy the codes of the header and the two menus in every page, then after endin it, i misspelled something in a menu..so had to change it in every page (about 20),so i wanted to make the header and menus each in a file and make them fixed, so i put each in a html and made an iframe and inserted and it worked but (i knw too many buts XD) the side menu was a spry menu..it cant go out of its frame so i had to make it expanded menu So,My question is i wanna do the spry menu..so is there any other way to make the side menu & header each in a document and link it to every page..so when i wanna change something..i can change from one document and it changes all, coz it seems tht iframes tht is the only thing tht gnna work. I knw i wrote alot..sorry >.<..well, i hope u cud help me out..thnx in advance Okay, so. Im completely new here! But I really need help fixing a tumblr theme code. The content/images is scrolling over/infront of the fixed header image, so what would be the code to fix that up? There is no CSS for the header as the original style didnt really include one. The HTML for the header is: <body> <head> <div style="width: 488px; height: 288px; margin: 0 auto; background: url(http://i56.tinypic.com/mwto2t.png) no-repeat top center fixed;"></div> <div id="yes"> <div id="center"> <div id="info"> <a href="/"></a><br><br> Thank you for any help Hi forum, Im new to this community and im developing a webpage and i am facing some problem . When i click on a hyperlink it should be opened in a new window with the header and footer fixed and the content in the body should the new window can any body let me know how to proceed. A CSS or JSP any thingis appreciated so that i can import that external file into my html oage. Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. I have a control on a pop up that i cant seem to get rid of the scroll bars....How do you create a pop up window with no scroll bars I want it to use the scroll bars on the control instead....any help with this issue?? Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. Hi there, I'm trying to create a center column that holds information on my website that is centered to the page, but anchored in place so that if you re-size the window no other instances will overlap. I've taken the time to scrounge around the forum for an answer, but to no avail. I've bounced between using divs and tables for the past few days before finally realizing that I should probably ask for help - I'm a few weeks old to html, so I apologize if my question is somewhat rudimentary. I'm trying to find a way around actually cranking out the numbers and manually placing the images in the center. //EDIT// Here's the code I'm using in the beginning, with css: table { margin-left: auto; margin-right: auto; } And here is my site if you want to see what I mean: www.crazybunny.exofire.net/ Thanks! Hello! I recently uploaded a site I've been working on in Dreamweaver- www.gmerch.net My question is about templates. Currently the page will display with the main content below the nav bar, and not to the right. I suspect this is an issue of having a liquid template and not a fixed one. Am I on the right track here? Is there a way to switch to fixed without having to copy all of the site content into a new document? Thanks! Toby I have a site with text scrolling over a fixed background - mbccc.net - and I want the background to be an imagemap so's I can link from different parts of it. But I can't make it work. I can make an imagemap work alright. But not on a fixed background image. Is it possible or does making the image a 'background' image and 'fixing' it in position mean that it can't be referenced as an imagemap any more? regards, ab Hello, I am new in html, please could you advise with the following? In my page I have a caption and an iFrame where the height is big enough so that the scrollbar is never displayed - deliberately. I can scroll the page including the iFrame content up and down normally - cool. Now I fix the caption. When scrolling, the iFrame content goes over the caption. I want the iFrame content to stay below the caption. How to do this? I don't want to use iFrame scrollbar but the window scrollbar for scrolling. Thank you! HTML Code: <style>
fixed{position:fixed;color:red;}
</style>
<body>
<fixed> <h1>FIXED CAPTION</h1> </fixed>
<br><br><br>
<iframe src="test.html" width=815px height=2000px name="iFrame1" scrolling="auto"
frameborder="0" allowtransparency="true">
</iframe>
</body>
Howdy, I wanted to have a fixed bar at the bottom of website just like Facebook. Can anybody know how to do that? Bar should be customizable as per my requirement. Thanks in Advance. This one has been giving me a headache for days now. I wish to place an image in the background so my text can scroll while the image remains still: <div id ="scroll" style="padding:0px; font-size:0px; overflow:hidden; background-image:url(files/images/b2l.jpg); float:left; height: 480px; width: 360px; color: #FFFFFF; font-family:Arial, Helvetica, sans- serif;"> http://www.muskmagazine.com/wintertrendstest.html This works fine on Safari and Firefox but when viewed on IE6 the image moves along with the text. I have been playing with position:fixed; with no luck. Soon as I get it working on IE6 the image is miss- aligned in Safari/ Firefox. Please someone have mercy! Justin http://junksen.tumblr.com/ i have this blog, and i want the right and left bars to be fixed so that when i scroll down/up, it only scrolls down the middle post area. is there any way to do this? Hi, I'm doing a website and for my link i would like drop-down menus at the top but i want it to stay at the top when you scroll. Can anybody point me to these. I have no idea how to do drop-down menus that look good. Take a look at http://www.runehq.com/ and look at the menus at the top. I would like some like that. Help would be great. Thanks. ToshNeox Hi , I am trying to make a plugin for Mybb Forums and I needed to get the last 10 threads scrolling up , so I used the Marquee Tag . When I tried to view the plugin , I found that half the thread subject only appears while the rest is invisitble(because they don't fit in the box) , so I guessed that the Marquee's width exceeded the width of the table(box) . I tried to make a table inside the Marquee but still didn't work . I need to limit the table's width or the marquee's width so that when the thread's subject is too wide , it starts a new line , not just make the table wider . I hope you can understand what I mean , because I feel I can't understand it . Thanks Alwahsh |
|||||||