Advanced Search

Results 1 to 7 of 7

Thread: css center an image?

  1. #1
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default css center an image?

    how do I center an image that is in position: absolute;

    trying to center the shadows, to work in both IE and FF.

    www.voigrafic.com/golfsite/

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    Try this:

    Code:
    .container_shadow {
    background:transparent url(http://www.voigrafic.com/golfsite/images/shadow.png) repeat scroll 0 0;
    float:left;
    height:1000px;
    position:absolute;
    right:3.1%;
    text-align:center;
    width:100%;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. The Following User Says Thank You to TheJoshMan For This Useful Post:

    Anexxion (07-30-2008)

  4. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    You could also add this to your "#container" to make it stretch to the bottom:

    Code:
    #container {
    background:#F5F5F5 url(http://www.voigrafic.com/golfsite/images/bg_pat.gif) repeat scroll center top;
    margin:0;
    min-height:100%;
    padding:0;
    width:100%;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. The Following User Says Thank You to TheJoshMan For This Useful Post:

    Anexxion (07-30-2008)

  6. #4
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    doesn't work

  7. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    When you position element absolutely, setting the element to float does'nt makes sense:
    Code:
    .container_shadow {
    background:transparent url(http://www.voigrafic.com/golfsite/images/shadow.png) repeat scroll 0 0;
    float:left;
    height:1000px;
    position:absolute;
    right:3.1%;
    text-align:center;
    width:100%;
    }
    Try t remove highlighted. There's no easy way to center an element that is positioned absolutely, you need to play with the left/top/bottom/right property to get it work.

    One problem is that the element that is positioned absolutely will always be on that position no matter what the screen resolution is, that should be a drawback.

    You might find it useful to set container_shadow div's parent element a relative position.

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  8. The Following User Says Thank You to rangana For This Useful Post:

    Anexxion (07-30-2008)

  9. #6
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    alright thanks that helped, now I have another problem

    how can I align the search button and the textbox together?

    http://www.voigrafic.com/golfsite/

    it is seperated

  10. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Add float:left on search1 and input class in your CSS.

    Hope that helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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
  •