TAB Block um einen Punkt erweitern

[funsport]

Kann man einen Tab Block wie diesesn
Den Unteren bitte
http://www.soltec-es.com/Solartechnik.html

um einen Punkt erweitern?

[Martin73]

Ja, das geht! Es ist aber etwas fummelig mit den Input-Parametern und den CSS-Formatierungen.
https://www.zahnarzt-schaller-plauen.de/corona.html
Ich melde mich später noch einmal.

Zuerst fügst Du hier ein Tab hinzu und wählst es aus! Das vierte musst Du abwählen!:

<input type="range" inline="" title="Oben" name="paddingTop" min="0" max="9" step="1" value="6">
        <input type="range" inline="" title="Unten" name="paddingBottom" min="0" max="9" step="1" value="5">

        <input type="checkbox" title="Titel Anzeigen" name="showTitle" checked="">
        <input type="checkbox" title="Untertitel Anzeigen" name="showSubtitle">
        <input type="checkbox" title="Show Tabs Titles" name="showTitleTab" checked="">
        <input type="checkbox" title="Show Tabs Images" name="showImages" checked="">
        <input type="checkbox" title="Buttons Anzeigen" name="showButtons" checked="">
        <input type="color" title="Tab Color" name="tabColor" value="#f4f8fa">
        <input type="color" title="Active Tab Color" name="activeTabColor1" value="#ffffff">
        <select title="Tabs" name="bootstrapTabs">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5" selected="">5</option>
        </select>

Dann kopierst Du Dir das 4 Tab und fügst es noch einmal darunter ein (von li bis /li):

<li mbr-buttons="" mbr-theme-style="display-7" class="nav-item" mbr-if="bootstrapTabs > 3" data-toolbar="-mbrBtnAdd,-mbrBtnMove,-mbrLink,-mbrBtnRemove"><a class="nav-link mbr-fonts-style active show" role="tab" data-toggle="tab" href="#extTabs9-y_tabe3" data-app-placeholder="Type Text" aria-selected="true">
                                    Tab 4
                                </a></li>
Die beiden "3" änderst Du in die "4" und die "4" änderst Du in "5"!

Darunter befinden sich 4 DIV's mit der id="tab1" bis "tab4", in denen sich die Bilder (img) befinden. Kopiere das 4 Div und füge es darunter ein. Ändere die id="4" in id="5"!
Fertig!
CSS musst Du hier gar nicht ändern!

[funsport]

Welchen Block findet Ihr ist besser.
Den oberen oder den Unteren.
http://www.soltec-es.com/Solartechnik.html

Ich habe jetzt alles versucht was irgen wie geht, drum muss ich leider doch wieder mal fragen bei dem unteren Block hätte ich gerne die Tabs von ganz links. und dann breiter aber immer wenn ich die Textbreite von

4 auf 5 ändere dann Springen die Blöcke nach Oben

[Martin73]

Ich finde das obere Beispiel besser. Wenn Du beim unteren Beispiel das DIV mit den Tabs von 4 auf 5 setzt, musst Du natürlich das DIV mit dem Bild von 8 auf 7 setzten!

Du könntets zusätzlich auch alles auf die volle Breite setzten:

<div class="media-container-row">
            <div class="col-12 col-md-10">

ändern in :

<div class="media-container-row">
            <div class="col-12 col-md-12">

[funsport]

Hallo Martin,

warum findest du das obere besser?

Was haltet Ihr davon wenn man das obere nimmt  das man dann ein GIF macht
als animation wo dann nach und nach von 1-5 kommt

Ich muss halt ein par Hingucker machen ich bin ja nicht alleine habe aber den
Vorteil das hier die wenigsten wirklich wissen was Sie tuen.


Ich werde das mit den Breiten sofort versuchen ich hatte das versucht
indem ich die Gesamtbreite auf md-12 gesetzt habe und dann Text Breite auf 7
Bin da aber leider nicht weiter gekommen ich werde es jetzt noch einmal versuchen

Danke

[Martin73]

Beim ersten Beispiel sind (links) die Tabs ungefähr gleich hoch wie das Bild auf der rechten Seite und der Text steht gleich unter der Überschrift. Das sieht schöner aus. Dass hier keine Bilder verlinkt sein können, ist natürlich ein Nachteil. Mit einem GIF oder Video könnte man das Problem lösen.