12 replies [Last post]
scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

I don't even know where to begin with this one. My first hunch is that it isn't possible due to the nature of floats.

presenting my slightly modded stolen image gallery.

this is how it looks.

this is how I want it to look.

What do I do? :!:

~= scwizard =~

jlhaslip
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[unsolved] Centering floating elements

Hi, first of all, the html tags don't work here. Use bbcode tags to create the clickable url's. Example: [ u r l = http:// etcetera, blah] this is a link description[/u r l ] There are spaces in that bbcode which should be removed for it to work correctly, but you should be able to figure it out.
Secondly, yes, I have downloaded the same Hoverbox code and the technique used depends on floating all the images inside the "box-frame". The Original was only 5 images wide, with the Box-frame being of a fixed width and is carefully crafted to accomodate the image sizes the author had in the example.
The float forces the left side of the image to the edge of the containing box. If you adjust the width of the box (as you appear to have done to get additional images on the line), the images re-adjust to fill the available space on the first line until there is not enough room to add another image, then the second line is filled in the same manner. You may be able to add some padding to the "box-frame" to give the centered appearance, which I think is what you are asking for, but simply tweeking the Box-frame width to include the correct number of images might be an easier solution. IMHO

*edit*
I have the Hoverbox code on another machine and will fire it up later to see if the padding possibility will work. And will post back here with the results.

I'm having a good day...so far.

scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

[unsolved] Centering floating elements

Or you could have just looked at my code.

If you had you would have seen that the width changes fluidly.
But even if it didn't your suggestion wouldn't have worked. I tried it.

~= scwizard =~

jlhaslip
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[unsolved] Centering floating elements

Okay, I was using the imageshack images as a reference. Didn't notice the link to the page there.

Have you tried adding padding-left to the Box-frame?

I'm having a good day...so far.

scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

[unsolved] Centering floating elements

That does work, but the spacing I need to pad shifts fluidly.

~= scwizard =~

jlhaslip
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[unsolved] Centering floating elements

If the objective is to centre the line of images inside the Hoverbox with a fluid width (images being a fixed or given width), my suggestion would be to write a script to calculate the padding required on the Hoverbox.
Otherwise, the floating of the line of images will leave the remaining space on the right hand side of the Hoverbox, which I think is what you are trying to avoid?

I'm having a good day...so far.

scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

[unsolved] Centering floating elements

If the objective is to centre the line of images inside the Hoverbox with a fluid width (images being a fixed or given width), my suggestion would be to write a script to calculate the padding required on the Hoverbox.

So you don't know how to do it (with pure CSS anyways).
/me waits for a guru to log on because they always know everything. Right? Right? Tongue

I remain confident that there is a better solution to this problem </blind hope>

~= scwizard =~

jlhaslip
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[unsolved] Centering floating elements

Quote:
/me waits for a guru to log on because they always know everything. Right? Right? Razz

I think that guru is on a holiday... Tongue

I'm having a good day...so far.

jlhaslip
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

[unsolved] Centering floating elements

Just pondering on this for a moment...

Question is: How many 6 inch cubes can you place inside a box of indeterminant size?

Answer: it depends on the size of the containing Box, right?

Therein lies the difficulty. That is most likely why the original Hoverbox is a fixed width. To fit a determined number of Images inside the fixed containing box.
As an alternative to fixing the size of the Hoverbox, could the Image size be tweeked by a script to determine the "best-fit" inside the Browser's known viewport size?

Just kinda thinking out loud... Wink

I'm having a good day...so far.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9752
Points: 3834

[unsolved] Centering floating elements

Not tested.

Make the list items inline instead of float. Make ul {text-align: center;}. That should be a good start, though I'm sure there will be some details to work out. There always are, no? Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

[unsolved] Centering floating elements

That works as far as centering the content goes, however it introduces tons of new problems.

I have no idea how to work through those problems. If you could do it for me that would be superb.

~= scwizard =~

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9752
Points: 3834

[unsolved] Centering floating elements

scwizard wrote:
That works as far as centering the content goes, however it introduces tons of new problems.
Like what?

Quote:
I have no idea how to work through those problems. If you could do it for me that would be superb.
That's not happening. We'll help you solve your issues, but not do it for you.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

scwizard
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2006-04-26
Posts: 22
Points: 0

[unsolved] Centering floating elements

Sorry about my previous tone.

The problems are kind of hard to describe, I don't really know enough about what the hell is going on to put them to you in words, but I'll post a sample page in a bit.

At least in mozzila inline doesn't look like it was designed to go with images.

~= scwizard =~