Collages

Here are the table codes I use on my blog for collages.

Style definitions used on CSS style sheet:

table.collage img { width: 100%; border: 0px; }
table.collage { border: none; border-spacing: 5px; width:100%; table-layout: fixed; background-color: #eeeeee; line-height:0px;}
table.collage td { padding: 0px; }

One big vertical on left and two small vertical pictures on right:

<table class="collage"><tr><td rowspan="2" width="67%">LARGE</td><td width="33%">SMALL</td></tr><tr><td valign="bottom"  width="33%">SMALL</td></tr></table>
Copy line above

Two small vertical on left and one big vertical on right:

<table class="collage"><tr><td width="33%">SMALL</td><td rowspan="2" width="67%">LARGE</td></tr><tr><td valign="bottom"  width="33%">SMALL</td></tr></table>
Copy line above

One big vertical on left and two small horizontal pictures on right:

<table class="collage"><tr><td rowspan="2" width="54%">LARGE</td><td width="46%">SMALL</td></tr><tr><td valign="bottom"  width="46%">SMALL</td></tr></table>
Copy line above

Two small horizontal on left and one big vertical on right:

<table class="collage"><tr><td width="46%">SMALL</td><td rowspan="2" width="53%">LARGE</td></tr><tr><td valign="bottom"  width="46%">SMALL</td></tr></table>
Copy line above

One big vertical on left, and small horizontal and vertical on right:

<table class="collage"><tr><td rowspan="2" width="61%">LARGE</td><td width="38%">SMALL</td></tr><tr><td valign="bottom"  width="38%">SMALL</td></tr></table>
Copy line above

Small horizontal and vertical on left, and one big vertical on right:

<table class="collage"><tr><td width="38%">SMALL</td><td rowspan="2" width="61%">LARGE</td></tr><tr><td valign="bottom"  width="38%">SMALL</td></tr></table>
Copy line above

Two large and small images aligned as showed on example below:

<table class="collage"><tr><td rowspan="2" width="50%">LARGE</td><td width="50%">SMALL</td></tr><tr><td rowspan="2" width="50%">LARGE</td></tr><tr><td valign="bottom"  width="50%">SMALL</td></tr></table>
Advertisements

28 thoughts on “Collages

  1. can you explain more in depth? I did try before… but, to no avail. where does one insert the image?

  2. For example…"One big vertical on left, and small horizontal and vertical on right"You copy the code and paste it into blog form. Then you go to you r gallery and copy code for picture that is vertical and you wish to be shown large and on the left. Just replace the word 'LARGE' with that image code.Then copy code for small pictures, one for vertical and one for horizontal image and put those code where is said 'SMALL'. First one is for upper and next for lower image.Finally copy the CSS code from the first code box and put that on your blog CSS style sheet.I hope that helped. Ask more help if needed, and I try to do my best to explain it better.

  3. thanks, Sami- I'm a bit slow and I apologise. I understand the first box goes into my CSS- but the other part… as I upload, I have a large grey area in betw/ the 2 small photos at right. http://my.opera.com/studio41/blog/collage-2what do you do w/ the grey area? is the idea to insert text?I will now try another code…

  4. :doh: I did not mean you are suppose to copy the code for small image from right margin in albums. tt's better if you copy the code for large image into all boxes. 'Large' and 'small' only refers to size of pictures how they come out in the final collage.One can however, use the code for small images if the picture is horizontal. Unfortunately there is no code for small veritcal images withour black margins at Myopera galleries.I hope this explained it :up:

  5. Originally posted by serola:

    tt's better if you copy the code for large image into all boxes.

    thank you, I will try again ๐Ÿ™‚

  6. Good luck :up:

    :doh: Here's a code for one line and three cell table:

    <table class="strip">
    <tr><td>CONTENT1</td><td>CONTENT2</td><td>CONTENT3</td></tr>
    </table>

    Notice class="strip", which is defined on 'custom css page':

    table.strip img { width: 100%; border: 0px; }
    table strip #img { width: 100%; border: 0px; }
    table.strip { border-spacing: 5px; table-layout: fixed; background-color: #eeeeee; line-height:normal;}
    table.strip td { text-align: center; vertical-align: top; padding: 0px; font-size:10px;}
  7. Thanks Very Much for this link Sami I'm going to go give it a Try now :ko: Wish me Luck :wizard::star:

  8. Thanks both of you. Now I have something more on my plate to do on this cloudy day.I may even have this saved or bookmarked. ๐Ÿ˜† My shoulder socket hurts much less though! :yes: It seems I hardly do anything w/o at least the long term analgesic effect being considered.:doh:It used to be I'd get done with 2 or 3 books by the end of winter now 2 or 3 are done with me.

  9. Got a back pack repaired yesterday, but, no coding. I've yet to get the file system on this Droid organized.I'm prioritized, budgeted and crawling along. http://codeyear.com/ "found", or visa versa, that on CNN this morning!

  10. I hafta use dsktp!?maybe mini will crash write for me, the battery is still warming up to the ๐Ÿ’ก

  11. I haven't gone to the link yet Sami, I've been too busy installing already installed (?) updates from HTC. Say fromage!Sue Forbes was from Manasquan but you often make me wonder these days. May eye?

  12. At least these codes are supposed to be used for collages, not just for "jumble of things".

  13. Originally posted by Frlmnk:

    Often chronological is about as good as I can get.

    It very much depends on the compositions what is best arrangement. I sometimes direct the movement towards the center of the collage. But most important is to have collection where pictures somehow support the same theme aka are not just arbitrary selected.

  14. I do not mean pictures not taken yet. I speak of collage based on already taken pictures. Exhibition is much more pleasant experience if pictures support each other.

  15. Often chronological is about as good as I can get. :lol:I'm not sure when or if I'll ever put them to use, but, your experiments with the blog layout and software gives me a framework.It's difficult when the day to day weather determines my schedule.

  16. I meant this one :doh:I really wish I could leave my power, modem and computer at least setup if not booted and running. Everytime I resetup it's like all different it seems :bomb:Getting that organized seems impossible!

Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s