reelhero wrote:

 

ok i redesigned in css but i can get it to center

 

http://brettnicoletti.com/index_2011_css_new.html

 

what am i doing wrong?

You are using the wrong link!!  The correct link, and your starting point should be this:

<http://www.smile-edit.com/index_2011_css_new.html>

You don't want to pull this correct website into your brettnicoletti site.  You will get lung disease with lots of nicotine in the system.

hth

reelhero wrote:

 

thats just the redirect jtanna - doesnt affect my centering problem

There are two ways to center your page:

1) You can set the width of the body and apply the margin like this:

body {

    width: 1060px;

    margin: 0 auto;

    background-color: black;

}

2) You can create a wrapper to your contents and apply these styles:

body {

    text-align: center;

    background-color: black;

}

 

#wrapper {

    text-align: left;

    margin: 0 auto;

    width: 1060px;

}

It all depends on what exactly you are trying to achieve.  Incidentally, your page looks centered on my system but then I am not a perfectionist within pixels of your screen.

hth

Change the wrapper size to 1060px so that it looks like this:

#wrapper {

    text-align: left;

    margin: 0 auto;

    width: 1060px;

}

Your size of 1500px is just too big for all standard screen resolutions and you can't notice if your page is centered or not.

Hope this helps.

I don't mean to confuse this, but in addition to the good answers here, you can also center an absolutely positioned div:

.centered-div {

     position: absolute;

     width: 500px;

     top: 50px;

     left: 50%;

     margin-left: -250px;

}

You set one of the horizontal positions to 50%, then use a negative margin of half the width of the div to pull it back from the direct middle of the page position. This only applies for absolute divs.

 

got it..

 

the css should be

 

div.wrapper

 

not

 

#wrapper

 

http://brettnicoletti.com/index_2011_css_new.html

Not necessarily.  The reason it works in your case is because you have created a class like this:

<div class="wrapper"> =====> you use .wrapper {there is a dot before wrapper here)

What I suggested (advisably) is to use an ID like this:

<div id="wrapper">  ====> you use #wrapper

Hope this clarification helps here.

JTana you need to reexamine this position . Lol. I do agree that positioning multiple divs absoultely to create a website (as some versions of dreamweaver used to create -- I don't know about CS 5.5 yet) are not a good idea. But when you know what you're doing they are very useful for certain tasks. But yeah, I wouldn't use an absolutely positiond div as a main content div, although I don't quite know the drawbacks for that. Do you happen to know one or two reasons?

thanks for the reply Nancy. I think you may be falling victim to the common designer anti-something zealotry. I think there are definite places for absolutely positioned elements on a page. And I still can't think of why a content-wrapper couldn't be absolutely positioned. The contents would still be within a regular wrapper as far as I know. Are there instances where the behavior of absolutely positioned div content changes? There may be some examples. But yes, as you point out (although I didn't look at the link), using multiple absolute divs in various places on the page, may make universal positioning in various browsers and at various window-sizes, difficult.

Thanks for that Murray. I don't want to hijack this thread with "designer debate" so I won't respond in detail, but I think that a wrapper div that is absolutely positioned has no drawback that I know of. It is essentially like creating a smaller window inside the browser window. That is usually like using a sledgehammer to kill a fly as you mentioned. But I suppose there are times when it might be useful.

(Man that "reply to original post" button is tricky. It doesn't work on FF 8.01 on mac -- the content disappears and no text box is displayed.)

Well, let's say you want the entire site to be a 500px box in the bottom right corner of the window. Or let's say you want to have a site that looks like this:

<html>

<body>

A few key search terms or description for screen readers.

<div class="absolutediv-with-opaque-background-to-cover-text>

The real site, maybe with mostly images or flash (maybe this would be a way to have a good alternate site for screen readers when using flash sites).

</div>

</body>

<html>

I don't know if search engines look kindly on sites that have text that is not visible (google doesn't like that white text on white background).

And of course it can be nice to use absolute divs with javascript to show and hide content layers. Maybe using ajax for this is faster?