|
|||
Active Tabs mit CSS auch bei dynamischer Seiteneinbindung?
Ich weiß, dass sich active tabs eigentlich sehr leicht herstellen lassen, sofern man dem 'active tab' auf verschiedenen Seiten einfach eine unterschiedliche class zuweist. Dazu habe ich einiges an Tutorials gefunden.
Ich binde meinen Inhalt aber dynamisch in die Seiten ein, und daher ist bei mir die Navi im Kopf der Seite immer gleich. Daher kann ich auch keine class zuweisen? Ich habe bis jetzt nur ein tutorial dazu gefunden, auf jembella.co.uk und da handelt es sich um eine PHP-Lösung. Und hier muss ich leider gestehen, dass sich mein PHP wissen arg in Grenzen hält. Ich versteh es nicht. Wenn es interessiert: Trendy Active CSS Tabs » Jemjabella.co.uk Gibt es eine Möglichkeit das nur mit CSS zu lösen. Ich vermute nicht, es sei denn ich stelle die Seite um? Danke schon einmal im voraus an alle die das hier lesen und ihr Gerhirn für mich mattern. Midnight |
Sponsored Links |
|
||||
also mit CSS gehts nicht
ich habs so gelöst das ich per GET ne id geben und dann frag ich bei den tabs einfach ab ob die GET id z.b 1 istz und geb ne id active hinzu: PHP-Code:
die id per index.php?id=1
__________________
Meine Spielwiese: http://blog.kanedo.net Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt Für open Source Liebhaber: open Com Auch ich Zwitschere als @kanedo |
Sponsored Links |
|
|||
Das Prinzip verstehe ich.... im Prinzip. Aber klappen will es nicht so wirklich.
Kann es sein, dass sich bei mir class (button1, button2, ...) und id ins Gehege kommen? Code:
<ul id="menu_top"> <li><a class="button1" href="index.php"></a></li> <li><a class="button2" href="index.php?navi=1&site=links"></a></li> <li><a class="button3" href="index.php?navi=3&site=myart"></a></li> <li><a class="button4" href="index.php?navi=2&site=dnews"></a></li> </ul> Code:
<ul id="menu_top"> <li><a class="button1" href="index.php?id=1" <?php if ($_GET['id'] == 1) echo "id=\"active1\""; ?> ></a></li> <li><a class="button2" href="index.php?id=2&navi=1&site=links" <?php if ($_GET['id'] == 2) echo "id=\"active2\""; ?> ></a></li> <li><a class="button3" href="index.php?id=3&navi=3&site=myart" <?php if ($_GET['id'] == 3) echo "id=\"active3\""; ?> ></a></li> <li><a class="button4" href="index.php?id=4&navi=2&site=dnews" <?php if ($_GET['id'] == 4) echo "id=\"active4\""; ?> ></a></li> </ul> Wie würde des im Stylesheet aussehen? Generiere ich einfach nur für jeden Button eine eigene neue activ_ID, also #active1, #active, etc.? Ich habe des gerade so versucht, aber es hat nicht geklappt und deswegen hab ich es erst mal wieder rausgenommen. In der ursprünglichen Variante sieht das CSS für das Menü so aus: Code:
ul#menu_top { margin: 0px; padding: 0px; list-style-type: none; } ul#menu_top li { display : block; float : right; position : relative; } ul#menu_top li a { display : block; position : relative; } ul#menu_top li a.button1 { width : 82px; height : 32px; background: url('layout/home.jpg'); } ul#menu_top li a.button2 { background: url('layout/linkage.jpg'); width : 78px; height : 32px; } ul#menu_top li a.button3 { background: url('layout/artworks.jpg'); width : 78px; height : 32px; } ul#menu_top li a.button4 { background: url('layout/downloads.jpg'); width : 78px; height : 32px; } ul#menu_top li a:hover.button1 { width : 82px; height : 32px; background: url('layout/home2.jpg'); } ul#menu_top li a:hover.button2 { background: url('layout/linkage2.jpg'); width : 78px; height : 32px; } ul#menu_top li a:hover.button3 { background: url('layout/artworks2.jpg'); width : 78px; height : 32px; } ul#menu_top li a:hover.button4 { background: url('layout/downloads2.jpg'); width : 78px; height : 32px; } Ich hab manchmal echt ein Problem mein Hirn um sowas zu wickeln. Geändert von Midnight (29.05.2007 um 14:45 Uhr) |
|
||||
du machst EINE id für den aktiven tab
der wird aber nur angezeigt wenn die id stimmt z.b.: PHP-Code:
Code:
#tabmenue li a#aktuell { padding-bottom: 4px; border-bottom:1px solid #999999; background:#999999; }
__________________
Meine Spielwiese: http://blog.kanedo.net Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt Für open Source Liebhaber: open Com Auch ich Zwitschere als @kanedo |
|
|||
Danke, es funktioniert. Ich musste zwar 4 IDs machen, da es sich um 4 Navibilder-Buttons handelt, aber das sollte ja nicht das Problem sein. Danke für die Hilfe an dieser Baustelle. Ihr bleibt, wie immer, auf meiner About-page verewigt. Ich weiß nicht, was ich ohne euch Genies machen würde.
--- Und bevor ich noch nen neuen Thread aufmache und gelyncht werde, frage ich hier: Ich habe schon seit den letzten beiden Versionen meiner Seite ein Problem mit den Link-Seiten. Die Listen laufen ineinander über, zm Teil wenigstens. Ich hab es schon mit divs, br (sogar mit p) versucht, aber es ändert sich nichts. Ich hab dann irgendwann einfach aufgegeben den Fehler zu suchen. Das Problem findet sich in Opera und Firefox gleichermaßen. Hier der CSS-code Code:
ul.linkage { list-style-type: none; } ul.linkage li { float: left; width: 130px; font-weight: normal; } ul.linkage li a { margin: 2px; width:120px; display: block; padding-left: 3px; border-left: 0.3em solid #DEDDDB; font-weight: normal; font-size: 0.85em; color: #80AB2D; text-decoration: none; } ul.linkage li a:visited { padding-left: 3px; border-left: 0.3em solid #DEDDDB; font-size: 0.85em; font-weight: normal; color: #80AB2D; text-decoration: none; } ul.linkage li a:hover { background: #F4F4F4; margin: 2px; width:120px; display: block; padding-left: 3px; border-left: 0.3em solid #7AA820; font-size: 0.85em; font-weight: normal; color: #8B8B8B; text-decoration: none; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
ps design (slices), php (dynamischer inhalt), css gestaltung | schleepy | CSS | 19 | 02.06.2006 23:46 |
CSS Menue Browserkompatibel! ICH DREH DURCH! | haSta | CSS | 24 | 02.03.2006 19:42 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
css in frames bzgl. active | abt | CSS | 1 | 28.03.2004 23:39 |