Skip navigation
barts5
Currently Being Moderated

Removing white border

Jun 15, 2013 8:05 AM

Tags: #cs3 #dreamweaver

Hello,

 

I am trying to add a small spacer that is 64px high so that elements on my page dont shift when a banner add cycles to the next one.

 

I tried to code it in but it didnt seem to work. Not sure why?

 

I figured I would just add a small .gif placeholder. This seems to serve the purpose. However I cannot get rid of the small white border around the gif.

 

Any thoughts?

 

Thank you!

 

Glenn

 

Here is the URL - http://www.glennbartley.com/

 
Replies
  • Currently Being Moderated
    Jun 15, 2013 1:18 PM   in reply to barts5

    You need to use a transparent image like the one I have attached here:

     

    spacer.gif

     

    Not sure if you can see it but I have uploaded it at this link:

     

    http://www.mytechnet.talktalk.net/spacer.gif

     

    Right-click on the link and then save it.

     

    G/L

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 10:04 PM   in reply to barts5

    Hello Glenn,

     

    in contrast to G/L, I can not recognize this white border. Please send a screenshot for me.

     

    Hans-Günter

     

    P.S.
    Really great photos!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 10:14 PM   in reply to hans-g.

    Hi Hans,

     

    Refer below

     

    gif-white-border.png

     

    I do not think a spacer GIF is the answer here. Spacer GIFs propping table based layouts open is very outdated.

     

    The spacing should be controlled via CSS.

     

    PS: I think G/L means Good luck

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 10:34 PM   in reply to John Waller

    Hi John,

     

    I fear I don't understand the problem. After I was quoting out these gif's and they disappeared, controlling it by using live view.

     

    @ Glenn: Are you sure that there isn't a better place for the links like: Manitoba-Churchill.htm? I must confess, I had to look hard for it, the answer was in your source code. Couldn't you reduce the banner width?

     

    Hans-Günter

     

    P.S.

    Hi John, thanks for G/L! Next time I'll use "Viel Glück!" > "V/G!" in order to internationalize DW forum a little bit.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 5:50 AM   in reply to John Waller

     

    I do not think a spacer GIF is the answer here. Spacer GIFs propping table based layouts open is very outdated.

     

    The spacing should be controlled via CSS.

     

     

     

    Neither do I but if you have read the original post, the OP has used a placeholder spacer.gif which is of wrong type as far as I can see it.  All he needs is to replace it with a transparent one I attached and his problem is solved.  Whether it is a better option for his "shifting images" problem is another matter altogether and requires another post and completely different solution.  that is for another day.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 11:37 AM   in reply to barts5

    I think the banner rotation is far too abrupt and jarring.   Either of these plugins below would produce a much smoother transition without any need for spacer gifs.

     

    Wow Slider with Ken Burns effect

    http://wowslider.com/jquery-slider-bar-kenburns-demo.html

     

    Cycle2

    http://jquery.malsup.com/cycle2/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 12:20 PM   in reply to barts5

    For a completely different approach using Cycle2, copy and paste this code into a new, blank document.  Save as banner-test.html and preview in browsers.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 doc, Cycle2</title>
    
    <!--helpf for older IE browsers-->
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--Cycle2 Slideshow Plugin-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    
    
    <style>
    /**Slideshow**/
    .cycle-slideshow {
    border: 1px solid silver;
    padding:0;
    margin: 0 auto; /**centered**/
    width:953px;
    height:62px;
    }
    </style>
    
    </head>
    <body>
    
    <!--begin slideshow-->
    <div class="cycle-slideshow" 
        data-cycle-slides="> a"
        data-cycle-speed="500"
        >
    <!--your linked images go here-->
    <a href="#">
    <img src="http://www.glennbartley.com/naturephotography/Banner%20Ads/BannerAdd-Books.gif" alt="description">
    </a>
    
    <a href="#">
    <img src="http://www.glennbartley.com/naturephotography/Banner%20Ads/BannerAdd-CostaRica2014.gif" alt="description">
    </a>
    
    <a href="#">
    <img src="http://www.glennbartley.com/naturephotography/Banner%20Ads/BannerAdd-VanIsl2014.gif" alt="description">
    </a>
    
    <a href="#">
    <img src="http://www.glennbartley.com/naturephotography/Banner%20Ads/BannerAdd-Churchill2014.gif" alt="description">
    </a>
    <!--end slideshow--></div>
    
    
    </body>
    </html>

     

    All you need to do is add your own page links to the images.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2013 10:39 AM   in reply to barts5

    <a href="some-page.html">

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2013 12:35 PM   in reply to barts5

    Refer to Cycle2 plugin documention.

    http://jquery.malsup.com/cycle2/api/

     

    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-slides="> a"
        data-cycle-speed="500"

        random="true"
    >

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points