Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. Tab Control

Tab Control

Scheduled Pinned Locked Moved Web Development
htmlcssarchitecture
6 Posts 2 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    Ali Al Omairi Abu AlHassan
    wrote on last edited by
    #1

    Guys; I have created this control to present a tab page control

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tab Control</title>
    <style type="text/css">
    .tabcontrol {
    list-style:none;
    padding: 8px;
    margin:3px;
    background-color:lightgray;
    position:relative;
    }
    .tabcontrol>li {
    float:left;
    margin-right:4px;
    }
    .tabcontrol>li>span {
    display:inline-block;
    background-color:gray;
    margin:0;
    padding:3px;
    border:solid 1px silver;
    cursor:pointer;
    }
    .tabcontrol>li>span:hover {
    background-color:lightgray;
    }
    .tabcontrol>li.selected>span {
    background-color:#fff;
    font-weight:bold;
    }
    .tabcontrol>li>ul {
    display:none;
    left:0;
    right:0;
    position:absolute;
    background-color:#fff;
    border:solid 1px silver;
    margin: 0 8px;
    padding:4px;
    list-style:none;
    }
    .tabcontrol>li.selected>ul {
    display:block;
    }
    .tabcontrol>li>ul>li {
    float:left;
    width:100px;
    height:100px;
    background-color:blue;
    color:#fff;
    margin:5px;
    padding:2px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <ul class="tabcontrol" style="height:154px;">
    <li>
    <span>Tab page 1</span>
    <ul>
    <li>Box 1.1</li>
    <li>Box 1.2.</li>
    <li>Box 1.3.</li>
    </ul>
    </li>
    <li class="selected">
    <span>Tab page 2</span>
    <ul>
    <li>Box 2.1.</li>
    <li>Box 2.2.</li>
    <li>Box 2.3.</li>
    </ul>
    </li>
    <li>
    <span>Tab page 3</span>
    <ul>
    <li>Box 3.1.</li>
    <li>Box 3.2.</li>
    <li>

    Richard DeemingR 1 Reply Last reply
    0
    • A Ali Al Omairi Abu AlHassan

      Guys; I have created this control to present a tab page control

      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Tab Control</title>
      <style type="text/css">
      .tabcontrol {
      list-style:none;
      padding: 8px;
      margin:3px;
      background-color:lightgray;
      position:relative;
      }
      .tabcontrol>li {
      float:left;
      margin-right:4px;
      }
      .tabcontrol>li>span {
      display:inline-block;
      background-color:gray;
      margin:0;
      padding:3px;
      border:solid 1px silver;
      cursor:pointer;
      }
      .tabcontrol>li>span:hover {
      background-color:lightgray;
      }
      .tabcontrol>li.selected>span {
      background-color:#fff;
      font-weight:bold;
      }
      .tabcontrol>li>ul {
      display:none;
      left:0;
      right:0;
      position:absolute;
      background-color:#fff;
      border:solid 1px silver;
      margin: 0 8px;
      padding:4px;
      list-style:none;
      }
      .tabcontrol>li.selected>ul {
      display:block;
      }
      .tabcontrol>li>ul>li {
      float:left;
      width:100px;
      height:100px;
      background-color:blue;
      color:#fff;
      margin:5px;
      padding:2px;
      text-align:center;
      }
      </style>
      </head>
      <body>
      <ul class="tabcontrol" style="height:154px;">
      <li>
      <span>Tab page 1</span>
      <ul>
      <li>Box 1.1</li>
      <li>Box 1.2.</li>
      <li>Box 1.3.</li>
      </ul>
      </li>
      <li class="selected">
      <span>Tab page 2</span>
      <ul>
      <li>Box 2.1.</li>
      <li>Box 2.2.</li>
      <li>Box 2.3.</li>
      </ul>
      </li>
      <li>
      <span>Tab page 3</span>
      <ul>
      <li>Box 3.1.</li>
      <li>Box 3.2.</li>
      <li>

      Richard DeemingR Offline
      Richard DeemingR Offline
      Richard Deeming
      wrote on last edited by
      #2

      As the contents of the .tabcontrol are floated, you'll need a "clearfix"[^] to clear the floats.

      .clearfix:before,
      .clearfix:after {
      content: " ";
      display: table;
      }

      .clearfix:after {
      clear: both;
      }

      /**
      * For IE 6/7 only
      * Include this rule to trigger hasLayout and contain floats.
      */
      .clearfix {
      *zoom: 1;
      }

      <ul class="tabcontrol clearfix">


      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

      A 1 Reply Last reply
      0
      • Richard DeemingR Richard Deeming

        As the contents of the .tabcontrol are floated, you'll need a "clearfix"[^] to clear the floats.

        .clearfix:before,
        .clearfix:after {
        content: " ";
        display: table;
        }

        .clearfix:after {
        clear: both;
        }

        /**
        * For IE 6/7 only
        * Include this rule to trigger hasLayout and contain floats.
        */
        .clearfix {
        *zoom: 1;
        }

        <ul class="tabcontrol clearfix">


        "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

        A Offline
        A Offline
        Ali Al Omairi Abu AlHassan
        wrote on last edited by
        #3

        Thanks Richard, clearfix solution is a great idea for getting rid of the unwanted floating (I'll consider to use that ;) ) but I was talking about the lists in the second level they are absolutely positioned relative to the outer list. it is just like they were removed from the page and anchored to the outer list using left, right, and top. what I am for is how to stretch the height of the outer list without setting the height with java script.

        Help people,so poeple can help you.

        Richard DeemingR 1 Reply Last reply
        0
        • A Ali Al Omairi Abu AlHassan

          Thanks Richard, clearfix solution is a great idea for getting rid of the unwanted floating (I'll consider to use that ;) ) but I was talking about the lists in the second level they are absolutely positioned relative to the outer list. it is just like they were removed from the page and anchored to the outer list using left, right, and top. what I am for is how to stretch the height of the outer list without setting the height with java script.

          Help people,so poeple can help you.

          Richard DeemingR Offline
          Richard DeemingR Offline
          Richard Deeming
          wrote on last edited by
          #4

          As far as I'm aware, there's no CSS solution to make parent elements stretch to fit absolutely-positioned children. Javascript is the only solution I've seen.


          "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

          "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

          A 1 Reply Last reply
          0
          • Richard DeemingR Richard Deeming

            As far as I'm aware, there's no CSS solution to make parent elements stretch to fit absolutely-positioned children. Javascript is the only solution I've seen.


            "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

            A Offline
            A Offline
            Ali Al Omairi Abu AlHassan
            wrote on last edited by
            #5

            because they don't belong to the page flow but anchored to the page, right? :)

            Help people,so poeple can help you.

            Richard DeemingR 1 Reply Last reply
            0
            • A Ali Al Omairi Abu AlHassan

              because they don't belong to the page flow but anchored to the page, right? :)

              Help people,so poeple can help you.

              Richard DeemingR Offline
              Richard DeemingR Offline
              Richard Deeming
              wrote on last edited by
              #6

              Yes, that's right.


              "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

              "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • World
              • Users
              • Groups