Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS percentage centering not in the center!!

    Hello.

    I have a website with the following code:

    <div style="position:absolute; left: 20%; top: 25%; width:611px; height:348px"><img src="yay.jpg"></div>

    If I have the percentage for left and top like that, it seems to be around the center of the page. But if I put both of them at 50%, isnt that meant to center it? Because it seems to put it way down the bottom of the page..

    the website is www.treelightmedia.com

    Thankyou

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <div style="margin: auto; width:611px; height:348px"><img src="yay.jpg"></div>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you use 50% for both top and left the top left corner of the element will be dead center. To make an absolutely positioned element you need to set a negative left margin equal to half the width of the element and a negative top margin equal to half the height of the element.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok im a little confused could you please give me an example?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    background:#000;
    }
    #comingsoon {
    width:611px;
    height:348px;
    background:url(yay.jpg) no-repeat;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-306px;
    margin-top:-174px;
    }
    </style>
    </head>
    
    <body>
    <div id="comingsoon"></div>
    </body>
    </html>
    From looking at your attempt I really recommend that you get a better grasp of HTML/CSS before you start charging people for a website. You should do more tutorials on both HTML/CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Mar 2007
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou .

    Yes well quite frankly I am not sure how much I will be needing to use css in the sites I script. I am already pretty comfortable with html javascript and php but I didnt really put much effort into css.


  •  

    Posting Permissions

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