#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Question Floating a Picture


    Hey guys.

    I need some help in a bad way and the CSS forum was of no help. I need to put a floating banner on a page that is CSS to call attention to a "sale". I don't really know CSS or Javascript that well, this is all new to me but I am trying to help out a friend who has done a lot for me. Perhaps it is a Javascript trick that can accomplish this for me? I am just desperate for any help I can get.

    The sites I am working on are:

    Code:
    http://www.american-emergency-products.com
    Code:
    http://www.auto-additions.com
    On both of those pages, I need to put a floating banner, kind of like the "SUBSCRIBE" callout on this page:
    Code:
    http://www.webresourcesdepot.com/smart-floating-banners/
    or the deal in the bottom right corner on this page:
    Code:
    http://demo.joomlashine.com/joomla-templates/jsn_epic/pro/index.php
    I know this must be easy, but everything I have tried thus-far has been unsuccessful. I am open to any ideas.

    PLEASE HELP!! Thank you!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    This should do the trick, but you will have to adjust the CSS (as needed); as it is... I have it set-up for you to view; for this demonstration:

    Code:
    <!doctype html>
    <html>
    <head>
    
    <!--[if !IE]> -->
    
    <style>
    #banner {
    position:fixed;
    width:99.5%;
    text-align:center;
    font-weight:bold;
    font-size:150%;
    font-family:tahoma;
    color:black;
    background:yellow;
    border:solid 2px black;
    overflow:hidden;
    min-width:770px;
    margin-left:-8px;
    margin-top:-16px;
    }
    #banner div {
    padding:10px;
    }
    </style>
    
    <!-- <![endif]-->
    
    <!--[if gt IE 6]>
    
    <style>
    #banner {
    position:fixed;
    width:99.5%;
    text-align:center;
    font-weight:bold;
    font-size:150%;
    font-family:tahoma;
    color:black;
    background:yellow;
    border:solid 2px black;
    overflow:hidden;
    min-width:800px;
    margin-left:-8px;
    margin-top:-16px;
    min-width:770px;
    }
    #banner div {
    padding:10px;
    }
    </style>
    
    <![endif]-->
    
    <!--[if lte IE 6]>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
     $(window).scroll(function () {
      var set = $(document).scrollTop()+"px";
      $('#banner').animate({top:set},{duration:1000,queue:false});
     });
    });
    </script>
    
    <style type="text/css">
    body {
    margin:0 auto;
    }
    #banner {
    position:absolute;
    left:0%;
    top:0%;
    width:99.5%;
    text-align:center;
    font-weight:bold;
    font-size:150%;
    font-family:tahoma;
    color:black;
    background:yellow;
    border:solid 2px black;
    overflow:hidden;
    
    }
    #banner div {
    padding:10px;
    }
    #altBody {
    padding:8px;
    }
    </style>
    
    <![endif]-->
    
    </head>
    <body>
    
    <div id="banner">
     <div>
      Take Advantage of This Sale - SUBSCRIBE NOW!
     </div>
    </div>
    
    <div id="altBody">
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    <p>Demo Content Here</p>
    </div>
    
    </body>
    </html>
    Last edited by web_loone08; January 29th, 2013 at 04:50 AM. Reason: Altered "IE6 And Belows" CSS Conditional Comments
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    web_loone08, would you mind explaining why you decided to use 3 conditional comments?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    Originally Posted by Kravvitz
    web_loone08, would you mind explaining why you decided to use 3 conditional comments?
    You can declare one standard css version without the conditional comments and then add your IE conditional comment styles or you can target specific versions of IE and/or all other browsers. It can be done both ways and you may comment about it using more memory or creating a larger file size; the way I have demonstrated it, but both would be minute. The way I set this up; the OP can target specific versions of IE and then specify how he/she would like it to display in all other browsers. Either way you define the comments (with or without a specified Non-IE Conditional Comment); is acceptable and accessible cross browser. Technically..., you would only need to use one set of conditional comments for IE6 or below; because IE6 and below do not support the CSS float property.

    As a side note to your question; if you write the code, just as I have... with three conditional comments; IE6 will look like this; which is normal visual representation of what I was trying to accomplish:

    Conformatively Imagined Display In IE6

    Otherwise; if you were to declare one standard CSS version without the conditional comments and then add your IE conditional comment styles; you would get a non-normal visual representation of what I was trying to accomplish... hence the floating element would not display, as it was supposed to. You can view the end results below:

    Non-Conformatively Imagined & Irregular Display In IE6

    So... to answer your question... the reason for using three separate conditional comments; is that, in this instance, it is a necessary evil... to create accurate visual cross browser representation of a floating element.
    Last edited by web_loone08; January 29th, 2013 at 06:33 AM.

IMN logo majestic logo threadwatch logo seochat tools logo