Dreamweaver - CSS photo gallery

Author

CSS photo gallery

Tintin81

2006-02-27, 6:17 pm

Please have a look at the following page:

http://www.timokleemann.com/index.php?page=photos

Can you see the photo gallery I made? I made it entirely in CSS without any
JavaScript :D and it works very well in most browsers.

BUT... it seems it doesn't work in Internet Explorer... :(

Why!!??? I have spent hours today trying to fix this, but NOTHING!

In the HTML each photo looks like this:

<div class="photo">
<a href="index.php?page=photo"><div id="thumb1"></div></a>
</div>

and so on...

The CSS looks like this (watch out, it's a long one!):

/********************* PHOTOS *********************/

.photo {
background: url(../images/drop_shadow.jpg) no-repeat;
height: 100px;
width: 100px;
padding: 10px;
margin: 0 10px 0 0;
float: left;
}

a:link #thumb1,
a:link #thumb2,
a:link #thumb3,
a:link #thumb4,
a:link #thumb5,
a:link #thumb6 {
position: absolute;
z-index: 98;
height: 80px;
width: 80px;
margin: 0;
padding: 0;
}

a:hover #thumb1,
a:hover #thumb2,
a:hover #thumb3,
a:hover #thumb4,
a:hover #thumb5,
a:hover #thumb6 {
position: absolute;
z-index: 99;
padding: 5px;
background: center no-repeat white;
border: 2px solid #f1f1f1;
}

a:link #thumb1 {
background-image: url(../images/thmb_alstervilla.jpg);
}
a:hover #thumb1 {
background-image: url(../images/img_alstervilla.jpg);
height: 390px;
width: 300px;
}

a:link #thumb2 {
background-image: url(../images/thmb_beach.jpg);
}
a:hover #thumb2 {
background-image: url(../images/img_beach.jpg);
height: 300px;
width: 390px;
}

a:link #thumb3 {
background-image: url(../images/thmb_library.jpg);
}
a:hover #thumb3 {
background-image: url(../images/img_library.jpg);
height: 390px;
width: 300px;
}

a:link #thumb4 {
background-image: url(../images/thmb_cambridge.jpg);
}
a:hover #thumb4 {
background-image: url(../images/img_cambridge.jpg);
height: 390px;
width: 300px;
}

a:link #thumb5 {
background-image: url(../images/thmb_graduation.jpg);
}
a:hover #thumb5 {
background-image: url(../images/img_graduation.jpg);
height: 300px;
width: 390px;
}

a:link #thumb6 {
background-image: url(../images/thmb_facade.jpg);
}
a:hover #thumb6 {
background-image: url(../images/img_facade.jpg);
height: 390px;
width: 300px;
}

Or check out http://www.timokleemann.com/css/timo.css

(if you have time...)

I really need some help here!!!

Css Lover

2006-02-27, 6:17 pm

The first link works fine for me, the photos behave like any normal rollover.

I'm not sure if you pre-load the images for modem users and suchlike, but it
works fine for me and I'm using IE6 on XP Home.

Css Lover

2006-02-27, 6:17 pm

Just to update, I noticed that the css has some images sized as thus...

height: 390px;
width: 300px;

But your rollover uses a neat little 100 by 100 pixel, but I'm not sure if
you've neglected to resize some of the thumbnails there.

You have no 390 by 300 image on that homepage so may need to look at this,
even if the page works, which it certainly does for me.

Al Sparber- PVII

2006-02-27, 6:17 pm

You're going around it kind of backwards - it can be a lot simpler. This
is a basic example. You can pretty it up by using your shadow
backgrounds on the DIV:

http://www.projectseven.com/testing/customers/trintin/

--
Al Sparber - PVII
http://www.projectseven.com
Popup Menu Systems - CSS Tutorials - CSS Templates
---------------------------------------------------------
Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
DW Newsgroup: news://forums.projectseven.com/dreamweaver/

"Tintin81" <webforumsuser@macromedia.com> wrote in message
news:dtvqve$kp$1@forums.macromedia.com...
> Please have a look at the following page:
>
> http://www.timokleemann.com/index.php?page=photos
>
> Can you see the photo gallery I made? I made it entirely in CSS
> without any
> JavaScript :D and it works very well in most browsers.
>
> BUT... it seems it doesn't work in Internet Explorer... :(
>
> Why!!??? I have spent hours today trying to fix this, but NOTHING!
>
>
>
> In the HTML each photo looks like this:
>
> <div class="photo">
> <a href="index.php?page=photo"><div id="thumb1"></div></a>
> </div>
>
> and so on...
>
>
>
> The CSS looks like this (watch out, it's a long one!):
>
> /********************* PHOTOS *********************/
>
> .photo {
> background: url(../images/drop_shadow.jpg) no-repeat;
> height: 100px;
> width: 100px;
> padding: 10px;
> margin: 0 10px 0 0;
> float: left;
> }
>
> a:link #thumb1,
> a:link #thumb2,
> a:link #thumb3,
> a:link #thumb4,
> a:link #thumb5,
> a:link #thumb6 {
> position: absolute;
> z-index: 98;
> height: 80px;
> width: 80px;
> margin: 0;
> padding: 0;
> }
>
> a:hover #thumb1,
> a:hover #thumb2,
> a:hover #thumb3,
> a:hover #thumb4,
> a:hover #thumb5,
> a:hover #thumb6 {
> position: absolute;
> z-index: 99;
> padding: 5px;
> background: center no-repeat white;
> border: 2px solid #f1f1f1;
> }
>
> a:link #thumb1 {
> background-image: url(../images/thmb_alstervilla.jpg);
> }
> a:hover #thumb1 {
> background-image: url(../images/img_alstervilla.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb2 {
> background-image: url(../images/thmb_beach.jpg);
> }
> a:hover #thumb2 {
> background-image: url(../images/img_beach.jpg);
> height: 300px;
> width: 390px;
> }
>
> a:link #thumb3 {
> background-image: url(../images/thmb_library.jpg);
> }
> a:hover #thumb3 {
> background-image: url(../images/img_library.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb4 {
> background-image: url(../images/thmb_cambridge.jpg);
> }
> a:hover #thumb4 {
> background-image: url(../images/img_cambridge.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb5 {
> background-image: url(../images/thmb_graduation.jpg);
> }
> a:hover #thumb5 {
> background-image: url(../images/img_graduation.jpg);
> height: 300px;
> width: 390px;
> }
>
> a:link #thumb6 {
> background-image: url(../images/thmb_facade.jpg);
> }
> a:hover #thumb6 {
> background-image: url(../images/img_facade.jpg);
> height: 390px;
> width: 300px;
> }
>
>
>
> Or check out http://www.timokleemann.com/css/timo.css
>
> (if you have time...)
>
> I really need some help here!!!
>

Tintin81

2006-02-27, 10:14 pm

Wow, Al Sparber- PVII, I love that link you made there for me! Thanks so much!
I think you found a solution for me there. Please leave the link on the server
for a few more days. I do all my work on a Mac, where the site works fine on
all browsers. I won't have access to IE6 before tomorrow evening. Then I'll
implement your idea.

If you want to know exactly what I'm aiming for, check out my site in Firefox
or Safari where it works perfectly fine:

http://www.timokleemann.com/index.php?page=photos

Al Sparber- PVII

2006-02-27, 10:15 pm

"Tintin81" <webforumsuser@macromedia.com> wrote in message
news:du034q$auq$1@forums.macromedia.com...
> Wow, Al Sparber- PVII, I love that link you made there for me! Thanks
> so much!
> I think you found a solution for me there. Please leave the link on
> the server
> for a few more days. I do all my work on a Mac, where the site works
> fine on
> all browsers. I won't have access to IE6 before tomorrow evening. Then
> I'll
> implement your idea.
>
> If you want to know exactly what I'm aiming for, check out my site in
> Firefox
> or Safari where it works perfectly fine:
>
> http://www.timokleemann.com/index.php?page=photos

Those folders stay up at least a few weeks before rotating out - so it
should be no problem. I did look in Firefox and Opera first - and it is
a very nice technique - time consuming, but nice :-)

Dave Farmer

2006-02-27, 10:15 pm

On Mon, 27 Feb 2006 19:23:42 -0500, Al Sparber- PVII wrote:

> http://www.timokleemann.com/index.php?page=photos

The big problem here is that the large image covers up most of the
thumbnails so to move from one to another in short sequence isn't really
possible

Bonnie

2006-02-28, 6:20 pm

Tintin81 wrote:
> Please have a look at the following page:
>
> http://www.timokleemann.com/index.php?page=photos
>
> Can you see the photo gallery I made? I made it entirely in CSS without any
> JavaScript :D and it works very well in most browsers.
>
> BUT... it seems it doesn't work in Internet Explorer... :(
>
> Why!!??? I have spent hours today trying to fix this, but NOTHING!
>
>
>
> In the HTML each photo looks like this:
>
> <div class="photo">
> <a href="index.php?page=photo"><div id="thumb1"></div></a>
> </div>
>
> and so on...
>
>
>
> The CSS looks like this (watch out, it's a long one!):
>
> /********************* PHOTOS *********************/
>
> .photo {
> background: url(../images/drop_shadow.jpg) no-repeat;
> height: 100px;
> width: 100px;
> padding: 10px;
> margin: 0 10px 0 0;
> float: left;
> }
>
> a:link #thumb1,
> a:link #thumb2,
> a:link #thumb3,
> a:link #thumb4,
> a:link #thumb5,
> a:link #thumb6 {
> position: absolute;
> z-index: 98;
> height: 80px;
> width: 80px;
> margin: 0;
> padding: 0;
> }
>
> a:hover #thumb1,
> a:hover #thumb2,
> a:hover #thumb3,
> a:hover #thumb4,
> a:hover #thumb5,
> a:hover #thumb6 {
> position: absolute;
> z-index: 99;
> padding: 5px;
> background: center no-repeat white;
> border: 2px solid #f1f1f1;
> }
>
> a:link #thumb1 {
> background-image: url(../images/thmb_alstervilla.jpg);
> }
> a:hover #thumb1 {
> background-image: url(../images/img_alstervilla.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb2 {
> background-image: url(../images/thmb_beach.jpg);
> }
> a:hover #thumb2 {
> background-image: url(../images/img_beach.jpg);
> height: 300px;
> width: 390px;
> }
>
> a:link #thumb3 {
> background-image: url(../images/thmb_library.jpg);
> }
> a:hover #thumb3 {
> background-image: url(../images/img_library.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb4 {
> background-image: url(../images/thmb_cambridge.jpg);
> }
> a:hover #thumb4 {
> background-image: url(../images/img_cambridge.jpg);
> height: 390px;
> width: 300px;
> }
>
> a:link #thumb5 {
> background-image: url(../images/thmb_graduation.jpg);
> }
> a:hover #thumb5 {
> background-image: url(../images/img_graduation.jpg);
> height: 300px;
> width: 390px;
> }
>
> a:link #thumb6 {
> background-image: url(../images/thmb_facade.jpg);
> }
> a:hover #thumb6 {
> background-image: url(../images/img_facade.jpg);
> height: 390px;
> width: 300px;
> }
>
>
>
> Or check out http://www.timokleemann.com/css/timo.css
>
> (if you have time...)
>
> I really need some help here!!!
>
It is **not** working for me on Firefox: the pictures jump around,
cover each other up, or reveal big white boxes as I move the mouse
around. FWIW, and I see you are probably going a different route
anyway. :-)

--
Bonnie in California
kroko at
sbcglobal dot net
http://www.theanimalrescuesite.com/...ts/CTDSites.woa

Tintin81

2006-02-28, 6:21 pm

By the way, are the big images loading fast enough? Do you think I should pre-load them with JavaScript?

Tintin81

2006-02-28, 6:21 pm

Hey you people,

Thanks a lot for your support so far, especially to Al Sparber- PVII, who
saved me about 10 hours of blood, sweat and tears!!

Can you please check if the photo gallery works in your browser now:

http://www.timokleemann.com/index.php?page=photos

I checked it this morning in IE6 and very much to my surprise it worked!
Please let me know if you encounter any problems when rolling over the
thumbnails etc.

I am developing on a Mac which is why I have only occasional access to IE6 for
PC.

Cheers!