Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tab Navigation Layout

    I want to create a dynamic tab navigation menu using javascript. I want the tabs/content area to be outlined with a border (1px). I want the content area to expand to the bottom of the browser's viewport (minus a margin) when there is little content then beyond when the content grows past the viewport. I was thinking I could use an unordered list for the tabs and a division for the content area. The problem that I'm having is when I set the division height to 100%, it goes below the viewport. If I use a table (nested table) I can get the desired effect but run into other problems. Can the content area be done with HTML and css or do I need javascript to control the content area height? What are your suggestion.

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Height should be easily manageable with HTML and CSS.
    By the way, never EVER use tables for layout. They are awful.
    Can I see your code?
    And have you validated?

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <html>

    <head>
    <link rel=StyleSheet href='csspositioning1.css' type=text/css>
    </head>

    <body>

    <ul>
    <li class=thirdTab>Tab 3</li>
    <li class=secondTab>Tab 2</li>
    <li class=firstTab>Tab 1</li>
    </ul>

    <div class=contentArea>Content Area</div>

    </body>
    </html>

    li {
    width: 100px;
    float: right;
    border-left: 1px solid black;
    border-top: 1px solid black;
    list-style:none;
    text-align: center;
    color: blue;
    font-weight: bold;
    }

    .firstTab {
    background-color: #F0E68C;

    }

    .secondTab {
    background-color: #98FB98;
    border-bottom: 1px solid black;
    }

    .thirdTab {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #D3D3D3;
    }

    .contentArea {
    position: relative;
    bottom: 2px;
    height: 100%;
    clear: right;
    border: 1px solid black;
    background-color: #F0E68C;
    z-index:-1;
    }

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not validated, what is that?

  • #5
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    A validator is a program that checks that your code is compliant to current industry standards.

    http://validator.w3.org/

    No download required.

    This can catch annoying problems that are fairly simple pretty much instantly.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #6
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    HTML: I've noticed you have no quotes around your values, and that could cause issues. Also, you should use a !DOCTYPE tag. These in themselves could fix whatever issues you are having. Remember to validate early and often!

    CSS: It validated, so it's industry compliant, which means no novice errors. Just make sure that your values match what you want.

    Hope this helped.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now my code validates with only 2 warnings with the HTML but my Content Area (div) still goes below the view-port. I have also tried it with a container div and still get the same results.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>
    <title>CSS Position 1</title>
    <script type="text/javascript" src="csspositioning1.js"></script>
    <link rel="StyleSheet" href="csspositioning1.css" type="text/css">
    </head>

    <body>

    <ul>
    <li class="thirdTab">Tab 3</li>
    <li class="secondTab">Tab 2</li>
    <li class="firstTab">Tab 1</li>
    </ul>

    <div class="contentArea">Content Area</div>

    </body>
    </html>


    html, body {
    height: 100%;
    }

    li {
    width: 100px;
    float: right;
    border-left: 1px solid black;
    border-top: 1px solid black;
    list-style:none;
    text-align: center;
    color: blue;
    font-weight: bold;
    }

    .firstTab {
    background-color: #F0E68C;

    }

    .secondTab {
    background-color: #98FB98;
    border-bottom: 1px solid black;
    }

    .thirdTab {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #D3D3D3;
    }

    .contentArea {
    position: relative;
    bottom: 2px;
    height: 100%;
    clear: right;
    border: 1px solid black;
    background-color: #F0E68C;
    z-index:-1;
    }

  • #8
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You can create CSS class and give the border using javascript based navigation menu.

  • #9
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure what you mean, do you mean instead of giving the Content Area div a static CSS value (example: 100% or 600px) to control the size (height) of the Content Area, use javascript to control the size (height).


  •  

    Posting Permissions

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