[phpBB2] JavaScript-Code funktioniert nicht: CSS automatisch ändern

Hallöle!

Ich verzweifel seit ein paar (vielen) Stunden dezent an diesem JavaScript-Code, der die CSS-Eigenschaften automatisch anpassen soll, doch egal wie ich es schreibe, es funktioniert nicht auf Forumieren. Auf Jsbin.com funktioniert derzeit folgender Code, doch bei Forumieren geht's nicht. Habe alles mögliche ausprobiert, etliche Versionen der Schreibweise/Variablen geändert, etliche Versionen einer If-Else-Anweisung, etliche Versionen ohne If-Else-Anweisung und ich komm' einfach nicht weiter. Langsam glaube ich, ich habe einen Denkfehler oder so.  

Code:

if (document.getElementsByTagName('input').length > 10)
{document.getElementsByTagName('tabs')[0].style.height = '615px';
 document.getElementsByTagName('cont')[0].style.top = '215px';}
if (document.getElementsByTagName('input').length <= 10 )
{document.getElementsByTagName('tabs')[0].style.height = '543px';
 document.getElementsByTagName('cont')[0].style.top = '143px';}
if (document.getElementsByTagName('input').length <= 5)
{document.getElementsByTagName('tabs')[0].style.height = '472px';
 document.getElementsByTagName('cont')[0].style.top = '72px';}


Es geht im Detail um Folgendes: Ich habe eine Galerie mit Tabs gebaut. Dabei kann man Vorschaubilder anklicken und es wird entsprechend das jeweilige Bild angezeigt. Da die Anzahl der Vorschaubilder jedoch variiert je Galerie (ich habe mehrere Galerien und für jede Galerie einzeln ein CSS anzulegen ist mir zu umständlich... dachte ich anfangs; hätte ich gewusst was für Arbeit der JS-Code macht, dann... ) und leider ist das Tab-Konstrukt in dieser Art und Weise nicht flexibel, das heißt, ich muss fixe Größen benutzen, damit es überhaupt funktioniert. So, und diese fixen Größen hätte ich gerne automatisch angepasst, sobald die Anzahl der Vorschaubilder größer als x ist (und somit in zwei Zeilen rutscht und nicht mehr in eine passt usw).

Mein HTML-Konstrukt:

Code:

<tabs>
  
<tab><input type="radio" id="tab-1" name="tab-group-1" checked/><label for="tab-1"><img title="Wölfe" src="http://saved.im/mtc2ndg0dhn5/bewohner1.png"/></label>
<cont><img title="Wölfe" src="http://saved.im/mtc2ndg0dhn5/bewohner1.png"/><bes>Wölfe</bes></cont></tab>

<tab><input type="radio" id="tab-2" name="tab-group-1"/><label for="tab-2"><img title="Leoparden" src="http://saved.im/mtc2ndg2d2zz/bewohner20.png"/></label>
<cont><img title="Leoparden" src="http://saved.im/mtc2ndg2d2zz/bewohner20.png"/><bes>Leoparden</bes></cont></tab>

<tab><input type="radio" id="tab-3" name="tab-group-1"/><label for="tab-3"><img title="Pumas" src="http://saved.im/mtc2ndg1z2hs/bewohner6.png"/></label>
<cont><img title="Pumas" src="http://saved.im/mtc2ndg1z2hs/bewohner6.png"/><bes>Pumas</bes></cont></tab>
    
<tab><input type="radio" id="tab-4" name="tab-group-1"/><label for="tab-4"><img title="Löwen" src="http://saved.im/mtc2ndg3a2tu/bewohner18.png"/></label>
<cont><img title="Löwen" src="http://saved.im/mtc2ndg3a2tu/bewohner18.png"/><bes>Löwen</bes></cont></tab>
  
<tab><input type="radio" id="tab-5" name="tab-group-1"/><label for="tab-5"><img title="Gorillas" src="http://saved.im/mtc2ndkycxi4/bewohner17.png"/></label>
<cont><img title="Gorillas" src="http://saved.im/mtc2ndkycxi4/bewohner17.png"/><bes>Gorillas</bes></cont></tab>
  
<tab><input type="radio" id="tab-6" name="tab-group-1"/><label for="tab-6"><img title="Paviane" src="http://saved.im/mtc2ndkzbw1h/bewohner12.png"/></label>
<cont><img title="Paviane" src="http://saved.im/mtc2ndkzbw1h/bewohner12.png"/><bes>Paviane</bes></cont></tab>
  
<tab><input type="radio" id="tab-7" name="tab-group-1"/><label for="tab-7"><img title="Meerkatzen" src="http://saved.im/mtc2ndk0dhd6/bewohner16.png"/></label>
<cont><img title="Meerkatzen" src="http://saved.im/mtc2ndk0dhd6/bewohner16.png"/><bes>Meerkatzen</bes></cont></tab>  

</tabs>

Kann mir jemand helfen?

(Testseite hier: http://solace.rpg-board.net/h21-lexikon-wald#10 / Die Seite ist in einem iframe auf einer anderen Seite eingebunden, um ständiges Neuladen der ganzen Seite zu verhindern, daher ist diese Codierung der Tabs die angenehmste und unkomplizierteste Lösung.)

Liebe Grüße,
Tierfreund-97

Wenn ich Dein Problem richtig verstanden habe, dann geht es Dir lediglich um den Import des CSS um dies nicht ständig in allen Seiten einschreiben zu müssen?

Da würde ich dann von einer Lösung per Script ganz von abgehen und das CSS woanders ablegen (CSS auslagern) und dann wiederum auf die jeweiligen Seiten importieren.
Auch solltest Du Dich doch noch einmal mit dem Grundgerüst einer HTML-Datei auseinandersetzen, das ist nämlich auch der Grund für die falsche Schriftanzeige (charset=utf-8 - wäre richtig) sowie einem fehlenden Titel in der Webseite und einem fehlenden Favicon/Logo.

Solltest Du keinen eigenen Webspace o.ä. haben um Dein CSS-Dateien auszulagern, dann empfehle ich Dir einmal diese Seite, ich selbst nutze sie seit einigen Jahren mit guten Erfahrungen. Auch bekommst Du auf der genannten Seite bereits einen fertigen HTML-Code zum einbinden im Kopf (Head).

Mein Tipp: Versuche zunächst einmal so ca. 2-3 einfache Seiten zu erstellen in denen Du das CSS importierst und dann lediglich ein paar einfache Deklaration vergibst z.B.

---

body
background:
color: ....etc
___________
h1, content usw.

---

Danach kannst Du das natürlich alles weiter ausbauen.

Hilft Dir das bei Deiner Problematik ein wenig weiter? Immerhin können wir für Dich ja nun nicht die kompletten Seiten schreiben, da bist Du dann schon selbst gefragt.

LG inde

Hallo!

Leider hast du mich komplett falsch verstanden. ^^

All das, was du aufgezählt hast, weiß ich doch, und das ist auch gar nicht das Problem - das funktioniert alles super (die Seite wird so "komisch" angezeigt, weil sie eigentlich in einem iFrame eingebunden ist - ich hab den direkten Link reingestellt, damit man nicht suchen muss).

Es geht um einen JavaScript-Code, der das CSS verändern soll, wenn mehr als x Vorschaubilder gezählt wurden.

Liebe Grüße,
Tierfreund-97