Need basic help with CSS [Please]

Discussion in 'CSS' started by Anthony1994, Dec 12, 2010.

  1. #1
    My site: www.reward9.com

    I'm trying to add three images side by side each other above the image slider (the one with the 4 images changing).

    Here's my css template:
    http://www.reward9.com/style.css

    Could anyone shed some light on how to do that? I'd greatly appreciate it.
    Thanks.
     
    Anthony1994, Dec 12, 2010 IP
  2. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #2
    CSM, Dec 12, 2010 IP
  3. Anthony1994

    Anthony1994 Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #3
    can you tell me what css code to use then please?
     
    Anthony1994, Dec 12, 2010 IP
  4. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #4
    Your code is a mess mate, I suggest you clean it up.

    Im assuming its these images here?

    http://www.reward9.com/images/step1.png

    They are each 260px across, so 3 of them make 780px, plus the arrows, each 30px, therefore you will need to create a div 870px wide and 170px high, it will sit nicely in the horizontal center of your page, then just insert the images using <img>, there shouldn't be any padding at all, and the images should theoretically line up horizontally along the div.
     
    jeremyhowell, Dec 12, 2010 IP
  5. Anthony1994

    Anthony1994 Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #5
    no im talking about the 3 images at the bottom.
     
    Anthony1994, Dec 12, 2010 IP
  6. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #6
    The follow us buttons? The principle is exactly the same.
     
    jeremyhowell, Dec 12, 2010 IP
  7. Anthony1994

    Anthony1994 Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #7
    could you give me the code as I[ve been stuck on this problem for hours. It'd greatly be appreciated and I will use the information in the future,
    thanks
     
    Anthony1994, Dec 12, 2010 IP
  8. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #8
    <div style="width:537px; height:79px;">
      <img src="./Reward9.com   It's time to shop for free!_files/steps.png">
    
      <img src="./Reward9.com   It's time to shop for free!_files/follow.png">
    
    
      <img src="./Reward9.com   It's time to shop for free!_files/fb1.png">
    
    
      <img src="./Reward9.com   It's time to shop for free!_files/yt2.png">
    
    
      <img src="./Reward9.com   It's time to shop for free!_files/twitter3.png">
    </div>
    Code (markup):
    You will probably have to put the rest of your site in appropriate divs or this hurt the layout.
     
    jeremyhowell, Dec 12, 2010 IP
  9. Anthony1994

    Anthony1994 Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #9
    the only reason im not doing them in a 537x79 img is because i need to add links in each img. cna i still do links with the above code
    and thankyou
     
    Anthony1994, Dec 12, 2010 IP
  10. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #10
    Yes of course, shouldn't be a problem with what I have given you, just add an <a> tag to each image if you have to, but I seriously recommend that you restructure your site using divs instead of line breaks and paragraphs.
     
    jeremyhowell, Dec 12, 2010 IP
  11. Anthony1994

    Anthony1994 Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #11
    thanks a lot 4 ur help
     
    Anthony1994, Dec 12, 2010 IP
  12. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #12
    No problem mate.
     
    jeremyhowell, Dec 12, 2010 IP
  13. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #13
    This code is very bad...

    With adding this "invalid" code you increase your (X)HTML errors to 70...

    Your DOCTYPE is XHTML 1.0 Strict.

    The code should look like this:

    
    <div style="width:537px; height:79px;">
    <img src="./images/fb1.png" title="Our Facebook site" alt="Reward9 Facebook site" width="xxx" height="yyy" />
    <img src="./images/yt2.png" title="Our YouTube site" alt="Reward9 YouTube site" width="xxx" height="yyy" />
    <img src="./images/twitter3.png" title="Follow Reward9 on Twitter" alt="Follow Reward9 on Twitter" width="xxx" height="yyy" />
    </div>
    
    Code (markup):
    I would not recommend using CSS tags inline. Anyway...

    Giving people the wrong (X)HTML/CSS code is a bad way of "teaching"...

    Besides that, your images link to ... nowhere. 404 errors (bad). If you want them to link to a site, use this code:

    
    <div style="width:537px; height:79px;">
    <a href="http://www.facebook.com/yoursite"><img src="./images/fb1.png" title="Our Facebook site" alt="Reward9 Facebook site" width="xxx" height="yyy" /></a>
    <a href="http://youtube.com/yoursite"><img src="./images/yt2.png" title="Our YouTube site" alt="Reward9 YouTube site" width="xxx" height="yyy" /></a>
    <a href="http://twitter.com/yoursite"><img src="./images/twitter3.png" title="Follow Reward9 on Twitter" alt="Follow Reward9 on Twitter" width="xxx" height="yyy" /></a>
    </div>
    
    Code (markup):
    Change the following

    xxx = width of image
    yyy = height of image
    yoursite = self explaining, no?
     
    CSM, Dec 13, 2010 IP