Forum Moderators: open
I'm new to scripting and to the board in general so hopefully you'll be seeing me around often.
I have a slight problem. On a website which I've been trying to create and modify I've realized that absolute positioning with div styles changes with monitor size. So I was wondering what would you guys suggest I do or code to make sure that all the text and images in the middle of the page are centered correctly for every screen.
I've heard that wrapping the absolute in a relative will work, but I'm not exactly sure how to do that. If someone could post a link or maybe tell me what I need to do to fix it that would be great. (On a side note, I know it doesn't include the <!doc> thing at the top [not exactly sure if that will hold any important with this problem anyways])
Also, my email form on my contact page wont work. I can't figure out how to get submit to submit the forms in the appropriate sections of the email or to submit at all for that matter. If someone could help me out that would be great.
Thanks!
[edited by: incrediBILL at 7:51 am (utc) on Dec. 3, 2009]
[edit reason] removed URLs, see TOS #13 [webmasterworld.com...] [/edit]
1. Absolute position is measured from the parent or containing element. If there is none, then yes, the positioning rule's measurement will default to the window itself, which can vary. This is why a containing element helps. You don't necessarily need to declare relative position for the container, either. In many layouts you can just let it default - then it will be "static" and just occur in its natural flow.
2. The email submit challenge may or may not be an HTML problem - it could also be a problem with the server side script that you are submitting to. If you can post the relevant part of HTML (first remove any specifics - see LINKS and posting CODE [webmasterworld.com] we'll be better able to help.
An element gains position when it has it's position set to anything but "static" (which is the default).
In general any element can be a "wrapper" including e.g. <body>.
anyhoo either way, the <!doc> thing at the top is important, as without one IE will be quirks mode and will not be centering properly anyway, and some of the CSS might not be working as you expect..I'd suggest this one for a start
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
OK here's how to center a wrapper element:
CSS:body {
text-align: center; /* to center in some older IE's (wrong way!) */
}#wrapper {
background: #eee; /* just for testing so you can "see" */
width: 700px; /* or whatever your Absolutely positioned div is */
margin: 0 auto; /* tell the browser to give this div equal left and right margins */
text-align: left; /* to reset the text alignment back to default after the IE workaround above */
}sample HTML:
<body>
<div id="wrapper">
***** all other content in here *****
<!--//close #wrapper--></div>
</body>
Then if you're still committed to wanting to use Absolutely Positioned elements inside that #wrapper you can (though there are better ways to center) but you will need to add
position: relative;added
You don't necessarily need to declare relative position for the container,
[edited by: SuzyUK at 2:21 am (utc) on Dec. 4, 2009]
And using the relative inside this wrapper should, in theory, be able to fix the issue of centering that I'm having with the different monitor sizes right?
for images and text, which are normal inline elements, they will center very easily with the text-align: center; on their respective containing elements be it a <div> or a <p>
--
You don't use position: relative; inside the wrapper, you use it on it, but read the bit added to my previous post while you were typing, that might help explain, sorry I realised it was perhaps a little confusing/conflicting.
You only need to use it if this method of centering suits but you still want to continue to try and use position: absolute on elements inside the wrapper. What the code above does is center the whole layout and as the margins are calculated automatically, yes it will center on any size monitor, it, the wrapper, will just have bigger or smaller margins as is required to keep it in the middle.
