PDA

Click to See Complete Forum and Search --> : HTML: Spacing [RESOLVED]

alacritous
Aug 30th, 2004, 07:20 PM
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
Acidic
Aug 30th, 2004, 07:57 PM
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.
Jop
Aug 31st, 2004, 06:57 AM
You should eliminate any margins and padding from the images using a stylesheet:


img{
margin: 0;
padding: 0;
}


That should do the trick.
alacritous
Aug 31st, 2004, 04:49 PM
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
Acidic
Aug 31st, 2004, 07:09 PM
hmm. you don't actually need DIVs, just CSS. ok, make your images like this:

<img class="img1" ...><img class="img2" ...>


Then have this code in the <head> section:

<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>
alacritous
Aug 31st, 2004, 08:39 PM
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.
Ecniv
Sep 1st, 2004, 07:50 AM
HTML Basics:

<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
Acidic
Sep 1st, 2004, 08:01 AM
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:
<img src="1.jpg" width="200" height="200">
<img src="2.jpg" width="200" height="200">

do:
<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.
alacritous
Sep 1st, 2004, 03:55 PM
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
Acidic
Sep 1st, 2004, 04:19 PM
so is this resolved now?
alacritous
Sep 1st, 2004, 05:43 PM
Yes.