SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Egypt
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool How can I place my design in the centre of the page

    How can I adjust the design to be in the centre of the page is there any way instead of margins?

  2. #2
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Lots of ways to do it.
    Use CSS Stylesheets like below:
    <style type="text/css">
    body {text-align:center;}
    </style>
    Place the above code in your StyleSheet(without style tags) or in the head tags(as it is).

    Another way to do it is place the following tag after you start the body tag.
    <div align="center">
    & then place the following tag before closing body tag:
    </div>
    Hope that should do it. Other ways are encapsulating your all of the content in a table with single column-single row & aligning it to center. But I wouldn't advice it if you are not desperate or if there's no particular need.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  3. #3
    SitePoint Zealot Packetloss's Avatar
    Join Date
    Aug 2003
    Location
    Behind You
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if your design is in a table just do

    Code:
    <table align="center">
    or as funda mentioned use CSS or wrap them inside a div tag

  4. #4
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    if you want it centered depending on size of the browser window - then I think you can only do that using Javascript... hotscripts.com should have some examples - or try google
    Regular user

  5. #5
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sarah
    if you want it centered depending on size of the browser window - then I think you can only do that using Javascript
    Well, I don't think that if a screen size is small or big, the above mentioned techniques would fail to display the content at the center of the screen, or would they?? Please enlighten me!!
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  6. #6
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The above techniques would horizontally center your content, but not vertically.

  7. #7
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well yeah, oh now I see, that's what Sarah mean't when she said about using javascript for diff screen sizes.
    Guess, I'd have to be a bit quick on getting it.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  8. #8
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Chorley.
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JavaScript isn't really the best way of achieving the centering effect, for 2 reasons:

    1) Some people surf with JavaScript switched off (I do myself, I try to avoid sites that control my web browser).
    2) Some people simply don't utilise JavaScript (PDA users for instance).

    My preferred technique of coding (For presentation purposes in HTML) is CSS, so of course, I would strongly suggest using CSS for the effect you're going for.

    If you want to center (Horizontally & Vertically) your DIV (or image), insert the following code into your style sheet:

    Code:
    #box 
    {
    	position:absolute;
    	left:50%;
    	top:50%;
    	width:100px;
    	height:100px;
    	/* margin-left & top must be half of the corresponding width & height */
    	margin-left:-50px;
    	margin-top:-50px;
    }
    body>#box 
    {
    	/* This must also be half of the width & height! */
    	margin-left:-50px;
    	margin-top:-50px;
    }
    With that code, you can adjust the width and height of your DIV (or image) as much as you like, and then adjust the margins accordingly.

    If it's a DIV you want to center, you would add the following code to your HTML/XHTML:

    Code:
      <div id="box">
        Look at me, I'm centered!
      </div>
    And if it's an image, you would add:

    Code:
      <img src="whatever.whatever" id="box" />
    If you want to center an image, just make sure you adjust the CSS code so that it has the same width & height properties as the source file.

    I hope that helps, and makes sense!

  9. #9
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well, you've hit it right on the nose of the problem Keiran. I was thinking that too, that there must be a way to do that alignment using only css & without JavaScript.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  10. #10
    SitePoint Member KelvinQ's Avatar
    Join Date
    Dec 2003
    Location
    California
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about <center> </center> between body tags ??

  11. #11
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,497
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    <center></center> tags are the same as <div align="center"></div> tags that I mentioned above. Its just that the <div> tag should be used instead of <center> since the latter has some problems in some versions of NN & I don't think that its supported in XHTML.
    I am not sure about the support in XHTML, if somebody else is, they can point it out.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  12. #12
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Keiran, That's just the solution I was looking for myself

  13. #13
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the solution:

    Code:
    body {
    text-align: center;
    }
    #container{
    }
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  14. #14
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the solution:

    Code:
    body {
    text-align: center;
    }
    #container{
    margin: 0 auto;
    }
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Keiran, that's a useful piece of code. I've copied it for my own use. If I ever use it in a live design, I'll credit you.


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
  •