DavidY Posted November 19, 2010 Share Posted November 19, 2010 A few months ago I was reading through the W3Schools tutorials on HTML, CSS, XML, JAVASCRIPT, & PHP and I "think" I recall a page that scrolled but the heading with some text remained fixed. I have searched those tutorials recently looking for that page but the best I can find is on http://www.w3schools.com/css/tryit.asp?fil..._position_fixed and I'm now not sure if it was a fixed heading or if my mind started wondering after seeing that page. Can anybody tell me if there is such a function within the tutorials and guide me to it? Link to comment Share on other sites More sharing options...
Dilated Posted November 19, 2010 Share Posted November 19, 2010 A few months ago I was reading through the W3Schools tutorials on HTML, CSS, XML, JAVASCRIPT, & PHP and I "think" I recall a page that scrolled but the heading with some text remained fixed. I have searched those tutorials recently looking for that page but the best I can find is on http://www.w3schools.com/css/tryit.asp?fil..._position_fixed and I'm now not sure if it was a fixed heading or if my mind started wondering after seeing that page. Can anybody tell me if there is such a function within the tutorials and guide me to it?What do you mean exactly? From the sound of it, "position: fixed;" is definitely what you're looking for. Link to comment Share on other sites More sharing options...
DavidY Posted November 19, 2010 Author Share Posted November 19, 2010 What do you mean exactly? From the sound of it, "position: fixed;" is definitely what you're looking for.Thanks Dilated for your prompt response.I would like to have the top of each page fixed, for example looking at the W3Schools page with their logo and some advertising at the top and the tags "W3Schools.com" "Guidelines and Netiquette" "Members" "Calendar" "Help" "Search" and the links "Logged in as: (Log Out)" "My Controls" "View New Posts" "My Assistant" "My Friends" "New Messages" that portion I would like to have fixed and the rest of the page scrollable. Is that possible? Link to comment Share on other sites More sharing options...
ApocalypeX Posted November 19, 2010 Share Posted November 19, 2010 Thanks Dilated for your prompt response.I would like to have the top of each page fixed, for example looking at the W3Schools page with their logo and some advertising at the top and the tags "W3Schools.com" "Guidelines and Netiquette" "Members" "Calendar" "Help" "Search" and the links "Logged in as: (Log Out)" "My Controls" "View New Posts" "My Assistant" "My Friends" "New Messages" that portion I would like to have fixed and the rest of the page scrollable. Is that possible?Yeah, just set the header to position:fixed and it will always be placed at the top of the page even when users scroll. Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2010 Share Posted November 19, 2010 I recommend setting the top and left properties (to zero, if necessary) in addition to the position. Link to comment Share on other sites More sharing options...
DavidY Posted November 20, 2010 Author Share Posted November 20, 2010 I recommend setting the top and left properties (to zero, if necessary) in addition to the position.Thanks ApocalypeX and Ingolme, I'm yet to get my head around CSS but with both your recommendations I can now focus on that subject. I guess by setting the properties to zero you mean,{position:fixed;top:0px;left:0px;}It appears as if I will need to force users to Internet Explorer 7 or higher, can you confirm, and is that possible? I'm aware Javascript can detect a browser but can it stop progressing if the user's browser is incompatible?And if I change the W3School's Tryit Editor to the following I get the scrolled text running through the fixed text, can that be avoided by obscurring the text behind the fixed text?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">p.pos_fixed{position:fixed;top:30px;left:5px;}</style></head><body><p class="pos_fixed">Some more text</p><p><b>Note:</b> Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.</p><p>Some text</p><p>Some text</p><p>Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 20, 2010 Share Posted November 20, 2010 I wouldn't force a user to upgrade. I'd rather make the page render in an acceptable way for browsers that can't use the fixed position. Internet Explorer 6 does not handle fixed position and automatically sets the elements to "static."Don't use Javascript to detect the browser, try conditional comments. You can use them to style the element differently for another browser: <!--[IF lte IE 6]><style type="text/css"> /* Put some style here that's alternative to the current one */</style><[ENDIF]--> Link to comment Share on other sites More sharing options...
DavidY Posted November 21, 2010 Author Share Posted November 21, 2010 I wouldn't force a user to upgrade. I'd rather make the page render in an acceptable way for browsers that can't use the fixed position. Internet Explorer 6 does not handle fixed position and automatically sets the elements to "static."Don't use Javascript to detect the browser, try conditional comments. You can use them to style the element differently for another browser:<!--[IF lte IE 6]><style type="text/css"> /* Put some style here that's alternative to the current one */</style><[ENDIF]--> If I change the W3School's Tryit Editor to the following I get the scrolled text running through the fixed text, can that be avoided by obscurring the text behind the fixed text? If that is not possible there would be no advantage in me pursuing this issue. Link to comment Share on other sites More sharing options...
Ingolme Posted November 21, 2010 Share Posted November 21, 2010 Fixed elements have that problem. They get in front of the other text.A normal solution is to add some padding at the top of the page or first element that's equal or greater than the height of the fixed element. Link to comment Share on other sites More sharing options...
Fmdpa Posted November 22, 2010 Share Posted November 22, 2010 Ingolme, are you sure you want to use "lte ie6"? As far as I know, all IE browsers have this issue (I forget whether IE9 does, though). In that case, you'd want to use the "if IE" conditional comment. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 22, 2010 Share Posted November 22, 2010 Ingolme, are you sure you want to use "lte ie6"? As far as I know, all IE browsers have this issue (I forget whether IE9 does, though). In that case, you'd want to use the "if IE" conditional comment.I can't speak for IE 7 but IE 8 does not have any issues with fixed position (So long as it's running in standards mode). Link to comment Share on other sites More sharing options...
Ingolme Posted November 22, 2010 Share Posted November 22, 2010 Internet Explorer 7 has no problem with fixed position as long as it's not running in quirks mode. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.