• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabs in mehreren Reihen anordnen

D

DidgeFrank

Mitglied
Wie der Titel schon sagt. Meine Tabs gehen nicht mehr weiter nach rechts, jedoch
wäre es von der Anordnung sowieso günstiger in mehreren Zeilen zu arbeiten.
Ich würde gerne eine zweite Tab Zeile anfangen, weiss jedoch nicht wie...
Ich füge mal einen Auszug aus dem html und dem css ein...

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Catsuitapprentice – Farben</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <link rel="stylesheet" type="text/css" media="print" href="print.css"/>
    <!--<link rel="stylesheet" type="text/css" media="screen and (max-width:630px),
          screen and (max-device-width: 630px)" href="mobile.css"/> -->
    <meta name="description" content="Hier seht ihr Bilder von Kunden." >
        
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
        
</head>

<body>
  <div id="container">
    <div id="kopfleiste">
        <h2><a href="index.html">Catsuitapprentice - Farben</a></h2>
    </div>
  
    <img src="Bilder/Catsuits/bb.jpg" class="bild" alt="bodybag_pink" width="960" height="279">
  
    <div id="container2">
    <div id="links">
  
    <div id="menu">
        <ul>
            <li><a href="index.html">ÜBER MICH (UND MEINE "VISION")</a></li>
            <li><a href="werkzeuge.html">MEINE WERKZEUGE</a></li>
            <li><a href="Catsuits.html">CATSUITS</a></li>
            <li class="current"><a href="Colors.html">FARBEN</a></li>
            <li><a href="kontakt.html">KONTAKT</a></li>
            <li><a href="Links.html">LINKS</a></li>
            <li><a href="impressum.html">IMPRESSUM</a></li>
        </ul>
    </div>
 </div>
    <div id="inhalt">
  
    
         <h2>verfügbare Farben</h2>
      
<p>
        <div class="tabbed">
      <input name="tabbed" id="tabbed1" type="radio" checked>
      <section>
        <h1>
          <label for="tabbed1">Standardfarben</label>
        </h1>
        <div>
      
        <p>
          <div style="display: table; width: 100%;">
             <figure style="display: table-cell; padding: 0 4px; text-align: center;">
                  
                      <img src="Bilder/Colors/Four_D/apfelgrün.jpg" alt="apfelgrün">
                      apfelgrün
             </figure>
          
             <figure style="display: table-cell; padding: 0 4px; text-align: center;">
                  
                      <img src="Bilder/Colors/Four_D/aubergine.jpg" alt="aubergine">
                      aubergine             
             </figure>
          </div>
        </p>     
      
          <p>
          <div style="display: table; width: 100%;">
             <figure style="display: table-cell; padding: 0 4px; text-align: center;">
                  
                      <img src="Bilder/Colors/Four_D/babypink.jpg" alt="babypink">
                      babypink
             </figure>
          
             <figure style="display: table-cell; padding: 0 4px; text-align: center;">
                  
                      <img src="Bilder/Colors/Four_D/black.jpg" alt="black">
                      schwarz             
             </figure>
          </div>
        </p>


Code: 
.tabbed{
  float : left;
  width : 100%;
}

.tabbed > input{
  display : none;
}

.tabbed > section > h1{
  float       : left;
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0.5em 0.5em 0;
  overflow    : hidden;
  font-size   : 1em;
  font-weight : normal;
}

.tabbed > input:first-child + section > h1{
  padding-left : 1em;
}

.tabbed > section > h1 > label{
  display                 : block;
  padding                 : 0.25em 0.75em;
  border                  : 1px solid #ddd;
  border-bottom           : none;
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
  box-shadow              : 0 0 0.5em rgba(0,0,0,0.0625);
  background              : #fff;
  cursor                  : pointer;
     -moz-user-select     : none;
      -ms-user-select     : none;
  -webkit-user-select     : none;
}

.tabbed > section > div{
  position      : relative;
  z-index       : 1;
  float         : right;
  box-sizing    : border-box;
  width         : 100%;
  margin        : 2.5em 0 0 -100%;
  padding       : 0.5em 0.75em;
  border        : 1px solid #ddd;
  border-radius : 4px;
  box-shadow    : 0 0 0.5em rgba(0,0,0,0.0625);
  background    : #fff;
}

.tabbed > input:checked + section > h1{
  position : relative;
  z-index  : 2;
}

.tabbed > input:not(:checked) + section > div{
  display : none;
}
 
Werbung:
Oh du hast da große Lücken in deinem HTML. <div> Tags in <p> Tags sind z.B. gar nicht erlaubt.

Ich gebe dir einen Tipp, der vielleicht erstmal brutal klingt:
Schmeiß den gesamten Code über den Haufen.
Sche*ß auf deine ganze div-Struktur und das ganze CSS.
Das was du versuchst ist einfach nur eine Tabelle mit Tabs (oder einfach irgendwas mit Tabs)!

Dazu 1 Link:
Tabellen:
https://www.w3schools.com/html/html_tables.asp
Mit der kannst du so viele Zeilen wie du willst machen

Dann würdest du deinen Tab wie jetzt auch machen, nur das, was im <section> Tag steht, ist dann eine Tabelle.
Was jedoch ein guter Ansatz ist, ist deine Lösung mit den radioboxen. So sparst du dir das Javascript!

Hier mal eine Lösung von mir:
https://jsfiddle.net/Aaron3219/nfq1b9yq/
 
Zuletzt bearbeitet:
Hallo Sempervivum,
ich bin auf die Tabelle gekommen, da ich seinen CSS- und HTML-Code mal in einem Editor anzeigen lassen habe. Das sah meines wissens nach einer Tabelle mit Tabsystem aus.

Allerdings hast du in einem Punkt auf jeden Fall recht. Die Frage war nach einer neuen Tabzeile. Mein mitgeschickter Codeschnipsel erweitert aber automatisch um eine neue Zeile, womit die Frage so oder so gelöst ist, sofern keine Fragen zum Code bestehen.

Edit:
@Sempervivum außerdem arbeitet er mit einer input-opacity-0 Taktik, um pures CSS zu verwenden. Wenn du die Tabs in einen eigenen Container packst, ist dies doch zunichte oder täusch ich mich.
 
Zuletzt bearbeitet:
Werbung:
Ich habe Sempervivums Vorschlag umgesetzt und die Tabs werden jetzt korrekt umbrochen, wenn der Platz zu Ende ist,jedoch gibt es da noch zwei Probleme. Der automatisch ausgewählte Tab ist immer der letzte, jedoch wäre es besser,wenn es immer der erste wäre. Man sieht ja anhand der Tabs selbst nicht wo man gerade ist. Ich würde auch gerne immer zwei Bilder nebeneinander anordnen und dann nach unten weitergehen. Ansonsten wirds vertikal zu lang.
Danke jedenfalls für die Hilfe. Das mit den Tabellen wollte ich auf alle Fälle auch mal ausprobieren.
 
Hey, es funktioniert eigentlich super jetzt, danke.
Noch mal eine Frage zum javascript. Muss ich das in den .html header einfügen
und sucht das script sich alles unter der angegebenen Internetadresse zusammen,
will heissen, es funktioniert nicht offline? jQuery habe ich nicht auf meinem PC.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben