SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bulletproof Tabbed Navigation

    I have been reading Don Cederholm's 2nd edition of Bulletproof Web Design and find it incredibly useful. It just so happened I am re-designing a not for profit group web site, supporting sports for my children's school district; and the color scheme is a blue/yellow.

    The sample tabbed interface he demonstrated in his book is perfect for my current situation with two twists:

    1. I am floating the tabs to the right (and hope to lift them into the blue header, so the secondary tabs may display in the yellow/orange strip currently populated by the primary tabs); and

    p.s.
    Ever notice when flipping from left to right float with an unordered list, the list items display in reverse order? In the past, I have just re-ordered my list in the mark-up, so it renders "backwards"; however, is there a more sensible way to resolve this issue?


    2. For each primary tab, I plan to transfer the visitor to the main page for the tab with secondary tab-like options displayed beneath the chosen primary tab.

    I hope I explained my intentions well enough verbally, and I will include markup and css, as well. My problem is occurring on IE6 and Firefox on WinXP.

    My initial issue is how to re-collapse (horizontally) the primary tabs when I open a sub-list with secondary selections below the primary list. With my current markup and css, selecting a primary tab slides the horizontal tabs "open" and displays the secondary options below the open area. How do I collapse this for a clean display of secondary options?

    I will address the second issue (of moving the navigation up into the blue area of the "pageHeader" container) after I can successfully collapse the primary tabbed list.

    Thank you in advance for your recommendations.

    Code for "Sports" page: (kisd_sports.html)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Keller Athletic Boosters Association Supports Keller Texas Independent School District Sports</title>
    
    <link href="styles/boosters.css" rel="stylesheet" type="text/css" />
    <link href="styles/boosters_subNav.css" rel="stylesheet" type="text/css" />
    
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="scripts/pngfix.js"></script>
    <![endif]-->
    </head>
    
    <body id="pgSport">
    <!-- Defining an outer page container provides for another level of detail within the body of page    -->
    <div id="pageContainer">
    
    <!-- The page header will include any logo, banner visuals (if any) and primary page navigation        -->
        <div id="pageHeader">
    
            <img src="images/KSpear.png" alt="Keller Athletic Boosters Association Logo (Fear the Spear)" width="152" height="157" />
            <address>
                Keller Athletic Boosters<br />
                P.O. Box 273<br />
                Keller, TX  76248<br />
                <a href="mailto:info@kellerathleticboosters.org?subject=Keller Athletic Boosters Web site inquiry"><img src="images/email.gif" class="iconInline" />Info at Keller Athletic Boosters.org</a>
            </address>
        
    <!-- The page navigation structure is composed of a series of nested lists, whose presentation will
         be styled via css and behaviors defined by a combination of css and/or javascript libraries    -->
            <ul id="pageNavigation">
                <li id="tabHome"><a href="index.html">Home</a></li>
                <li id="tabMember"><a href="membership.html">Membership</a></li>
                <li id="tabSchool"><a href="keller_schools.html">Keller ISD</a></li>
                <li id="tabSport"><a href="kisd_sports.html">Sports</a>
                <ul id="subNavigation">
                    <li><a href="kisd_basketball.html">Basketball</a></li>
                    <li><a href="kisd_baseball.html">Baseball</a></li>
                    <li><a href="kisd_football.html">Football</a></li>
                    <li><a href="kisd_soccer.html">Soccer</a></li>
                    <li><a href="kisd_softball.html">Softball</a></li>
                    <li><a href="kisd_swimming.html">Swimming</a></li>
                    <li><a href="kisd_track.html">Track</a></li>
                    <li><a href="kisd_wrestling.html">Wrestling</a></li>
                </ul>
                </li>
                <li id="tabMerch"><a href=kisd_merchandise.html>Merchandise</a></li>
            </ul>        <!-- End of "pageNavigation" unordered list structure -->
            
        </div>            <!-- End of "pageHeader" container -->
        
        <div id="pageContent">
            <h1>Keller ISD Sports</h1>
            <p>Keller ISD primary focus on sports is visible by visiting the <a href="http://campus.kellerisd.net/swim/" target="_self">Keller Natatorium</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.</p>
            <h2>Waterpolo</h2>
            <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit.</p>
            <h2>Swimming</h2>
            <p>In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p> 
        </div>
        
        <div id="pageFooter">    
            <p class="copyrights">Web Design by <a href="http://www.wynnefields.com/" target="_blank">Wynnefields Creative</a>. Copyright &copy;2007 Keller Athletic Boosters Association. All Rights Reserved.</p>
      </div>
        
    </div>
    
    </body>
    </html>
    CSS Primary: (boosters.css)
    Code:
    /* Clear all browser versions default margins and padding which may cause inaccurate rendering    */
    * {
        margin: 0;
        padding: 0;
    }
    
    /* Redefine markup tags margin, padding and relative to the base font defined in the body tag    */
    body {
        font-size: small;
        color: #000;
        background-color: #ff9;
    }
    h1, h2, h3, h4 {
        font-family: "Lucida Grande", sans-serif;
    }
    h1 {
        margin-top: 1.8em;
        margin-bottom:    0.9em;
        font-size: 180%;
    }
    h2 {
        margin-top: 1.6em;
        margin-bottom: 0.8em;
        font-size: 160%;
    }
    h3 {
        margin-top: 1.4em;
        margin-bottom:    0.7em;
        font-size: 140%;
    }
    h4 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        font-size: 120%;
    }
    p {
        margin: 0.2em 2.0em;
        padding: 0;
    }
    
    /* Default link styles for visual asthetics and KISD color theme                                */
    a:link {
        color: #ccf;
        text-decoration: underline;
    }
    a:visited {
        color: #ffcb2d;
        text-decoration: none;
    }
    a:hover, a:active {
        color: #99f;
        text-decoration: none;
    }
    
    /* Layer styles are based on positioning on the page, visual requirements and funtionality        */
    #pageContainer {
        margin: 10px auto;
        padding: 0;
        width: 760px;
        background-color: #fff;
    }
    #pageHeader {
        margin: 0;
        padding: 0;
        background-color: #00f;
    }
    #pageHeader address {
        margin-top: -144px;
        margin-right: 10px;
        font-weight: bold;
        color: #ffcb2d;
        text-align: right;
        float: right;
    }
    #pageNavigation {
        margin: 0;
        padding: 1px 0 0 0;    /* right float padding */
    /*    padding: 10px 0 0 60px;    left float padding */
        list-style: none;
        width: 760px;
    /*    width: 700px;            left float width (subtracting margin + padding) */
        background: #ffcb2d url(../images/nav_bg.gif) repeat-x bottom;
        float: right;
    }
    #pageNavigation li {
        margin: 0 0 0 1px;    /* right float margins */
    /*    margin: 0 1px 0 0;    left float margins */
        padding: 0;
        font-family: "Lucida Grande", sans-serif;
        font-size: 80%;
        float: right;
    }
    #pageNavigation a {
        margin: 0;
        padding: 4px 8px;
        text-decoration: none;
        color: #009;
        display: block;
        border: 1px solid #9b8748;
        border-bottom: none;
        background: #f9e9a9 url(../images/nav_off.gif) repeat-x top left;
        float: left;
    }
    #pageNavigation a:hover,
    body#pgHome #tabHome a,
    body#pgMember #tabMember a,
    body#pgSchool #tabSchool a,
    body#pgSport #tabSport a,
    body#pgMerch #tabMerch a {
        color: #009;
        padding-bottom: 5px;
        border-color: #727377;
        background: #fff url(../images/nav_bg.gif) repeat-x top left;
    }
    CSS Secondary: (boosters_subNav.css)
    Code:
    #subNavigation {
        margin: 0; 
        padding: 24px 0 0 0;    /* right float padding */
        list-style: none;
        float: left;
    }
    #subNavigation li {
        margin: 0 0 0 1px;    /* right float margins */
    /*    margin: 0 1px 0 0;    left float margins */
        padding: 0;
        font-family: "Lucida Grande", sans-serif;
        font-size: 90%;
        float: left;
    }
    #subNavigation a {
        margin: 0;
        padding: 4px 8px;
        text-decoration: none;
        color: #009;
        display: block;
        border: 1px solid #9b8748;
        background: #f9e9a9 url(../images/nav_off.gif) repeat-x top left;
        float: left;
    }
    To see sample in browser, please visit the site in my signature and after the ".com/" enter "kab/" and press enter. The index page should appear, so you can see all tabs across the header and also see what I mean by "blue area of header".

    Again, thank you in advance for any help. I was hoping to get my friend his mockups for a board meeting tomorrow evening.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    How good is Dan Cederholm's book!

    p.s.
    Ever notice when flipping from left to right float with an unordered list, the list items display in reverse order? In the past, I have just re-ordered my list in the mark-up, so it renders "backwards"; however, is there a more sensible way to resolve this issue?
    Float the items left to keep them in order - then float the parent right to position it to the right. Though if the items go onto multiple lines it will start from the left corner of the left item so have a play around and see if it suits. e.g.
    Code:
    ul { float: right; }
    li { float: left; padding: 20px }
    Here is a good summary of popular dropdown menus: http://www.tyssendesign.com.au/artic...down-low-down/

  3. #3
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi mark,

    Bulletproof Web Design is probably one of the most beneficial books (related to web design) I have read during this past year. stacked up against a few other heavy hitters from the last 18 months: Prioritizing Web Usability, Don't Make Me Think (excellent quick read!), Pro CSS Techniques, designing with web standards (2nd edition) ... and one of my favorites to just "gaze" through is Transcending CSS: The Fine Art of Web Design, which i reference from the resources page of my web site (see sig) ...

    I am also an avid reader of Sitepoint publishing, having almost a full shelf of "Sitepoint only" books and reference guides. But who's got time to read, when there is so much markup to style?!?


    thank you for the suggestion; however, in this case floating the <ul> and <li> in opposite directions either brings the list back to the left or keeps it on the right with the opposite ordering of the list. this may be one of those cases where it's a good thing, as my client would like to refocus the site more on providing merchandise purchases, i.e. "Merchandise", happened to fall as the first rather than the last tab ... LOL

    with all the css books at my disposal, you would think i could find a solution in one of them. so, time to hit the rack and try scanning through Pro CSS Techniques tonight and see if I can spot any hints to collapse the primary list while opening the secondary list of options.

    still seeking input from the crowd of css thrill seekers! i will hit the book(s) tonight and see what i can find. if anyone has time to scan the markup and styles above, i would greatly appreciate any suggestions, as well ...

    thank you in advance.

    p.s. i appreciate the great link to drop down menu examples!
    Last edited by Wynnefield; Oct 15, 2007 at 21:32. Reason: added p.s.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't mean to hijack your thread but I have Don Cederholm's 1st edition of Bulletproof Web Design (didn't know there was a 2nd edition) and I too also really enjoy the book and find it very helpful!

  5. #5
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WoodiE55 View Post
    Don't mean to hijack your thread
    appreciate your comments. no worries woodie. thanks for keeping it on the "recentl updated" list ...

    not sure how many chapters were added/edited, but the 2nd edition is terrific. i recommend it highly, and i am only through the first four(?) chapters.

  6. #6
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could not seem to find an elegant xhtml/css only solution, so i made a slight adjustment and replaced the tabs with a modified version of the Suckerfish Dropdowns (see AListApart and search "suckerfish") for reference.

    if interested in seeing new navigation model, please select site link in my sig and add "/kab/" after the ".com" to see the current mockups. kab = keller athletic boosters. i suspect in a week or two the initial version of the site should be published at kellerathleticboosters.org, .net and .com for those of you interested in following along ...

    Still PINK for October
    <see http://pinkforoctober.org/>


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
  •