Grow your CSS skills. Land your dream job.

Column of Floated Images help

  • # May 17, 2008 at 5:19 pm

    im working on a site that will be powered by wordpress. the clients are going to log in, create new posts with images and the images need to float to the right and stack creating a virtual column next to the content. problem is.. i dont think i can wrap this in a div. im pretty sure, for their sake, i really need something like img { float:right;} but when i do things of that nature, it puts them next to eachother. to make matters worse this is a 3 column site. so i cant add any clear:right rules bc the whole center column clears the right one. not good.

    i have the effect i need if i wrap all the images in a div and then apply a br after each image.. but i have a feeling this wont work bc theyre going to log in, type away and then want the images floated creating a "4th column" in the middle.

    so… if anybody can tell me how to make a stack of images alight to the right of a container div, stay in a stack/column form and have 10px of top and bottom margin each,

    ill be forever in your debt.

    really cant figure out how to do this without the div and telling them to switch to html view, code in a div with a class name, and then put all the images in that, then back to text mode and type their post just isnt gonna work

    # May 18, 2008 at 5:32 am

    could you use a list to put the images in and float that to the right?

    # May 18, 2008 at 4:27 pm

    possibly.. but not if it involves them in working with any code :/

    # May 18, 2008 at 5:00 pm

    you could set up the wordpress buttons they could do it with them instead of coding.

    # May 18, 2008 at 7:20 pm

    I’m thinking the ticket here might be to add the images to the post using WordPress’ Custom Fields.

    This is a pretty common way to add image(s) to a post if they need very specific handling that you don’t want to deal with in the post code itself. Check out the homepage of FreshArrival:
    http://fresharrival.com/

    Every day has a new post with a new image, and the image needs to fit over inside that special box. Instead of having to apply a unique class to the photo every day, the image is just included in the post as a custom field. The custom field stuff gets dumped inside a div in the post template, separate from the post area.

    # May 19, 2008 at 6:56 am

    I agree with Chris on this one: Try out the custom fields and see what you can make out of that. Check out this link, on WordPress’ own codex: http://codex.wordpress.org/Using_Custom_Fields

    # May 19, 2008 at 3:29 pm
    "Adam" wrote:
    you could set up the wordpress buttons they could do it with them instead of coding.

    that sounds a little more advanced than i am with wordpress. infact im quite limited with it. ive been a textpattern user and im switching, however this site is for my job and i think we’re going to want to start using wordpress for various things instead of building custom cms’s all the time.

    # May 19, 2008 at 3:31 pm

    thanks guys, the custom fields sounds like it could work.

    if it were just one image though that wouldnt be a problem i envision this client wanting to add 5 images and more to one post and if i float them all, and theyre stacked, they do that stair stepper thing instead of staying in a column.

    you guys think the custom field will keep more than one image stacked?

    # May 19, 2008 at 8:19 pm

    Yes

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".