Could someone check out my site and explain why it's showing up like left justified in both firefox and IE without my having changed a single thing? Because basically before I got my new laptop it looked fine, it was centered in the center, and I even came here and posted the link and other people said it looked alright, as well. But now I just got a new laptop and I don't know what changed, maybe I upgraded firefox with it or something, but in both firefox and IE it's off center now just for my sites whereas other sites look normal. Could anyone tell me how I can fix this? Oops, here's the link: http://www.forexautotradingreviewed.com/
I have seen your code and I know what is causing this. On an ordinary screen with screen resolution of 1024 your website will be center aligned as you have specified left margin (126 px) to all layers. When you view this website on your laptop which has more screen resolution it goes to left as your screen is more wide.. You need to change the code. 1: Remove margin left from all layers 2: create a new container div or layer which should start right after body and end right before body. Give this div the accurate width of your website design (750px). This will make your website center aligned.
The <center> tag has been deprecated for some time now. You could try <body style="margin:0 auto;text-align:center;">
the css centering would be body { text-align:center; } #mainDiv { width:800px; /* lets say! */ margin:0 auto; /* Center it */ text-align:left; /* reset content floating */ }
Okay I removed all of the "left" properties from my layers and added a final layer with a width of 750 pixels as recommended, then inserted the div tags for that layer immediately following and preceding the beginning and ending body tags, respectively...yet my site still isn't centered. Everything is aligned completely to the left now (because I removed all of the left values from the layers). Should I be adding other properties and values to this final layer, "Layer 40", beyond the basic width property of 750 pixels? #Layer40 { position:absolute; width:750px; }
Bear in mind that I haven't uploaded any of these changes, I'm just doing them on my dreamweaver. Any ideas? I'm really stumped here. Thanks!
Sorry to bump this again, I'm just really new at this and could use someone explaining it to me. Thanks again!
You are absolutly positioning every element on the page, by doing this you are speicfing the exact place you want the element to appear on the user's monitor. And everybody has different sized monitors, so it's going to appear in different positions on different monitors. So say I have element x: x { position: absolute; left:200px; top:200px; } This element will be 200px from the left and 200px from the top of my monitor and any monitor. Let's say my monitor is 1024px wide and my friends monitor is 800px wide This element will appear 200px from the left, leaving another 824px on the right on my monitor(1024-200). However on my friends monitor it will appear 200px from the left, leaving only another 600px on the right as it has a smaller width (800-200). So obviously the larger the monitor the more to the left the element will seem as it has a larger width. The way around this is not to use absolute positioning when designing websites (apart from special circumstances when you've grasped the concept of other methods). It's better to use natural positioning and floats to position elements on a page. If you want to design for different monitors then it's probably best to use percentages when defining widths, rather than pixels. So say if you give something 100% width, then it will fill up the whole of the monitor regardless of the size.
You aren't specifying units in your CSS. height=770 doesn't make the grade. Probably you mean px. Validate your CSS for that list of errors. Also, validate your html for the error there.
So i'm starting to get the theory wd, thanks. I'm getting that pixels will vary from computer to computer depending on their monitor size and maybe just their settings, but anyways. I'm working with layers, so I'm not sure how to set it up so that my main layer which everything else falls under goes in the middle of the screen to the same size it used to be at, but then everything else still lines up exactly how it was within the page. It feels like maybe some aspects should be set to percentages whereas others shouldn't...I'm not sure. So I should change everything to percentages for the values of height, top, and width? I started doing that but I don't know what percentage values to set, but what about the position aspect, as well. If not absolute, should that be set to relative, or...? Also to DrHoward, I believe it was set as pixels in my CSS. I thought that's why I was having all of these problems to begin with. Thanks for your continued help everyone.
Hi, Setting pixels for widths and heights is fine. This means the element will be fixed at this width or height. Using percentages means that the element will be set at a percentage of the browsers window size. Using either is fine depending on whether you want your layout to adjust to different monitor sizes. However this was not your problem, your problem was that you were adding position: absolute; to all of your elements on the page. This is trying to position everything exactly where you want it, when there is no need to really, especially with a simple 1 column layout as you have. You were saying I want to position this absolutely, 300px from the top and 100px from the left, and I want this 200px from the top and 250px from the left etc. You should let elements flow naturally within the document, without needing to position them, and you can still achieve the same effect. For example consider this version of your page I created: <!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" /> <meta name="description" content="Quality up to date objective reviews of the leading and latest forex auto trading systems." /> <title>Forex Auto Trading Reviewed</title> <style type="text/css" media="screen"> body { background: #333; } /*Style the Header*/ #header { width: 750px; /*Set the width of the header DIV*/ margin: 0px auto; /*This then centers the header DIV on the page*/ font-size: xx-large; font-weight: bold; font-style: italic; text-align: center; background-image: url(http://www.forexautotradingreviewed.com/images/roundedcornr_482599.gif); /*This adds a background image to the header DIV*/ } /* Style the Main Content*/ #content { width: 710px; /*Set the width of the content DIV*/ margin:0px auto; /*This then centers the content DIV on the page*/ font-size: large; background: #FFF; padding: 20px; /*This adds 20px of space (padding) around the DIV*/ } /* Style the Headline*/ .headline { font-size: x-large; color: #000066; font-weight: bold; text-align: center; } /* Style the Footer*/ #footer { width: 750px; /*Set the width of the footer DIV*/ margin: 0px auto; /*This then centers the footer DIV on the page*/ background: #FFF; text-align: center; } /* Style the anchor (a) links within the footer*/ #footer a { font-size: 18px; font-weight: bold; } /* Style the paragraph (p) sections within the footer*/ #footer p{ clear: both; font-size: 12px; padding: 20px 0 20px 0; /*Adds 20px space(padding) to the top and bottom of the paragraph*/ } </style> </head> <body> <div id="header"> Forex Auto Trading Reviewed </div> <div id="content"> <div class="headline">Forex Auto Trading Software Can Turn You Into a Successful Trader In The Forex Market, But Which is Best For You?</div> <p>Whether you're a beginner just getting into the Foreign Exchange (Forex) market or a seasoned veteran who has made and lost thousands, you know how dynamic and complex the market can be. My partner and I personally have been trading in the forex market for years now, long enough to know that anyone who does it is desperate to cut a corner or two if possible. This explains the great abundance of forex auto trading systems and products out on the market today.</p> <p>Unfortunately, most of these programs focus more on style over substance and are only out to capture your dime. The only guaranteed way to find a winning and reliable auto trading system is to try them first hand and that's exactly what we've been doing for years. The products listed here represent the best of what we have found throughout our research as well as what we currently and regularly use today. We will continue to test new products and update this site accordingly as we monitor our progress and gains with each.</p> <b>Continue reading for ratings and individual summaries including the pros and cons associated with each product to determine which is right for you. </b> </div> <div id="footer"> <table width="750" border="0"> <tr> <td width="250"><a href="qanda/QandA.html">Q & A </a></td> <td width="250"><a href="articlelist/articlelist.html">Articles</a></td> <td width="250"><a href="contactus/contactus.html">Contact Us </a></td> </tr> </table> <p>© 2009 Forex Auto Trading Reviewed, with all rights reserved</p> </div> </body> </html> Code (markup): I chose 750px for the width, but this could be changed to whatever number you desire, or even a percentage as discussed above. As you can see it consists of 3 main elements, the header, the content and the footer. They are all set at a width of 750px, and given a margin: 0px auto to center the element on the page. I've tried to make it as basic as possible without introducting too many new concepts but hopefully you can see how it works. Don't use layers as they are a poor way of designing a website, stick to the code view of your editor and write out the HTML and CSS for the page here, don't ever use a "design" view. Once you've picked up the basic concepts it's easy. Please ask if you need any clarification, or further info.