CSS for Clickbank Text ads?

Discussion in 'ClickBank' started by jca, Jul 28, 2009.

  1. #1
    So I'm trying to use the LIST style Clickbank HopAd text ad. (As opposed to the IFRAME version, which breaks our site layout.)

    The LIST version outputs the Clickbank Text Ad as an unordered list for skinning with CSS like this:
    <div class="hopfeed_div">
    <ul class="hopfeed_ul">
       <li class="hopfeed_li">
      	<span class="hopfeed_link"><a href="" rel="nofollow" target="_blank" >Headline</a></span><br/>
    		<span class="hopfeed_desc">Description</span>
       </li>
       <li class="hopfeed_li">
      	<span class="hopfeed_link"><a href="" rel="nofollow" target="_blank" >Headline</a></span><br/>
    		<span class="hopfeed_desc">Description</span>
       </li>
       <li class="hopfeed_li">
      	<span class="hopfeed_link"><a href="" rel="nofollow" target="_blank" >Headline</a></span><br/>
    		<span class="hopfeed_desc">Description</span>
       </li>
       <li class="hopfeed_li">
      	<span class="hopfeed_link"><a href="" rel="nofollow" target="_blank" >Headline</a></span><br/>
    		<span class="hopfeed_desc">Description</span>
       </li>
    </ul>
    </div>
    Code (markup):
    Which you would change using CSS. Unfortunately I can't find any Clickbank examples for using CSS with it's feed, so my best guess at creating a 728x90 Leaderboard ad using the above unordered list output with CSS would be this:
    <style type="text/css">
    .hopfeed_div {text-align:left;background-color:#FFFFFF;width:728px;height:90px;margin:0;padding:0;}
    .hopfeed_header {font-size:9pt;font-family:Verdana, Arial, Helvetica, Sans Serif;}
    .hopfeed_ul {list-style:none;width:728px;margin:0 5px;padding:0;}
    .hopfeed_li {float:left;width:168px;margin:0;padding:5px;}
    .hopfeed_link a {font-size:9pt;font-family:Verdana, Arial, Helvetica, Sans Serif;font-weight:bold;color:#000000;}
    .hopfeed_link a:hover {color:#FF0000;}
    .hopfeed_desc {font-size:8pt;color:#CCCCCC;}
    </style>
    Code (markup):
    Unfortunately the above CSS doesn't work -- the hopfeed_desc <span> tags don't inhert the width, so the descriptions are too wide and don't let each LI element float into 4 equal areas as they should.

    Does anyone know the proper CSS to make the above unordered list flow as an adsense style leaderboard text ad? Or better yet, a location of CSS examples for Clickbank text ads?
     
    jca, Jul 28, 2009 IP
  2. ParthS

    ParthS Peon

    Messages:
    422
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The Hop ad builder is in list view. I'm confused. It's not in iframe.
     
    ParthS, Jul 28, 2009 IP
  3. ParthS

    ParthS Peon

    Messages:
    422
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    When you go to the last step of the hop ad builder, there's a drop down menu at the top where you can choose iframe or list view. Sorry you had to do all this work.
     
    ParthS, Jul 28, 2009 IP
  4. jca

    jca Active Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #4
    Right, you can choose to use either an IFRAME or LIST view of the HopAd. You would choose the LIST view if you would like to skin the ad using CSS. Unordered lists are a common format for changing via CSS -- they do not have to be a bullet ordered vertical list. From the Clickbank HopAd FAQ:

    LIST -- An ordered list output format contained within a div tag. Very easy to skin with CSS for those designers who prefer to avoid tables.

    If you google "css" and "unordered list" you will see lots of examples of what I'm talking about. Unfortunately it appears the way Clickbank is naming it's DIVs in the outputted list in a way that it makes it difficult to target each UL/LI tag properly in the list for formatting via CSS.

    Anyone have any ideas about changing this CSS to work?
     
    jca, Jul 29, 2009 IP