Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    gif file alignment

    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?

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not an experience HTML coder, so I do not feel comfortabls with this response. Could you show a sample, please?

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.
    Last edited by tomws; 11-20-2008 at 05:06 PM.

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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></o></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>

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Ok? Then try again.

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did. Still a mess, so I did not save it. I give up.

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    use the list...

    Code:
    <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..

    Code:
    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..


  •  

    Posting Permissions

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