1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do you add spaces between 2 pictures?

Discussion in 'HTML & Website Design' started by Davey Crocket, Aug 21, 2005.

  1. #1
    How do you add spaces between two pictures. I have a website Google Gift and at the top there are four pictures. Right now I have them spaced with a _
    How Do I insert a space inbetween those pictures? I have dreamweaver.
    SEMrush
    Thanks I know this is probably really simply but I'm just learning:)
     
    Davey Crocket, Aug 21, 2005 IP
    SEMrush
  2. fryman

    fryman Kiss my rep

    Messages:
    9,605
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    370
    #2
    Aaarrrhg! My eyes! My eyes!!!!!


    Get rid of that background, dude!
     
    fryman, Aug 21, 2005 IP
  3. namxas

    namxas Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    add a transparent gif image to replace _
    you can see an example here: http://hostrindo.com/images/spacer.gif
    save as the image and insert it between your images,
    you could resize image width as your need
     
    namxas, Aug 21, 2005 IP
  4. ajayr

    ajayr Active Member

    Messages:
    322
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #4
    You can space them with multiple   which will insert a non-breaking space.
    However the better method would be to put the images in a table with its width being equal to the leaderboard below and have four <td> tags, each of whose width equals the total width divided by four.

    Hope it helps.
     
    ajayr, Aug 21, 2005 IP
  5. toocoolforschool

    toocoolforschool Peon

    Messages:
    466
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Good God that's an ugly site. :LOL:
     
    toocoolforschool, Aug 21, 2005 IP
  6. elkiwi

    elkiwi Active Member

    Messages:
    536
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    68
    #6
    <img src="image.jpg" width="227" height="322" alt="" hspace="20" />
    <img src="image.jpg" width="227" height="322" alt="" hspace="20" />
    <img src="image.jpg" width="227" height="322" alt="" hspace="20" />
    Code (markup):

    hspace="20"

    But I'd worry about your design before I try putting images above your adsense.
     
    elkiwi, Aug 21, 2005 IP
  7. Connect

    Connect Guest

    Messages:
    191
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    A few options.

    1. Like the above say, use tables. In the table's <td>, you can specify the width of the <td> to be slightly larger than the image's width.

    2. Use hspace in your <img> tag. Form example, <img src="..." hspace="5"> This will put a 5 pixel spacing. Hspace stands for horizontal space.

    Cheers.
     
    Connect, Aug 22, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Good God, I think I've seen just about everything in this thread so far that one shouldn't do to space images. Use CSS for that (or to space anything else, for that matter):

    <img src="image1.jpg" style="margin-right: 5px;">
    <img src="image2.jpg">

    Use CSS classes if you need to space multiple images.

    J.D.
     
    J.D., Aug 22, 2005 IP
  9. mcfox

    mcfox Wind Maker

    Messages:
    7,527
    Likes Received:
    716
    Best Answers:
    0
    Trophy Points:
    360
    #9
    mcfox, Aug 22, 2005 IP
  10. mightyb

    mightyb Banned

    Messages:
    6,566
    Likes Received:
    405
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Just buy a template lol.
     
    mightyb, Aug 22, 2005 IP
  11. Macbert

    Macbert Peon

    Messages:
    27
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You could try using an online color schemer like this one: www.colorschemer.com/online.html

    The looks might also improve if you would make the table as wide as the ads, and maybe get rid of the space between them. Also consider taking away the borders or at least making them 1 or 2 px solid color using CSS. And while you're at it, you could add some padding for the table and left align the text to improve readability.

    Here's a simple color scheme that should get you in the right direction:
    Page background: #cfc2a1
    Table background: #fcfcfc
    Text outside the table: #45392a
    Text inside the table: #222
    Links: #ac0605
    Titles: #069

    Just play with the colors and eventually you'll get it right ;)

    Oh, and as for your original question; it's recommended to use CSS to space images, just as J.D. mentioned in his post. The hspace attribute was deprecated in HTML 4.01.
     
    Macbert, Aug 22, 2005 IP
  12. JamieC

    JamieC Well-Known Member

    Messages:
    226
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    138
    #12
    Please, please, please do not use spacer gif's, &npsb's or _'s. Use CSS.

    With CSS you can set the margins on your image using the margin attribute.

    img
    {
    margin: 10px 10px 10px 10px;
    }

    that will put a margin of 10 pixels around all images on the page. The order of the values is clockwise from top - top, right, bottom, left. If you want to do something a little more interesting, you could place your image in a <div>, but usually this won't be necessary. You can find out more here: http://www.w3schools.com/default.asp. Good luck!
     
    JamieC, Aug 23, 2005 IP
  13. Davey Crocket

    Davey Crocket Active Member

    Messages:
    690
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    78
    #13
    Haha sorry for My ugly site...its just a temporary mock until I have some time to make it look beautiful. I will change the background color :)
     
    Davey Crocket, Aug 23, 2005 IP