tinfanide Posted February 22, 2011 Share Posted February 22, 2011 When I resize the browser (IE8), the text with fixed positioning breaks line; but it doesn't happen in Firefox 3.Is there any way to avoid the content being re-aligned when the browser is being resized? <!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><style type="text/css">p {position:fixed;}</style></head><body><p>HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!HELLO!</p></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted February 22, 2011 Share Posted February 22, 2011 When I resize the browser (IE8), the text with fixed positioning breaks line; but it doesn't happen in Firefox 3.Is there any way to avoid the content being re-aligned when the browser is being resized?try this<style type="text/css">p {position:fixed; white-space:nowrap;}</style> this is because IE treats "!" and other punctuation as whitespace while other browsers do not.if you just remove the "!" you will see it does not wrap.However I presume you will be putting real words with spaces in there so the no-wrap should work well for your final content.So I wonder if there is an official definition of White-Space??Guy Link to comment Share on other sites More sharing options...
tinfanide Posted February 22, 2011 Author Share Posted February 22, 2011 try this<style type="text/css">p {position:fixed; white-space:nowrap;}</style> this is because IE treats "!" and other punctuation as whitespace while other browsers do not.if you just remove the "!" you will see it does not wrap.However I presume you will be putting real words with spaces in there so the no-wrap should work well for your final content.So I wonder if there is an official definition of White-Space??Guy Thank you. Guy. But I have also got another annoying problems with positioning when resizing the browser (even in Firefox).The top right table clashes with the left one (with image). How could I fix it?<!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"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TESTING</title><style type="text/css">.menu { width:100%; background-color:#000;}.menu ul { margin:0; padding:0; float:left;}.menu ul li { display:inline;}.menu ul li a { float:left; text-decoration:none; color:#FFF; padding:10px 11px; background-color:#000;}.menu ul li a:hover, .menu ul li { color:#FFF; background-color:#F0F;}</style></head><body><div class="menu"><ul> <li><a href="#">HOME</a></li> <li><a href="#">NEWS</a></li> </ul><br style="clear: both;" /></div><table width="1040" height="774" style="border-color:#F00; border-width:thick; border-style:solid double; width:500; height:500; position:absolute; top:0; left:0;"><tr><td><img src="http://www.oceanleadership.org/wp-content/uploads/2009/07/whale-shark-with-fish.jpg" /></td></tr><tr><td><p style="font-size:36px;">This is a big shark.</p></td></tr></table><div><table style="position:absolute; top:0; right:0;"><tr><td><p style="font-size:36px; white-space:nowrap;">This is a big shark.</p></td></tr></table></div></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted February 22, 2011 Share Posted February 22, 2011 Thank you. Guy. But I have also got another annoying problems with positioning when resizing the browser (even in Firefox).The top right table clashes with the left one (with image). How could I fix it?there are quite a few things wrong with your code..see below something that is nto quite correct but works<!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"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TESTING</title><style type="text/css">.menu { width:100%; background-color:#000;}.menu ul { margin:0; padding:0; float:left;}.menu ul li { display:inline;}.menu ul li a { float:left; text-decoration:none; color:#FFF; padding:10px 11px; background-color:#000;}.menu ul li a:hover, .menu ul li { color:#FFF; background-color:#F0F;}</style></head><body><div class="menu"><ul> <li><a href="#">HOME</a></li> <li><a href="#">NEWS</a></li> </ul><br style="clear: both;" /></div><!--<table width="1040" height="774" style="border-color:#F00; border-width:thick; border-style:solid double; width:500; height:500; position:absolute; top:0; left:0;">old table def--><table width="1040" height="774" style="border-color:#F00; border-width:thick; border-style:solid double; "><tr><td><img src="http://www.oceanleadership.org/wp-content/uploads/2009/07/whale-shark-with-fish.jpg" /></td></tr><tr><td><p style="font-size:36px;">This is a big shark.</p></td></tr></table><!-- why is this here twice??<div><table style="position:absolute; top:0; right:0;"><tr><td><p style="font-size:36px; white-space:nowrap;">This is a big shark.</p></td></tr></table></div>--></body></html> I removed the second table because I do not understand its purpose---it is behaving as expected...see below. When you position the table ABSOLUTE, it does not SEE the other element hence writes over them...this is normal. I removed the code for that but if you want it absolute, you can just specify a TOP value of 50px or so to clear the menu.You also define the table width twice so I removed from the style.If you want the word SHARK to appear beside the image, then do this <tr><td><img src="http://www.oceanleadership.org/wp-content/uploads/2009/07/whale-shark-with-fish.jpg" /></td><td><p style="font-size:36px;">This is a big shark.</p></td></tr> hope this is helpful........Guy Link to comment Share on other sites More sharing options...
tinfanide Posted February 23, 2011 Author Share Posted February 23, 2011 there are quite a few things wrong with your code..see below something that is nto quite correct but works<!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"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TESTING</title><style type="text/css">.menu { width:100%; background-color:#000;}.menu ul { margin:0; padding:0; float:left;}.menu ul li { display:inline;}.menu ul li a { float:left; text-decoration:none; color:#FFF; padding:10px 11px; background-color:#000;}.menu ul li a:hover, .menu ul li { color:#FFF; background-color:#F0F;}</style></head><body><div class="menu"><ul> <li><a href="#">HOME</a></li> <li><a href="#">NEWS</a></li> </ul><br style="clear: both;" /></div><!--<table width="1040" height="774" style="border-color:#F00; border-width:thick; border-style:solid double; width:500; height:500; position:absolute; top:0; left:0;">old table def--><table width="1040" height="774" style="border-color:#F00; border-width:thick; border-style:solid double; "><tr><td><img src="http://www.oceanleadership.org/wp-content/uploads/2009/07/whale-shark-with-fish.jpg" /></td></tr><tr><td><p style="font-size:36px;">This is a big shark.</p></td></tr></table><!-- why is this here twice??<div><table style="position:absolute; top:0; right:0;"><tr><td><p style="font-size:36px; white-space:nowrap;">This is a big shark.</p></td></tr></table></div>--></body></html> I removed the second table because I do not understand its purpose---it is behaving as expected...see below. When you position the table ABSOLUTE, it does not SEE the other element hence writes over them...this is normal. I removed the code for that but if you want it absolute, you can just specify a TOP value of 50px or so to clear the menu.You also define the table width twice so I removed from the style.If you want the word SHARK to appear beside the image, then do this <tr><td><img src="http://www.oceanleadership.org/wp-content/uploads/2009/07/whale-shark-with-fish.jpg" /></td><td><p style="font-size:36px;">This is a big shark.</p></td></tr> hope this is helpful........Guy Yes, it went as you said, without writing over each other. But another problem arises: without position:absolute/fixed/relative, I cannot define their positions. Say if I want to add something textual at the top right, what can I do then (not as in the second column of the table that contains the shark)? Still feel frustrated with the troubling positioning and overlapping when I resize the browser. HELP! Please! Link to comment Share on other sites More sharing options...
cousineaug Posted February 23, 2011 Share Posted February 23, 2011 Ok time to think outside the box. Actually this time think inside the box.If you are using tables (which i do not recommend) you can position text in cells to your heart's content. You can use COLSPAN and ROWSPAN (look these up if you have not used) to join cells together for formatting.The better/recommended solution is to use the box model and let things fall where you want/need them. The way I do this is to first draw on paper what I want, then verbalize it, then create the DIVs int he right order to do what I want.position issuesabsolute: exact positioning but outside document flow so it can overlap/crash/hide other elementsfixed: non-scrolling (good for headers) and has similar issues to aboverelative: position relative to where they should be but still OCCUPIES THE SAME SPACE as if it had not moved good for micro adjustmentsstatic: default and is preferred for most applicationsnote that positioning is usually relative to the parent element (container) so it is important to position int he right order.float: pushes an element to the left or right side and allows other element to surround the floated elementarmed with those tools, you should be able to create any kind of layout you require. Sometimes you need to create a large DIV that will contain 2-3 other DIV so things position in the order you want.Guy Link to comment Share on other sites More sharing options...
tinfanide Posted March 3, 2011 Author Share Posted March 3, 2011 Ok time to think outside the box. Actually this time think inside the box.If you are using tables (which i do not recommend) you can position text in cells to your heart's content. You can use COLSPAN and ROWSPAN (look these up if you have not used) to join cells together for formatting.The better/recommended solution is to use the box model and let things fall where you want/need them. The way I do this is to first draw on paper what I want, then verbalize it, then create the DIVs int he right order to do what I want.position issuesabsolute: exact positioning but outside document flow so it can overlap/crash/hide other elementsfixed: non-scrolling (good for headers) and has similar issues to aboverelative: position relative to where they should be but still OCCUPIES THE SAME SPACE as if it had not moved good for micro adjustmentsstatic: default and is preferred for most applicationsnote that positioning is usually relative to the parent element (container) so it is important to position int he right order.float: pushes an element to the left or right side and allows other element to surround the floated elementarmed with those tools, you should be able to create any kind of layout you require. Sometimes you need to create a large DIV that will contain 2-3 other DIV so things position in the order you want.GuyHaving taken your notes, I have been surfing the net for more solutions. What I found out is:<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.div1 { [color="#ff0000"]position: absolute;[/color] [color="#ff0000"]top: 0px;[/color] [color="#ff0000"]right: 100px;[/color] background-color: #F00; width: 450px; height: 450px;}</style></head><body><div class="div1">Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br /></div></body></html> Once I set right:100px to left:100px, the div container will not change its shape that the texts inside will not be wrapped even if the browser is resized.But in the above case where right is set, the browser is resized; the div container is changed.It seems that html or css is always in favour of left positioning, against right positioning.The question is: how could the div container that is set right still stand firmly no change even if the browser is resized?Yet, I set the width and height. Fine. No changes of the div container in resizing the browser.But I lost the ability to set the div container on the right of the page. <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.div1 { background-color: #F00; [color="#ff0000"]width: 450px; height: 450px;[/color]}</style></head><body><div class="div1">Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br /></div></body> Still have troubles with having more than one div container on a page.But I think I have to get your help out of the simple positioning problem before moving forward to positioning more than one div container.Please do help answer my question if you know it and if you have time.Many thanks!!! Link to comment Share on other sites More sharing options...
cousineaug Posted March 3, 2011 Share Posted March 3, 2011 Having taken your notes, I have been surfing the net for more solutions. What I found out is:...Still have troubles with having more than one div container on a page.But I think I have to get your help out of the simple positioning problem before moving forward to positioning more than one div container.Please do help answer my question if you know it and if you have time.Many thanks!!! what you need is to place another DIV BESIDE the first oneyou do this by making the first FLOAT LEFT and place the second FLOAT LEFT beside it.that is enough to get you started. However, when the browser is too small, the second will fall below the first. So you enclose the two divs inside a container DIV with a suitable width (width div 1+ width div 2 + margins)try this out<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.container { width:1000px;}.div1 { background-color: #F00; width: 450px; height: 450px; float:left;}.div2{ background-color: #0F0; width: 450px; height: 450px;float:left;}</style></head><body><div class="container"><!--container--><div class="div1">Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br />Content for New Div Tag Goes HereContent for New Div Tag Goes Here<br /></div><div class="div2">second block goes here<br />second block goes here<br />second block goes here<br /></div><!--end block 2--></div><!--end container--></body> You can make things line up with margins and padding inside each DIV as required.Keep adding divs to the right until you have enough boxes, then write your next section OUTSIDE the CONTAINER DIV....hope this helps...Guy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.