Member Avatar for showman13

Hi everyone... hopefully someone can help me with a little advanced knowledge in using CSS to define the placement of a box that will rotate graphics.

Basically what I need to do is define a space in the right column of the web page for graphics to rotate in and make it a link to another page on the site, no matter which graphic is displayed.

I already have the logic for rotating the graphics, which I use to rotate graphics in the center of the page.

I also have the logic for displaying a static graphic using CSS in various places on the page, top left, top right, bottom left, etc...

But what I think I need to do is to be able to combine both of them.

Here is what I use in CSS for positioning a graphic in the top right corner...

#right_top {
position: fixed;
right: 25px;
top: 25px;
width: 140px;
height: 140px;
background-image: url('../images/warranty.png');
background-repeat: no-repeat;
}

And I use jQuery bxslider to rotate the pics on the top of my home page

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    controls: 'false',
    autoHover: 'true',
    pager: false,
    mode: 'fade',
    controls: false,
    auto: true,
    pause: '3000'
  });
});
</script>

What I would like to do is to position rotating graphics from advertisers just below the graphic that I have in the top right corner of the page, which would be linked to an advertisers page that would contain graphic ads for each, linked to their respective websites...

If there is a simple plug in for this, please let me know and save me some time, but short of that, any guidance that you would have to help me accomplish this with what I already have available to me would be greatly appreciated.

BTW, this is the site that I am referring to : www.HCTubs.comClick Here

Thanks in advance,
Douglas

Edited by showman13
  • 2 Contributors
  • 4 Replies
  • 180 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by showman13
Member Avatar for showman13

Just in case you are curious how it works, And it does work great...

To display rotating images in the header, it is a simple matter of doing an unordered list of the images like this:

      <ul class="bxslider">
        <li><img src="images/header_002.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_003.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_004.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_005.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_006.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_007.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_008.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/header_001.jpg" width="300" height="300" border="0" alt="" ></li>
        <li><img src="images/water_logo.png" width="300" height="300" border="0" alt="" ></li>
      </ul>
Member Avatar for showman13

Well, maybe all my visits to this site have finally started paying off in the form of answering my own questions... LOL

I think I have it working just fine.

Here is what I did...
I created a new CSS using the one I listed as a template and just adjusted the top: to 200, and changed the name of the backgorund image (although I don't think one is necessary)

#right_second {
position: fixed;
right: 25px;
top: 200px;
width: 140px;
height: 140px;
background-image: url('../images/partner_sites.png');
background-repeat: no-repeat;
}

Then in the same cell in the display table for the webpage, I added the bxslider unordered list within the div tag for the CSS placement, within a link... (I currently have it linked to my brochure page for testing) But it seems to be working just fine.

    <td align="left" valign="top" width="150" background="../images/150X2Clear.png">
        <div id="right_top"></div>
        <a href="../partner_sites.php">
          <div id="right_second">
            <ul class="bxslider">
              <li><img src="images/header_002.jpg" width="140" height="140" border="0" alt="" ></li>
              <li><img src="images/header_003.jpg" width="140" height="140" border="0" alt="" ></li>
            </ul>
          </div>
        </a>
        <!--Represents spacer in right gutter-->
    </td>

If anyone sees any issues or potential issues with this resolution, please let me know so I can address them.

Thanks for reading my rambling.

Douglas

commented: Sometimes writing the question down sparks ideas. Thanks for adding the solution to help future readers. +5
Member Avatar for veedeoo

You should be rewarded for solving this question. :) Check your skill endorsement...I pretty seldom I stop by in this part of Daniweb. It is not that I can't do all these things, but I found the other side more challenging..

Edited by veedeoo because: info added
Member Avatar for showman13

Thank you for the positive comments and the skill endorsement. Feels good to come up with a solution, but that doesn't mean I won't be asking more questions in the future... As long as I am programming, I am learning, and this place has been one of the best sources I've ever found.

Thank you all for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.