centering objects

[g2k556]

hi, i'm currently designing my own web page. I've got everything looking good on my 22in. monitor, but when i go to a small monitor, it doesn't look quite right, but i guess that the bad part of web design, creating it for all platforms. Here is my web page clicky (http://www.geocities.com/g2k556). So, i want everything to be centered on the page. If i used position : absolute, then left 50%, the left side of the content is in the middle, not the center of the content. How would I get the center of the content to be in the middle, so that it stays in the middle even when you decrease in screen size and resolution. thanks in advance gavin.

[WebJoel]

First off, lose the "position:absolute;", -it is harmful to what you are trying to do here.


Using any valid !doctype:

Create a 'wrapper' element, declare a width (either px or %), and add "margin:0 auto;". This 'centers' the wrapper. And if you opt to use "percent", the wrapper will smoothly re-size for screen widths

[g2k556]

i'm not familiar with using wrapper elements, so could you explain or point me to a tutorial/web page that could explain it to me. Thanks.

[g2k556]

well i went and did some experimenting and as luck would have it, i figured it out. I just got rid of the position absolute and put in margin: 0 auto; and it worked. I'd still like to know a little more about wrappers, i haven't heard the term before, I wouldn't consider myself new to css, but i took like a year and a half break from it, so I've forgotten a lot :/

[Major Payne]

Wrapper is just a good term to use for what it does, but you could use bananas in place of it. :D As long as bananas got styled right, it would work.

Ron

[g2k556]

lol, i like apples better :D well, i thought problem solved, but of course, IE never fails to disappoint. :/ It looks perfect in FF, Opera, and Safari, but then you go to IE and it doesn't work. click the link from the first post to see if you can find out what's wrong, because I looked over the code and didn't find anything wrong myself.

anyone know of a good free web hosting, because I don't like geocities much?

[IL14N4]

The wrapper term refers to generally to a <div> and <span> tags
where they are the containing block of the elements; p, img, form , etc.. tags. If you need more input just ask.

[Major Payne]

I think some versions of IE don't understand auto and you have to add text-align: center; in same class/selector. If it affects the text doing this, then just reset with the content div or whatever you are using to style.

FreeWebs.com (http://members.freewebs.com/) is rather good for free hosting. You will have a blue floating logo at bottom of page, but, if you select one of their more unintrusive logos and place it on the bottom, the next time they crawl your site the floating logo will be removed. There are no ads placed on your pages as long as you log into your account every 30 days.

Bravenet.com (http://www.bravenet.com/) is another good one. They have ads, but they have more web tools and widgets to use.

Ron

[g2k556]

i like freewebs much better, thanks for the suggestion. It actually passes the validation in that one, geocities added junk to mine, so my code passed validation, but then with the geocities stuff it failed. And the little blue thing at the bottom is only visible with IE, i tried it in ff, opera, and safari and it wasn't in any of those. I'm still having issues with IE. It's not the centering, it's that the bottom thing that says for more info contact and has the validate pics. It should be at the bottom of the box, but it appears in the middle, click (http://www.freewebs.com/g2k556) to see.

[Major Payne]

I don't see the problem in FF or IE. Maybe you fixed it, but it appears all at the bottom to me. Do need a little padding at bottom as the @ bumps right up against the border.

Only 3 coding errors: The CSS and Script links need their respective type="" attributes added.

Can't use an empty <p></p> pair. Throw in a non-breaking entity between the tags.

Geocities and Bravenet both have their servers set up to put a lot of script code on your pages. Geocities sticks some of it outside of the HTML tags and removes your set doctype if I remember right. Bravenet has ads, but they don't mess it up too much. It's just their code is so badly written on your page. :p

Ron

[g2k556]

yea i think i figured out why it's not looking right in IE for me. I use IE tab for firefox, and since I'm using firefox 3, the update for it isn't compatible with 3 yet, so i think it's using a later version of ie. I checked on this site that gives you screenshots of what your site looks like in various browsers, and it only looked like that in older versions of ie. So i should be good :D thanks for the help guys.