Results 1 to 4 of 4

Thread: How to center my design

  1. #1
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to center my design

    Hi guys,

    I'm new here and also new to CSS. I have always designed my static sites using tables and decided to give a go to CSS for a new site I'm working on. My problem at the moment is that my design looks centered on 1024 x 728 but flushed left at higher screen resolutions.

    I have tried to read tuts online and I'm finding it hard to amend the code. Could somebody please have a look at the code and tell me what I need to amend so that the site is always centered irrespective of the screen resolution.

    View the page HERE

    Thanks

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    For some reason, you seem to have tried to invent a new element when what you meant was to use the tag name as an identifier. Change <wrapper> and </wrapper> to <div id="wrapper"> and </div>, respectively.

    For auto left and right margins to centre a block-level element, that element must have a width other than auto. Ideally, that width should be provided using the max-width property, which will allow the element to shrink within small viewports, but if that's not appropriate, the width property itself will do.

    Hope that helps,
    Mike

  3. #3
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK I have changed the <WRAPPER> tag as you specified. Regarding the max-width property how would you write the code for that. Should the width be specified in % or px.

    Also I've been told that I should not use position:absolute. How am I suppose to position page furniture if I do not use absolute?

    Thanks for your help and please bear with me if my questions seem elementary as I am a total novice to CSS.

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by forgottenglory View Post
    Regarding the max-width property how would you write the code for that. Should the width be specified in % or px.
    I said use max-width "ideally". The image you use at the top more-or-less forces use of the width property and px units. However, the site could be reworked a little to be more fluid. In that case, the em unit, which is proportional to font size, would be better.

    On that subject, I'd like to point out that you cannot rely on a specific font size being used. The font size you've specified is too small to be comfortable for me, so my browser (Firefox) forces a minimum font size which leads to overflow of the text. If the design was fluid, this wouldn't matter as the various containers would resize as necessary.

    Also I've been told that I should not use position:absolute. How am I suppose to position page furniture if I do not use absolute?
    Absolute positioning needs to be used carefully, but it's not necessary to avoid it completely. The problem is that it can lead to brittle layouts: rigid, yet also easy to break. Floats are another common way of producing columns.

    The links at the bottom right, for example, could be achieved by floating the images left, and adding a left margin to the text.

    Whilst it's good that you've implemented presentation using CSS rather than presentation markup, you've lost semantics in the process. For instance, the text in the top left box consists of four paragraphs, but there's not a single paragraph (p) element in evidence. Similarly, each box has a heading (which I find difficult to read with such low contrast and small size) but there are no heading (hx) elements. You might want to consider that in future.

    Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •