Website Design Forum - Horizontal liquid menu with photos

Author

Horizontal liquid menu with photos

Eric Lindsay

2007-01-27, 11:33 pm

Regarding changes to the design of the entry page of
http://www.queenslandarchitect.com/ which I am trying to make as a
belated Xmas present for my neighbour.

The current version is invalid, works in Safari and Opera, but not in
Firefox. I am not at all sure Safari and Opera should be so kind, so I
have to change it totally.

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/
http://www.flightpatharchitects.com.au/
http://www.donovanhill.com.au/

The architect really seems to like having an entry page (if I can make
that distinction from a home page). I guess that makes sense to
architects, who often seem to want the entrance to a building to make a
grand statement. Pointing out these example pages had no search engine
position, and sometimes no navigation nor content (Flash or Javascript
required) made no difference.

One bit he really likes is in http://www.troppoarchitects.com.au/ The
horizontal table of images. I figured I would try to subvert an old
photogalley page, but on my first attempt with a list, I forgot that A
was inline, so I could hardly stick a paragraph block underneath.

I'd like to have the HTML stay with a ul (since that is how my other
menus are done, and seems to make some semantic sense). I want a
horizontal row of photos, each of which is a link. Underneath each
photo, I want a single word menu item link centered underneath each
photo (pointing to the same place as the photo). Plus I want the whole
thing liquid.

Can anyone point me to a nice example? I thought I had seen something in
the Max Design List tutorials, but now I can't find the example I
thought I recalled.

If I can't come up with a better idea, I'll change my list to divs, and
put up another example. But I am sure you folks will come though and
point me to some better idea.

--
http://www.ericlindsay.com

Spartanicus

2007-01-27, 11:33 pm

Eric Lindsay <NOwebmasterSPAM@ericlindsay.com> wrote:

>Regarding changes to the design of the entry page of
>http://www.queenslandarchitect.com/ which I am trying to make as a
>belated Xmas present for my neighbour.

You are making it difficult to be helped, I had to go back to the OP to
find out what you were actually asking.

>Next I did a very wide two tone background image for the body, used
>background: #444 url(images/background4000rgb444_666.gif) 75% 0 repeat-y
>; to make things look like two columns. Now I could make my sidebar
>something close to 25%, and handle different width displays.

I can't see the point of sizing the side bar using a % unit, using em
strikes me as the obvious choice, it facilitates user font size
variations but without the irrational relationship with the user
viewport width.

>My neighbour the architect told me what he wanted something that looked
>like :
>http://www.troppoarchitects.com.au/
>http://www.flightpatharchitects.com.au/
>http://www.donovanhill.com.au/

It strikes me that your graphic design capabilities aren't up to
creating that type of work. Ordinarily I'd suggest that you team up with
a graphic designer and delegate that aspect, but since you've indicated
that you are doing this as a "present" that may not be an option.

>The architect really seems to like having an entry page (if I can make
>that distinction from a home page).

Typically referred to as a "splash" page.

>I guess that makes sense to
>architects, who often seem to want the entrance to a building to make a
>grand statement.

The splash pages on the reference sites are not ideal from various
perspectives, but they can be coded properly. Personally I'd allow
people in creative occupations to say that they want a splash page.
Impressions are an integral part of what they do, within limits I prefer
not to interfere with that aspect of their work.

>Pointing out these example pages had no search engine
>position, and sometimes no navigation nor content (Flash or Javascript
>required) made no difference.

I'd suggest that such technical details should not be discussed with a
client. Its your job to ensure that a design is coded properly, you
shouldn't expect a client to know or care about such issues. Splash
pages such as on the reference sites can be coded properly, without JS
or Flash dependency and providing good SE indexability.

>One bit he really likes is in http://www.troppoarchitects.com.au/ The
>horizontal table of images. I figured I would try to subvert an old
>photogalley page, but on my first attempt with a list, I forgot that A
>was inline, so I could hardly stick a paragraph block underneath.

On the reference site the images are strictly decorative, I can't tell
if that is going to be the case in your work due to the use of place
holder images. That makes it hard to suggest appropriate coding.

>I'd like to have the HTML stay with a ul (since that is how my other
>menus are done, and seems to make some semantic sense). I want a
>horizontal row of photos, each of which is a link. Underneath each
>photo, I want a single word menu item link centered underneath each
>photo (pointing to the same place as the photo). Plus I want the whole
>thing liquid.

Possibly something like this:
http://homepage.ntlworld.ie/spartanicus/eric.htm

The hacks used in that example are explained on
http://www.spartanicus.utvinternet....th_captions.htm

If they images you end up using will be semantic then you should not
code them as backgrounds but insert them in the links instead.

--
Spartanicus

Eric Lindsay

2007-01-27, 11:33 pm

In article <1ho9p25iosbt6b9oprdvnnqjocrf9msum0@4ax.com>,
Spartanicus <invalid@invalid.invalid> wrote:

> Eric Lindsay <NOwebmasterSPAM@ericlindsay.com> wrote:
> I can't see the point of sizing the side bar using a % unit, using em
> strikes me as the obvious choice, it facilitates user font size
> variations but without the irrational relationship with the user
> viewport width.

I wasn't sure I could get away with using em rather than % to position
the background image on body.

>
> It strikes me that your graphic design capabilities aren't up to
> creating that type of work. Ordinarily I'd suggest that you team up with
> a graphic designer and delegate that aspect, but since you've indicated
> that you are doing this as a "present" that may not be an option.

You are certainly correct about that. No talent for graphics, and
relatively little interest in it. That is one reason for trying this
sort of site. I would never have attempted to learn anything about that
area on my own pages.

> The splash pages on the reference sites are not ideal from various
> perspectives, but they can be coded properly. Personally I'd allow
> people in creative occupations to say that they want a splash page.
> Impressions are an integral part of what they do, within limits I prefer
> not to interfere with that aspect of their work.

Agreed. It just took me the longest time to realise that instead of
regarding the splash page as an irrelevant and annoying obstacle, he
thought of it as perhaps the most critical page of the site.

>
> On the reference site the images are strictly decorative, I can't tell
> if that is going to be the case in your work due to the use of place
> holder images. That makes it hard to suggest appropriate coding.

In the final version I'll be using tiny images of certain example
buildings. Just have to pick the size and image. So they will be
semantic.

>
> Possibly something like this:
> http://homepage.ntlworld.ie/spartanicus/eric.htm

Perfect! Thank you very much. I should be able to use that to get what I
want.

> The hacks used in that example are explained on
> http://www.spartanicus.utvinternet....th_captions.htm

Now that I see your own explanation, I recall that I looked at that (and
most of your other pages) sometime in the past several years, when I was
doing what seems to be my annual web site makeover at Xmas. You folks
may not believe it, but I think exposure to your comments for a month or
so each year has slightly improved the way I do web sites (even if I am
a slow learner).

> If they images you end up using will be semantic then you should not
> code them as backgrounds but insert them in the links instead.

Yes, I will be including the images on the HTML page and putting them in
the links.

New version with corrections up sometime tomorrow (doubtless with more
questions).

--
http://www.ericlindsay.com

Eric Lindsay

2007-01-27, 11:33 pm

In article
<NOwebmasterSPAM-3C5B25.23373329122006@freenews.iinet.net.au>,
Eric Lindsay <NOwebmasterSPAM@ericlindsay.com> wrote:

> In article <1ho9p25iosbt6b9oprdvnnqjocrf9msum0@4ax.com>,
> Spartanicus <invalid@invalid.invalid> wrote:
>
> I wasn't sure I could get away with using em rather than % to position
> the background image on body.

Regarding http://www.queenslandarchitect.com/

The more I look at that very wide background image positioned 75% along
on the body, the more I think doing it might be the wrong solution to a
different problem.

I originally had a background image on the sidebar with a repeat -y to
make the column appear to be the entire height of the sidebar. I fixed
the sidebar width in pixels. Once I decided a fixed width sidebar wasn't
suitable, and to go with a background logo there, I figured I couldn't
have two images in the sidebar.

That left a fake column in the body background the only thing I could
think to give the effect of columns. It still is the only solution I
could come up with. However the width of the image and of the actual
sidebar then tend to be slightly different.

If anyone can point me to better methods, that would be great.

>
> Perfect! Thank you very much. I should be able to use that to get what I
> want.

http://www.queenslandarchitect.com/index.html shows how it came out.
Still a lot of tuning and content fixes required for all the pages, but
it works in Firefox, Opera and Safari on a Macintosh. Real Soon Now I'll
check in IE, for the real test.

The entire site is now valid HTML, according to the whole site validator
at http://htmlhelp.org/tools/validator/

I think I am willing to claim the CSS is valid also, although I have a
lot more to do. http://jigsaw.w3.org/css-validator/ defaults to CSS 2.1
and doesn't like my use of text-shadow (on h1) unless I validate as CSS3
or CSS2. Not sure why CSS2 accepts it when CSS2.1 does not. I thought it
was a CSS3 feature. Only Safari uses text-shadow, so using it seems
harmless.

CSS2 validation doesn't like the use of display: inline-block; Given
that CSS is embedded only on the home page to get the splash page effect
going, I can't see that as being unacceptable either.

--
http://www.ericlindsay.com

Bergamot

2007-01-27, 11:33 pm

Eric Lindsay wrote:
>
> ...a fake column in the body background the only thing I could
> think to give the effect of columns.
>
> If anyone can point me to better methods, that would be great.

Sounds like a job for creative use of borders and negative margins,
which allows setting the column width in px or em units. For examples see
http://webhost.bridgew.edu/etribou/layouts/

--
Berg

Eric Lindsay

2007-01-27, 11:33 pm

In article <4vnd9gF1cfqrkU1@mid.individual.net>,
Bergamot <bergamot@visi.com> wrote:

> Eric Lindsay wrote:
>
> Sounds like a job for creative use of borders and negative margins,
> which allows setting the column width in px or em units. For examples see
> http://webhost.bridgew.edu/etribou/layouts/

Thanks Berg,

I had seen the Ruthsarian layouts, but as I recall the example that
seemed closest to what I wanted was listed as deprecated.
http://webhost.bridgew.edu/etribou/...beta/index.html

The Skidoo layouts suggested the only solution was a container div
around everything. My test HTML pages contain div id="all" as a spare
container div. If I can, I would really like to get rid of it. Just
seems to me that multiplying divs every time I get stuck can not be part
of a semantic approach.

--
http://www.ericlindsay.com

Bergamot

2007-01-27, 11:33 pm

Eric Lindsay wrote:
>
> My test HTML pages contain div id="all" as a spare
> container div. If I can, I would really like to get rid of it. Just
> seems to me that multiplying divs every time I get stuck can not be part
> of a semantic approach.

Well placed container divs merely facilitate styling that might not be
possible otherwise. If your content is still marked up with proper
headings, paragraphs, lists, etc., the semantics aren't affected.

--
Berg

Eric Lindsay

2007-01-27, 11:33 pm

In article <4vp1t8F1d29skU1@mid.individual.net>,
Bergamot <bergamot@visi.com> wrote:

> Eric Lindsay wrote:
>
> Well placed container divs merely facilitate styling that might not be
> possible otherwise. If your content is still marked up with proper
> headings, paragraphs, lists, etc., the semantics aren't affected.

I can accept that well placed container divs do not affect semantics.
However when you see a site six deep in nested divs, it does make me
pause. At what stage does putting bunches of divs in for styling become
over the top? As an amateur web site writer, I certainly don't know. So
whenever I move away from divs for header, footer, main, navigation, and
a sidebar or two, I start to worry. My preference would be to write a
site without any divs in it, and use them only when all else fails,
rather than start with divs.

In my Xmas present web site, I have one page
http://www.architectqueensland.com/...s/projects.html in which I feel
I have thoroughly abused divs to generate sparkline type graphics (I was
looking at all those wonderful CSS national flags out on the web). I
think I can (sort of) defend the result as being somewhat acceptable,
but probably only because it is two hours to New Year here, and I have
been hitting the eggnog.

--
http://www.ericlindsay.com

Adrienne Boswell

2007-01-27, 11:33 pm

Gazing into my crystal ball I observed Eric Lindsay
<NOwebmasterSPAM@ericlindsay.com> writing in news:NOwebmasterSPAM-
91D505.22031931122006@freenews.iinet.net.au:

> I can accept that well placed container divs do not affect semantics.
> However when you see a site six deep in nested divs, it does make me
> pause. At what stage does putting bunches of divs in for styling become
> over the top?

Divs can be abused just as much as tables. The idea is to KISS - so DIVs
nested 6 deep are just as bad, if not worse, than nested tables. A page
should make sense, for the user, and for the author. IMHO, if, as an
author, you have to nest anything 6 levels, then you should rethink the
design to make it less complicated.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Bergamot

2007-01-27, 11:33 pm

Adrienne Boswell wrote:
>
> Divs can be abused just as much as tables.

Yeah. "div soup" is probably about as common in CSS layouts as nested
tables are in table layouts.

> IMHO, if, as an
> author, you have to nest anything 6 levels, then you should rethink the
> design to make it less complicated.

If you're doing something like rounded corners, extra containers may be
a necessary evil. Hopefully you can keep it under 6, though. :)

--
Berg