Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By iwant2fly on
Thanks to "pbarnett" drupal.org/user/61645 and "egyember" drupal.org/user/411341 for solving the problem.
Solution - http://drupal.org/node/749674#comment-2752798
*Update/Clarification:* I am a extreme beginner to CSS I have two basic questions.
In what file do I place the CSS?
What code should I input to get the images horizontal?
I am trying to get two images to display horizontal in a block. Currently they are displaying verticaly. The images are inserted into a CCK field using filefield/imagefield.
The final block should look like this:
[Node: Title]
[Content: Image] [Content:Image]
[Node: Title]
[Content: Image] [Content:Image]
Not
[Node: Title]
[Content: Image]
[Content:Image]
[Node: Title]
[Content: Image]
[Content:Image]
Here is the information about the field from the Theme Information in Views:
Field Content: Image (field_image) (ID: field_image_fid): views-view-field.tpl.php, views-view-field--field-image-fid.tpl.php, views-view-field--Portfolio.tpl.php, views-view-field--Portfolio--field-image-fid.tpl.php, views-view-field--block.tpl.php, views-view-field--block--field-image-fid.tpl.php, views-view-field--Portfolio--block.tpl.php, views-view-field--Portfolio--block--field-image-fid.tpl.php, views-view-field--block-1.tpl.php, views-view-field--block-1--field-image-fid.tpl.php, views-view-field--Portfolio--block-1.tpl.php, views-view-field--Portfolio--block-1--field-image-fid.tpl.php
Here is the CSS I am trying using in views.css
div.view-Portfolio div.views-field-image-fid {
display: inline;
padding: 3px;
background-color: #eeeeee;
border: 1px solid #eeeeee;
float: left;
margin: 5px;
text-align: left;
}What am I doing wrong? Or should this code go somewhere else? I am barely beginning to understand CSS so please explain it as if I knew nothing. Thanks for your help.
Comments
.
Can you provide us with a URL? If not, get the firebug addon for firefox and diagnose the problem quickly.
Unfortunately the site is not
Unfortunately the site is not live yet. I have firebug, and I have tried pasting the code in every file that seems even slightly related to that block to no avail.
http://74.53.39.206/~jrpress/
http://74.53.39.206/~jrpress/
It might possible to see what I am talking about there. It block on the right "Recent Work" is what I am trying to work on.
-
Try this: its not perfect but its all I have time for at the moment:
Awesomeness. Thank you very
Awesomeness. Thank you very much. I finally have a solution to a 3 day long problem. For anyone looking at this post later the CSS goes in the views.css file in the modules/views/css folder.
Well I spoke too soon. If
Well I spoke too soon. If gets the images to work correctly, but now the titles above the pictures are messed up.
A couple of points 1) float
A couple of points
1) float only works if display is block
2) you should only modify your themes css, not core or contributed modules css.
What should I use instead of
What should I use instead of float?
Where should I put the modified CSS?
I am guessing you want
I am guessing you want something like
and place in your themes style.css file.
That's still not working.
That's still not working. Any other suggestions? Display: block; seems like it would still display the images one above the other, but with my incredibly limited understanding of CSS I could be totally wrong.
Correct, by it's self display
Correct, by it's self display block will place the item one above the other, the float is what places them on the same line.
So just change block to
So just change block to float? That doesn't seem to change anything.
The Site is now Live
The site is now live so you can see the actual site that I am trying to change. www.jamesriverpress.com
.
Try this for the image:
If you wish, you can alter the format of the title like this:
This only sort of works for
This only sort of works for the first set of images. Isn't there some way I can reference the image fields by name rather than field 1? That way I could have 1 or 20 sets of images and still have them formatted all the same. And is positioning the images using a pixel position a good idea? It seems to me that placing them somehow relative to the title would be a better option in case I changed the title. I very much appreciate the help, and I really don't know yet what I am doing when it comes to CSS. I am just trying to learn and do this right the first time.
=
There was only one set of images to work with, from what I could tell. But to answer your question, yes, you can apply the formatting to multiple image fields (as long as they are contained in the same View), like this, for example:
.views-row-1 .field-item-1, .field-item-3 {margin-top: -41px; float: right;}For your situation, I am not sure whether using pixels is the best way of going about it; I used it in my example because it was the first option that came to mind.
To place the images relative to the title, you will need to put a margin below the title itself, like this:
.views-row-1 .views-field-title a {margin-bottom: 5px; font-size: 10px;font-family: arial;}I guess this isn't exactly
I guess this isn't exactly what I am looking for. I was hoping to be able to have the images inline, without having to define the code for each line. I might change the view later, and I don't really feel like going in and changing the code do display on line 1, 3, 5, 7 to 1, 4, 7, 10. Can't I reference the image field somehow by the name I gave it in CCK. The documentation sure seems to imply this. The above suggested code also messes with the everything following it, specifically the title of the next set of images.
Do I have to update the field
Do I have to update the field template file somehow to give the image field a "unique name"? If so how do I go about that?