Hello everyone,
I took the plunge yesterday and started fiddling with CSS...no small feat as I am so used to tables. My victim is the image.module and it's text formatting with the corresponding image. On default, the text begins in the lower right hand corner of the image...on line with the image's bottom. I have used the "float" and "clear" attributes to get the text to wrap nicely on both the right and left sides. My question is...is it possible to have the text ENTIRELY under the image with the text beginning on the left hand side UNDER the image rather than next to it on the bottom right corner? I am sure this is possible using CSS...I'm just stumped. ANY suggestions would be appreciated.

Thanks for reading,
Larry

Comments

madartsfactory’s picture

Hi Larry,

I had the same problems with the image.module. You need to look at the theme_node_image($node, $rand, $main = 0, $page = 0) function. There you can make all required changes (at least I did so :)).
Additionally I inserted some custom class-declarations in the module for a better control via the stylesheet.

Cheers
Das Omega

-------------------
Naur an edraith ammen!
Naur dan i ngaurhoth!

larry’s picture

Hello Das Omega,
To my rescue yet again....I thank you for your suggestion. If I understand PHP and CSS correctly this function is responsible for the formatting of both the teaser after trimming and the original image itself...I'll give it a try. From what I understand....you simply create your declarations and then call them up via the stylesheet...hence, no tables required...if I have properly followed the way you have drifted...thanks again.

Ciao,
Larry

--There are no Kangaroos in Austria--

larry’s picture

Hello everyone,
Solved my problem with CSS. I did what Das Omega suggested yesterday in another post...I modified the stylesheet itself instead of hardwiring the code into the source. My problem is that I AM TOTALLY NEW TO CSS...but the more I learn the more I like it. So, to anyone who is having the same problem I did....having the text default on the lower right hand corner of an image rather than under it and on the left side....here is the code I used:

img.image {padding: 20px 20px 20px 0px;
display:block;
}

Put this code in your stylesheet(of course we're using the image.module) and presto...the text that was next to the ORIGINAL image is now below the image and margined on the left side. Evidentally, "display:block;" blocks the image separating it from the text. The "padding" separates the image from text as well...but in a different way. It "pushes" the text in the appropriate direction...but does NOT reformat..."display:block;" does.

Also while I'm at it:

img.thumb {
padding: 0px 5px 5px 0px;
float:left;
clear:left;
}

This code is for formatting the non-clickable thumbnail...the "float: ..." and "clear: ..." allow the code to wrap around the image. For thumbnail reformatting, you can put this code in your stylesheet also. Additionally, you can mix the two examples above and get the desired results....i.e. use the first code chunk for thumbnails and the second code chunk for the original image....just put the code in your stylesheet. Thanks again Das Omega. By the way, does ANYONE know how to make the non-clickable thumbnail in the image.module clickable.

Thanks for reading,
Larry

--There are no Kangaroos in Austria--

Steven’s picture

If you're new to CSS, surf to the W3 site and read the CSS1 specifications: they're very readable and will tell you exactly why display: block; did what it did, and how paddings and margins are used.

larry’s picture

Hello Steven,
Thanks for your suggestion...the W3 site is quite good. Actually, I know it very well...I'm just very sour on their involvement in the RDF/semantic web mess...but that's a whole new issue. Anyway, I thank you for your post...Hopefully this thread will help others with the same questions I had.

Ciao,
Larry

--There are no Kangaroos in Austria--

cliffp’s picture

This is my favourite site! It is a complete CSS and HTML reference:

http://www.blooberry.com/indexdot/css/index.html

Cheers,

Cliff

pgassner’s picture

The sites that I can really recommend for everyone into CSS are

www.alistapart.com
www.mezzoblue.com
www.stopdesign.com

I found these very helpful and they really got me into CSS.
Happy coding :)

mercury66’s picture

..and image module.

This would be great stuff for some sort of Drupal template design handbook no?

Does anyone know how to make the non-clickable thumbnail in the image.module (as stated above) clickable?

Cheers,
E