Results 1 to 11 of 11

Thread: HTML: Spacing [RESOLVED]

  1. Aug 30th, 2004, 07:20 PM #1
    alacritous
    alacritous is offline

    Thread Starter
    Hyperactive Member alacritous's Avatar
    Join Date
    Aug 2003
    Posts
    464

    Resolved HTML: Spacing [RESOLVED]

    Hello,
    I just forgot, because I havn't done HTML in a while, how to make it so two images are right by eachother.

    For instance, say you have two lines on two different images:
    1 2 (image 1 and image 2) (numbered vertically)
    _ _
    _ _

    I don't want the space.

    Thanks,
    Alacritous
    Last edited by alacritous; Sep 22nd, 2004 at 08:49 PM.
    Reply With Quote Reply With Quote
  2. Aug 30th, 2004, 07:57 PM #2
    Acidic
    Acidic is offline
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    You can use DIVs to absolutely position the images. You'd need to put the right image's left attribute to be the left images left attribute plus the width of the left image.
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  3. Aug 31st, 2004, 06:57 AM #3
    Jop
    Jop is offline
    Frenzied Member Jop's Avatar
    Join Date
    Mar 2000
    Location
    Amsterdam, the Netherlands
    Posts
    1,986
    You should eliminate any margins and padding from the images using a stylesheet:

    Code:
    img{
   margin: 0;
   padding: 0;
}
    That should do the trick.
    Jop - validweb.nl

    Alcohol doesn't solve any problems, but then again, neither does milk.
    Reply With Quote Reply With Quote
  4. Aug 31st, 2004, 04:49 PM #4
    alacritous
    alacritous is offline

    Thread Starter
    Hyperactive Member alacritous's Avatar
    Join Date
    Aug 2003
    Posts
    464
    Hello,
    I don't have a stylesheet because I was just seeing if I could do a rather difficult layout. But, the images are spaced apart a little and can't find out why.

    DIVs are? I don't know how to use them.

    Its HTML btw,
    alacritous
    Reply With Quote Reply With Quote
  6. Aug 31st, 2004, 07:09 PM #5
    Acidic
    Acidic is offline
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    hmm. you don't actually need DIVs, just CSS. ok, make your images like this:
    Code:
    <img class="img1" ...><img class="img2" ...>
    Then have this code in the <head> section:
    Code:
    <style type="text/css">
.img1 {
position: absolute;
left: 150px;
top: 20%;
}

.img2 {
position: absolute;
left: 300px; /* Make this equal to the previous 150+the width of the picture on the left. */
top: 20%;
}
</style>
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  7. Aug 31st, 2004, 08:39 PM #6
    alacritous
    alacritous is offline

    Thread Starter
    Hyperactive Member alacritous's Avatar
    Join Date
    Aug 2003
    Posts
    464
    I don't think that is reasonable...

    All that for EACH image???

    What I am after is a format like www.blizzard.com. They don't use any of that.
    Last edited by alacritous; Aug 31st, 2004 at 09:08 PM.
    Reply With Quote Reply With Quote
  8. Sep 1st, 2004, 07:50 AM #7
    Ecniv
    Ecniv is offline
    Don't Panic! Ecniv's Avatar
    Join Date
    Nov 2000
    Location
    Amsterdam...
    Posts
    5,343
    HTML Basics:
    Code:
    <table cellspacing=0 cellpadding=0>
<tr><td><img src='img1.jpg' /></td><td><img src='img2.jpg' /></td></tr>
</table>
    Try that...

    Read up on CSS / Divs etc


    Vince

    BOFH Now, BOFH Past, Information on duplicates

    Feeling like a fly on the inside of a closed window (Thunk!)
    If I post a lot, it is because I am bored at work! ;D Or stuck...
    * Anything I post can be only my opinion. Advice etc is up to you to persue...
    Reply With Quote Reply With Quote
  9. Sep 1st, 2004, 08:01 AM #8
    Acidic
    Acidic is offline
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    Never ever use tables for layout.

    I originally thought there would only be one instance of this, I now see that this isn't feasible.

    Did you try the CSS that Jop gave?

    Edit: I think I've found the mistake:
    Instead of:
    Code:
    <img src="1.jpg" width="200" height="200">
<img src="2.jpg" width="200" height="200">
    do:
    Code:
    <img src="1.jpg" width="200" height="200"><img src="2.jpg" width="200" height="200">
    (ie, same line)

    2nd edit:
    You can also use the line: margin: -2px; to change the margin, sorting it out.
    Last edited by Acidic; Sep 1st, 2004 at 08:10 AM.
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  11. Sep 1st, 2004, 03:55 PM #9
    alacritous
    alacritous is offline

    Thread Starter
    Hyperactive Member alacritous's Avatar
    Join Date
    Aug 2003
    Posts
    464
    I am STUCK!

    I have tried everything! (and even had most of it before you all suggested)

    <html>
    <head>
    <title>Alacritous Network</title>



    <meta name="keywords" content="Alacritous; software; technology; games; programming; forums; server; team; alac;">
    <meta name="description" content="Alacritous News and Information">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">



    </head>



    <body bgcolor=black class="img" text="#45acf6" link="#45acf6" vlink="#45acf6" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>

    <table cellpadding=0 cellspacing=0 width=100%>
    <td>

    <a href="index.html"><img src="alacritous.gif" alt="Alacritous" border=0 marginwidth=0 marginheight=0></a>
    <img src="menu-spacer.gif" marginwidth=0 marginheight=0>
    <a href="teamalac.html"><img src="menu-teamalac.gif" border=0 marginwidth=0 marginheight=0></a>
    <img src="menu-spacer.gif" marginwidth=0 marginheight=0>
    <a href="mods.html"><img src="menu-mods.gif" border=0 marginwidth=0 marginheight=0></a>
    <img src="menu-spacer.gif" marginwidth=0 marginheight=0>
    <a href="forums.html"><img src="menu-forums.gif" border=0 marginwidth=0 marginheight=0></a>
    <img src="menu-spacer.gif" marginwidth=0 marginheight=0>
    <a href="legal.html"><img src="menu-legal.gif" border=0 marginwidth=0 marginheight=0></a>
    <img src="menu-spacer.gif" marginwidth=0 marginheight=0>
    <a href="index.html"><img src="alacritous.gif" alt="Alacritous" border=0 marginwidth=0 marginheight=0></a>


    </td>
    </table>

    <table>
    <td>

    <table valign=bottom align=left>
    <td>
    <a href="index.html"><img src="page-image.gif" border=0 marginwidth=0 marginheight=0></a>
    </td>
    </table>

    <table valign=top align=right>
    <td>
    <img src="page-news.gif" border=0 marginwidth=0 marginheight=0>
    </td>
    </table>

    </table>
    <td>

    </body>
    </html>
    Disregard all the content, I'm just recreating www.alacritous.ne1.net to look like www.blizzard.com.

    I havn't taken a course of HTML, so, again, disregard my bad coding habits. I have learned everything from books (only in 8th grade)


    EDIT: Very odd, I corrected it by putting it all on one line as you said. Although, many sites don't do that....

    Alacritous
    Last edited by alacritous; Sep 1st, 2004 at 03:59 PM.
    Reply With Quote Reply With Quote
  12. Sep 1st, 2004, 04:19 PM #10
    Acidic
    Acidic is offline
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    so is this resolved now?
    Have I helped you? Please Rate my posts.
    Reply With Quote Reply With Quote
  13. Sep 1st, 2004, 05:43 PM #11
    alacritous
    alacritous is offline

    Thread Starter
    Hyperactive Member alacritous's Avatar
    Join Date
    Aug 2003
    Posts
    464
    Yes.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules


Click Here to Expand Forum to Full Width