CSS Tabs too wide

[pepe_lepew1962]

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.



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

[pepe_lepew1962]

Opps, sorry, I forgot to add the css file ...


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

[Deadweight]

Do you have an example of what you are wanting? This is kinda confusing. Are you wanting the 'Login' Tab just around the log in part?

[pepe_lepew1962]

Hello:

What I want is 1 login screen with 3 tabs for Register, Login, and Forgot. The problem is that the tab headers takes the size of the tab content, so if I have a tab with lots of text, for some reason, that tab header takes it's width. I want something uniform and clean. I know I have errors with some of the elements. When I try out things and am not sure Iif I want to use them, I put an "x" in front of it so that it does not get used. Too lazy to comment it out properly.

[Deadweight]

Can I use JavaScript or do you want me to just keep it as CSS/html?

[pepe_lepew1962]

I didn't know beggers could be choosers, haha. I would prefer pure CSS. I have this under jsfiddle:

http://jsfiddle.net/lepew/hLed8o96/1/

Currently, when you click the "Register" tab, everything is fine, but everything goes south on the other 2. I know the tabs and colors are ugly. I was going to change that AFTER the basic script works. Not knowing much, but to me, it looks like the content is wrong. It moves up and down correctly for the different heights, but the width of the tabs are fubarred.

[Deadweight]

Im not finished (Fixing a ton of things) Are you wanting the tabs like this http://jsfiddle.net/x2m7r49b/2/?

Like always next to each other? Again im not finished. I just want to know if you want it like that xD

[pepe_lepew1962]

Dude, I feel so bad asking for all of this, seriously. It sure looks better than what I had. The individual contents seem to still be influenced by the tab because Register is left aligned, Login is centered and Forgot is right aligned. Basically all 3 will be very identical to Login except for a few added fields so I will have all the contents centered within a div. Is it possible to get them to look like normal tabs, they seem like they are spread over the entire top part?

[pepe_lepew1962]

Here is another version:

http://jsfiddle.net/lepew/hLed8o96/2/

I want to get the entire tab in the red box. The height of each content box would change depending on the actual content.

[Deadweight]

Okay so you want only the tabs inside the redbox?

[Deadweight]

Something like this: http://jsfiddle.net/hLed8o96/3/

[pepe_lepew1962]

No, I want the entire thing in the red box. I tried to make it inline, inline-blocked, height auto and nothing worked. If you look at the second jsfiddle example, the tabs are nicely positioned, but the contents plus tabs are not flexible, responsive, or auto adjusting, within the red box, meaning that the height of the red box would automatically adjust. Maybe this is easier, put the entire tab with content within a red box, in this case .main, and regardless of what I put into the individual contents, the entire height will automatically adjust.

[Deadweight]

Like this: http://jsfiddle.net/hLed8o96/5/
(Need to fix one thing)

Final copies:
With red below the tabs:
http://jsfiddle.net/hLed8o96/6/
Without red below the tabs:
http://jsfiddle.net/hLed8o96/7/

[pepe_lepew1962]

Hello:

Yes, exactly. Thank you so much !!!