zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Vertical scrollable Tabs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.01.2021, 18:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2021
Beiträge: 1
TwisteD befindet sich auf einem aufstrebenden Ast
Standard Responsive Vertical scrollable Tabs

Hallo zusammen,
bin neu hier und habe gerade eine Frage =)

Ich versuche aktuell TABS zu bauen, welche responsive und vertikal scrollbar sind. Das ganze komplett ohne JavaScript.

Der Inhalt bleibt variabel. Jetzt habe ich nur ein kleines Problem.

Ich hätte gerne das "label" im background farblich hinterlegt, wenn der "TAB" [radio] aktiv ist.
Leider bekomme ich es einfach nicht hin und hoffe auf Hilfe.

Hier der Code:
Code:
<style>
<!--
.search-tab-wrapper{width:100%;margin-left:auto;margin-right:auto}
.search-tab-radio{display:none}
.search-tabs{font-size:0;margin: 0}
.labels{overflow-y:auto;white-space:nowrap}
.labels .search-tab-label{background:#fff;color:#3b505e;border-bottom:3px solid #fff;display:inline-block;font-size:1rem;left:1px;margin-left:-1px;padding:10px 25px 7px;position:relative;vertical-align:bottom}
.labels .search-tab-label:hover{border-bottom:3px solid #00d5e0;color:#00d5e0;cursor:pointer}
.labels .search-tab-label i{display:block;text-align:center;font-size:1.3em;margin-bottom:6px}
.search-tabs .search-tab-panel{display:inline-block;overflow:hidden;position:relative;height:0;width:0}
.search-tabs .search-tab-content{display:block;float:left;font-size:1rem;width:100%;white-space:normal;background:#fff;color:#3b505e;border-top:1px solid #ccc}
span:focus{outline:none}
span:focus > .search-tab-label{background:#c40000!important}
.search-tabs .search-tab [type="radio"]:checked ~ .search-tab-panel{display:inline}
-->
</style>
HTML-Code:
<div class="search-tab-wrapper">
	<div class="labels">
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab1">Tab1</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-0">Tab2</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-1">Tab3</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-2"Tab4</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-3">Tab5</label>
		</span>
		<span tabindex="0">
			<label class="search-tab-label" for="search-tab2-4">Tab6</label>
		</span>
	</div>
	<div class="search-tabs">
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt1
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt2
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt3
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt4
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt5
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt6
				</div>
			</div>
		</div>
	</div>
</div>
Evtl. hat hier jemand eine Lösung?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.01.2021, 14:30
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

Moin,

ein ähnliches Problem hatte ich letztens auch.
Ohne JS sah ich nur den Weg die HTML-Struktur so zu ändern, dass das entsprechende Label-Feld erst nach dem dazugehörigen Input-Feld im Quelltext steht.

Entweder so:
HTML-Code:
<div class="search-tab-wrapper">
	<div class="search-tabs">
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
			<label class="search-tab-label" for="search-tab1">Tab1</label>
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt1
				</div>
			</div>
		</div>
		<div class="search-tab">
			<input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
			<label class="search-tab-label" for="search-tab2-0">Tab2</label>
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt2
				</div>
			</div>
		</div>
	...
Vom Prinzip her habe ich das für die FAQ-Felder auf dieser Seite umgesetzt:
https://balancecoaching.de/faq.html
(Auch wenn es hier Checkboxen und keine Radioboxen sind.)

Oder (falls du deine Labels der Einfachheit halber in einer Gruppe bündeln möchtest) du setzt erst mal alle Input-Felder folgendermaßen vor die Elemente, die du damit beeinflussen willst:
HTML-Code:
<div class="search-tab-wrapper">
	<input class="search-tab-radio" type="radio" id="search-tab1" name="search-tabs-main" checked="checked">
	<input class="search-tab-radio" type="radio" id="search-tab2-0" name="search-tabs-main">
	<input class="search-tab-radio" type="radio" id="search-tab2-1" name="search-tabs-main">
	<input class="search-tab-radio" type="radio" id="search-tab2-2" name="search-tabs-main">
	<input class="search-tab-radio" type="radio" id="search-tab2-3" name="search-tabs-main">
	<input class="search-tab-radio" type="radio" id="search-tab2-4" name="search-tabs-main">
	<div class="labels">
		<label class="search-tab-label" for="search-tab1" tabindex="0">Tab1</label>
		<label class="search-tab-label" for="search-tab2-0" tabindex="0">Tab2</label>
		<label class="search-tab-label" for="search-tab2-1" tabindex="0">Tab3</label>
		<label class="search-tab-label" for="search-tab2-2" tabindex="0">Tab4</label>
		<label class="search-tab-label" for="search-tab2-3" tabindex="0">Tab5</label>
		<label class="search-tab-label" for="search-tab2-4" tabindex="0">Tab6</label>
	</div>
	<div class="search-tabs">
		<div class="search-tab">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt1
				</div>
			</div>
		</div>
		<div class="search-tab">
			<div class="search-tab-panel">
				<div class="search-tab-content">
					Inhalt2
				</div>
			</div>
		</div>
...
Bei der Lösung musst du allerdings für die maximal mögliche Anzahl an Feldern entsprechend viele verschachtelte Selektoren vorhalten:

HTML-Code:
<style type="text/css">
.search-tab-wrapper input:nth-of-type(1):checked ~ div.labels > label:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.labels > label:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.labels > label:nth-of-type(3)
/* usw.*/ {
  /* Style-Angaben */
}

.search-tab-wrapper input:nth-of-type(1):checked ~ div.search-tabs > div:nth-of-type(1),
.search-tab-wrapper input:nth-of-type(2):checked ~ div.search-tabs > div:nth-of-type(2),
.search-tab-wrapper input:nth-of-type(3):checked ~ div.search-tabs > div:nth-of-type(3)
/* usw.*/ {
  /* Style-Angaben */
}
</style>
Auf die Art hatte ich hier die Info-Felder umgesetzt:
https://www.parkhaus-huexstrasse.de/

Viel Erfolg,
top

PS: Ich hoffe es ist in Ordnung, wenn ich gleich bei meinem erstem Beitrag zwei Links gesetzt habe.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navi Tabs lassen sich nicht positionieren roman CSS 8 10.04.2014 15:31
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 14:37
CSS Tabs SoontirFel CSS 10 22.10.2012 15:17
Positionierung funktioniert nicht innerhalb von Jquery's Scrollable japanworm CSS 14 12.09.2011 11:47
Tabs mit CSS - Problem mit IE6 crush41 CSS 2 01.02.2008 15:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:34 Uhr.