SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering Image On Top of Two Images

    How do I get my logo to center on-top-of the two images like so:





    <body style="margin: 0;">

    <div align="center">
    <div style="width: 800px; background: url('bg-logo.jpg') no-repeat; height: 222px;"></div>
    </div>

    <div style="background: url('bg-header1.png') repeat-x; width: 50%; height: 222px; float: left;"></div>

    <div style="background: url('bg-header2.png') repeat-x; width: 49.999%; height: 222px; float: left;"></div>

    </div>




    Middle logo block:


    Left header block:


    Right header block:


    Thanks.

  2. #2
    SitePoint Enthusiast Linkoroo's Avatar
    Join Date
    Jul 2009
    Location
    linkoroo.com
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    place this in the top div you want centered

    position: relative;
    margin:0px auto;
    width:800px;
    left : 50&#37;;
    margin-left: -400px;

    Hope it helps!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Do you mean you want it like this

    LEFT-Middle-RIGHT

    Just switch up your HTML as that would be easier then using relative movements (not like Link said)
    Code:
    <div id="wrapper">
    <div style="background: url('bg-header1.png') repeat-x; width: 3px; height: 222px; float: left;"></div>
    <div style="width: 800px; float:left;background: url('bg-logo.jpg') no-repeat; height: 222px;"></div>
    
    <div style="background: url('bg-header2.png') repeat-x; width:3px; height: 222px; float: left;"></div>
    
    </div>
    Code:
    #wrapper{overflow:hidden;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, yes I want it to be LEFT-MIDDLE-RIGHT. But I want LEFT and RIGHT to fill-out all the space that MIDDLE leaves.

    With Linkoroo's code the MIDDLE block doesn't sit in the same horizontal row as LEFT and RIGHT.

    With Ryan's code the LEFT and RIGHT blocks don't fill out the blank space:



    Like this:



    Let me know if that makes sense.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    AH-middle fixed width and the other two taking up the remaining width?
    http://www.pmob.co.uk/temp/elliott.htm

    Change the background colors to images and repeat-x them.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, it doesn't seem to fully fill-out the remaining width:


  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You will need to combine the image as done in this one and then apply that image to #outer and repeat-y it. Once your image is set up like that then you cna use it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, why are you using inline-styling dude?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I'm not-he had that in his code above. Didn't feel like taking it out.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •