Attribute Positioning Help Needed

[jabbawest]

I've been playing around with this for a couple of days now but I just can't seem to figure out how to get the attributes module in a position where it will be to the left of the Add to Cart box.

In tpl_product_info_display.php I have reposition the Attributes module code directly after the free shipping icon and right above the Add to Cart code.

Current example: http://minu.me/2nhk


My stylesheet contains the following entries for attributes:

/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;

I don't know enough about coding to make this work. Testing some options using Firebug would get me close to what I want but only the top attribute would move up to the bottom of the Tab Product Pro module.

Any suggestions would be gratefully appreciated.

Thanks,
Stephen

[niccol]

The add to cart is floated right (forward) and the attributes section uses lots of float lefts (back). Mixed in there are some <br class = "clearBoth" >.

What the clearBoth does is clear both the left and right floats - so pushes the next line down beneath the add to cart box.

One way round this is to change all the clearBoths in the attribute code to just clear:left; That means that the right float of the box is maintained.

If all that sounds like gobbledygook, then post again and I'll explain more fully. Also, read as much about floats as you can stand - it will stand you in good stead as you move forwards.

You can see what I mean by adding the following rule to the bottom of your stylesheet ( don't leave it there because it will change the whole site!)

 .clearBoth{
clear:left !important;
}

[jabbawest]

Very nice niccol! Thank you!
It took a little more hunting but I found the instance of clear: both in the stylesheet that applied to productattributes, changed it to clear: left and shazzam.
Should I also change:
<br class="clearboth" /> in the tpl_modules_attributes.php

Now, what could I do to put the Write a Review and the Tell a Friend buttons back to their previous position?

I have to admit that I've not formally learned any coding, I've been learning from trial and error for years, starting with php-nuke. I wish I had the time and the retention abilities to formally learn.

Thanks again niccol.

[niccol]

Understanding floats is pretty useful. They weren't designed really to do what designers use them for these days so sometimes it seems a bit archane but once you really get the hang of it then a lot of problems suddenly drop away.

You need to get a clear:both in before the buttons. A couple of ways of doing that:

1. In the code find the button and put a <br class="clearBoth"/> in just before.

2. Apply a clear both to the first button. So in the stylesheet add something like:

#productTellFriendLink{
clear:both;
}

[jabbawest]

Thanks again Nick.

They're not exactly where I want them, I'd like them to be a little lower on the page so, unless you have another tip, I'll keep poking around.

You've been most helpful and I will definitely head to half price books to look for some coding reference material.

NOW I can go back to adding more items. whew

P.S.
I'm going to start a thread about organizing the process of working on code.
Chime in please, because from day one I've always had my hap hazard way of trying to work with, (sometimes destroy), code in multiple files at the same time.
If I have to take a phone call or pickup my kids from school, it can be difficult to pick up exactly where you left off.

Thank again,
Stephen

[niccol]

Well, once you have that rule you can do what you like with it - for instance :

#productTellFriendLink{
clear:both;
margin-top:100px;
}

will add a great big top margin to that element. And space it down from what's above. You probably will have to do that to both buttons.

With regards method of working on the code there are some rules:

1. Back up everything. Back it up again and then back it up at frequent intervals.

2. Try your best to comment your changes.

3. Back up again

Important things to learn early on are how to back up your files which is pretty easy. I back up includes and admin frequently. Other things less frequently. Then you need to back up your database. Very important. It is best done by phpMyAdmin which should be available through your hosting control panel and takes half an hour to learn. Once you have you will not believe how you managed without it. Also there is a mod - I think called mysqlBackup - that lets you back up from admin. Very useful but won't work in certain hosting environments.

Once you done that back up again!

Beyond that everybody codes in different ways. Here's a quote from why the lucky stiff -

I admire programmers who take risks. They aren’t afraid to write dangerous or “crappy” code. If you worry too much about being clean and tidy, you can’t push the boundaries (I don’t think!). I also admire programmers who refuse to stick with one idea about the “way the world is.” These programmers ignore protocol and procedure. I really like Autrijus Tang because he embraces all languages and all procedures. There is no wrong way in his world.

Ha ha - the thing is that you need to be a genius programmer to follow that creed. For the rest of us 'workable' is what we are going for.

[jabbawest]

Well, once you have that rule you can do what you like with it - for instance :

#productTellFriendLink{
clear:both;
margin-top:100px;
}

will add a great big top margin to that element. And space it down from what's above. You probably will have to do that to both buttons.

With regards method of working on the code there are some rules:

1. Back up everything. Back it up again and then back it up at frequent intervals.

2. Try your best to comment your changes.

3. Back up again

Thanks once more for the lesson CSS lesson Nick.

As for backing up, now that I'm tinkering more, I scheduled a Root backup to happen late at night every couple of days using WS_FTP Pro. It's already saved me a couple of times.
I also have a Cron Job set-up to backup mysql database every week, or I'll do it manually when I install or uninstall a feature that uses it.