PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Sep 30, 2020 5:08 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: CSS Tab extends too wide
PostPosted: Wed Jan 14, 2015 9:53 pm 
Offline
Forum Commoner

Joined: Thu Nov 20, 2008 11:29 am
Posts: 44
Hello:

I am losing my mind here and I could really use some help. I am trying to created a simple tabbed login form and I am having problems with the tab portion. If I have a tab that has lots of text, for some reason it takes that width and applies it to my tab, which is not what I want. I actually want a fixed width of the tab, like the first one, across the other tabs that automatically increases or decreases the height of the content, the yellow box. Can anyone help me please.

Also, what I am not understanding is why labels for the div "nuffin" taking on the same properties as the tabs label when I have a separate name for it?

Any help would be greatly appreciated.

Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html lang="en">
<head>

<style>

/* This is just a dummy box, DELETE for production. */
.main
{
   border: 1px solid red;
   padding: 5px;
}

/* This is the entire tabs for the area with content. */
.tabs
{
   xwidth: 650px;
   xfloat: none;
   list-style: none;
   position: relative;
   padding: 0;
   xmargin: 75px auto;

   width: 100%;
   xoverflow: auto;
   border: 1px solid yellow;
   xheight: 350px;

   display: inline-block;
}

/* This is the individual tabs. */
.tabs li
{
   float: left;
}

/* Radio buttons area that is NOT visible. */
.tabs input[type=radio]
{
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* This is the current tab selected. */
[id^=tab]:checked + label
{
   background: #08C;
   color: white;
   top: 0;
}

/* This is the individual tab label areas. */
.tabs label
{
   display: block;
   padding: 10px 20px;
   border-radius: 2px 2px 0 0;
   color: #08C;
   font-size: 24px;
   font-weight: normal;
   font-family: 'Roboto', helveti;
   background: rgba(255,255,255,0.2);
   cursor: pointer;
   position: relative;
   top: 3px;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

/* This is the individual tab hover. */
.tabs label:hover
{
   background: rgba(255,255,255,0.5);
   top: 0;
}

/* This is the checked tab content area. */
[id^=tab]:checked ~ [id^=tab-content]
{
   display: block;
}

/* Same as above. */
.tab-content
{
   z-index: 2;
   display: none;
   text-align: left;
   width: 100%;
   font-size: 20px;
   line-height: 140%;
   padding-top: 10px;
   background: #08C;
   padding: 15px;
   color: white;
   xposition: absolute;
   top: 53px;
   left: 0;
   box-sizing: border-box;
   -webkit-animation-duration: 0.5s;
   -o-animation-duration: 0.5s;
   -moz-animation-duration: 0.5s;
   animation-duration: 0.5s;

   z-index: 2;
   display: none;
   float: left;
   padding: 1em;
   left: 0;
   border: 1px solid #ddd;
   margin-top: 8px;
   min-width: 90%;
}

#nuffin label
{
   background: pink;
}

</style>

</head>

<body>

<div class="main">
   <ul class="tabs">

      <li>
         <input type="radio" checked name="tabs" id="tab1">
         <label for="tab1">Register</label>
         <div id="tab-content1" class="tab-content animated fadeIn">
            <div id="nuffin">
               <form action="" method="post">

                  <label>UserName  :</label><input type="text" name="username" class="box"/><br /><br />
                  <label>Password1  :</label><input type="password1" name="password1" class="box" /><br/><br />
                  <label>Password2  :</label><input type="password2" name="password2" class="box" /><br/><br />

                  <input type="submit" value=" Submit "/><br />

               </form>

            </div>

         </div>
      </li>

      <li>
         <input type="radio" name="tabs" id="tab2" checked="checked">
         <label for="tab2">Login</label>
         <div id="tab-content2" class="tab-content animated fadeIn">
            If I write a lot of text here, it somehow changes the look of the tabs.  Not sure what is happening.
         </div>
      </li>

      <li>
         <input type="radio" name="tabs" id="tab3">
         <label for="tab3">Forgot</label>
         <div id="tab-content3" class="tab-content animated fadeIn">
            Lorem ipsum dolor ...
         </div>
      </li>

   </ul>
</div>

</body>
</html>
 


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group