[css-d] A confusing twist on the 3-column layout

[Matt Feldman (inthedistance.net)]

Hi all,

I'm new to the list and relatively new to the world of web design in 
general, having been using Joomla! for a year or so to tinker with 
putting my website online. I'm also using Gallery2 for photo 
presentation, and that brings me to my issue.

The templates that are out there for G2 are all well and good, but built 
on tables with terrible technique and usually non-existent commenting, 
all wrapped in CSS that is just a mess. Trying to deconvolute this stuff 
can be like reading hieroglyphics. So I've found a template I like but 
want to make changes to it that have me pining for a tableless design. 
Really, I just want to strip it down. For now, my concern is only with 
the photo display page. Here's an example:

http://www.mincel.com/gallery/travel_places/paris/IMG_1610.JPG.html

What I'm trying to do is replicate the display of this photo. Ignore 
everything but the main photo and the navigation bar icons directly 
above and below. I only want to use a lower navigation bar, so this 
becomes like a 3 column layout with header, where the header contains 
the photo and the 3 columns contain those nav buttons.

But with this table design, widths aren't specified, so however large 
the photo (header) is, the nav buttons below will always be left, center 
and right justified, respectively,  to the image edge. And the container 
that holds the header/column combo is centered on the page (ignoring the 
thumbnail panel).

It seems that this should be simple to do without tables, but I've made 
many stabs at it and failed. I'm not sure what I'm missing. Can anybody 
lend some insight into this?

Many thanks in advance. Hope everyone is having a happy holiday.

Matt
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A confusing twist on the 3-column layout

[Jim Davis]

Matt,

I have done a demo of how I would solve the problem.
http://www.jimdavis.org/variwidth.php

The idea is to create a div that is the width of the photo. The div will
also contain a holder for the icons.

If you don't want to change each page by hand you can write a php script
that will get the width of the image for you.

Jim

On Dec 30, 2007 7:54 PM, Matt Feldman (inthedistance.net) <
[EMAIL PROTECTED]> wrote:

> ...Here's an example:
>
> http://www.mincel.com/gallery/travel_places/paris/IMG_1610.JPG.html
>
> What I'm trying to do is replicate the display of this photo. Ignore
> everything but the main photo and the navigation bar icons directly
> above and below. I only want to use a lower navigation bar, so this
> becomes like a 3 column layout with header, where the header contains
> the photo and the 3 columns contain those nav 
> buttons
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A confusing twist on the 3-column layout

[Gunlaug Sørtun]

Matt Feldman (inthedistance.net) wrote:

> http://www.mincel.com/gallery/travel_places/paris/IMG_1610.JPG.html
> 
> What I'm trying to do is replicate the display of this photo. Ignore 
> everything but the main photo and the navigation bar icons directly 
> above and below. I only want to use a lower navigation bar, so this 
> becomes like a 3 column layout with header, where the header contains
> the photo and the 3 columns contain those nav buttons.

I'm not sure if IE/win will cooperate so easily when this becomes part
of a larger layout, but the following does work on its own...



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/