snowbrdlover Posted August 13, 2010 Report Share Posted August 13, 2010 Hello all, I want to ask a question concerning my website alignment when i resize the browser window. I use APdivs with absolute position and i dont know how to fix the issue...i found many codes for wrapping but doesnt work. I want my web page to be centered in browser window when i shrink it or in bigger screen resolutions. Thank you, Steve Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 13, 2010 Report Share Posted August 13, 2010 You may be able to do this by wrapping the entire site within a div. For example: <div id="wrapper"> ... your site here... </div> and then adding a bit of CSS: #wrapper { width: 960px; margin:0 auto; position:relative; } You can obviously choose whatever width works for you, and the margin: 0 auto will center the div in the browser window. The position relative should force your absolutely positioned elements to stay within the wrapper div. I can't really give you specific instructions unless you post a link to the site you are talking about, or the HTML/CSS code. Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 13, 2010 Report Share Posted August 13, 2010 Absolute positioning is tricky - and you don't need it to center-align - see this: Center-aligned web pages with CSS Can you post a link to your page or your code, so we can see what you have? Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 13, 2010 Author Report Share Posted August 13, 2010 First off all thank you very much for your fast reply and concern I will link a short piece of code of a new webpage i am trying 2 make, also i forgot to ask if it good also the background image to be resized HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Emmanouil main</title> <link href="emmanouil.css" rel="stylesheet" type="text/css"> </head> <body> <h1>mmanouil</h1> <table border="0"> <tr> <td width="122"><h2> Home</h2></td> <td width="142"><h3>Products</h3></td> <td width="114"><h4>News</h4></td> <td width="130"><h5>About us</h5></td> <td width="65"><h6>Contact</h6></td> </tr> </table> </body> </html> CSS: @charset "UTF-8"; body{ background-image:url(bgfinal2.jpg); background-color:#000; background-repeat:no-repeat; } /*Main logo*/ h1{ position:absolute; top:55px; left:424px; right:450; text-align:center; font:"Arial Black"; font-size:35px; color:#FFF; width: 194px; height: 44px; } h2{font-size:18px; color:#FFF; position:center;} h3{font-size:18px; color:#FFF; position:center;} h4{font-size:18px; color:#FFF; position:center;} h5{font-size:18px; color:#FFF; position:center;} h6{font-size:18px; color:#FFF; position:center;} table{ position:absolute; left:354px; top:115px; width: 606px; height: 38px; border-radius: 10px; background-color: #000; } Thanx in advance! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 13, 2010 Report Share Posted August 13, 2010 I would start with the code I posted above. Keep in mind that after you do that, you may need to adjust the absolutely positioned elements. For example, you probably could remove the position/left/top from table{} in your CSS. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 13, 2010 Author Report Share Posted August 13, 2010 I have tried the code u posted before but with no results... I put the code inside body and outside content right? Also if i remove position or top whould it change the position of the div? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 13, 2010 Report Share Posted August 13, 2010 It does work if you adjust the width of the wrapper, and reset the positioning of the h1 and the table to use top:0 and left:0; Here's an example (the CSS has been moved inside the file, but it belongs in an external file): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Emmanouil main</title> <style type="text/css"> body{ background-image:url(bgfinal2.jpg); background-color:#000; background-repeat:no-repeat; } #wrapper { width: 606px; margin:0 auto; position:relative; } /*Main logo*/ h1{ position:absolute; top:0; left:0; text-align:center; font:"Arial Black"; font-size:35px; color:#FFF; width: 194px; height: 44px; } h2{font-size:18px; color:#FFF; position:center;} h3{font-size:18px; color:#FFF; position:center;} h4{font-size:18px; color:#FFF; position:center;} h5{font-size:18px; color:#FFF; position:center;} h6{font-size:18px; color:#FFF; position:center;} table{ position:absolute; left:0; top:100px; width: 606px; height: 38px; border-radius: 10px; background-color: #000; } </style> </head> <body> <div id="wrapper"> <h1>mmanouil</h1> <table border="0"> <tr> <td width="122"><h2> Home</h2></td> <td width="142"><h3>Products</h3></td> <td width="114"><h4>News</h4></td> <td width="130"><h5>About us</h5></td> <td width="65"><h6>Contact</h6></td> </tr> </table> </div> </body> </html> You'll have to adjust the positioning of the elements to the correct locations. All that being said, I really wouldn't suggest that you try to build a website entirely with absolute positioning. For an occasional element, using absolute positioning may make sense, but not the entire website. It will be tricky to build, difficult to bug check in multiple browsers and even trickier to edit later if you need to change things. You're much better off either letting the elements in the file flow normally (and adjusting the positioning with padding/margin) or using floats. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 14, 2010 Author Report Share Posted August 14, 2010 Thank you very much my friend! U are great! I will follow ur advice for positioning Thank you for ur quick response also and good night Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 14, 2010 Report Share Posted August 14, 2010 You might also want to look at Horizontal Navigation Menu - tables shouldn't be used for layout. Quote Link to comment Share on other sites More sharing options...
snowbrdlover Posted August 14, 2010 Author Report Share Posted August 14, 2010 Thank you Andrea! I will take a look of the link u gave me! Best regards, Steve Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.