button in a <ul> list

Discussion in 'HTML' started by paul, Jul 12, 2005.

  1. paul

    paul Guest

    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.
    paul, Jul 12, 2005
    #1
    1. Advertising

  2. paul

    dorayme Guest

    > From: 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.


    > 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
    dorayme, Jul 12, 2005
    #2
    1. Advertising

  3. paul

    paul Guest

    dorayme wrote:
    >>From: 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.

    >
    >
    >>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.


    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.
    paul, Jul 12, 2005
    #3
  4. paul <> wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Jul 13, 2005
    #4
  5. paul

    paul Guest

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

    Jukka K. Korpela wrote:
    >
    > ...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.
    paul, Jul 13, 2005
    #5
  6. paul <> wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Jul 13, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. roopa
    Replies:
    6
    Views:
    721
    Jerry Coffin
    Aug 27, 2004
  2. puja
    Replies:
    1
    Views:
    465
    Eliyahu Goldin
    May 21, 2006
  3. dackz
    Replies:
    0
    Views:
    474
    dackz
    Feb 6, 2007
  4. Hiten
    Replies:
    1
    Views:
    608
    Vidar Petursson
    May 26, 2004
  5. puja

    checkbox list and radio button list

    puja, May 21, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    205
    mnichols
    May 24, 2006
Loading...

Share This Page