SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I center my page?

    Hi,

    How can I center my page (www.cgworkingsolutions.com)at 1024x768 resolutions? (It's aligned left). Created with DW4.

    It looks fine at 800x600.

    It's created in layers for SE optimization.

    Your expert advice please.

    Thank you
    Herman
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to create a 'parent' div and nest everything else inside it.

    See this thread for the 'how-to' for centering it.

    If you only wish to center it horizontally, then you'll only need to use the left position and margin-left attributes from the method shown on that post.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Guru dragonhawk's Avatar
    Join Date
    Apr 2002
    Location
    Melbourne
    Posts
    707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you could just type
    <CENTER>

    other html code here

    </CENTER>

    That works too

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dragonhawk
    or you could just type
    <CENTER>

    other html code here

    </CENTER>

    That works too
    Dragonhawk, I'm not sure if you are aware, but the <center> tag was deprecated in HTML4.

    While it will still work at present, it's not generally a good idea to recommend methods that have already been marked for discontinuation.

    CSS is now the recommended method for centering items.

    Just a thought
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Guru dragonhawk's Avatar
    Join Date
    Apr 2002
    Location
    Melbourne
    Posts
    707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that I did not know. Well, I guess you do learn something new everyday

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Follow-up question

    Thanks for trying to help!

    Where do I place this on the page to center all my layers? (not what's inside the layers)

    #parent {
    left: 50%;
    top: 50%;
    width: 460px;
    height: 520px;
    margin-left: -230px;
    margin-top: -260px;
    }

    I tried putting everything in a table - it centered it well on the 1024 resol but pushed everything to the right on the 800 resol (at least it appears that way in the browser).

    <center></center> centered everything in the layers including text - I don't want this.

    Your advice please - before I go crazy figuring this out

    Regards,
    Herman
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, naming your external CSS file styles.css.txt is wrong.
    The correct suffix for a CSS file is simply .css, so just drop the .txt

    styles.css

    Be sure also to change the link in your HTML to match the new name.

    You can add that parent div style property to that .css file.

    You will also need to change the width and height values to meet your own needs.

    The margin-left and margin-top should be set to -half (negative half) of the width and height respectively.

    The left and top values stay as 50%.

    Then just put...

    <div id="parent">

    ...straight after your opening <body> tag...

    ...and then close the parent div with a </div> just before the closing body tag </body>.

    This should set up the parent div for you and keep it centered when you resize the window.


    Incidentally, you could also reduce the size of your css file by leaving out much of the repetition in some of the attributes.

    Your .css file could be condensed down into...

    Code:
    #parent {
    left: 50%;
    top: 50%;
    width: 460px; 
    height: 520px;
    margin-left: -230px;
    margin-top: -260px;
    }
    
    a {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    }
    
    a.main:link {
    color: #039;
    }
    
    a.main:visited {
    color: #96c;
    }
    
    a.main:hover {
    color: #ccc;
    }
    
    a.main:active {
    color: #f00;
    }
    
    a.navbar:link {
    color: #ff0;
    }
    
    a.navbar:visited {
    color: #96c;
    }
    
    a.navbar:hover {
    color: #ccc;
    }
    
    a.navbar:active {
    color: #f00;
    }
    
    .navbar {
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    color: #0cf;
    }
    
    .main {
    font: bold 16px Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    }
    There's probably some more that could be done to make it even more efficient, but this is what can be done at first glance.


    You could do worse than pop into W3Schools.com and check out their CSS reference that lists each CSS attribute with links to more in depth examples that state whether an attribute can be inherited.

    CSS inheritance is the feature that means you don't need to repeat certain attributes in certain cases.


    Hope this helps
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More clarification please

    Hey thanks Bill - for pointing out such an obvious mistake

    however my page still remains unchanged after putting the parent tag in my style sheet (plus hovering links don't work either on nav bar).

    Here's my test page before I make permanent changes.

    www.ihost-websites.com/test

    Your expert advice please.

    Thank you
    Herman
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could only take a very brief look a that page...

    Layer8 is sitting on top of everything else (z-index:10).
    This is blocking your access to the links.

    Layer8 seems to do nothing, so you may be able to dump it altogether.

    Sorry, I'll try to take anothing look later.

    p.s.
    make sure that you give all the files the correct suffix (including the html files)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A little more help please

    Thanks Bill - I appreciate your expert help
    I removed layer 8

    I had also tried putting a layer(8) around the other layers - no go..

    The purpose of working in layers was to have the text code near the top of the page, however if this can be done with tables - I would probably switch.ie text table first instead of nav table.

    Comments..

    Thank you
    Herman
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting


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
  •