CSS to define where a image is located on each Node

Question

Short version: How do you use CSS to define where a image is located on each Node?

I AM NOT TALKING ABOUT IMAGE STYLES: https://drupal.org/documentation/modules/image#styles

Long version of my question:

I have created a content type call image_content, in which I can create a node and upload a image to that node. That works great! but now what? I mean if load 10 images one one node, the are lined up hortizonaly, and thats pretty ugly. How can I use CSS to change the style of the images per node.

Now I understand, I could create a photo gallery, but I want more control of how each image is displayed. Example my background looks like a empty room. On node created by the image_cotent, I might want a image1 far left, and image2 far right. Basic CSS understanding can do this, but how would I do this node? The reason is I might want the images on node2 have a left-margin of 50px, but images on node1 to be margin-right-0px

Does this make sense?? PLEASE provide example if you can!

Answer 1

If you look at the body tag in view source or firebug you should be able to see a list of CSS classes assigned to class attribute; Ex. class="html not-front page-node page-node-1"

So you should be able to style each node different than other nodes based on the node ID

CSS example:

/* node 1 styles */

body.page-node-1 .title {
  color: #333;
  background-color: blue;
}

body.page-node-1 .field-name-field-image {
  position: absolute;
  left: 100px;
  top: 100px;
}

/* node 2 styles */

body.page-node-2 .title {
  color: #000;
  background-color: yellow;
}

body.page-node-2 .field-name-field-image {
  position: absolute;
  left: 200px;
  top: 200px;
}

I hope this will help you.