I'm Trying To Design A Bottom Page Menu RRS feed

  • Question

  • I'm redesigning my site using CSS and Expression 4 and trying to utilize some of the ideas generously given to me by the group here. I've decided to use a bottom of the page menu to supplement what I will have on my top nav drop down menu. How should I go about it. Nested divs ??? No more layers for me, but should I use a talbe to accomplish it. http://www.sohosoftware.net/test-folder/default.html   that is my test home page. Any suggestions would be appreciated. I'd like to even add some type of colored background to the bottom section where the links will be.

    Lance Barbarino



    Lance Barbarino
    Tuesday, January 18, 2011 4:26 AM

All replies

  • Can you be more specific about what your question is?  Asking how you should design a menu is far too broad a question for a forum response, other than a broad response: however you want to, as long as it works in the browsers you support and still looks OK when visitors change their browser text size setting.
    Tuesday, January 18, 2011 4:30 AM
  • Footer menus are seldom points of focus, and are usually implemented simply as text-based unordered lists. Many visitors may not even get that far down the page, and they are often repositories for text-based alternative menus if the visitor has scripting or other issues that prevent use of the primary navigation. All of the footer menus I have ever implmented have been of this type.

    One thing I should mention is that before you determine that you're ready to go live you should thoroughly proofread your page copy. Here is one sentence I noticed almost immediately on that page:

    "Open Licensing volume discont programs for small business, acamdemic, governemnt.agencies."

    There, in one sentence, you have three spelling errors and a punctuation error. That kind of thing goes to the credibility of the site, and is something that you will definitely want to address.

    Anyway, do take a look around the Web. When footer menus do exist (they don't always), they are typically implemented as plain, utilitarian text-based menus. That far "below the fold," they are seldom an area of visitor focus, and little effort is usually spent on making them stylisitically attractive.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Tuesday, January 18, 2011 5:28 AM
  • Yes I get the message regarding botton page menus. Oh, don't worry, I always proof read before going live. Spelling and grammatical errors are something I can easily avoid. Now HTML errors that's another story. I'll keep studying and using the resources and videos. Great help.



    Lance B.

    Lance Barbarino
    Tuesday, January 18, 2011 5:48 AM
  • Don't do it. Unless it's the typical footer list that duplicates the main menu or a list of stuff nobody ever has to access, you're shooting yourself in the footer.

    Nobody looks at the bottom of a page (hidden, under most circumstances) for links that are of any interest. Your site cannot redefine the way in which people use the web. Keep the navigation where people expect it.

    Now, if it's just legal disclaimers and the like, throw it in the footer and forget about it. Always keep in mind--the visitors don't care what it looks like; that kind of stuff is utilitarian. They are mostly concerned with usability, and splitting the navigation between top and bottom will send them screaming to another site.

    And, on a final note...IMHO that site is too wide. Give it a maximum width of about 960px. Nobody can read text that's strung out that wide on a 20" monitor. It's like trying to read a tennis match, with my eyes bouncing back and forth. The days of sizing by % are over. Monitors vary in size, aspect ratio, and resolution far too much to make % sizing usable any more.

    I also note a lot of problem in the test page. Yo've copied text directly fro Word, which buggered up your DOCTYPE and puts non-standard, print-oriented markup in the page. There is Waaaay too much <span> stuff going on and stuff in the styles at the top that aren't right (Arial Narrow isn't a font family, and sizing text as xx-small, etc. is undependable, cross-browser--use ems). You're setting a style for everything rater than setting a style for the div and only changing the ones that differ.

    Finally, the text is a car crash of styles--links that are black, blue, purple, bold, bold underline; headings that vary by size, color, and weight, etc. There is no natural, obvious heirarchy to guide the visitor. What's more important, bold? underlined? italics? purple italics? Simplify. A lot.

    Eschew obfuscation.
    Tuesday, January 18, 2011 6:05 AM
  • I appreciate the input Bill. Now, I'm thinking I probably was testing out different style and font sizes when I settled on one I'm guessing the markup from the past one still remained.

    I've heard this before so let me ask, how do I set my site page size to 960?



    Lance B.

    Lance Barbarino
    Tuesday, January 18, 2011 7:02 AM
  • I for one still think that footers are the place to put the junk links you gotta have and even the important links redundantly. I agree with Scott that they should be simple underlined text. A whole group of web users still respond to these types of links and in fact look in the footer for them.

    You could use unordered lists in Divs or if you have enough links even a table might be OK. I see one of the  largest semiconductor companies has about 30 links in a table with a shaded background. It seems a lot of the technical sites I visit have modern snappy links on the top and footer links and sometimes even the same ones in sidebars.

    In a book by one of the true gurus on design (Zeldman) I recall reading that good web design does not always mean making the visitor conform to your idea of navigation but rather to thiers. It seems that some of the top designers think that redundant classical underlined text links are still the most widely understood and usable types. I cant say that the trend is still valid since that book must be a few years old but I notice these footer links seem to be common among most big sites I visit.

    Your headers and footers could be set to about 95% and your main content to 960 pix if you like the look of that. Take a look at this site-


    Notice how they combine fixed and fluid design elements and the bottom footer links. While you are there bookmark this great site for web designers too.   


    Tuesday, January 18, 2011 1:12 PM
  • Lance: Anyplace the style is set for the width of the site as 100%, just change it to 960px. Of course, everything inside may have to be adjusted so that the widths don't exceed 960 when added together. Youre using an EW template, so open another one to experiment and see how the fixed width ones are styled (they are too narrow for modern sites, at 750px, IMO). Experiment.

    Take a break for a bit and take the tutorial at by-expression.com (download the assets file first and play along). Much of what I saw in the styling indicates that you could make good use of some tutorials. Also, go to w3schools and take their tutorials in CSS and HTML; the site will be a lot cleaner and more stable and load faster and display more predictably in different browsers.

    Links to the tutorials are in the BEFORE POSTING thread above.

    Eschew obfuscation.
    Tuesday, January 18, 2011 2:51 PM
  • Surferbob,


    Thanks for your input. I think I'm getting a lot of good ideas and somehow I'll wind up integrating them into my design knowledge base. I probably won't be the Da Vinci of coding or a perfectionist, however I think I'll improve with time. I like the articles on smashingmagazine.

    Thanks again,

    Lance B.


    Lance Barbarino
    Tuesday, January 18, 2011 3:08 PM
  • Bill,

    I do read the tutorials posted and W3C. I watch the expression video helpers as well. I try to design on the fly as I learn. It sometimes seems insurmountable, but I figure something is bound to stcik in my brain and and will eventually be reflected in my site design. I am keeping at it.


    Thanks for the encouragement.


    Lance B.


    Lance Barbarino
    Tuesday, January 18, 2011 3:13 PM
  • Bill I take it you don't expect mobile or netbook visitors on your sites? 

    Tablet users in portrait rarely have the option for more than 800 PX. The number of tablet users is increasing almost daily with  Android based tablets like the Galaxy Tab or Barnes & Noble Nook Color to  Window 7 ones like http://www.gadgetell.com/tech/comment/ces-2011-motion-announces-the-cl900-windows-7-tablet/ and let us not forget the iPad which all have a portrait ovulations of 768-800px

    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Tuesday, January 18, 2011 4:24 PM
  • I definitely want to have an easily accessible site for those who view with iPad type devices. I have noticed an increase in my analytics of wireless devices and from what I see iPads and netbooks are getting popular. My site basically is designed to sell downloadable software or to give the user enough info to call or email for my other services. In other words nothing too fancy but not overly utilitarian. Somewhere in between the two.

    Now, I have gone in and looked for the site width. I have examined the css style sheets and even the prefab stylsheets that come with Expression 4. So as I am to understand I can change the width (container0 to accomodate? Look below and you will see the CSS I'm applying to a new page. Give me an idea if I'm on course or totally off.


    /* CSS layout */
    body {
     margin: 0;
     padding: 0;

    #masthead {
     padding-top: 5px;
     padding-bottom: 5px;
     margin-top: 10px;
     margin-bottom: 10px;
    #top_nav {
     padding-top: 5px;
     padding-bottom: 5px;
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: 5px;

    #container {
     min-width: 600px;

    #left_col {
     width: 200px;
     float: left;

    #page_content {
     margin-left: 200px;

    #footer {
     clear: both;

    Lance Barbarino
    Tuesday, January 18, 2011 4:52 PM
  • You still haven't set a width for your site. And I don't see a div that wraps around the entire site.

    Look in the style sheet of one of the other EW templates and see how it's done. Modify what you see there. You'll also see how to center the site on the screen.

    Eschew obfuscation.
    Tuesday, January 18, 2011 5:06 PM