Höhe Content div bei Tabbed Content pur CSS3

baeckerjunge · 8. Dezember 2013

Hallo,

ich möchte innerhalb einer Seite einen Bereich mit tabbed Content einrichten. Ich habe jedoch Probleme mit der Höhe des Content div´s der einzelnen Tabs. Momentan ist eine Höhe fix, ist in einem Tab mehr Inhalt wird das ganze abgeschnitten.

Wer kann mir helfen?

HTML:

<div class="tab">
           <input type="radio" id="tab-4" name="tab-group-2" checked>
           <label for="tab-4">Tab One</label>

           <div class="content">
               <p>Stuff for Tab One</p>
           </div>
       </div>

       <div class="tab">
           <input type="radio" id="tab-5" name="tab-group-2">
           <label for="tab-5">Tab Two</label>

           <div class="content">
               <p>Stuff for Tab Two</p>

           </div>
       </div>

        <div class="tab">
           <input type="radio" id="tab-6" name="tab-group-2">
           <label for="tab-6">Tab Three</label>

           <div class="content">
              You made it this far?!
           </div>
       </div>

    </div>

HTML:

.tabs {
      position: relative;   
      min-height: 200px;
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      
      overflow: hidden;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }

hela · 9. Dezember 2013

baeckerjunge hat gesagt.:
... Momentan ist eine Höhe fix, ist in einem Tab mehr Inhalt wird das ganze abgeschnitten.

Hallo,
ich weiß zwar nicht, wie alles letztendlich aussehen soll, aber offensichtlich ist dein Problem, dass die absolut positionierten Content-Blöcke aus dem Textfluss genommen werden.

Vielleicht könntest du das Markup so gestalten:

HTML:

<div class="tabs">
	<input type="radio" id="tab-4" name="tab-group-2" checked>
	<label for="tab-4">Tab One</label>

	<input type="radio" id="tab-5" name="tab-group-2">
	<label for="tab-5">Tab Two</label>

	<input type="radio" id="tab-6" name="tab-group-2">
	<label for="tab-6">Tab Three</label>

	<br>

	<div class="tab-4">
		<p>Stuff for Tab One
		</p>
	</div>

	<div class="tab-5">
		<p>Stuff for Tab Two</p>
	</div>

	<div class="tab-6">
		You made it this far?!
	</div>
</div>

Die LABEL-Elemente können so gefloatet werden und das BR-Element sorgt für das "Clearing". Anschließend können alle Content-Blöcke im gleichen Container untergebracht werden, allerdings muss man für jeden Block die Referenz zum entsprechenden INPUT-Element separat im CSS herstellen:

CSS:

.tabs {
	width: 25em;
	margin: 1em;
}
.tabs [type=radio] {
	display: none;
}
.tabs label {
	float: left;
	position: relative;
	top: 1px;
	border: 1px solid #ccc;
	background: #eee;
	
}
.tabs [type = radio]:checked + label {
	background: white;
	border-bottom-color: white;
}
.tabs > br {
	clear: left;
}

/**
 * Formatierung aller Content-Elemente:
 */
.tabs div[class |= tab] {
	display: none;
	border: 1px solid #ccc;

	/**
	 * Falls alle Content-Elemente einheitliche Höhe haben sollen:
	height: 10em;
	overflow: auto;
	*/
}

/**
 * TAB-spezifische Content-Elemente formatieren:
 */
#tab-4:checked ~ div.tab-4,
#tab-5:checked ~ div.tab-5,
#tab-6:checked ~ div.tab-6 {
	display: block;
}

Was besseres fällt mit i.A. auch nicht ein.

Höhe Content div bei Tabbed Content pur CSS3

baeckerjunge

Erfahrenes Mitglied

hela

Neue Beiträge