SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating an affiliate link within text

    I'm having trouble with CSS (oh, yes, as always). Let's say this is my affiliate link from Commission Junction:

    Code:
    <a href="http://www.anrdoezrs.net/sq179xr63y5LDJWMS" target="_blank" onmouseover="window.status='http://www.godaddy.com';return true;" onmouseout="window.status=' ';return true;">
    <img src="http://www.tqlkg.com/lf115subusqBKWEUFJABLKDFJS" alt="Summer Savings! $7.49 .com domains at GoDaddy.com!" border="0"/></a>
    I want to put several of these in various places on my site, floating to the right, for example, with text wrapped around them. So I need to create a class, I'm thinking.

    .floatright {
    float: right;
    margin-left: 10px;
    }

    Isn't this how I should do the HTML?

    Code:
    <div class="floatright">
    <a href="http://www.anrdoezrs.net/sq179xr63y5LDJWMS" target="_blank" onmouseover="window.status='http://www.godaddy.com';return true;" onmouseout="window.status=' ';return true;">
    <img src="http://www.tqlkg.com/lf115subusqBKWEUFJABLKDFJS" alt="Summer Savings! $7.49 .com domains at GoDaddy.com!" border="0"/></a>
    </div>
    It's not working. I understand you use a "." for classes and a "#" for ID's, and I understand why I should use a class instead of an ID for this, but I'm not always sure when to use a div or not and how to do the CSS selector part properly. Can I name it whatever I want (such as floatright so I know later what it's for) or are there only certain things I can use? I would appreciate any kind souls who can help me out.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It's not working. I understand you use a "." for classes and a "#" for ID's,
    Hi,
    Yes that is correct about the classes and I don't see any errors in your css.

    I took your test code and used one of my own images and it is working fine for me.

    Your image url does not have an extension on it, try correcting that and it should work.
    In fact when I ran your code the alt text flashed up very briefly then disappeared.

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Sorry for the not-so-helpful tangential reply.

    I wouldn't name it "floatright" but something like "affwrapper" or somesuch.

    It will always be for the aff link, but what happens if you later decide it should "floatleft" ?

    .floatright {
    float: left;
    margin-right: 10px;
    }

    i.e. What it is not what it does

  4. #4
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both! I will try again.
    Quote Originally Posted by Mittineague View Post
    I wouldn't name it "floatright" but something like "affwrapper" or somesuch.

    It will always be for the aff link, but what happens if you later decide it should "floatleft" ?

    i.e. What it is not what it does
    I was going to make different classes, one for floating left and one for right but I see your point in making it describe itself better.

    Thanks again!

  5. #5
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, still can't get it to work. Here's the page I'm testing on:
    http://upmichigan.biz/?p=41

    My code is the same as I showed above except I changed it from .floatright to .affwrapper, both in the HTML and the CSS.

    Any idea what I'm missing?

  6. #6
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I've encountered a similar problem with an image (local, not remotely hosted) applying the wrapper as:
    Code:
    .affwrapper {
    float: right;
    vertical-align: text-top;
    width: 300px; /* or as percentage, whatever it is*/
    margin: 0 5px 0 5px;  /* re: top right bottom left  adjustable - as this applies, if at all*/
    }
    
    .left10 {
    margin: 0 0 0 10px; /* adjustable borders, or again as you had it: margin-left: 10px; */
    }
    Then placing right in the image tag, or in your case the <img src
    Code:
    ... border="0" align="right" class="left10"/>
    And be sure to look at in IE7 ( especially if the text output width is less than image width, which in your case, it isn't...just saying)

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Laura,

    The problem is that .custom class you have placed on the <body>

    Look at all the other selectors on that custom.css, they are working because you have included the .custom class

    This should get it working for you -

    Code:
    .custom .affwrapper {
    float: right;
    margin-left: 10px;
    }

  8. #8
    SitePoint Member
    Join Date
    Jul 2011
    Location
    London
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried

    text-align:right;

    Its hard to tell whats around your div and if this div is a child of another div?

  9. #9
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both. I tried both suggestions, and based on datadriven's code, I simply added
    Code:
    align="right"
    in the img src in the HTML. But if I left that part off it didn't work. What I don't get is why do you have to put it in there if the "affwrapper" class is already telling it to align right?

    Edited: Thanks, edmondk7 as well for your suggestion.

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    see post#7 above

  11. #11
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    see post#7 above
    Yes, but that didn't work for some reason. I tried that first. ??

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ Go ahead and make the change to your css and re-upload it.
    Then do a hard clear on your browser cache. (shift+reload)

    Of course you would need to remove the align="right" from the image to see that the float will work
    I had already done a live edit with it previously

  13. #13
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, it still popped back over to the left. It is there now. I must be missing something obvious, sorry!

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It may be that #container ID giving more weight to it.

    Try

    #container .affwrapper { float: right}

  15. #15
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still no luck. I am interested in finding out why this is the case, but I have to hit the hay for the night. Even though I can now solve the problem using align="right" in the HTML, I want to understand the concepts behind this so I can add to my slowly growing knowledge of CSS. If you have any further ideas, that would be great - but I very much appreciate your help so far!

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I can now solve the problem using align="right" in the HTML
    That's deprecated in the strict doctype your using

    Leave it as it is for now and let me look at it some more.

    The last suggestion worked for me in a live edit too so there must be something else going on here

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You did not close your .custom #header properly and all rules that follow are being ignored.
    Code:
    .custom #header {
    position: relative;
      /*missing curly bracket*/
    
    #frame {
        position: relative;
        top: 20px;
        left: 80px;
    }
    
    #container .affwrapper {
    float: right;
    margin-left: 10px;
    }
    EDIT:
    You should be able to drop the #container ID now and go back to .affwrapper only, that will keep that class working everywhere then.

  18. #18
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Laburke,

    When it aligned right, are you getting the margin?
    Did you have to place something like left10 class in the img src?

    Laburke: I can now solve the problem using align="right" in the HTML

    Rayzur: That's deprecated in the strict doctype your using
    That has me concerned because I'm using it the same way among pages having both:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  19. #19
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by datadriven View Post
    That has me concerned because I'm using it the same way among pages having both
    You really shouldn't be building new pages with a transitional dtd and you need to keep deprecated elements out of your strict dtd which you should be using.

    Here is a compilation of (x)html strict: Deprecated Elements and Attributes

  20. #20
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not building pages with transitional dtd, that one was done a while back. But there were a lot of gifs on it, aligned.

    Thanks for the link, but aren't those deprecations for xhtml?

  21. #21
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    You did not close your .custom #header properly and all rules that follow are being ignored.
    Code:
    .custom #header {
    position: relative;
      /*missing curly bracket*/
    EDIT:
    You should be able to drop the #container ID now and go back to .affwrapper only, that will keep that class working everywhere then.
    Ugh, I both hate it and love it when it turns out to be something so simple. Thank you very much!

    Quote Originally Posted by datadriven View Post
    Laburke,

    When it aligned right, are you getting the margin?
    Did you have to place something like left10 class in the img src?
    It appeared to be giving me the 10-pixel margin.

    Quote Originally Posted by datadriven View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    That's something I wish I understood better. I take it there's a default DOCTYPE that's declared when you create a WordPress site? Should it be changed?

  22. #22
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My other question is this: Is there a difference between putting <div class="affwrapper"></div> around a link and just putting class="affwrapper" within the img src code?

  23. #23
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,156
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Different tags expose different properties.

    I'm guessing CSS for the div is preferred.

  24. #24
    SitePoint Addict laburke's Avatar
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you mean by "different tags expose different properties." Do you mind expanding just a wee bit? Thanks for your patience with me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •