13 replies [Last post]
blueguy
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-14
Posts: 6
Points: 0

hi there, i'm quite new to the whole css thing, so bear with me if I seem a little thick Shock
i'm trying to get a fluid online gallery up, so if the window is resized, the thumbnails will drop to the line below them. i followed a few tutorials online & they seemed to work ok, but as soon as i try to position the thumbnails in a box, it goes horribly wrong. here is the link to a test page:

http://www.fluctuation.co.uk/Gallery/p1.html

here is the css:
http://www.fluctuation.co.uk/Gallery/gallery.css

if any of you guys colud help me with this, it would be great!

cheers!
blueguy

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with css gallery

I use this

Here is the code for the image and caption

<div class="floatpics">
<a href="images/whatever.jpg" target="_blank"><img src="images/whatever.jpg" /></a><br />
<p>This is a pic of whatever</p>
</div>

Which I have in a container /box.

Here is the CSS I use

.floatpics {
float: left;
margin: 5px;
}
  
div.floatpics p {
text-align: left;
width: 150px;
height: 100px;
}
		   
div.floatpics img {
height: 70px;
width: 126px;
}

You can of course set the text or thumbnails to whatever you want. I am aslo a bit new a CSS so if anybody thinks that this could be made better, I would welcome input.

Regards
Day

The only way to learn is to do it yourself

blueguy
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-14
Posts: 6
Points: 0

Problems with css gallery

Thanks very much for your reply daybreak. I tried out your tip, but i got the same problem. The thumbnails don't stay inside the red box.

It seems to recognise the left hand side of the box as the starting point, but instead of recognising the right hand side of the box as the point that the the thumbnail has to drop down to the next line; it uses the outer right of the page as it's reference.

i also need the thumbnails to be different sizes. do you think that this might be part of the problem? another guess on my part (prob completley wrong) is that it might be due to the box (.content) being relativley positioned. ahh well, guess i best keep experimenting.
cheers m8!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with css gallery

Blueguy does look like the thumbnails are not being contained by your box.

Now I think that is a bit strange, The red box being relatively positioned no longer has a container itself, but it should contain the thumnails, UNLESS they are also being relatively positioned , or so I believe.

The question is what container is holding them, and why not give it a red border Smile or use a static box.

Good Luck
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 46 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Problems with css gallery

This is the IE "escaping floats" bug, and thanks to a newly
invented trick, the "Holly hack", this can now be fixed.

The problem for IE is that the red bordered float container
has no stated dimension. either width or height. Given either
one, IE will behave. Since you probably want the design to
remain fluid, you could give the container a width in %, but
then that would preclude having a pixel-sized col or image
next to it.

The Holly hack is an easy-to-apply method that changes
nothing, but cures the bug. Use this css code on the red box:

/* hide from IE-mac \*/
* html .redbox {height: 1%;}
/* end hide for IE-mac */

The first and third lines are a comment hack that prevents IE/mac
from reading what is between them, since that browser doesn't
have this bug but will be messed up if it sees the inner hack.

That second line is the Tan hack, and selects .redbox when it
is contained anywhere within HTML, but ONLY if the HTML element
is contained within *any* element whatsoever. Y'see, IE browsers
think there is a "wrapper" that encloses HTML! No other browser
believes this, so they all ignore the Tan hack and its contents.

Thus this combo hack feeds that 'height: 1%' only to IE/win browsers.
You would think that small a height would be bad, but you would be
wrong, because IE/win always enlarges boxes to fit their content,
even when you tell it not to! So the box is not 1% high, but the
bug is fixed
. Ain't that a cool hack?

The Holly hack can be used anywhere a dimension will fix an
IE bug (there's quite a few, mostly with floats).

If a new IE/win version stops expanding boxes but maintains
that mystery HTML wrapper, this hack will become dangerous,
but I'm not holding my breath.

http//www.positioniseverything.net/

blueguy
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-14
Posts: 6
Points: 0

Problems with css gallery

Hey! thanks man! i appreciate the help. i'm going to go off & try your hack. i had almost given up & turned to jalbum for ready made code - i'll experiment & try to amalgamate code from that as well - see what happens. thanks again for your help Smile

best regards
blueguy

blueguy
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-14
Posts: 6
Points: 0

Problems with css gallery

here's what i got so far.

http://www.fluctuation.co.uk/Gallery/index.html

css:
http://www.fluctuation.co.uk/Gallery/res/styles.css

it isn't fluid - unfortuntely - i just couldn't get it to stick to 4 column 2 rows. i would ideally like it to be two by 4, whatever resolution it is viewed in. i.e -when it is in 800*600, 10248*768 or whatever, - it is 2 by 4. but if the window is increased or decreased - the thumbnails are fluid, dropping to the line below. i think i'm looking @ creating different stylesheets for resolutions to get this pipe dream working!
netscape is traumatising the whole arrangement too Shock . if anyone has anymore suggestions, they would be greatly appreciated:)

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with css gallery

Big John

Thank you did not know about the escaping floated boxes.

And thank you for the holly hack.

Just to ask I thought the * html hack was the Andrew Clover hack.

And Tantek uses the Voice Family hack?

Regards
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 46 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Problems with css gallery

So just give the red box a pixel width. That will prevent both
the IE bug and also keep the gallery from changing width.

BTW, I see you have learned to keep all the floats
at the same height. That is the most critical thing
about floated galleries.

http//www.positioniseverything.net/

blueguy
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-11-14
Posts: 6
Points: 0

Problems with css gallery

ha ha! i figured sod having them different sizes if it meant having the thumbnails in diff hemispheres Shock

umm, i'm not sure if i follow you entirely about the 1px border. i would like the thumbnails to be fluid. however when expanded into the maximum for 1024*720, i would like it to stay in 4*2, hyowever this doesn't seem to happen - it just wraps round tp 6*2 or 5*3.

hope that makes sense. or maybe i didn't get what you meant Smile

anyway - thanks again for all your tips.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 46 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Problems with css gallery

Quote:
Just to ask I thought the * html hack was the Andrew Clover hack.
And Tantek uses the Voice Family hack?

Tantek was first, with the well known "escape" based
voice family hack, then Andrew clover "simplified" it,
and finally Edwardson Tan discovered the * html
method of feeding only to IE.

Tan produced a slew of interesting hiding hacks, BTW.

http://css-discuss.incutio.com/?page=BoxModelHack

That page is part of the css-d Wiki, a site packed tight
with extremely useful info on all css topics. I highly
recommend it.

The primary advantage of the Tan hack (aside from the
ease of use) is that only IE ever sees the rule at all, so
older browsers (Nav4) that might choke on an escape
in the css won't be harmed. Add in the fact that even
chimps can understand it and we got a winner, folks! Cool

http//www.positioniseverything.net/

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with css gallery

I seem to always have problems with the * html hack and moved back to using the voice hack, when height needs to be adjusted.

for example IE 6 does not seem to pick up height in the following

* html .class {width:40px; height:40px; w\idth:35px, h\eight:35}

My understanding was that height would work as well when any attributes starting with A-G would not. I hjave tried splitting the above as well but did not help, and only use this hack (nice and simple it is) when I do not have an issue with height.

Regards
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 15 years 46 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Problems with css gallery

The thing about using an escape based hack is that
the escape must never directly preceed any of the
first six alphabetical characters: a, b, c, d, e, or f.

When that happens the browser assumes you are
escaping a hex code, the character is ignored, and
"h\eight" becomes "hight". Since hight is not a valid
property name it is ignored.

Just make it "he\ight" and no problem. With this hack
the escape is always inside the property name, not at
the beginning as with the earlier Clover hack, or IE5.x
might read and obey it.

http//www.positioniseverything.net/

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with css gallery

ahha thanks Big John. It is so much simpler than the voice family hack.

Did not read it correctly

Day

The only way to learn is to do it yourself