Photo-site
Fabio (87 points) | Thu, 2005-08-04 14:05In my spare time I like to make photographs, probably like a lot of people here ;-)
Besides printing & on screen viewing I would also like to share some of my favorite photos. So I decided to make a website and sketched a version or 10, and now, finally (!) I came up with something fitting the feeling or atmosphere I'd like to give to my presentation.
As you can see it's not groundbreaking or very progressive in (web)design, but still, I like it! :-)
So, could you people let me know what you think of it? I'd appreciate your opinions.
Hopefully I will be able to realize this design with css/asp! :-)
Thank in advance!
Commenting on this Image is closed.
where would the important things like navigation and your links be?
Im liking the concept so far, it looks like a job for CSS, it could be resized with css depending how you want to resize it.
look forward to updates on this, im liking what you have so far
__
Goo
The initial idea was to start with this basic lay-out, but without the photo. So a file-folder with maybe some info 'written' on it would function as my home-page. Maybe I will put the text on note-paper-like picture (Let me try and upload the pictures to accompany this post ;-)
Sub-navigation will be on the tabs on the top of the 'file', different galleries shoud be placed here. The words written on the bottom of the file ('Vorige' & 'Volgende') are the backward- and forward-button per gallerie.
I want to keep the site basic and straightforward, since it's 'just' a personal photo-site :-)
I started to realize the page, and I was wondering if it's behaving the way it should :-)
So far I've got the basics.
http://www.bartali.nl/div_toggle/index.html
Links aren't working yet, except for the 'home'- and 'foto'-links on top. These links should 'switch' the tabs and show/hide the note holding the text and pictureframe. Not all graphics are finished either, so please don't hold it against me ;-)
Could anyone let me know if the page is functioning properly and with what os/browser you viewed it (don't have any other machines here besides mymac with osx)?
I think it's excellent. Love the feel of it. I may have seen something similar before as you suggest, but it's not hackned.
I agree with Ivan, Love the feel to it.
Overall a nice site and I think the tabs would make a nice global navigation, but I do like the lined paper for the initital start page :) - nice job!!
__
Goo
Hehe, thanks! I was just discussing the possibilities with one of my co-workers. Maybe I'll put some other navigational extras in it besides the tabs (like stacks of photos per category or something like that), but I think I should do some css-homework to rearrange the order of the divs first (I'm not a webdesigner at all!).
But your comments give me the feeling I'm headed in the right direction, thanks guys! :-)
I'll keep you informed.
aaargh, just viewed it on a windows-machine... those machines really scare me! doesn't internet explorer even support png's?! the transparancy shows like a pink border :-(
fortunately the layer positioning looks ok, but pfff! graphics don't look as good as they do on my mac(s)... is it me or?
and does anyone know if it's possible to dynamically change the z-index of layers (for example 'pulling' a div on top by clicking inside it)?
IE does not support alpha transparency in PNGs. Try to use GIF if you can get away with it, otherwise you can "fake" transparency using a JPEG that looks like it is transparent over something.
---------------------
Josh Stevens | Nautilus7 Design
My CB Blog
---------------------
Josh Stevens | My Site
My CB Blog
hmm, maybe i'll just put a site-check on my site with a redirect to apple.com for msie-users ;-)
what is it with microsoft and standards? unfortunately faking transparancy is not good enough (for me anyway), because i'd like to use it for dropshadows in top-layers...
all i wanted was a simple (!) website for my photos ;-)
for the time being...
http://www.flickr.com/photos/thirt13nth_pixel/
Just curious why it wouldnt be good enough?
Your viewers will not notice one bit of difference, and it will probably be smaller in filesize to boot :)
What exactly where you going to do with the drop shadows? Depending on how you are using them, faking it is often better (which is why most drop shadows you see on the net are faux anyway).
---------------------
Josh Stevens | Nautilus7 Design
My CB Blog
---------------------
Josh Stevens | My Site
My CB Blog
You're probably right about the filesize, but – even though I'm not sure if it's technically possible – I would like to have several layers with a dropshadow stacked on top of each other. The layers should move up or down in the z-index order after clicking a link.
The transparancy-feature of the png-format is great for this if you want to use nothing more than a bit of html, css and javascript.
But maybe, maybe... I shouldn't let my idea of simple be my definitive guide ;-)
Perhaps I can think of a way to simulate these stacks in one way or another, suggestions are always welcome! :-)
i found a rather nice way to rearrange the order of the divs, a temporary experiment:
http://www.bartali.nl/div_toggle/zindex.html
clicking the links on top should put the stack linked to the link on top. if this works i might let go of the idea of the dropshadows after all ;-)
Okay, after a bit of searching I found a nice script for my site. Luckily this feels good enought to forget about the dropshadows ;-)
Here it's working fine (safari 1.3), but I'd like to hear from you if it's also working on other machines/os'es/browsers etc.
The file so far is right here:
http://www.bartali.nl/div_toggle/change_zindex.html
On the photo-page, clicking on a photo should bring it on top. Of course I still have to implement the asp, but for the moment I'm quite happy :-)
This link might help. It only works in IE 5.5 and up though. {IE7 is said to support png transparency natively.}
http://homepage.ntlworld.com/bobosola/pnginfo.htm
I agree with the need for dropshadows here. The lack of dropshadows steal from concept. It's "real" but not. If you know what I mean. Where are you from? The Netherlands? {well, obviously, with .nl!?!} The "vorige", "volgende" just caught my eye.
As for IE, unfortunately, and this debate is all over the net, unforunately the amount of IE users are so big... we just can't ignore them. Okay, I've done some cross-browser checking for you, all OSX though.
Safari - Rendering is spiffy. Very nicely done.
Netscape - Works fine.
Camino - Still going smoothly!
Opera - Z-index is fine, but... borders on photos come out too narrow. the lright hand side does not display by about 50px.
Here's a handy tip.
Always design your CSS for Safari / FireFox. Don't look at it in IE before you're not finished with it.
THEN...
Go to IE - AAAAGH! Okay, here's the fix.
Figure out the problem and correct it in your CSS like this
padding-top-left:10px
_padding-top-left:8px
All browsers except IE ignore the _padding as a comment, while IE reads it. So, where IE gives you problems, correct it with _comment and you'll be fine. This works fine, no ugly "hacks" or whatever.
Got this tip from : http://www.noscope.com/journal/2005/01/showing-css-to-ie-only-the-underscore-hack
Okay, I admit, it's not valid, it won't validate. But it works fine. {Oh, the shame!}
The Construct Agency
Building Creative Brands for People