1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How To Align Website Centrally And Test In Other Browsers/Resolutions?

Discussion in 'HTML & Website Design' started by bad_bob00, May 4, 2010.

  1. #1
    Hi,

    I'm trying to get my website to align centrally but the main content box seems to be displaying on the left by default. Anyone know how I can move it so that it is in the centre of the page more?

    Website is http://www.paidskillgames.com


    Also, does anyone know of a website that allows you to view your website using other browsers and also other resolutions? I have quite a high resolution and wouldn't mind seeing it as it would appear on smaller screens, don't really want to play around with my resolution at the moment because my computer has been playing up, which is why I'm wondering if theres a website that can do the job for me.



    Thanks for any help!
     
    bad_bob00, May 4, 2010 IP
  2. digital29

    digital29 Peon

    Messages:
    462
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Add this in CSS, will work on internet explorer 6 as well
    body {
    text-align: center;
    }

    #container {
    margin: 0 auto;
    text-align: left;
    }
     
    digital29, May 4, 2010 IP
    bad_bob00 likes this.
  3. nfzgrld

    nfzgrld Peon

    Messages:
    524
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Actually, all of that isn't necessary. Don't worry about aligning your text in the body. If the left and right margins of a block element are set to auto it will automatically put it in the center of its container, even if that is the whole screen. There are a couple of ways to do this:
    
    <div style="width:500px;margin:10px auto 10px auto">Content, etc.</div>
    
    Code (markup):
    That will put a 500 pixel wide container in the center of the screen with a 10 pixel margin on the top and bottom. If you don't care about the top and bottom and just want it centered then just do this: "margin:auto". To really do this correctly you'll want to put all your styles in one place, preferably in a separate file, and just call them from there as "class" and/or "ID" attributes. If you want to design web pages you really need to learn CSS. Believe me, it well worth the trouble.
     
    nfzgrld, May 4, 2010 IP
    bad_bob00 likes this.
  4. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #4
    Thanks guys, that's worked fine on my browser :)

    My next question is how can I test it in different browsers/resolutions without playing around with my own resolution or installing different browsers?


    Thanks
     
    bad_bob00, May 5, 2010 IP
  5. MervinJ

    MervinJ Peon

    Messages:
    60
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Two things I use are...

    http://browsershots.org

    Allows test in ALL browsers at most resoultions

    and

    Freeware program
    http://www.mihov.com/sw/en/a8.php

    quick test your own browser at any size
     
    MervinJ, May 5, 2010 IP
    bad_bob00 likes this.
  6. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #6
    also try adobe browserlab. Great for look comparisons across browser and platforms but no interaction.
     
    AtSeaDesign, May 6, 2010 IP
  7. focalpoynt

    focalpoynt Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I always install all the browsers on my own computer so I can use them directly.
    if you resize browsers by dragging the corner, it is a quick way to see how your page shows and reacts.
    i use an ap called optool that is quite handy.
     
    focalpoynt, May 6, 2010 IP
  8. master99

    master99 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    <div style="width:900px;margin:0 auto">Content, etc.</div>
    .
    .
    I found a fantastic Website for really cool HTML/CSS Tutorials

    tutorials99.com

    where all tutorials have a higher page rank and professional
     
    master99, May 7, 2010 IP