How can I align thumbnails and images?

I can see that their style classes are image thumbnail, image preview and image _original but I can't find where their definitions anywhere.
I also tried to create one of those styles in styles.css file, but with no effect.

Can U help?

Comments

nevets’s picture

nevets commented

Can you provide a URL to a page you are having problems with and a note of what you want to achieve.

LGomez’s picture

LGomez commented

The test site that I'm using is at www.ovar.net/conteudo.

What I want is the thumbnail floating left and the linked image to appear centered.

tanx

Bèr Kessels’s picture

Bèr Kessels commented

You should do this in a theme with CSS.

.node .thumbnail {
  float:left;
}
LGomez’s picture

LGomez commented
Priority: Critical » Normal

Thanks a lot. It works as I wished for thumbnails.
Those classes were not defined, that's why I couldn't find them anywhere.

I still don't get why class is called "image something", but maybe I'm missing some things about CSS.

Now, of course, for class "image preview" I must define the style .node. preview.
I want images to be text-align: center; but it doesn't work. If I try to put them floating left or right everything seems to work fine, but not when I try to center align it.

What am I missing here?

Robrecht Jacques’s picture

Robrecht Jacques commented
Category: feature » support

The <img> tag is an inline element. There is no point in text-aligning them. You could do:

.node .preview {
  display: block;
  text-align: center;
}

or alternatively assign a text-align: center; to the containing block.

Zuperfly’s picture

Zuperfly commented

I positioned the thumbnail image like this:

.node .image {
float:left;
margin-right: 1em;
}

But I don't now how to position the large image as it is defined as "image preview" in the css. My actual source code looks like this:

(div class="node")
(span class="submitted") ... (/span)
(div class="content")
(span class="image preview") (img ... ) (/span)
(p)Description(/p)
(/div)
(/div)

Why is there a blank in "image preview"? Shouldn't it be something like class="preview" or "imagepreview"? I'm not sure, but I think blanks are not allowed in CSS declarations.

Bèr Kessels’s picture

Bèr Kessels commented
Status: Active » Fixed

They are called subclasses. 

.node .image.preview {
 float:left;
 margin-right: 1em;
 border: solid 5px black; 
 }

is an example usage of such a subclass.

cornernote’s picture

cornernote commented

Any tips on how to get the image to have a 1px border AND be center alligned.

I can only get it to do that like this:

.node .image.preview {
  display: block;
  text-align: center;
  border: solid 1px black;
}

The problem is that the border goes all the way to the edge of the node window and leaves a lot of white space around the image.

Robrecht Jacques’s picture

Robrecht Jacques commented

Probably

  .node .preview {
    display: block;
    margin: 0 auto; /* for Opera & Gecko */
    text-align: center; /* for IE */
    border: solid 3px black;
  }

But this is not the place nor time for this.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)