Please help me with the code I provided for 2 banners

9 replies
I want to have these 2 banners side by side so one should have align left (or whatever the code for align left is) and the other align right ... right?

Here's the code for both banners. Please correct them as I mentioned above so they'll turn out side by side when I put them in a widget on wordpress.

<p><a target="_blank" href="http://www.dupliterminator.com/go.php?offer=dt71091&pid=1">
<img border="0" src="http://dupliterminator.com/images/banners/160-600-2.gif" style="border-style: solid; border-width: 1" width="160" height="600"> </a>

</p><a href="http://codi3.trafficfb.hop.clickbank.net" _cke_saved_href="http://codi3.trafficfb.hop.clickbank.net" target="_blank"><img src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" _cke_saved_src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" width="120" height="600" border=0></a>

Thank you! :confused:
#banners #code #provided
  • Profile picture of the author Quad312
    Your </p> is between the two banners, not at the end. <p> </p> creates a block of content with a line break at the end, so putting </p> in the middle of the two banners will put the second banner on the next line.

    1. Move your </p> to the very end.
    2. Add text-align:right; and text-align:left; to the style section of each <img tag (one for each)
    {{ DiscussionBoard.errors[7868593].message }}
    • Profile picture of the author moneychain
      Originally Posted by Quad312 View Post

      Your </p> is between the two banners, not at the end. <p> </p> creates a block of content with a line break at the end, so putting </p> in the middle of the two banners will put the second banner on the next line.
      Thank you!!
      {{ DiscussionBoard.errors[7868600].message }}
    • Profile picture of the author Michael71
      Now this is really BAD code regarding text-align...

      Images are not text. Using text-align NOT for text shows your knowledge about CSS... not much.

      Instead of text-align you should use float:left and float:right.

      So your code should look like this:

      Code:
      <p>
      <a target="_blank" href="http://www.dupliterminator.com/go.php?offer=dt71091&pid=1">
      <img src="http://dupliterminator.com/images/banners/160-600-2.gif" style="border:0;float:left;" width="160" height="600" alt="" />
      </a>
      <a href="http://codi3.trafficfb.hop.clickbank.net" target="_blank">
      <img src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" alt="" width="120" height="600" style="border:0;float:right;" />
      </a>
      <br style="clear:both;height:1px" />
      </p>
      Originally Posted by Quad312 View Post

      Your </p> is between the two banners, not at the end. <p> </p> creates a block of content with a line break at the end, so putting </p> in the middle of the two banners will put the second banner on the next line.

      Code:
      <p><a target="_blank" href="http://www.dupliterminator.com/go.php?offer=dt71091&pid=1">
      <img border="0" src="http://dupliterminator.com/images/banners/160-600-2.gif" style="border-style: solid; border-width: 1" width="160" height="600"> </a>
      
      </p><a href="http://codi3.trafficfb.hop.clickbank.net" _cke_saved_href="http://codi3.trafficfb.hop.clickbank.net" target="_blank"><img src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" _cke_saved_src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" width="120" height="600" border=0></a>
      1. Move your </p> to the very end.
      2. Add text-align:right; and text-align:left; to the style section of each <img tag (one for each)
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[7869373].message }}
      • Profile picture of the author Cosmit
        Originally Posted by Michael71 View Post

        Now this is really BAD code regarding text-align...

        Images are not text. Using text-align NOT for text shows your knowledge about CSS... not much.

        Instead of text-align you should use float:left and float:right.

        So your code should look like this:

        Code:
        <p>
        <a target="_blank" href="http://www.dupliterminator.com/go.php?offer=dt71091&pid=1">
        <img src="http://dupliterminator.com/images/banners/160-600-2.gif" style="border:0;float:left;" width="160" height="600" alt="" />
        </a>
        <a href="http://codi3.trafficfb.hop.clickbank.net" target="_blank">
        <img src="http://www.hyperfbtraffic.com/images/GraphicsBanners/static/NAB-120x600.jpg" alt="" width="120" height="600" style="border:0;float:right;" />
        </a>
        <br style="clear:both;height:1px" />
        </p>
        What exactly is the problem with this:

        <div style="width:500px; height: 300px; text-align:center;"><img src="..." /></div>
        {{ DiscussionBoard.errors[7876584].message }}
        • Profile picture of the author kevintb7
          Originally Posted by Cosmit View Post

          What exactly is the problem with this:

          <div style="width:500px; height: 300px; text-align:center;"><img src="..." /></div>
          I agree you can use text-align, I've even seen it recommended on w3. I think it gets used most with images inside of tables.

          you can also use:
          margin-left: auto;
          margin-right: auto;

          in some situations, it really depends.
          {{ DiscussionBoard.errors[7876612].message }}
  • Profile picture of the author Quad312
    You could do it that way too. I'm no programmer, but I've never had a problem with text-align either.
    {{ DiscussionBoard.errors[7869562].message }}
    • Profile picture of the author Michael71
      You SHOULD do it this way...

      Originally Posted by Quad312 View Post

      You could do it that way too. I'm no programmer, but I've never had a problem with text-align either.
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[7870923].message }}
  • Profile picture of the author Quad312
    Yes sir! :rolleyes:
    {{ DiscussionBoard.errors[7870973].message }}
  • Profile picture of the author Quad312
    It all does the exact same thing, use whatever works.
    {{ DiscussionBoard.errors[7877392].message }}

Trending Topics