How To Move Things around?

[keneso]

1
You may want to use firefox, and install firebug, and/or web developer for it to find out about all these.

2
Line 408
You may want to separate the id and set the float
#productMainImage {float: right;}

By doing that you may want/need at line 286 to play with
#productDescription
Perhaps setting width, and/or margin

[stevesh]

Not exactly sure what you want to accomplish, but you could find the #productMainImage rule in the stylesheet and add float: right; to it.


For future reference, install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-12, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

[Renz]

1
You may want to use firefox, and install firebug, and/or web developer for it to find out about all these.

2
Line 408
You may want to separate the id and set the float
#productMainImage {float: right;}

By doing that you may want/need at line 286 to play with
#productDescription
Perhaps setting width, and/or margin

Hi thanks for all your help, I got most of it as I like it however I cant seem to get the text off the very edge of the product image once I float it to the right.. I tried adding margins and padding to the #productDescriptions but it makes no difference..Perhaps it is some padding or something in the image. If you have any suggestions it would be appreciated.

[Renz]

Not exactly sure what you want to accomplish, but you could find the #productMainImage rule in the stylesheet and add float: right; to it.


For future reference, install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-12, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Thanks for the suggestions, do you know of any you-tube tutorials for this or any other simple methods of finding stuff on CSS, I have a terrible and very time consuming time trying to do the simplest things. Also I cannot find any line numbers which makes it worse when trying to use the edit css...
Thanks and Best Regards Renz

[keneso]

Hi thanks for all your help, I got most of it as I like it however I cant seem to get the text off the very edge of the product image once I float it to the right.. I tried adding margins and padding to the #productDescriptions but it makes no difference..Perhaps it is some padding or something in the image. If you have any suggestions it would be appreciated.

It should indeed be margin/padding, depends exactly what you need to do, as I suggested you may add width to it as well:
i.e.
#productDescription {
width: 440px;
margin-top: -20px;
}

As for tutorials try googling firebug, and/or web developer.

As for the line count, you need to get yourself a good editor like notepad++ (google it), and edit your file using that.