...

View Full Version : gif file alignment



vettenut
11-20-2008, 03:11 PM
I have 6 gif files om web site http://www.classic-corvettes-ky.com/index.htm that appear dropping off from left to right. Is there an easy way to align them so they do not drop off?

tomws
11-20-2008, 04:20 PM
They don't drop off. You have a string of images that decrease in height from left to right which presents the illusion of the "dropping off". You may be able to mitigate the effect by applying a style="vertical-align:middle;" to each img tag. EDIT: I also wrapped the string of images in a containing div with a text-align:center style.

Also, you need to properly close that hit counter script. Script tags needs both open and close tags rather than a self-closing tag.

There are dozens of other issues, but I'll exercise restraint and limit myself to your request.

vettenut
11-20-2008, 04:42 PM
I am not an experience HTML coder, so I do not feel comfortabls with this response. Could you show a sample, please?

tomws
11-20-2008, 05:03 PM
Perhaps someone experienced in using Microsoft products for design will chime in with easier instructions for you. Otherwise, open up the page source in FrontPage or Publisher or whatever it is. Save a copy somewhere else so that if you mess up during editing, you'll have a backup.

Locate this container near the top right after the <body> tag: <div class="style1">

Within that container, you'll see a pair of opening and closing paragraph <p> tags. Skip over them and you'll find 3 <img> tags, followed by an <a>, a <script>, and 3 more <img> tags. This is the block you want to wrap in a containing div.

Before the first <img> tag, enter <div style="text-align:center;">. After the last, enter </div>. Now the string of images is wrapped. EDIT: It may be necessary to also add margin:0 auto; within the style definition. I don't remember. Can't hurt to go ahead and do it, I guess.

For each of the six <img> tags within that container, enter this just before the closing '/>': style="vertical-align:middle;"

Locate the <script> tag in that container. Trace through it until you come to the closing '/>' characters. Remove the '/'. After the '>', enter </script>. This step may not be strictly required, but was necessary in my previous testing to get the last 3 images to appear.

I think those are the only edits I made. Try it out and see what happens.

vettenut
11-20-2008, 05:32 PM
I tried as you suggested and made a mess out of the copied file.

<body style="background-image: url('background.jpg')">

<div class="style1">

<p class="style3" align="center">Classic Corvettes KY<o:p></o:p></p>
<p class="style4">est.&nbsp;&nbsp; November 4, 2008</p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;

<img src="C1%20(converted).gif" width="75" height="70" />
<img src="C2%20(converted).gif" width="75" height="53" />
<img src="C3%20(converted).gif" width="75" height="44" />

<a href="http://xyz.freelogs.com/stats/c/ccky/" target="_top">
<img border="0" alt="hit counter script"
src="http://xyz.freelogs.com/counter/index.php?u=ccky&s=7seg"
ALIGN="middle" HSPACE="4" VSPACE="2"></a>
<script src=http://xyz.freelogs.com/counter/script.php?u=ccky></script>
&nbsp;

<img src="C4%20(converted).gif" width="75" height="48" />
<img src="C5%20(converted).gif" width="75" height="38" />
<img src="C6%20(converted).gif" width="75" height="33" />&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<br></div>

tomws
11-20-2008, 05:38 PM
Ok? Then try again.

vettenut
11-20-2008, 06:39 PM
I did. Still a mess, so I did not save it. I give up.

jhaycutexp
11-21-2008, 09:45 AM
use the list...



<ul>
<li><img src="image"/></li>
<li><img src="image"/></li>
<li><img src="image"/></li>
<li><img src="image"/></li>
<li><img src="image"/></li>
</ul>


then apply proper style like width.. height..
you might want to float the <li> if your doing it horizontally..

crap... you might not get it.. ill just finish it off..



ul {width:500px;
height:50px;
list-style:none; <-- to remove the bullets
}

li {width:50px; <--change this to the width of your image
height:50px; <--change this to the height of your image
float:left; <-- to align them horizontally..
margin: 0 10px; <-- gives some margin/spaces outside the <li>tag
}




have fun..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum