XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Was muss ich ändern, damit ich es kürzer habe? (http://xhtmlforum.de/showthread.php?t=68550)

greatjack 06.12.2012 23:07

Was muss ich ändern, damit ich es kürzer habe?
 
Zu erst muss ich gestehen, dass ich ein Anfänger bin, aber gerne was dazulerne.
Ich versuche mir momentan, das "dynamische Einblenden" beizubringen.
Allerdings brauche ich Hilfe und zwar hierbei:

Das ist der HTML-Code:
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>HTML lernen</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="menu.css" type="text/css" rel="stylesheet">
</head>
<body>
  <ul id="menu">
                <li><a href="Home.htm">Startseite</a></li>
                <li><a href="x1x2x3.htm">Seite1</a>
                        <ul>
                                <li id="position1"><a href="seite-1.htm">Lektion 1</a></li>
                                <li id="position2"><a href="seite-2.htm">Lektion 2</a></li>
                                <li id="position3"><a href="seite-3.htm">Lektion 3</a></li>
                                <li id="position4"><a href="seite-4.htm">Lektion 4</a></li>
                                <li id="position5"><a href="seite-5.htm">Lektion 5</a></li>
                        </ul>
                </li>
                <li><a href="x1x2.htm">Seite2</a></li>
                <li><a id="aktuell" href="x1.htm">Seite4</a>
                        <ul>
                                <li><a href="x1x2x3x4.htm">Seite 4a</a></li>
                                <li><span>aktuelle Seite</span></li>
                                <li><a href="x1x2x3x4x5.htm">Seite 4c</a></li>
                        </ul>
                </li>

    <li><a href="x1x2x3x4x5x6,htm">Seite 5</a></li>
  </ul>

<p><a style="color:black" href="../menusleisten.htm#dynamisch">zur&uuml;ck</a></p>
</body>
</html>


Der Css-Code dazu ist bei mir momentan so:

Code:

  div#Rahmen div {
    clear: left;
  }
  ul#menu {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#menu li {
    list-style: none;
    float: left;
    min-width: 10em;
    position: relative;
    margin-left: 0em; padding: 0;
        border-radius: 10px;
        border-width: 3px;
        border-color: black;
        border-style: double;
  }
  * html ul#menu li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#menu li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }
  ul#menu li ul {
    margin: 0; padding: 0;
    position: absolute;
  }
  * html ul#menu li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#menu ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#menu li ul li {
    float: none;
    display: block;
    margin-bottom: 6px;
  }

  ul#menu a, ul#menu span {
    display: block;
    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#menu a, * html ul#menu span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#menu a:hover, ul#menu 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#menu li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#menu li>ul {
    display: none;/* top: 30px;*/
        margin-left: -3px;
  }
  ul#menu li:hover>ul, ul#menu li>a#aktuell+ul {
    display: block;
  }
 
  #position1 {
        position: absolute;
        top: 5px;
        left: -165.5px;
        }
  #position2 {
        position: absoulute;
        top: -35px;
        left: 0px;
        }
  #position3 {
        position: absolute;
        top: -75px;
        left: 165.5px;
        }
  #position4 {
        position: absolute;
        top: -115px;
        left: 331px;
        }
  #position5 {
        position: absolute;
        top: -155px;
        left: 496.5px;

Kann jemand mir helfen, das ganze zu verkürzen? Mit den Koordinaten komme ich nicht klar. Ich bitte um Hilfe.
lg und danke im Vorraus.

gato 07.12.2012 17:43

Leider fehlt mir gerade die Zeit für einen genaueren Blick.

Ich empfehle dir aber, den Nachfahrenselektor genauer zu studieren.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023