CSS Help Needed - Changing position of Image

[lolwaut]

Hi all,

I need a bit of help with some CSS. It's probably pretty simple, however, I am very ignorant when it comes to CSS.

I have added some Add This buttons to my product pages with this code inserted into my /includes/templates/my_template/templates/tpl_product_info_display.php:

<!-- AddThis Button BEGIN -->
<link rel="image_src" href="<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/images/" . $products_image; ?>" />
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f2fdf3701c99b73"></script>
<!-- AddThis Button END -->

The image shows what I want to do. The left is what it currently looks like, and the right is what I want it to look like:



Here is a link to a product on my site as well:

http://tinyurl.com/82uf9yr

Any help is greatly appreciated!

[rstevenson]

You have inserted your custom code inside the H1 tags which hold the product title. Which is agin' the law. To quote my syntax checker...

Document type does not permit element “<link>” in content of element “<h1>”.
Document type does not permit element “<div>” in content of element “<h1>”.

A div will naturally create a new line no matter where it is, but that can be overcome. However, you must get your custom code out of the H1 tag first.

Once you've done that, insert a bit in inline style to prevent the linebreak, like this...

<h1 style="display: inline;" >Inside H1</h1>Outside H1

Don't put that in your stylesheet because it will affect all H1s, wherever they are. Instead, put it into your code while you're taking out the stuff that shouldn't be there.

Rob

[lolwaut]

You have inserted your custom code inside the H1 tags which hold the product title. Which is agin' the law. To quote my syntax checker...



A div will naturally create a new line no matter where it is, but that can be overcome. However, you must get your custom code out of the H1 tag first.

Once you've done that, insert a bit in inline style to prevent the linebreak, like this...

<h1 style="display: inline;" >Inside H1</h1>Outside H1

Don't put that in your stylesheet because it will affect all H1s, wherever they are. Instead, put it into your code while you're taking out the stuff that shouldn't be there.

Rob

Thanks for your help. I have implemented the changes you suggested but it did not fix it. It changed the positioning of the image a bit, but not for the better. I believe I posted a link to my shop in the OP... take a look if you get a chance.

Thanks,
R

[rstevenson]

I found the problem, I think. ...

plusone.google.com is including a stylesheet when that button is displayed, and in that stylesheet is included a display: block; definition which is over-riding your now correct display: inline; definition in the code. You may have to ask the gurus at Google how to do what you want.

Rob

[gjh42]

Add to your main stylesheet


.addthis_toolbox {display:inline;}

to put the buttons on the same line as the heading. They will display to the left of the heading, but the site keeps hounding me to login so I can't properly test additional styling.

[lolwaut]

Add to your main stylesheet


.addthis_toolbox {display:inline;}

to put the buttons on the same line as the heading. They will display to the left of the heading, but the site keeps hounding me to login so I can't properly test additional styling.

Excellent! Getting closer. Thanks for your help.

i added that to my main stylesheet and it worked. However, it is on the left as you said. I want it on the right.

What do you mean that the site keeps hounding you to login? I'm not experiencing any problems when logged off.... Should I PM you login details of a dummy account?

I appreciate everyone's help with this. Thank you!

[Tweezy]

Excellent! Getting closer. Thanks for your help.

i added that to my main stylesheet and it worked. However, it is on the left as you said. I want it on the right.

What do you mean that the site keeps hounding you to login? I'm not experiencing any problems when logged off.... Should I PM you login details of a dummy account?

I appreciate everyone's help with this. Thank you!

then you need a float:right; on it;

.addthis_toolbox {
float:right;
display:inline;
}

[lolwaut]

then you need a float:right; on it;

.addthis_toolbox {
float:right;
display:inline;
}

Thanks. Unfortunately, I added it and now it is all the way to the right. I just want it to the right of the text (as it is pictured in the OP).

[lolwaut]

Does anyone have any other pointers for me? It seems like I am so close... I just need a little more help! Thank you guys

[gjh42]

This works in Web Developer:

#productGeneral h1 {display: inline; float: left; padding-right: 1em;}
#productGeneral .addthis_toolbox {display: inline; float: none;}