20 replies to this topic

[sonesay]

http://sonesayi.com/si/portfolio.php

Hey guys, In the past few days I was making changes to how I uploaded my images and portfolio entries. I now have a working form that takes new portfolio item entries and images then generates thumbnails as well when its uploaded. This makes my life easier when adding in new items .

My problem is that now since the thumb nails are generated automatically and vary in size due to the different heights and widths of each image I get inconsistent thumbnail sizes being generated and put on my portfolio entries. This results in my DIV for each portfolio entries height and width being inconsistent. This is not a huge problem but I want to know what others think. is it really a big deal to you? If so are they any ideas on how to improve the layout?

The reason I have chosen go with floating DIV's instead of a table layout is I get the auto spreading and grouping of items as the page gets expanded. I think this is a nice feature because you utilize the entire page as opposed to fix width layouts.

Comments on other sections are also welcomed and much appreciated. I'm pretty much brain dead from all this thinking so I may have miss something I could improve on that is so obvious.

Cheers
Sone

note: also I am able to check in IE7 since my PC's power supply is dead so if anyone can check and let me know of any problems that would be nice.

[onscreen]

floating DIVs kill your layout. It is all overlapped viewed in Opera and Firefox. What you need is a fluid CSS layout where everything from header to content expand and shrink accordingly without the messed up layout.

This link should give you a headstart : http://www.456bereastreet.com/archive/2005..._width_elastic/

Also, do not rely on one browser in making sites. Make full use of the If..EndIf at the html headers to make workaround for other browsers.

Example : <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"><![endif]-->

Explaination : if lower than IE 8, link the herf css for IE 8 browser viewing. End if.

[sonesay]

onscreen, on Nov 27 2008, 05:32 PM, said:

floating DIVs kill your layout. It is all overlapped viewed in Opera and Firefox. What you need is a fluid CSS layout where everything from header to content expand and shrink accordingly without the messed up layout.

This link should give you a headstart : http://www.456bereastreet.com/archive/2005..._width_elastic/

Also, do not rely on one browser in making sites. Make full use of the If..EndIf at the html headers to make workaround for other browsers.

Example : <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"><![endif]-->

Explaination : if lower than IE 8, link the herf css for IE 8 browser viewing. End if.

Ok maybe its my fault that I wasn't clear enough. I tried my best but I cant seem to understand how you came to the conclusion that I had a problem with my layout by referring me to that link. The link you gave me just explained a way to create elastic layouts but I have a fixed width for my navigation and elastic content already. I stated on my 3rd paragraph that I was happy with the way it expanded. My only problem was the inconsistent heights of the DIV for each portfolio items entry. I actually like the wrapping of the portfolio items as widths contracted. My problem was with the inconsistent heights.

You say they overlap in firefox and Opera? What do you mean my portfolio items are overlapping? Can you take a screen shot and show me because I don't see that happening. Also what resolution are you viewing it at? I checked in ff3 and opera and it seems fine besides the height problem of item DIV's. There is a minimum width set so on both ff3 and opera and safari I get at least 2 portfolio items shown on each row.

If all this problem is on IE7 I can understand as I have not got access to the browser and cannot check it for myself.

[jlhaslip]

Might want to check out this sourceforge software that manages the creation of thumbnails.
You can specify the destination size and aspect so that the original shape is maintained, watermark them, add effects and several other features. A very complete thumbnail creation system.

http://phpthumb.sourceforge.net/

Try http://www.zubrag.co...l-generator.php
Or http://www.google.ca/search?q=php+script+t...lient=firefox-a

[Ruben]

To me there was one problem. When I first entered the site it looked jumbled, and I had no clue about what it was about. Now, your work looks great, but it shows that you aren't too into web design. You need to lay it out better, but everything lined up maybe. All for now, hope you like it.

Overall: 6/10

[sonesay]

Thanks for the link jlhaslip. The script that I am currently using does keep aspect ratios the same. The problem is caused by different image sizes (The sizes vary and ratios vary for each image so the generated thumbs are just a smaller version of that).

I seem to have fixed this by adding a div to contain the image and then setting a minimum height. I appears to be fine in ff3, safari 3.2, and opera 9.62. If anyone can check in IE that would be great.

[jlhaslip]

IE 6 won't like the min height. Can't recall if IE 7 and 8 work, either.

[contactskn]

Dear friend I have gone through your website and its a good one. What I think is the contents are really good and you should go for a good and professional look now. I am sure a bit change in the background and colour may give a catchy look to your website. And it will in turn attract more and more people towards your website. 

[sonesay]

I've made some updates and have decided to lose the lightbox gallery. http://sonesayi.com/si/portfolio.php I think its much more subtle and elegant this time round. Any comments appreciated. I have tested the layout in IE7 using http://browsershots.org and see no errors but I cant test out the ajax calls since it only takes screenshots. If anyone can test it on IE7 much thanks.

I will be changing it a bit so check back in a day or two (using JQuery now. great library if you haven't already tried it )

[Saint_Michael]

After looking at your site and working on my portfolio I would say you should move your site to a wordpress as you can do a lot more with it in less time, especially with images, about page, resume and stuff like that. take a look at my portfolio to get an idea how to set it up or at least the pages and the images and what not and if you need plugin suggestions if you do decide to move over to wordpress let me know and I give you all the ones that I am using/