Displaying Images on Page with CSS

Discussion in 'Web Design and Development' started by zyggiepyggie, Apr 15, 2011.

  1. macrumors member

    zyggiepyggie

    Joined:
    Apr 9, 2010
    #1
    Hi,

    I've been learning HTML & CSS on and off for a few weeks. I'm having trouble getting some images/buttons to display on my site:

    http://jakestubbs.co.uk/

    It's the 'monsters' at the bottom, you'll see what I'm talking about. The images don't adjust when the browser window is re-sized and they appear differently on different resolutions.

    I'm currently using this code in the CSS:

    Code:
    #twitter-logo {
        background-image:url('images/twitter.png');
        display:block;
        height:128px;
        width:128px;
        position: relative;
        top: 426px;
        left: 710px;
    }
    And this in HTML:

    Code:
    <a href="http://twitter.com/jakestubbz" title="Twitter" id="twitter-logo" />
    I'd appreciate any advise anyone can give!

    Thanks.
     
  2. macrumors 6502a

    Hermes Monster

    Joined:
    May 4, 2010
    Location:
    UK
    #2
    The best advice I can give is to install firebug on FF or Chrome, and edit the styles directly in the browser until you figure out what's wrong - it's a great way to learn
     
  3. thread starter macrumors member

    zyggiepyggie

    Joined:
    Apr 9, 2010
    #3
    Thanks, for the quick reply. If I do that though - on say my 13" MBP and get it so it appears correctly and then load the page on a screen with a different resolution they'll be in the wrong place and vice versa...

    Hope that makes sense.
     
  4. celticpride678

    Joined:
    Feb 15, 2009
    Location:
    Boston, MA
    #4
    I think that a main issue is that you're just letting the images float in the <body> tag. Try enclosing them in a <div> tag with a width of 100%.
     

Share This Page