Printable View
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
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.
You should eliminate any margins and padding from the images using a stylesheet:
That should do the trick.Code:img{
margin: 0;
padding: 0;
}
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
hmm. you don't actually need DIVs, just CSS. ok, make your images like this:
Then have this code in the <head> section:Code:<img class="img1" ...><img class="img2" ...>
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>
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.
HTML Basics:
Try that...Code:<table cellspacing=0 cellpadding=0>
<tr><td><img src='img1.jpg' /></td><td><img src='img2.jpg' /></td></tr>
</table>
Read up on CSS / Divs etc
Vince
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:
do:Code:<img src="1.jpg" width="200" height="200">
<img src="2.jpg" width="200" height="200">
(ie, same line)Code:<img src="1.jpg" width="200" height="200"><img src="2.jpg" width="200" height="200">
2nd edit:
You can also use the line: margin: -2px; to change the margin, sorting it out.
I am STUCK!
I have tried everything! (and even had most of it before you all suggested)
Disregard all the content, I'm just recreating www.alacritous.ne1.net to look like www.blizzard.com.Quote:
<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>
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
so is this resolved now?
Yes.