How do i align these images EXACTLY using a spacer gif?

liunx

Guest
Hi guys.<br />
<br />
I am having second thoughts about my layout.<br />
<br />
if you look here (<!-- m --><a class="postlink" href="http://www.geocities.com/the_disavowed/contact.html">http://www.geocities.com/the_disavowed/contact.html</a><!-- m -->) you can see that the nav images (or spaces for them)on the left get progressively further apart as you look down them.<br />
<br />
At the moment i have em in table cells, but it simply isn't accurate enough.<br />
Can anyone please help show me how to align them with say the spacer gifconfigured to give say 10pix between each one.<br />
I've tried to do it but cant figure how to do it without using '<br>'.<br />
<br />
I need to do this, I don't think I can publish till I have this sorted.<br />
Any help very greatly appreciated.<br />
<br />
<br />
Thanks a lot<br />
<br />
d<!--content-->well being that the images aren't there and all I see is the disabled box, they look aligned to me. :)<br />
<br />
but anyway you make a gif that has nothing in it, however big you want. then you put the spacer on the left of the one you want to space. so you would have<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"spacer.gif"><img src="picture.whatever"> and that moves it over depending on how big the spacer is.<br />
<br />
is that what you were looking for?<!--content-->I've redone the page.<br />
One table with 3 cols,to fit the page.<br />
Left col: menu table<br />
Middle col empty<br />
Right col: content table.<br />
Borders are set to 1, so you can see what i mean.<!--content-->wow!thankyou my friend! i am at work at the mo but i will check it out when i get home thanx!!!!<br />
<br />
<br />
:)<br />
<br />
d<!--content-->Just to expand on what scoutt said,<br />
<br />
you can make a transparent gif image that is one pixel by one pixel, that way it loads very quickly onto the HTML page, then you can use the width and height attributes of the image tag to make the size you need to create the space you want:<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/clear.gif width=10 height=10 hspace=2 vspace=2 border=0><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/clear.gif width=10 height=10 hspace=2 vspace=2 border=0 align=right><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/clear.gif width=2% height=3% border=0><br />
<br />
and so on.....<br />
<br />
Regards,<br />
Kevin<!--content-->cheers guys!<br />
I wish I knew that spacer stuff when i started, but hey I guess it's a learning curve thing right? :)<br />
<br />
Thanx pervI will try to incorpprate what you did into my pages... though if I get stuck I'll be back for help! <br />
Lol<br />
<br />
Say scoutt and kev how'd you use the spacer gif deal if like you wanted a column of as I have of 4 images?<br />
I mean to place the 2nd 3rd and 4th IMG's consecutively below one another you'd still need to use <br> to place those below each other - right?<br />
I think I'm failing to understand something pretty darn fundamental here... which is Peeing me off no end. :mad:<br />
<br />
I appreciate your time, I wsh I wasn't so darn thick!<br />
<br />
d<!--content-->Hi d-stim,<br />
<br />
If you use table code you do not need <br> tags...<br />
<br />
<br />
In your original proposition you could have used a very simple table and used cellpadding=5 to get 10 pixels of space between each image, no need for a spacer gif at all.<br />
<br />
<table width=50 cellspacing=0 border=0 cellpadding=5><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40></td></tr><br />
</table><br />
<br />
or use vspace=5 if you don't want 5 pixels to the left and right of the image as well as the top and bottom of the images<br />
<br />
<table width=40 cellspacing=0 border=0 cellpadding=0><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40 vspace=5 hspace=0 border=0></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40 vspace=5 hspace=0 border=0></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40 vspace=5 hspace=0 border=0></td></tr><br />
<tr><br />
<td><img src=http://www.htmlforums.com/archive/index.php/frog.gif height=40 vspace=5 hspace=0 border=0></td></tr><br />
</table><br />
<br />
Regards,<br />
Kevin<!--content-->Gee I knew it was something really simple - how embarrasing :( <br />
But Kev is it poss to set cellpadding and stuff at the <tr> stage, or does it have to be defined in the table tag.<br />
i.e. could it be like <tr cellpadding=5> etc?<br />
<br />
Reason I ask is I have created this whole bloody site in the one table (newbie I know) and the trouble is it seems that if I play about with it too much it screws up the alignment of the other elements on the page, and therefore gets wrongly aligned compared to the other pages.<br />
<br />
I hope you get my drift!<br />
<br />
Many thanks for your time!<br />
<br />
d<!--content-->no, you can't have the cellpadding in the <tr> tag. sorry :)<!--content-->Hi d-stim,<br />
<br />
scoutt is correct, not in the TR tag with regular old HTML code but with CSS you can set the left, right, top, bottom padding for each and every cell in a table and each one can be different.<br />
<br />
And you can always embed the table code I posted inside of a TD cell of the master table and the formatting will still work...tables...you gotta love them (or hate them as some do) ;)<br />
<br />
Kevin<!--content-->
 
Back
Top