Jump to content
cuzsis

"Artistic" Picture Placement

Recommended Posts

I'm still relatively new to web designing with Expression Web 2, although I can do a lot of basic web page building including CSS. The other night my husband asked if I could place pictures in a certain way on his website. I've posted a pic of the arrangement he was thinking below (the black boxes represent large images and some thumbnails surrounding them.) Obviously there will be nav bars and other text on the page, but for the moment I'm just concerned with getting the picture placement right. example.jpg I've attempted a similar sort of "artistic arranging" of pictures in the past, but it's never been something I've been able to do easily and the results were never exactly what I wanted. But I've always been using old free WYSIWYG editors, Geocities page builder, and other similar "old skool" tools. :) So, now that I've actually got a decent web editor program, I was wondering if there is a simple way to do this? Particularly as it's related to Expression Web 2, since that's what I'm using. If there isn't, is this something Dreamweaver does easily? (Something I can look forward to when I finally save up enough money to get it. :) ) I'm sure with enough time and insanity I could put it together with div tags, but using divs doesn't seem to be the ideal way to do this... :) Thanks for any input!!! (Even if it's only to say that you're not sure, b/c then I'll know it's not just me!) :)

Share this post


Link to post
Share on other sites

for the record some of the best text editors are free, and will probably teach you more and be ultimately more rewarding than any sort of WYSIWYG program.As for your plan, it looks like at the basic you will want two columns, which should be easy enough to do with even the most basic CSS knowledge. What you will probably want to do is divy up each of the "artistic picture arrangements" into their own div's, which can share the same class if they all end up being sharing the same styling properties, but might differ though based on how you want some of the spaced apart from each other. Then breakdown each of these arrangements by the kind of pictures you will need inside them; which to me looks like one "main pic" and then three different kind of thumbnails. I would use a pencil and paper to write out each square in blocks that you can assign a thumbnail and picture too. For example, the uppermost left one would probably be one div for the first thumbnail, spanning the entire width of the div, then the main pic floated left, and the two other thumbs stacked on top of each other. Think in building blocks.After that, its just a matter of getting the positioning down within each one of your square's. It will probably just be a matter of judicious use of padding to bump each image around inside the "thumbnail" div's you've made for them. A little tricky, buts all about your organization and your eye for placing div's in context to each other.

Edited by thescientist

Share this post


Link to post
Share on other sites

in retrospect, how are you serving the images? Do they need to be clicked on? Maybe you could just make a div for each "arrangement" and use an image of them already composited using something like Photoshop and image maps to make the hot spots?

Share this post


Link to post
Share on other sites
What you will probably want to do is divy up each of the "artistic picture arrangements" into their own div's, which can share the same ID if they all end up being sharing the same styling properties...
Umm...No. Not if you want valid code... :)

Share this post


Link to post
Share on other sites
Umm...No. Not if you want valid code... :)
woops! was writing a bit too fast there. Sorry, it should be class. my earlier post has been edited.

Share this post


Link to post
Share on other sites

Hm, looks my drawing isn't up to snuff. Let me try it again and I'll add an explanation too. The pictures, specifically the main images, are not supposed to line up with each other. Each main image is off set both vertically and horizontally. The thumbnails around them correspond to the main image they surround only and are lined up with the corner or split evenly down a side. Let me see if I can get a better picture up... example2.jpg Ahh, there we go. As you can see I just threw this together really quick, but the main images are all off set now. While the thumbnails are more off set than I originally intended, thats not necessarily a bad thing. Basically very few things line up with anything and those that do are only thumbnails. Yes, the images do have to be clickable (takes you to the "full" image for a closer look.) The photoshop image of the "collection" is a neat idea, but I don't think it will work in this case... Thanks tho! :) (**edit** on second glance, it looks like I misunderstood your post, running very short on sleep at the moment... Yes an image map could work. My post below talks more about it.) I know it's possible to do this with some tricky div work, but my main object is to see if there is a different (read: easier/simpler) way to do so.

Edited by cuzsis

Share this post


Link to post
Share on other sites

Use divs. As scientist suggested, place each arrangement in a div. Don't worry about the content of the divs for right now. Just create three divs, give them dimensions, then play with margins, padding, float, and clear to get them positioned where you want them. Give them each unique background colors so you can see exactly where each one is. Don't use borders since a border is counted in an element's dimensions. Then add your content using img tags inside div tags again playing with margins, padding, float, and clear.

Share this post


Link to post
Share on other sites

Okay, so it's sounding like there is NOT another way (other than tinkering with the divs) to do this. Looks like I'll have to come back to this idea another time. Ah well. Thanks for the posts!

Edited by cuzsis

Share this post


Link to post
Share on other sites

well I did suggest a way with less div's and image maps, but I don't know the full implementation of your idea.

Share this post


Link to post
Share on other sites
well I did suggest a way with less div's and image maps, but I don't know the full implementation of your idea.
Yep, my reply must've gotten lost in the middle of my second post: "Yes, the (individual) images do have to be clickable (takes you to a different browser tab with the "full" image for a closer look.)" I'm not as familiar with image maps and hot spots. Not adverse to learning them however. Would they be easier than divs in this case? Edited by cuzsis

Share this post


Link to post
Share on other sites

They might be since you will only have three elements to play around with.I do have one question though. The thumbnails as well as the big images are going to take the user to a new page? The thumbnails are not going to change the big image when they're clicked? If that is correct then yes, I'd definitely say image maps would be easier.

Share this post


Link to post
Share on other sites

Yep, thumbnails take you to the new page as well. Image maps then. Cool! I will look into those. Thanks for taking the time out to reply! (Especially since with the short sleep I'm on I'm having trouble being entirely clear on what I'm trying to explain. :) )

Share this post


Link to post
Share on other sites

If you don't plan on changing the content (images) or the the links often, then definitely use Photoshop, and then make the "artistic" placement of all the images one image inside the div, and use an image map (which creates the "hot spots").

Share this post


Link to post
Share on other sites
If you don't plan on changing the content (images) or the the links often, then definitely use Photoshop, and then make the "artistic" placement of all the images one image inside the div, and use an image map (which creates the "hot spots").
Yeah, I never thought of that. You could make it just one big image instead of three smaller ones. It actually wouldn't be too horrible to have to update either with the small amount of images that are there. That is unless you plan on adding more...

Share this post


Link to post
Share on other sites

Wow. My last reply apparently didn't take...lemme try this again! :) Updates would probably be only a couple times a year, most likely around 2, as new and better images came in. The amount of images/collections wouldn't change so much. There might be another collection to add at some point, but the idea is to keep the page from being overly cluttered (I think...but the person who wants it may change their mind at some point, I don't know.) I looked up a quick image map tutorial. Doesn't look that complicated and does look a lot easier than playing with divs and divs inside divs for the same effect! Even individual images (one for each "collection") wouldn't be too bad, I think. Then I would just be able to add a new section of code for each "collection" without having to go back an edit any other sections. Editing code for new collections that will replace existing collections will just be a matter of plug and chug in the code and putting the new pics on top of the old for the new "collection" image. So long as the backgrounds of the "collections" matched the site background (and it's going to stay just a flat color so it doesn't distract from the images), and that should be pretty simple to do. Changing backgrounds later could be a little more difficult, but overall probably not a big time sink.

Edited by cuzsis

Share this post


Link to post
Share on other sites
So long as the backgrounds of the "collections" matched the site background (and it's going to stay just a flat color so it doesn't distract from the images), and that should be pretty simple to do. Changing backgrounds later could be a little more difficult, but overall probably not a big time sink.
Can't you use transparency in png's? I know that some older versions of IE don't support transparency, but IE8 does.You may want to consider doing a separate image for each collection just in case the person you're making this for changes their mind or just wants to add stuff later on. It would be a lot easier to modify. Edited by jkloth

Share this post


Link to post
Share on other sites

I would want to test the transparency in Firefox and possibly a few others first. But that's a great option! It would definitely make things easier! And yes, separate image "collections" does sound like the way to go for the modification purposes I'm likely to encounter.

Edited by cuzsis

Share this post


Link to post
Share on other sites

Transparency should work in all modern browsers by now, except for IE6, which requires a hack but makes using image maps harder. I had the same experience with a website I was making recently and ditched the IE6 support in favor of a better working, better looking website. In my case, I was more interested in functionality, and the the pages/images don't "break" or anything with IE6, the transparent sections just show up kind of light blue.

Share this post


Link to post
Share on other sites
Transparency should work in all modern browsers by now, except for IE6...
I would hardly consider IE6 a modern browser. :)

Share this post


Link to post
Share on other sites

you're all over me in this thread, huh!? :) makes me think I should actually proof-read my posts, :)

Share this post


Link to post
Share on other sites
you're all over me in this thread, huh!? :)
Somebody's gotta keep u in line. :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...