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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a div tag

    I am building a web page and have 3 div tags that I'm trying to center. The web page is a conversion from psd to html and I used Photoshop to convert the file to html. I am also using CSS for a few of the elements on the page. The problem I'm having is that the 3 div tags are showing aligned left and aren't auto aligning when people open the page. Here is the html for the section as it stands now:

    Code:
    <DIV STYLE="position:absolute; top:143px; margin-left:auto;margin-right:auto; width:533px; height:98px; font: Franklin 'Franklin Gothic Demi Cond';"">
    <FONT SIZE="4" COLOR="#FFFFFF">This is an editable area</FONT>
    </DIV>
    I've tried several versions of this code and can't seem to get the box centered. Can anyone assist with this?

    Thank you

    Doug

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Please post a link to the page in question.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Yep, we need to see your whole page for best results. BUT, before that, you will need to run your HTML through the HTML validator and clean up all of the errors and warnings associated with your HTML code. CSS is not fully reliable when applied to invalid HTML and if you wrestle the CSS into submission first and then validate the HTML later you end up having to do the CSS all over again anyway.

    So... the first step is to validate the HTML that photoshop created for you, and the second step is post a link to your page.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Regular Coder ajetrumpet's Avatar
    Join Date
    Jul 2009
    Location
    Iowa City, IA
    Posts
    407
    Thanks
    44
    Thanked 5 Times in 5 Posts
    wouldn't an attribute align be fine?

    Code:
    <DIV align="center" STYLE="position:absolute; top:143px; margin-left:auto;margin-right:auto; width:533px; height:98px; font: Franklin 'Franklin Gothic Demi Cond';"">
    <FONT SIZE="4" COLOR="#FFFFFF">This is an editable area</FONT>
    </DIV>
    just a thought. maybe the wrong one. isn't that available?


  •  

    Posting Permissions

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