zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Active Tabs mit CSS auch bei dynamischer Seiteneinbindung?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2007, 12:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2007, 13:34
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

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:
<li><a href="#" title="#" <?php if ($_GET['id'] == 1) echo "id=\"active\""?> >Home</a></li>
sowas realisiserst du für alle tabs und übergibst dann einfach
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2007, 14:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

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&amp;site=links"></a></li>
<li><a class="button3" href="index.php?navi=3&amp;site=myart"></a></li>
<li><a class="button4" href="index.php?navi=2&amp;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&amp;navi=1&amp;site=links" <?php if ($_GET['id'] == 2) echo "id=\"active2\""; ?> ></a></li>
<li><a class="button3" href="index.php?id=3&amp;navi=3&amp;site=myart" <?php if ($_GET['id'] == 3) echo "id=\"active3\""; ?> ></a></li>
<li><a class="button4" href="index.php?id=4&amp;navi=2&amp;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)
Mit Zitat antworten
  #4 (permalink)  
Alt 29.05.2007, 17:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich würde eh immer li die ID geben - dies eröffnet deutlich mehr Möglichkeiten, da man dann li und (per Nachfahrenselektor) a ansprechen kann. In Deinem Falle kann man z.B. li die jeweiligen "Button-IDs" (sind schöner als Klassen) zuweisen und a dann die ID für den "aktiven Link".
Mit Zitat antworten
  #5 (permalink)  
Alt 29.05.2007, 17:30
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

du machst EINE id für den aktiven tab
der wird aber nur angezeigt wenn die id stimmt
z.b.:

PHP-Code:
<ul id="tabmenue">
  <li><a <?php if  ($_GET['id'] == || !isset($_GET['id'])) {echo 'id="aktuell"'$_GET['page'] = "news";} ?> href="index-1,news.html">News Bearbeiten</a></li>
  <li><a <?php if  ($_GET['id'] == 2) echo 'id="aktuell"'?> href="index-2.html">Seite 2</a></li>
  <li><a <?php if  ($_GET['id'] == 3) echo 'id="aktuell"'?> href="index-3.html">Seite 3</a></li>
  <li><a <?php if  ($_GET['id'] == 4) echo 'id="aktuell"'?> href="index-4.html">Seite 4</a></li>
</ul>
und als css:
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
Mit Zitat antworten
  #6 (permalink)  
Alt 29.05.2007, 19:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2006
Beiträge: 53
Midnight befindet sich auf einem aufstrebenden Ast
Standard

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; 
   }
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:17 Uhr.