button in a <ul> list

[paul]

I want to include buttons in a menu using <ul> styled into a wrapping
menu bar but cannot get the buttons (each is it's own form) to behave
like text. I tried putting them inside a <span> or <div> without luck
unless I made those float & that's a whole other bunch of formatting
problems.

Here's what I've got:
http://www.triteleia.com/?SC=plant-list.php
* perennials
* shrubs
* trees
* vines
* grasses
* ferns
* bulbs
* annuals
* pots
* exotics
* other
hide pictures and descriptions
hide unavailable plants


I had to put those last two which are buttons in a table to get them
formatted in an acceptable way. I styled them with CSS to look like text.

 

[dorayme]

I want to include buttons in a menu using <ul> styled into a wrapping
menu bar but cannot get the buttons (each is it's own form) to behave
like text.

Here's what I've got:
http://www.triteleia.com/?SC=plant-list.php

I don't off hand know how to satisfy your specific plan, but you may or may
not find the following remarks to be useful to you. Your page has a great
amount of information including pictures and loads *incredibly slowly* on
dial up. May I suggest that you use the width of the browser window to
greater advantage. Perhaps split all the info into separate pages, the menu
in a simple list in a left column always appearing. This is way too
complicated and too full a page for the basically nice material that is
clearly in your possession (btw that is a compliment).

If you were to keep so much info on the page, maybe go for frames or fixed
CSS technology to keep the menu visible at all times.

dorayme

 

[paul]

I don't off hand know how to satisfy your specific plan, but you may or may
not find the following remarks to be useful to you. Your page has a great
amount of information including pictures and loads *incredibly slowly* on
dial up.

It's slow on DSL too!

May I suggest that you use the width of the browser window to
greater advantage. Perhaps split all the info into separate pages, the menu
in a simple list in a left column always appearing. This is way too
complicated and too full a page for the basically nice material that is
clearly in your possession (btw that is a compliment).

Thanks, yes in fact I just now uploaded some changes that make the list
shorter. One of the buttons turns off pictures and wordy descriptions
with a semi-permanent cookie but I figure the pretty pictures are
appealing for the first visit. Regular users will have to learn to
change settings. When everything is turned on, I'll definitely have to
break it into multiple pages by category; perennials, shrubs, etc. Right
now it just jumps to an anchor but I'll have to improve that.

If you were to keep so much info on the page, maybe go for frames or fixed
CSS technology to keep the menu visible at all times.

I did duplicate the menu every 10 records to avoid the need for frames,
I should add the main menu also though. How could CSS solve this? ...by
adding one of those 'bouncy' follow-you-as-you-scroll menus on the side?


I'm also considering making the links open in a separate window so the
plant list doesn't have to reload, I know, it's evil but... at least the
shopping cart & then I probably ought to resize that window (ugh) & I
guess the nav bar should be hidden or it might have too many menus & not
fit properly.

 

[Jukka K. Korpela]

Thanks, yes in fact I just now uploaded some changes that make the
list shorter. One of the buttons turns off pictures and wordy
descriptions with a semi-permanent cookie but I figure the pretty
pictures are appealing for the first visit.

There won't be any first visit, since the user leaves the page before
it has even loaded.

Create an index file with just the names and a _few_ (two, three, maybe
four) particularly pretty pictures. Make each name a link to a page
containing the description of that plant. Since you are using PHP, this
should be easy. No reason to set up a huge page containing all the
stuff, except perhaps as an alternative for those few who will want to
print all of your stuff on a color printer.

Regular users will have
to learn to change settings.

Wrong approach. Your site is not an island.

I did duplicate the menu every 10 records to avoid the need for
frames,

Wrong approach.
There's never need for frames (though sometimes, some people, find some
meaningful use for frames; but those two or three guys know what they
are doing, and they know how to offer noframes alternatives).

The menu should appear just once, on the page containing the list, or
perhaps on a separate main page.

And it's completely wrong to use the unreliable <button> element and
make a laborious effort at preventing the options from looking like
buttons _or_ links. (Well, the blue color suggests a link, but
otherwise they are not link-like: no underline, no change of color on
mouseover, no destination address in the status line on mouseover.)
Use either <input type="submit"> or simple links. Or, perhaps most
logically, create a single form (letting it look like a form) where the
user can make one or more choices and click on a button that creates a
new list.

I should add the main menu also though. How could CSS solve
this?

Stop using CSS to create problems. Rethink. Use then CSS to solve
problems, not mess things up.

I'm also considering making the links open in a separate window

Again, stop creating problems. Backtrack a bit to remove some of the
problems you already created.

 

[paul]

Just a few snipped points here, I'll get back to the rest, thanks.

...it's completely wrong to use the unreliable <button> element...
Use either <input type="submit"> or simple links.

I'm pretty green with forms, I know I can pass a plain old link like
ww.a.b/?SC=plant-list.php&fltr=acer but is there a way to pass things
without mucking up the url using links? How is <input type="submit">
cleaner than a button?

Or, perhaps most
logically, create a single form (letting it look like a form) where the
user can make one or more choices and click on a button that creates a
new list.

Yes, that's probably where I'm headed... click away to a 'list sttings'
page with a bunch of options instead of a nightmare menu taking half the
screen.

Again, stop creating problems. Backtrack a bit to remove some of the
problems you already created.

Yeah, I'm willing to backtrack. The problem is I've got so much info
(1/2 a MB or so in the simplest view of just plain text coding). It
seems I'll have to comb through that and make it shorter, more concise,
push more things into CSS. It will be a big nuisance to break things up
in separate pages, I don't mind if it takes a while to load the whole
list but it's definitely out of control now.

 

[Jukka K. Korpela]

I'm pretty green with forms, I know I can pass a plain old link
like ww.a.b/?SC=plant-list.php&fltr=acer but is there a way to pass
things without mucking up the url using links?
No.

How is <input type="submit"> cleaner than a button?

It works on all browsers, irrespectively of settings, and it creates a
real button that users are familiar with.

The problem is I've got so much
info (1/2 a MB or so in the simplest view of just plain text
coding). It seems I'll have to comb through that and make it
shorter, more concise, push more things into CSS.

It's really the information content that matters. Whether your markup
is more verbose than it needs to be is usually of secondary importance.

Ideally, one might say, it takes ten seconds (starting from the click
of a link or typing in the address) to understand clearly what the page
is about, and a minute or two to digest the entire content. That's
often not possible in practice, but it's a useful mental model of the
_goal_, and helps to keep pages concise and reasonably simple.