Floating an affiliate link within text

HTML & CSS
1

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

<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?

<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

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

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

Thank you both! I will try again.

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

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? :slight_smile:

6

When I’ve encountered a similar problem with an image (local, not remotely hosted) applying the wrapper as:

.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

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

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 -

[B].custom .affwrapper[/B] {
float: right;
margin-left: 10px;
}
8

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

Thank you both. I tried both suggestions, and based on datadriven’s code, I simply added

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

see post#7 above

11

Yes, but that didn’t work for some reason. I tried that first. ??

12

^ 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

Nope, it still popped back over to the left. It is there now. I must be missing something obvious, sorry!

14

It may be that #container ID giving more weight to it.

Try

#container .affwrapper { float: right}

15

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

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

You did not close your .custom #header properly and all rules that follow are being ignored. :wink:


.custom #header [SIZE=3][COLOR=Red]{[/COLOR][/SIZE]
position: relative;
 [COLOR=Red] /*missing curly bracket*/[/COLOR]

#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

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:


<!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

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

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?