no documentation? please help with *basics* for styling! (unlimited in horizontal instead of stack)

I personally use display:block, float: left apply an appropriate clear on the parent container if needed.

that's because there is no styling. When you get something working please please post a patch so I can commit somthing and the default won't suck so bad.

that's because there is no styling. When you get something working please please post a patch so I can commit somthing and the default won't suck so bad.

@drewish, the default "no style" is perfect and does not suck at all - its precisely what I (and I would think many others) want.

Normally I just use floats & clears, padding and margin, maybe a width or a height thrown in when needed. Occasionally I might use jQuery in the mix. There are div wrappers and CSS classes etc, its all there.

Honestly, is there no simple way to turn an imagefield horizontal ?
For simple, read something that someone with *NO* CSS experience can use.

Hi

I've got same problem - have used imagefield and imagecache on a website I use to allow people in my part of rural Italy to advertise property for sale by adding multiple images to a content type called property_for_sale. The images appear vertically on the node and I also want to have them appear horizontally.

I'm fairly new to CSS and although I feel fairly confident that I can play around with float and other values to style the images I just don't know what to put in CSS - div, class etc to identify these images.

I'm really impressed with imagefield and imagecache and know that styling in CSS is something I need to work out myself but I've spent quite a bit of time trying to work it out and saw this post and think I'm almost there - if someone could look at the code copied from a page on the site using firebug and could tell me what div or class I need to put in my style.css then I'd apprectiate your help - you can also see how rubbish my knowledge of CSS is by some example attempts below:

.field-field-image img{
...

and

.field-field-image {
display: inline;
overflow: hidden;
padding: .5em;
}

and
.field-item {
display: inline;
overflow: hidden;
padding: .5em;
}

but I just don't get it...any help appreciated - if I work it out myself I'll post it here

Here is the code

<div id="main-content">
<h1 id="page-title">Apartment Sisti</h1>
<div class="tabs">
<ul class="tabs primary clear-block">
</ul>
</div>
<div id="node-17" class="node node-mine node-type-property_for_sale">
<div class="node-inner inner">
<div class="submitted">
</div>
<div class="node-content">
<div class="field field-type-image field-field-image">
<div class="field-items">
<div class="field-item odd">
<a class="thickbox" rel="gallery-17" title="Image of property for sale" href="http://foo.com/sites/default/files/properties_for_sale/foto 4.jpg">
<img alt="Image of property for sale" src="http://foo.com/sites/default/files/imagecache/thumbnail/properties_for_sale/foto 4.jpg"/>
</a>
</div>
<div class="field-item even">
<a class="thickbox" rel="gallery-17" title="Second bedroom" href="http://foo.com/sites/default/files/properties_for_sale/camera.jpg">
<img alt="Second bedroom" src="http://foo.com/sites/default/files/imagecache/thumbnail/properties_for_sale/camera.jpg"/>
</a>
</div>
<div class="field-item odd">
</div>
<div class="field-item even">
</div>
<div class="field-item odd">
</div>
<div class="field-item even">

Hi Zilla

I think after a bit of trial and error and reading nevets advice about using dispaly: block and float: left I managed to get it to work for my site using this bit of CSS

.field-item img{
display: block;
float: left;
padding: .5em;
}

I haven't yet worked out how to stop the text appearing to right of images (see screenshot) but need to take a break after trying to learn CSS for the best part of the day and struggling with this problem - just glad that the images now appear horizontal - thanks to previous postings here :-)

Cheers

Kevan

Writing CSS isn't really within the scope of support requests for ImageField. I'd suggest http://w3schools.com for some good introductions to CSS.

I was having the same problem with text appearing to right of images after using the css to position imagefields horizontally. I solved it by using a CSS clear property on the parent div or html element. I needed to do this for an imagefield in a view and on the node. The following css arranged the imagefields horizontally in both the view and the node:

div.field-item img{
display: block;
float: left;
padding: .5em;
}

But then all of the text in both view and nodes were also placed to right of images. I added this code to fix the view:

div.field-content{
clear:both;
}

field-content was the direct parent div of the div with field-item class, you may need to change this dependant on the class of the parent div within your setup. Fixing this issue on the node was not as easy as the images and node text do not share the same direct parent div and using the next div up did not seem to work. As a result I had to use the html element which wrapped around the text as follows:

div.content p{
clear:both;
}

This did not have any class set so I used the top level div to contain the css property - this may break other parts of the site but I have not seen an issue yet. I can merge the last two css statements as follows:

div.field-content,div.content p{
clear:both;
}

quicksketch - I appreciate your view about an issue queue or support request not being best place to discuss css and thanks for the link I found the basic css course very helpful in fixing my issue and will use that as a reference in future. However this was one of the first threads I came across when trying to fix my issue (google no 3 for "Drupal imagefield horizontal") so thought I would share my solution here to help anyone else coming up against this styling issue. Hope you don't mind.

Bookmarking, can;t get it fixed using views, greetings, Martijn