Topic: Simple Gallery layout question (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=30721" title="Pages that link to Topic: Simple Gallery layout question (Page 1 of 1)" rel="nofollow" >Topic: Simple Gallery layout question <span class="small">(Page 1 of 1)</span>\

 
Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 12-19-2008 10:51

Hello guys,

I have a straightforward gallery display that includes 5 list items per row, I would like to achieve the following layout



The main point here is that although there is ~10 pixel margin between each item, there is no padding or margin between the outside items and the edge of their container.

I assume I'm going to have to use some kind of collapsing margin, but I'm unfamiliar with how successful those methods can be, perhaps this can be achieved with negative margins?

One addition to the issue is that I cannot have a first and last class associated with items on each row, but I could use alternating styles.

Any tips?

Cheers,

[doh]
Oops, please could a Mad Sci alter the subject to correct the spelling mistake, layour should be layout
[/doh]



(Edited by Blaise on 12-19-2008 10:52)

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

posted posted 12-19-2008 11:24

personally, I'd hack gallery to output appropriate classes for each margin combination.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 12-19-2008 17:36

I realize this won't answer your question, but I have to ask -

1) why not just have the same margins on the outside? to me, that would be more attractive anyway

2) why can't you have first and last classes?

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 12-19-2008 19:06

1) the design doesn't actually have a visible border, but the container will be at the extreme width of the layout, and all the space should be utilised, it's a fixed width centred layout (with lots of white-space).

2) the images will be output by a repeating block script, I don't want to throw together a function to arbitrarily add classes to every 1st and 5th element in a row.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 12-20-2008 00:36

I'd set a negative margin left & right on the UL to compensate for the margin applied to ALL the LIs. No additional class is needed, so no need to tweak your code or used a fixed layout.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 12-20-2008 03:23

Yeah I think they are the only way to do this, one thing though, how cross browser friendly are negative margins?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 12-20-2008 04:42

They're fine.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 12-21-2008 13:20

Groovy, thanks chaps!

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted posted 12-21-2008 15:16

Post a pic when you get it fleshed out! This post gave me pretty pictures in my head..



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu