SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Does this look OK to you?

    OK, I'm to the point in my site redesign where I'd really appreciate some feedback.

    I've created a tableless 2-column layout with CSS and XHTML 1.0 Strict. I've also created a menu/submenu system that allows me to create just one lo--ooong list of main menu and submenu items in which all of the submenu items are hidden by default, then load separate CSS files that unhide the submenu items that are appropriate to each main menu page.

    The new layout and menus work great for me in IE6, but I'm new to CSS/XHTML, so I'd really appreciate finding out if anyone here sees anything wrong with my menus in their browser, before I go to all the trouble to convert all of my pages to this new layout.

    The URL is
    http://www.computerbob.com/my2col.html

    The only two buttons that work the way I want them to so far are the CB Guides and Reviews buttons. Don't click on any of the other buttons, because they're all waiting for me to create submenus for them, if no one sees any problems with the way the first two buttons are working.

    TIA!
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Edit:

    Thread reopened
    Last edited by vgarcia; Sep 22, 2003 at 11:51.

  3. #3
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few people have sent me PMs, asking how I created my menus without JavaScript. I'm sure I'm not the first one to do it the way I did it, but here are the basic steps, for anyone who's interested:

    1. Created a unordered list containing ALL of my menu items and submenu items. Each main menu item has its own named id (i.e. home, guides, reviews, etc.)

    2. Used CSS to style the list to have color, no bullets, font size, line-height, etc.

    3. Used the CSS display:hide tag to hide ALL of the submenus by default.

    3. In the HTML of the CB Guides page, I added one @import line to the header, to load a separate guides.css file that unhides JUST the guides sub-menu, using display: block, to override the existing display:none that my main CSS file applies to all of the submenus.

    4. In the HTML of the Reviews page, I added one @import line to the header that loads a separate reviews.css file. The reviews.css file is an exact copy of guides.css with the id in each rule changed from guides to reviews. It unhides JUST the reviews sub-menu, using display: block to override the existing display:none that my main CSS file applies to all of the submenus.

    If it turns out that there are no problems with my menus, then I will repeat step 4 for each of my main menu items (using their ids), so that each main menu page will display its own submenu, but none of the other submenus.

    The advantages to this approach are that:

    1. It's done totally in CSS, so it doesn't need or use JavaScript or PHP.

    2. It allows me to have just one long list of main and submenu items, while calling a separate CSS file on each main menu page to unhide whichever submenu I want to unhide for that page. That will make it relatively easy to add/remove/edit links in one or more of the menus in the future.
    Last edited by ComputerBob; Sep 23, 2003 at 06:57.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  4. #4
    SitePoint Enthusiast jt_va's Avatar
    Join Date
    Sep 2003
    Location
    Never Never Land
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bob, I browse with IE6 also and I think the new design looks and works great. Very cool!

  5. #5
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks good in mozilla 1.4

  6. #6
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The design looks great in Mozilla Firebird 0.6.1

    Great tip on creating the menu as well!

  7. #7
    SitePoint Member kurdt_the_goat's Avatar
    Join Date
    Aug 2003
    Location
    Perth, Western Australia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great idea !! I took a look at your code with the intention of seeing if i could simplify the process of showing a nested level.

    http://www.arach.net.au/~kurdt/nests/

    This example shows a list modified from listamatic, to have levels 4 (i think deep. Clicking onto the second and third pages doesn't load a new style sheet - all that changes is a class selecter, done inline after my main stylesheet. This saves the creation of multiple stylesheets, and i'm not a programmer - but i think - would simplify the process of getting php, based on which page you're on, to insert the proper class and display the correct menu!

    I went to town to see how many levels i could get deep with different effects, so currently the second page shows ALL nested lists in the second top level, but thiis could be changed to only show a specific level with classes attached to the nested lists within that level.
    edit >> actually no it can't of course nested lists are prevoiusly being hidden by their parents - anyone know how to achieve what i mentioned above? showing only a list that happens to be 3 or 4 levels deep.

    Strangely - if you view the second page in ie6, the sub sub sub sub links still have their rollovers and slightly more padding on the left( as i think they're supposed to , with selecter #navigation li li li li a) - but in firebird and opera they dont! Anyone know which is correct ?
    Last edited by kurdt_the_goat; Sep 23, 2003 at 04:36.

  8. #8
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kurdt_the_goat
    ...This saves the creation of multiple stylesheets, and i'm not a programmer - but i think - would simplify the process of getting php, based on which page you're on, to insert the proper class and display the correct menu!
    I'm not a programmer, either, so my method uses only CSS and doesn't require any JavaScript, PHP, or other programming.

    It took me about 3 days of mulling ideas around in my head before I finally "got my brain around" the idea of calling separate stylesheets to display appropriate submenus. Even then, I made backup copies of all of the related files before I started, just in case I got confused and had to give up on trying to make it all work. A couple times, I almost ended up doing that.

    I've looked at your demo pages and re-read your post several times, but I haven't been able to figure out your method yet. Maybe I'll be more successful in that effort after I mull it over for a few days.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  9. #9
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very neat navigation solution Computer Bob - well done!
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  10. #10
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your feedback, everyone! I really appreciate it.

    I'm going to go ahead with converting all of my pages to use my new menu system.

    If anyone finds a problem with it, please post it, so I can make any necessary changes to my code.

    Thanks, again!
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  11. #11
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sure that someone will think of asking:

    "Why don't you just embed a page style within a comment in the header of each document, and use that page style to unhide the appropriate submenu for that page?"

    That's actually an excellent question, and I considered using that method for a few days. Zeldman actually uses that method in his transitional redesign project in his "Designing With Web Standards" book.

    However, according to Zeldman (page 411):

    On a technical note, the <!-- comments that surround our style sheet would be a problem if we were authoring in XHTML 1.0 Strict, but we're using Transitional. These comments would also be a problem if we were serving our page as application/xhtml+xml, but we're serving it as text/html. To understand why these elements would pose a problem in a strict XHTML environment, see http://devedge.netscape.com/viewsource/2003/xhtml-style-script/
    My separate-style-sheets method is a way to be able to use only CSS to hide/unhide submenus in an XHTML 1.0 Strict environment. Like I said before, I'm sure that many other people who know a lot more about CSS than I do, have already thought of that idea before, so I'm not claiming that it's "my" idea, but I sure am glad that I thought of it.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  12. #12
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Edit:

    Thread reopened
    'Pologies for that, Vinnie & Bob (I had erroneously reported this thread as a review).

    Anyway, to remedy my specious injustice... works perfectly fine in Opera 7.2b, CB. :-)

    Also, instead of importing different stylesheets, you could use one stylesheet and give the <body> a class. Then just use a couple o' CSS selectors, an you'd be all set across your site:
    Code:
    <!--In the HTML-->
    <body class="guide"> <!--...or...--> <body class="reviews">
    
    /*Then in the CSS*/
    #nav li ul { display: none; } /*hides sub lists in #nav*/
    
    .guide #guides ul, .reviews #reviews ul /*, etc*/ {display: block }
    /*shows sub menus on the right page*/
    I forget whether descendent selectors work properly in NN4 or not.

    ~~Ian

  13. #13
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANKS, IAN!

    I'm a relative beginner when it comes to this level of CSS, and I'm currently exhausted (it's nearly 3:00 AM here as I finish my last edit of this message), so I'm not sure I fully comprehend how your idea works yet, but, from what I understand, YOUR IDEA IS SUPER!

    I'd love to be able to have just one stylesheet and make a simple change to each page's body class instead of loading a separate additional stylesheet to display each submenu!

    I'm looking forward to trying your idea after I get some sleep.

    If it works the way I think it will work, it will be easier to maintain and much more efficient than my separate stylesheet idea.



    BTW, I'm intentionally using @import to hide my main stylesheet from NN4, and I've tried to use only semantic markup in my XHTML code, so I think that my pages will display (albeit very plainly) in NN4, text readers, cell phones, etc., without any stylesheet.

    Now that this thread has evolved from being a possible menu tip to being a really neat menu tip, one of the mentors may want to consider renaming it so that more people will see it.
    Last edited by ComputerBob; Sep 23, 2003 at 23:50.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  14. #14
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was impressed by Ian's suggestion too - I have some embedded styles in my pages that control the highlighting of the current page in the navigation system. I think with Ian's suggestion I will be able to move these styles into my stylesheet instead, which is a much more preferable solution.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  15. #15
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IAN'S IDEA WORKS!

    After getting 5 hours of sleep, I fully understood HOW it works, so I moved my submenu selectors into my main stylesheet, deleted my separate submenu stylesheets, and used the body class as Ian suggested. Right now, both my CB Guides and Reviews submenu demos are running with Ian's method!

    http://www.computerbob.com/my2col.html
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  16. #16
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From the testing I've done, I'm able to use Ian's suggestion too. I have main and sub-navigation on my pages so I have to use 2 classes on my <body> tag, e.g:
    Code:
    <body class="eftmenu item1">
    The CSS for "eftmenu", makes the 'EFT' text "button" appear depressed, and the CSS for "item1" highlights the first menu item in my sub-navigation. These rules give the user visual cues as to where they are in the site navigation.

    Changing all my code to the new solution now.

    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  17. #17
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CB,

    If you want to eliminate <style></style> from your XHTML completely, and still use @import to hide from NN4.x, take a look at this wiki.

    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  18. #18
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Andy! I followed your link and read that Import hack a couple of times, but I didn't really understand why it is needed, so I've bookmarked it for later reference, when I have time to figure it out.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  19. #19
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Home, CB Guides, and Reviews buttons all work the way they're supposed to work. My Home button "lights up" without any submenus, while the other two buttons "light up" along with their submenus.

    http://www.computerbob.com/my2col.html

    Progress is moving very slowly, because it's taking me a long, long time to add all of the URLs, titles, and link text for all of my submenu items to the menu unordered list.
    Last edited by ComputerBob; Sep 24, 2003 at 12:08.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  20. #20
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just added a page that shows how my Home page would display in NN4 and on devices/in browsers that don't recognize CSS. It looks pretty plain, but at least it all displays. And I'm definitely going to have to add a "Skip Navigation" link and some tab order code to make the whole thing more accessible.

    http://www.computerbob.com/my2col_nocss.html
    Last edited by ComputerBob; Sep 24, 2003 at 13:09.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  21. #21
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After working on it for the past several days, and making sure that it worked perfectly, I've decided that I'm not going to use my submenu system after all.

    Because it looks great, works great, and uses only CSS, it would be a perfect system for many Web sites.

    Unfortunately, my site had so many articles and pages in the submenus that, even though nearly all of them were hidden on each page, those hidden submenus added about 9K to the file size of each of my pages. On many pages, that made the difference between the file being 17K or being 26K. I couldn't justify making my pages more than 50% larger, just to display one neat-looking submenu on each page.

    So, instead, I'm going to use only my main menu system, and I've added a Site Map button to my main menu. Anyone who views the Site Map will see the entire menu/submenu unordered list of hyperlinks on one page, but they won't have to load as hidden items on all of my other pages.

    http://www.computerbob.com/my2col.html

    I guess sometimes you have to drive all the way to her house before you finally realize, just as you pull into her driveway, that you don't really want to see her after all.

    At least I learned a lot about CSS from working on that submenu system.
    Last edited by ComputerBob; Sep 25, 2003 at 13:31.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •