css : Element dauerhaft ausklappen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

17:00, 21.3.2009

Hallo ,
vorab sorry wenn ich das falsche forum erwischt haben sollte , dann bitte verschieben.

Ich habe folgendes Proble:
Ich möchte die Unterseiten von Seite 5 (5a-d) bei erstem klick dauerhaft anzeigen und bei 2. klick wieder einklappen
Das menü soll auch offenbleiben wenn der Besucher zwischendrin auf eine andere Seite ( Seite 1-4) klickt/bzw. im Idealfall
drauf geht( wenn realisierbar.
Geht das? Und wie wie macht man das?
Danke schon im Vorraus.

Und hier der Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<div align=right>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: 0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0.1em;
  }

  ul#Navigation li ul {
    width: 9.75em; 
    margin: 0em; padding: 0em;
    border:1px solid black;
    position: absolute;
    top: 3em; left: 0.4em;
    display: none;  /* Unternavigation ausblenden */
    background-color: silver;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: 1.5em;
    lef\t: 0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: ;
  }

</style>
</head>
<body>


  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
     
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="" href="#Beispiel">Seite 4</a>
      
    </li>

    <li><a href="#Beispiel">Seite 5</a>
      <ul>
        <li><a href="#Beispiel">5a</a></li>
        <li><a href="#Beispiel">5b</a></li>
        <li><a href="#Beispiel">5c</a></li>
        <li><a href="#Beispiel">5d</a></li>
      </ul>
    </li>
  </ul><div></div></div>


</body>
</html>

MFG

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
goldeneye

goldeneye hat kostenlosen Webspace.

17:20, 21.3.2009
mach dich am besten dafür mit cookies vertraut.
etwas andere Methode wäre über MySQL- DB`s einfach IP + gewünschten zustand von objekt zu erstellen. Da ich vermute, dass sich die Leute bei dir einloggen müssen. würde es noch einfacher werden, da du dann nur den username sowie den zustand der Objekte verendern müsstest.

Würde mich über einen link zu deiner (in zukunft vorhandenen) Lösung freuen
Gruß
Daniel
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city