Skip navigation
reelhero
Currently Being Moderated

centering without using tables -want to use css

Dec 3, 2011 3:29 PM

i just created a site for a friend

 

i designed in photoshop and saved as slices -

i can get it to center in tables

 

http://brettnicoletti.com/index_2011_table.html

 

but i know css is the better way and i want a slideshow anyway..

 

here it is in css but i dont know how to create a container and center it

 

http://brettnicoletti.com/index_2011_css.html

 

how is the rest of my code?

 

please help - nancy O where are you

 
Replies
  • Currently Being Moderated
    Dec 3, 2011 3:41 PM   in reply to reelhero

    For goodness sake, please don't use FRAMES and FRAMESETS.  You don't need them.  You shouldn't use them. They are no longer supported in HTML5 web standards.

     

    To center a page you need 3 things:

     

    1) a valid document type (DW does this for you when you make a new page)

    2) a container width in pixels, % or ems.

    3) a left and right margin of "auto" (browser default).

     

    CSS:

     

    body {background-color: #000}

     

    #container {

    background-color: #333;

    width: 990px;

    margin: 0 auto;

    border: 3px solid gold;

    }

     

    HTML:

     

    <div id="container">

    your page content goes here

    </div>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 3:56 PM   in reply to reelhero

    did i use framesets in the css example?

    Uh huh.  Not good.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 5:26 PM   in reply to reelhero

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 5:44 PM   in reply to reelhero

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 6:11 PM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 6:27 PM   in reply to reelhero

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 6:35 PM   in reply to reelhero

     

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 6:37 PM   in reply to MTKoan

    MTKoan wrote:

     

    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.

     

     

    Don't ever use an absolute positioning unless you want to create serious problems for you down the line.  this comes from experience of designing websites over the years.

     

    hth

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 3, 2011 6:47 PM   in reply to mytaxsite.co.uk

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2011 11:00 AM   in reply to MTKoan

    I wouldn't use an absolutely positioned div as a main content div, although I don't quite know the drawbacks for that.

    Absolutely positioned elements are removed from the normal document flow.  There's nothing to be gained from doing this to a main content division. Unless you want your layout to be positioned all over the place.  See Page Layout 101

    http://apptools.com/examples/pagelayout101.php

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 8:04 AM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 10:31 AM   in reply to MTKoan

    I think using absolute positioning for layout purposes is not only wrong, it's just completely wrong.  And it's unnecessary.  It's like hitting a fly with a sledgehammer when all that's needed is a finishing hammer.  This is not zealotry, it's good sense and best practice.

     

    By far the biggest problems with absolute positioning when used as a general layout approach are:

     

    1.  If the absolutely positioned element is a content container, when that content is enlarged the corresponding change in size is something about which the rest of the page is unaware, usually leading to a mess with overflowing content.

    2.  Since absolutely positioned elements are removed from the normal flow, they cannot contribute to the overall infrastructure's stability.  The page is rendered as if they weren't even there.  They are like a building block in someone else's layout.  It's a waste of a good tool.

    3.  Since the location of an absolutely positioned element in the code has nothing to do with its placement on the screen, the flow of content on the page is disrupted, and may actually make no sense whatsoever when 'rendered' with a screen reader.  Thus, there is the potential to introduce accessibility issues into your site by the indiscriminate use of absolute positioning.

    4.  In most cases, there is no layout requirement for absolute positioning.  If one doesn't need to use something that can cause unexpected problems, then why would one use it?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 11:20 AM   in reply to MurraySummers

    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.)

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 11:27 AM   in reply to MTKoan

    Yes, at the risk of hijacking I'll ask for one piece of information.

     

    But I suppose there are times when it might be useful.

     

    Can you describe one example when it might be useful?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 11:49 AM   in reply to MurraySummers

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2011 12:01 PM   in reply to MTKoan

    Well, let's say you want the entire site to be a 500px box in the bottom right corner of the window.

     

    Seems an extreme example, but OK.  How oftem have you come across this need - just curious?

     

    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).

     

    That's pretty much death in SEO land.  I wouldn't dare venture into that.

     

     

    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?

     

    But there's no need to make those elements positioned at all is there?  I mean if you are only showing one at a time, then toggling the display style will do the trick without needing positioning.  Where it comes in handy is with something like a Lightbox effect.  But again, that's a specialty application, no?

     

    Anyhow, my point is that as a general purpose layout tool, absolute positioning is not a good choice.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points