Floating a Picture

Dev Shed Forums Sponsor:

January 27th, 2013, 05:52 PM

lbfergus

Registered User

Join Date: Jan 2013

Posts: 2

Time spent in forums: 2 h 47 m 51 sec
Reputation Power: 0

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!

January 29th, 2013, 03:44 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 17 m 48 sec
Reputation Power: 69

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

January 29th, 2013, 04:51 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,834

Time spent in forums: 6 Months 1 Day 21 h 3 m 17 sec
Reputation Power: 4192

web_loone08, would you mind explaining why you decided to use 3 conditional comments?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

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).

January 29th, 2013, 04:58 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 17 m 48 sec
Reputation Power: 69

Quote:

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.

Floating a Picture

Developer Shed Advertisers and Affiliates