Lisa, the Simpson!
October 08, 2008, 03:15 *
Welcome, Guest. Please login or register.

Login with username, password and session length
 Add Site
 
   Home   Galleries Library Help Search Members Login Register  
Lisa, the Simpson! > Discussions > Lisa's Friends > Topic: Need help - Gallery layout (HTML)
Pages: [1]
« previous next »
  Print  
Author Topic: Need help - Gallery layout (HTML)  (Read 749 times)
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« on: March 04, 2008, 20:06 »
Sorry for posting this here, maybe it's not the most appropriate place for such questions, but I've posted the same on several different technical forums, and got no help... and I need to solve this problem somehow... *headdesk*

I have a gallery page, with number of items on it. Each item is a thumbnail image + short title, all wrapped in a DIV element with fixed width/height. How should I make browsers wrap all those items list into several rows, if the width of the page is unknown? On 800x600 resolution there should be, say, 8 items per row, on 1024x768 there should be 10 etc.

So far I did this: <div style="float:left"> for each item. This wraps them correctly (see below), but all items are aligned to the left now, and there is an unpleasant gap on the right. And all items should be centered. Here's the example:

<style>
div { border:1px solid black; }
div.pic { float:left; width:100px; height:100px; margin:5px; }
</style>

<div style="width:380px;height:250px">

<!-- 1st "picture" -->
<div class="pic" style="background-color:green"></div>

<!-- 2nd "picture" -->
<div class="pic" style="background-color:red"></div>

<!-- 3rd "picture" -->
<div class="pic" style="background-color:blue"></div>

<!-- 4th "picture" -->
<div class="pic" style="background-color:yellow"></div>

</div>

It shows the following:


But what I need is the following:


Or:


Need help... Sad
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« Reply #1 on: March 05, 2008, 21:09 »
Got some kind of a solution on one technical forum today.
Not the easiest one (JavaScript + JQuery), but at least it works as expected and it seems to be impossible to solve it any other way.
So, the topic is closed, I guess Smile
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
SimpReal
Mood Swinger
Administrator
*
Offline Offline

Gender: Male
Posts: 1323

Goodbye summer!

View Profile WWW
« Reply #2 on: March 05, 2008, 21:11 »
Sorry i'm late.

Can you just add a padding-left attribute to the second div (the "block" that contains the pictures), using inline CSS?

Like this.. i used 20 pixels but you could use a percent maybe.

<style>
div { border:1px solid black; }
div.pic { float:left; width:100px; height:100px; margin:5px; }
</style>

<div style="width:380px;height:250px; padding-left: 20px">

<!-- 1st "picture" -->
<div class="pic" style="background-color:green"></div>

<!-- 2nd "picture" -->
<div class="pic" style="background-color:red"></div>

<!-- 3rd "picture" -->
<div class="pic" style="background-color:blue"></div>

<!-- 4th "picture" -->
<div class="pic" style="background-color:yellow"></div>

</div>
Logged
There is no sense crying over every mistake,
you just keep on trying 'till you run out of cake ^_^
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« Reply #3 on: March 05, 2008, 21:22 »
SimpReal
That padding trick could be a solution, but the problem is, you can't calculate its value beforehand. The width of the outer DIV is unknown; it depends on the client's screen resolution. Maybe I didn't explain the problem properly... but the idea is to make a gallery with a "rubber" layout, the one that stretches to the browser's width.

By the way, that solution's idea was the same: to calculate and set the left padding of the outer DIV. Smile It uses JS+JQ for doing that on client's side.
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
SimpReal
Mood Swinger
Administrator
*
Offline Offline

Gender: Male
Posts: 1323

Goodbye summer!

View Profile WWW
« Reply #4 on: March 05, 2008, 21:45 »
This seems to be working in Firefox, but i cant try it on other browsers...

<style>
div.pic { float:left; width:100px; height:100px; margin:5px; }
</style>

<div style="border:1px solid black; height:250px">
<div Style="margin-left: auto; margin-right: auto; width:80%">
<!-- 1st "picture" -->
<div class="pic" style="background-color:green"></div>

<!-- 2nd "picture" -->
<div class="pic" style="background-color:red"></div>

<!-- 3rd "picture" -->
<div class="pic" style="background-color:blue"></div>

<!-- 4th "picture" -->
<div class="pic" style="background-color:yellow"></div>

<!-- 1st "picture" -->
<div class="pic" style="background-color:green"></div>

<!-- 2nd "picture" -->
<div class="pic" style="background-color:red"></div>

<!-- 3rd "picture" -->
<div class="pic" style="background-color:blue"></div>

<!-- 4th "picture" -->
<div class="pic" style="background-color:yellow"></div>

<!-- 1st "picture" -->
<div class="pic" style="background-color:green"></div>

<!-- 2nd "picture" -->
<div class="pic" style="background-color:red"></div>

<!-- 3rd "picture" -->
<div class="pic" style="background-color:blue"></div>

<!-- 4th "picture" -->
<div class="pic" style="background-color:yellow"></div>
</div>

</div>
Logged
There is no sense crying over every mistake,
you just keep on trying 'till you run out of cake ^_^
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« Reply #5 on: March 06, 2008, 23:39 »
SimpReal
It's another solution with fixed values (margins/paddings/widths)... sorry but it won't work, besides, I already tried all those ways before posting about the problem here...
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Suusje
The Saxophonist
Hero Member
*
Offline Offline

Gender: Male
Posts: 577

View Profile WWW
« Reply #6 on: March 07, 2008, 07:08 »
Dagdamor
Have you even tried it? Cause it does work here in Firefox and Internet Explorer. Wink
Logged
KANG *to Marge*: You look lovely this evening. Have you decreased in mass?

[ The Grabpics Thread | Cutest Lisa Moments ]
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« Reply #7 on: March 07, 2008, 11:44 »
Suusje
Of course Smile
But it doesn't work, at least for me; left and right margins are different width, and what's more important, it leaves wide margins at the moments when it shouldn't, when bigger amount of images fit in one row without those margins. All in all, the margins should be as little as possible, from 0 to 1/2 of the picture width. And they always should be equal, so the gallery itself looks centered.
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Dagdamor
Administrator
*
Offline Offline

Gender: Male
Posts: 2418

View Profile WWW
« Reply #8 on: March 11, 2008, 23:54 »
If anyone's interested, here's a simple example of what I needed:

http://www.simps.ru/files/miscells/gallery/

It works perfectly in Opera 7,8,9, IE 5.5 (don't have 6, but it should be okay there too), and FireFox.
It also doesn't require/need JQuery anymore; just a simple JavaScript. Could be useful for maintaining galleries.
Logged
When the power of love overcomes the love of power, the world will know peace. - Jimi Hendrix
Pages: [1]
  Print  
Lisa, the Simpson! > Discussions > Lisa's Friends > Topic: Need help - Gallery layout (HTML)
 « previous next »
 
Jump to:  

Powered by SMF 1.1 RC3 | SMF © 2001-2006, Lewis Media