✔ Sliding doors --> Bin am Verzweifeln!

Status
Nicht offen für weitere Antworten.
Da-Real-Monchichi

Da-Real-Monchichi

Mitglied
Hallo ihr lieben

der Monchichi hat schon wieder ein Problem und hofft, dass ihr ihm mit eurem Fachwissen helfen könnt.

Ich habe mich ein wenig mit den sliding doors beschäftigt und den ganzen kram schon einigermaßen erstellt.

hier mal der code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Example 8a: Sliding Doors of CSS</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
    body {
      background:#fff;
      margin:0;
      padding:0;
      color:#000;
      font:x-small/1.5em Georgia,Serif;
      voice-family: "\"}\""; voice-family:inherit;
      font-size:small;
      } html>body {font-size:small;}
    
    #header {
      float:left;
      width:100%;
      background:#DAE0D2 url("bg.gif") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      }
    #header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #header li {
      display:inline;
      margin:0;
      padding:0;
      }
    #header a {
      float:left;
      background:url("left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      text-decoration:none;
      }
    #header a span {
      float:left;
      display:block;
      background:url("right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      font-weight:normal;
      color:#000;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a span {float:none;}
    /* End IE5-Mac hack */
    #header a:hover span {
      color:#000;
      }
    #header #current a {
      background-position:0 -150px;
      border-width:0;
      }
    #header #current a span {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#000;
      }
    #header a:hover {
      background-position:0% -150px;
      }
    #header a:hover span {
      background-position:100% -150px;
      }
  </style>
</head>

<body>

<div id="header">
  <ul>
    <li id="current"><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>


</body>
</html>

Jetzt das Problem:
Wie bekomme ich das hin, dass für jeden Tab ein unterschiedlicher Text nach drücken des Tabs angezeigt wird?

Und wie wird das HG Bild gewechselt? Zur Erklärung:
Bei Onload der Seite ist der Tab "home" mit einem weißen HG Bild versehen. Die anderen Tabs sind alle Grau. Bei on Mouse Over werden bei den anderen auch die Weißen Bilder geladen.

Nur nicht wenn ich den Tab wechsle. Dann ist immernoch der Tab "home" weiß und die anderen grau. Es sollte jetzt, wenn ich vom tab "home" auf tab "about" wechsle, der tab "home" von weiß auf grau wechseln und der tab "about" von grau auf weiß. damit man eine visuelle bestätigung bekommt wo man sich gerade befindet. und der dazugehörige text sollte jetzt für jeden tab individuell angezeigt werden. Bsp:
Steht der Tab auf "home", dann steht dort Test
Steht der Tab auf "about", dann steht dort Test about
usw

Kann mir einer zu diesen beiden Problemen helfen? wäre echt schön


vielen lieben dank schonmal
euer Monchichi
 
Hi,

was meinst du mit:

Wie bekomme ich das hin, dass für jeden Tab ein unterschiedlicher Text nach drücken des Tabs angezeigt wird?
Zum Vergrößern anklicken....
Hast du die entsprechenden Seiten nicht im Menü verlinkt?

Zu deiner zweiten Frage: Hast du in den weiteren Seiten ("News", "Products", usw.) die ID #current entsprechend gesetzt?

Code: 
<!-- Beispiel für das Dokument "News" -->

<div id="header">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li id="current"><a href="#"><span>News</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
</div>
 
Zu Punkt 1:

ich meine wenn bei onload (default) der tab auf home steht, dann wird ein Text für diesen Tab angezeigt.


wechsle ich jetzt ein tab (zb) auf produkte, dann soll ein text für diesen tab angezeigt werden.

wie? warum? voll keine ahnung im moment. ich weiß nicht wie ich das ganze erstellen muss, bin was das angeht ein newcomer und suche schon den ganzen tag danach....


zu der 2. sache:
das einzigste was ich bisher gemacht habe, ist das, was ich oben im ersten beitrag gepostet habe. habe probiert texte (test) irgendwo einzufügen. kam wie du dir jetzt wahrscheinlich schon denkst, großer mist bei raus.


hast du vielleicht ein paar kleine ideen für mich wie sowas aussehen muss?
 
Vielleicht hilft dir das angehängte Beispiel weiter?

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.
 

Anhänge

Ok, werd jetzt auf die Grammatik aufpassen.

Das Beispiel was du mir geschickt hast, ist vom Sinn genauso, wie ich es brauche.

Nur das du auf neue Seiten verlinkst. Das wollte ich nicht. Es soll alles auf einer Seite bleiben nur der Text soll geändert werden.

Ich denke über ID's kann man das machen, oder?

In meinem Fall ist es eine denkbar schlechte Lösung auf andere Seiten zu verlinken. In anderen Fällen habe ich gesehen, dass nur mit einem "#" gearbeitet wird und über ID'S, um die jeweiligen Inhalte zu laden.

Javascript möchte ich aber auch nicht unbedingt einsetzen. Gibts da noch eine andere Lösung?
 
Dann bist du hier im CSS-Forum im falschen Bereich, denn für dein Vorhaben ist eine Scriptsprache, wie z.B. PHP, erforderlich, um die Inhalte im Dokument dynamisch auszutauschen. Das Ganze wäre technisch auch mit JavaScript / AJAX möglich, aber wehe, es ist im Browser deines Seitenbesuchers deaktiviert ;)

In den PHP-Tutorials findest du hierzu einige Lösungsansätze.
 
Oh man, dachte das geht auch anders... :rolleyes:

Dann werde ich mich mal auf in den PHP Bereich machen oder kannst du den Beitrag dort hin verschieben?

Wenn ich mir das auf anderen Seiten angeschaut habe, dann denke ich, dass das auch ohne PHP geht oder bist du dir wirklich sicher, dass es da keine andere Lösung gibt?



Hat denn einer von euch PHP Profis eine Idee wie so etwas aussehen muss? Ich möchte aber keine PHP Parameter in der URL haben. Lediglich ein "#", wie ich es auch woanders gesehen habe.
Wäre euch sehr dankbar...
 
Zuletzt bearbeitet:
Also ich bin mir nun nicht 100%ig sicher, aber dahinter steht auch javascript. das javascript greift dann auf eine php Datei zu. Im Link ist dann eine onClick-Event enthalten. Auf welcher Webseite haste es gesehn?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück