Hallo ihr Lieben,

ich fasse es nicht, ich habe es schon wieder kaputt gespielt...

Ich habe etwas Nettes (wie ich finde) auf meiner noch nicht online stehenden HP eingebaut. Nach langem Hin und Her ist es mir auch gelungen. Aber nun ist "Navigation bearbeiten" so lütt, dass ich es nicht mehr lesen, geschweige denn bearbeiten kann.



Da ich das Style auch nur auf dieser Unterseite bearbeitet haben (nicht im Head!), habe ich das Problem auch nur auf dieser Seite.

Wie ich schon an anderer Stelle erwähnte, kenne ich mich mit CSS/html/JS nicht wirklich aus. Ich sammele immer Codes zusammen und hangele mich nach dem Trial-Error-Prinzip durch, bis etwas so klappt, wie ich es gerne hätte. Daher weiß ich an manchen Stellen auch gar nicht so genau, was ich da so einbaue. Vieles verstehe ich inzwischen, aber noch nicht alles.

Dies ist der eingebaute Code:

<style type="text/css">
/* <![CDATA[ */
 "Text/css"
 
p {
  margin: 0 0 0px;
  line-height: 1,5;
}
 
main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}
 
section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}
 
input {
  display: none;
}
 
label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}
 
label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
 

label:hover {
  color: #888;
  cursor: pointer;
}
 
input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}
 
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}
/*]]>*/
</style>
 

Könnt ihr mir sagen, was davon veranlasst, dass das "Navi bearbeiten" nun unlesbar ist und wie ich den Code ändern müsste?

LG
Kersten.

Anleitung zur Selbsthilfe:

Lösch sukzessive deinen eingebauten Code und schau welcher Bereich dein Problem hervorruft. Dann kann man gezielt nach Lösungen suchen.

Hallo az_,

extrem giftig? uiuiui - was mache ich denn da???

Hier ist der Link zu der geschützten Seite im Bearbeitungsmodus:
https://palaneri.jimdo.com/protected/?co...ellungen%2F&;

Ich habe im Content eine Art Untermenü angelegt, um die Länge der Seite einzukürzen und weitere "richtige Unterseiten" zu vermeiden. Mein Navi bräuchte eigentlich 6 Unterebenen oder mehr, damit ich wirklich klar komme. *augenroll*



Jetzt versuche ich das auf den jeweiligen Seiten zu regeln: Mal mit dieser Lösung, mal mit nem Akkordeon, mal mit ner zusätzlichen Seiten-Navigation. Je nach Inhalten und Anzahl der benötigten, verschiedenen Inhalten.

Hast du eine bessere Idee?

Ganz lieben Dank für deine Hilfe.
Kersten.


PS: Ich bin ja noch bei der Free-Version von Jimdo. Kann also auf dieser HP noch nicht offiziell die einzelnen Seiten gestalten. Daher gehe ich eben noch den Umweg über die Widgets. Hier stehen HTML, Text-Inhalt und CSS im gleichen Widget-Fenster. Nur für den Fall, dass das wichtig ist...

ok. dann nehme ich den Schutz vorübergehend raus. ;-)

und hier der neue Link: https://palaneri.jimdo.com/rasse/ausstellungen/

Ok, danke. Die Seite ist schon mal gespeichert. ;-) Da sind ja so viele Möglichkeiten drauf... Da muss ich mich erst mal durcharbeiten.

Aber wie giftig ist denn nun meine "interessante Variante". Soll ich sie lieber wieder löschen? *angst-hab* Nicht dass ich da wirklich noch was kaputt spiele... *hihi*

LG
Kersten

PS: Kann ich den Schutz wieder reinpacken?

Hallo ihr Lieben!

Ich glaube, ich habe jetzt eine Lösung gefunden, die nicht so giftig ist. Jedenfalls kann ich die Navigation nun wieder problemlos bearbeiten:

<style>
/* <![CDATA[ */
    .alles {
        background:white;
    }
    
 
/* Style the tab */
    .tab {        
        overflow: hidden;
    }
    
 
/* Style the buttons inside the tab */    
    .tab button {
        float: left;
        border: 1px solid transparent;
        border-bottom: 1px solid #ddd;
        border-top: 3px solid transparent;
        background: transparent;
        cursor: pointer;
        padding: 15px 15px;
        transition: 0.3s;
        font-size: 16px;
        color: #bbb;
    }
 
/* Change buttons on hover */
    .tab button:hover {
        color: #888;
    }
 
/* Create an active/current tablink class */
    .tab button.active {
        color: #555;
        border: 1 px solid red;
        border-top: 3px solid orange;
        border-bottom: 1 px solid transparent;
    }
 
/* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px;
    }
 
/* Style the close button */
    .topright {
        float: right;
        cursor: pointer;
        font-size: 30px;
    }
 
    .topright:hover {
        color: red;
    }
    
/*]]>*/
</style>
 

 
<script>
/* <![CDATA[ */
function openJahr(evt, JahrName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(JahrName).style.display = "inline";
    evt.currentTarget.className += " active";
    }
 
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
/*]]>*/
</script>
 
 

Aber nun tun sich leider neue Fragen bei mir auf...

1.
Irgendwo muss in diesem Codes eine grundsätzliche Formatierung der TABs hinterlegt sein, die ich nicht sehe. Ich möchte die TABs grundsätzlich wieder so gestaltet haben, wie ich sie am 8.3. gepostet habe. Abgesehen vom orangenen Überstrich über dem ausgewählten Tab kann ich die Rahmen jedoch nicht formatieren. Wie ihr oben seht, habe ich es versucht, doch die Formatierung wird nicht angenommen:



Lösche ich bei ".tab button" diese Passage

        border: 1px solid transparent;
        border-bottom: 1px solid #ddd;
        border-top: 3px solid transparent;
        background: transparent;
 
 

kommt folgendes dabei heraus:


Diese Formatierung habe ich nirgends eingegeben. Zumindest nicht bewusst. Kann mir bitte jemand sagen, wo ich was ändern muss, damit meine Wunschdarstellung möglich ist?

2.
Auch schaffe ich es nicht (weder mit padding noch mit margin) den Content ein wenig seitlich einzurücken, damit er nicht mehr so am weißen Feldrand klebt. Padding-Top ging. Aber die Seiten - keine Chance. Weiß dazu jemand Rat?

3.
Am liebsten wäre es mir dann noch, wenn beim Seitenaufruf nur die Überschrift und die TABs zu sehen sind. Der Content soll erst mit dem erstmaligen Klick auf einen TAB auftauchen. Da habe ich auch schon gespielt, es aber nicht hinbekommen.

Hier

<div class="tab">
    <button class="tablinks" onclick="openJahr(event, '2018')">2018</button> <button class="tablinks" onclick="openJahr(event, '2017')">2017</button> <button class="tablinks" onclick=
    "openJahr(event, '2015')">2015</button> <button class="tablinks" onclick="openJahr(event, '2013')" id="defaultOpen">2013 & 2014</button>
    </div>
 
 

einfach id="defaultOpen" zu löschen, führt jedenfalls nicht zu meinem Wunschergebnis. Da ich mich mit Funktionen nicht auskenne, habe ich es bisher lieber bei der Ursprungsversion gelassen. Weiß da jemand eine Lösung?

4.
Ich habe noch nie mit Funktionen gearbeitet und weiß nun gar nicht, was der Code-Schnipsel da macht. Ist komplett kopiert. Ich habe versucht, Allgemeines über Funktionen zu lesen; verstehe die Funktionsweise des Codes trotzdem leider nicht. Also, ich weiß was er macht, weil ich das Ergebnis sehe. Aber ich weiß nicht, welcher Teil des Codes was genau macht. Was ich verstanden habe, ist dass bei den Variablen eine Zählschleife eingebaut ist. Kann mir einer erklären, welchen Sinn die haben? Was muss denn da gezählt werden?

Liebe Grüße und einen tollen Wochenstart! :-)
Kersten.

Ich habe mein "extra Menü im Content" mal auf eine Test-Seite geschoben. Da könnt ihr euch das besser ansehen:
https://irenalap.jimdo.com/tab-navi/

LG
Kersten

Hat denn keiner einen Lösungsansatz für mich?

Danke, az!

Ich habe es jetzt einigermaßen hinbekommen. Was mir noch nicht so gegeällt, ist dass ich die durchgehende Linie unter den Tabs, nicht ausblenden kann, wenn ein Tab geklickt ist. Ich meine so, wie das hier funktioniert:
https://codepen.io/oknoblich/pen/tfjFl
Aber das war ja der "giftige" Code vom Anfang dieser Geschichte.

Das Beispiel arbeitet mit "label" während ich nun mit "button" arbeite. Bei der Label-Geschichte wird die Linie dann einfach mit einem weißen border-bottom überschrieben. Bei den Tabs liegen die Linie und der Border-bottom jedoch nicht auf gleicher Höhe.

Kann ich trotzdem irgendwie mein gewünschtes Ergebnis erreichen? Hat da jemand einen Tipp, wie ich meinen Code ergänzen oder ändern muss?
Hier findet ihr meine derzeitige Lösung.

LG, Kersten