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
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Center Within Div Issue

    Hello, I am having quite the brainfart trying to center some text. I've tried using a <div> and a <p>.

    Any help would be appreciated.

    http://silverskymedia.no-ip.com/portfolio/

    Thanks.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    If you align the text to the right, you'll see where the problem is. The text on top of the centered text (your Constant Contact email form) is being positioned relatively, with a negative top value, to bring it up into the breadcrumb area. But positioning it relatively still reserves the space—for lack of a better term—so even though it's displayed out of the way it's still taking up space where it would normally be, preventing the text from being centered. Make sense?

    Changing this:

    Code:
    <div style="float: right; position: relative; top: -27px; left: -30px;">
    …to this:

    Code:
    <div style="float: right; margin: -27px 0 0 -30px;">
    …should fix it. Hope that helps…

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello silverskymedia,
    This works -
    Code:
    h1.menu {
     color:#ffcc66;
     text-align:center;
     border-bottom:1px solid #fff;
     font-size:2.4em;
     padding-left:10px;
     letter-spacing:.5em
    }
    h2 {
    text-align: center;
    }h3 {
     font-size:1.4em;
     color:#000
    }
    .slogan {
    and
    Code:
    <div id="rightcolumn">
    <div id="breadcrumb">
      <p>
        <a href="/" style="text-decoration: none;">Home</a> | &nbsp;Portfolio
      </p>
      <div style="float: right; position: relative; top: -27px; left: -30px;">
      <!-- BEGIN: Constant Contact HTML for Send Page to Friend  -->
      <div style="float: left; position: relative; top: 7px;"><img src="/images/Email.gif" border="none"></div>&nbsp;<a href="/share/default.asp?url=http://silverskymedia.no-ip.com/portfolio/Default.asp?" class="sendToFriend">Send page to a friend</a>
      <!-- END: Constant Contact HTML for Send Page to Friend  -->
    </div>
    </div>
    
    
        <h2>This should be centered, but it's not!!!</h2>
    
    
    <!-- End Right Column -->
    
    <div class="clear"></div>
    </div>
    I only used h2 because it's not a paragraph...


    Plenty of things to fix if you look at that in the validator!!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, thanks for the responses. rmedek, you were right. using the float did the trick. Thanks for the help and I hope I can remember this in the future.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No problem, but note it wasn't the float, it was the negative margins versus relative positioning.

  • #6
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, I'll note that.


  •  

    Posting Permissions

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