1 reply [Last post]
pepelepe
pepelepe's picture
Offline
newbie
Vancouver, BC
Last seen: 4 years 42 weeks ago
Vancouver, BC
Timezone: GMT-7
Joined: 2013-08-03
Posts: 6
Points: 11

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.

<!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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

css errors

You have serious css syntax errors. Proper debugging is difficult if not impossible unless fixed.

10 .tabs Property xwidth doesn't exist : 650px
11 .tabs Property xfloat doesn't exist : none
15 .tabs Property xmargin doesn't exist : 75px auto
18 .tabs Property xoverflow doesn't exist : auto
20 .tabs Property xheight doesn't exist : 350px
93 .tab-content Property xposition doesn't exist : absolute

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.