Hallo,
Ich weiß das diese Frage ansich nichts mit dem Stil zu tun hat aber da ich deinem kenntnissen diesbezüglich sehr vertraue habe ich mir gedacht das ich dich einfach mal frage, ist also nicht schlimm solltest du die frage nicht beantworten wollen.
Ich hab eine Seite erstellt wo ich Tabellen anzeigen lasse und das in einem Tab-Menü.
Hier mein CSS code dafür:
CSS
/* CSS zur gestaltung von Tabs mit radio-Buttons */
.tabbed figure {
display: block;
margin-left: 0;
border-bottom: 1px solid #000000;
clear: both;
}
.tabbed > input,
.tabbed figure > div { display: none; }
.tabbed figure>div {
padding: 20px;
width: 100%;
border: 1px solid #000000;
background: #1B1B23;
line-height: 1.5em;
letter-spacing: 0.3px;
color: #444;
}
#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }
nav label {
float: left;
padding: 15px 15px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
background: hsl(210,50%,50%);
color: #eee;
}
nav label:nth-child(1) { border-left: 1px solid #000000; }
nav label:hover { background: hsl(210,50%,40%); }
nav label:active { background: #1B1B23; }
#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"] {
background: #1B1B23;
color: #fff;
position: relative;
border-bottom: none;
}
#tab1:checked ~ nav label[for="tab1"]:after,
#tab2:checked ~ nav label[for="tab2"]:after,
#tab3:checked ~ nav label[for="tab3"]:after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #1B1B23;
left: 0;
bottom: -1px;
}
Alles anzeigen
und hier mein HTML Code für die Seite:
HTML
<div class="tabbed">
<input checked="checked" id="tab1" type="radio" name="tabs" />
<input id="tab2" type="radio" name="tabs" />
<nav>
<label for="tab1">DTM Tabelle</label>
<label for="tab2">Bonus Punkte</label>
</nav>
<figure>
<div class="tab1"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-tabelle.png" title="Erstellt von @Stefan1507" alt="DTM Tabelle DTM Liga Saison 7"></div>
<div class="tab2"><img class="startbild jsTooltip" src="https://f1-dtm-liga.com/tabellen-ergebnisse/tabellen/assettocorsa/dtm-saison-7/ac-dtm-liga-bonuspunktetabelle.png" title="Erstellt von @Stefan1507" alt="DTM Bonus Punkte Tabelle DTM Liga Saison 7"></div>
</figure>
</div>
Alles anzeigen
Ich würde aber noch gerne ein Tab-Menü machen das noch über diesen Tap-Menü ist sprich ein Tab-Menü im Tab-Menü aber irgendwie bekomme ich das einfach nicht hin
Kannst du mir da vieleicht weiterhelfen ?
Hier ein Link zu der Seite mit dem Tab-Menü: https://neuesforum.f1-dtm-liga.com/dtm-tabelle/
Vielen Dank schon mal im voraus für die Hilfe
Lg Stefan