Lisa, the Simpson!
December 02, 2008, 04:48 *
Welcome, Guest. Please login or register.

Login with username, password and session length
 Add Site
 
   Home   Galleries Library Help 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 868 times)
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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: 1396

Solving the Equation
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
Did he open up his eyes?
Did he try to touch my hand,
Or is my mind playing tricks on me?
Do you think he hears us cry?
Does he understand
We are here, by his side...
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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: 1396

Solving the Equation
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
Did he open up his eyes?
Did he try to touch my hand,
Or is my mind playing tricks on me?
Do you think he hears us cry?
Does he understand
We are here, by his side...
Dagdamor
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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
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
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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
Lisahugger
Administrator
*
Offline Offline

Gender: Male
Posts: 2551

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