Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Learning and taking my first few steps at hand coding and CSS instead of using DreamWeaver.
    I have a start of a page, here: www.17minutes.f2s.com/Tich.htm

    I would like to have the "Enter" centered horizontally but can't get the code right so am using the "left" function of absolute positioning which is not ideal.
    my code is here:
    Code:
    <style type = "text/css">
    body {
        color: #FFFFFF;
        background-color: #000000;
        }
    
    #bottomtich    {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 360%;
    position: absolute; left: 30%; bottom: 2%;
                }
    
    #bottomvango {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 360%;
    position: absolute; right:30%; bottom: 2%;
                 }
    
    #enter        {
    font-family:Arial, Helvetica, sans-serif;
    font-size:200%;
    color: #282828;
    position: absolute; left:47%; bottom: 2%;
                }
    </style>
    
    </head>
    
    <body>
    <div id="bottomtich">
    Tich
    </div>
    <div id="bottomvango">
    Vango
    </div>
    <div id="enter">
    Enter
    </div>
    </body>
    I've used Div's so I can position the text and the "Enter" will be a link into the rest of the site.
    Like I say, early steps so if I'm going majorly wrong please sort me out now.
    Cheers, Lol

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Code:
    div#enter {
    text-align:  center;
    }
    ...
    <div id="enter"><span><Enter</span></div>
    The span often "cheats" and centers the text within it.
    LavaEagle likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Okay I tried that but this is the result: http://www.17minutes.f2s.com/Tich.htm

    here is the code as it stands:
    Code:
    #enter        {
    font-family:Arial, Helvetica, sans-serif;
    font-size:200%;
    color: #282828;
    text-align: center;
    position: absolute; bottom: 2%;
                }
    
    <div id="enter">
    <span>Enter</span>
    </div>
    Am I not entering something correctly?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Set width: 100%;.
    Lol999 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks it works. How does that work though?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Well, the oversimplified explanation is that it centers the text inside of the div based on its predefined width (in this case, the width of the page).
    Lol999 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Member Sault Web Design's Avatar
    Join Date
    Apr 2011
    Location
    Sault Ste Marie, Ontario Canada
    Posts
    36
    Member #
    27402
    Liked
    3 times
    you could set a defined width instead of 100% as well if you wanted it centered just for that div and not the entire page using that code too

  9. #8
    Junior Member
    Join Date
    Apr 2011
    Location
    Traverse City, MI
    Posts
    11
    Member #
    27445
    Liked
    3 times
    Basically in order for it to understand where the center is you have to define the width of what you are wanting to center. I like to use defined widths instead of the percentages just so I know exactly how big something is going to be instead of using a screen size percentage.

  10. #9
    Member Sault Web Design's Avatar
    Join Date
    Apr 2011
    Location
    Sault Ste Marie, Ontario Canada
    Posts
    36
    Member #
    27402
    Liked
    3 times
    I find it generally best to use defined widths confined within a div with 100% that way your site always apears the way you want it to but can still adapt to other resolutions


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com