SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how do you center an css image substitution image

    Hi,
    I know how to center an image using css and html where the image source is in the html, but what do I do in this case where I'm trying to center a css image substitution. Here's my code with it not centered:

    .theLogo{
    position:absolute;
    top:10px;
    left:80px;
    width:143px;
    height:165px;
    background:url(images/Logo.jpg);

    }
    #logo a {
    position:absolute;
    top:10px;
    left:80px;
    width:143px;
    height:165px;
    }
    #logo a:hover {
    background:url(images/Logo.jpg) no-repeat 0px 0px;
    }

    --------->XHTML:



    <div class ="theLogo"></div>

    <div id="logo">
    <a href="#"></a> </div>



    this works fine but I can't figure out how to center it. Any help would be great. Thanks. You can see this site at :http://www.eclipsedesign.net/mobile/

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Location
    Pune, Maharashtra, India
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey..
    you can use the 'background-position' property to center the image:
    background-position:center;
    i think it will work for you..

    By the way, i think your website link is not working.....i suppose!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the only thing I'd like to add is that with the above code djsahay mentioned, it will center it vertically AND horizontally.
    Take this line of code
    Code:
    background:url('smiley.gif') no-repeat center top;
    The first value (center) is the horizontal value. The 2nd is vertical. So if you want it vertically centered and not horizontally, do "top center" .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but I couldn't get either of those to work. I'm trying to make a mobile site and make the stuff center to the width of the phone, not just certain phones. If I can't figure it out I'll have to make a site for each phone width you know what I mean. thanks

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What do you mean it doesn't work? It certainly should position it center .

    Take this link for example Clicky :0.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Mar 2012
    Location
    Madurai
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For your mobile sites, you can use javascript css_browser_selector.

    You can refer it through the site here: http://rafael.adm.br/css_browser_selector

    Hope it will help for you

    Thanks
    Mani

  7. #7
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Is everything working now?
    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
  •