Ich habe mal wieder ein Problem und besonders da wo ich am wenigsten Ahnung habe.
Am Menü…
Beispielseite:
vickanka.bplaced.net/welpen-a-bi … 00test.php
Ich hätte gerne das der Menüpunkt “Tag der Geburt” genauso groß ist wie die Punkte darunter.
die anderen rechts daneben sollen aber genauso klein bleiben.
überlegt habe ich “Tag der Geburt” nochmal mit eigenem
- zu versehen.
- html ul#Navigation2 li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
:first-child+html ul#Navigation2 li { / Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
} - html ul#Navigation2 li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
:first-child+html ul#Navigation2 ul { / Workaround fuer den IE 7 /
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation2 li:hover ul {
display: block; / Unternavigation in modernen Browsern einblenden */
} - html ul#Navigation2 a, * html ul#Navigation2 span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x /
w\idth: 6.4em; / korrekte Breite fuer den IE 6 im standardkonformen Modus /
}
ul#Navigation2 a:hover, ul#Navigation2 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#Navigation2 li ul span { / aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
weil dann kann ich mit dem width die größe individuell bestimmen.
Allerdings bekomme ich dann Navigation2 und Navigation3 nicht nebeneinander…
<ul id="Navigation2">
<li><a href="/welpen-a-bilder/welpen-a-bilder-tag00.php">Tag der Geburt</a></li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=1">1. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag01.php">Tag 1</a></li>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag02.php">Tag 2</a></li>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag03.php">Tag 3</a></li>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag05.php">Tag 5</a></li>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag06.php">Tag 6</a></li>
<li><a href="/welpen-a-bilder/Woche1/welpen-a-bilder-tag07.php">Tag 7</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=2">2. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche2/welpen-a-bilder-tag12.php">Tag 12</a></li>
<li><a href="/welpen-a-bilder/Woche2/welpen-a-bilder-tag13.php">Tag 13</a></li>
<li><a href="/welpen-a-bilder/Woche2/welpen-a-bilder-tag14.php">Tag 14</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=3">3. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche3/welpen-a-bilder-tag19.php">Tag 19</a></li>
<li><a href="/welpen-a-bilder/Woche3/welpen-a-bilder-tag20.php">Tag 20</a></li>
<li><a href="/welpen-a-bilder/Woche3/welpen-a-bilder-tag21.php">Tag 21</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=4">4. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche4/welpen-a-bilder-tag22.php">Tag 22</a></li>
<li><a href="/welpen-a-bilder/Woche4/welpen-a-bilder-tag23.php">Tag 23</a></li>
<li><a href="/welpen-a-bilder/Woche4/welpen-a-bilder-tag26.php">Tag 26</a></li>
<li><a href="/welpen-a-bilder/Woche4/welpen-a-bilder-tag27.php">Tag 27</a></li>
<li><a href="/welpen-a-bilder/Woche4/welpen-a-bilder-tag28.php">Tag 28</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=5">5. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag29.php">Tag 29</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag30.php">Tag 30</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag31.php">Tag 31</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag32.php">Tag 32</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag33.php">Tag 33</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag34.php">Tag 34</a></li>
<li><a href="/welpen-a-bilder/Woche5/welpen-a-bilder-tag35.php">Tag 35</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=6">6. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche6/welpen-a-bilder-tag37.php">Tag 37</a></li>
<li><a href="/welpen-a-bilder/Woche6/welpen-a-bilder-tag39.php">Tag 39</a></li>
<li><a href="/welpen-a-bilder/Woche6/welpen-a-bilder-tag40.php">Tag 40</a></li>
<li><a href="/welpen-a-bilder/Woche6/welpen-a-bilder-tag41.php">Tag 41</a></li>
<li><a href="/welpen-a-bilder/Woche6/welpen-a-bilder-tag42.php">Tag 42</a></li>
</ul>
</li>
<li><a href="/welpen-a-bilder/welpen-a-bilder-w.php?woche=7">7. Woche</a>
<ul>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag43.php">Tag 43</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag44.php">Tag 44</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag45.php">Tag 45</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag46.php">Tag 46</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag47.php">Tag 47</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag48.php">Tag 48</a></li>
<li><a href="/welpen-a-bilder/Woche7/welpen-a-bilder-tag49.php">Tag 49</a></li>
</ul>
</li>
</ul><br/>
css:
[code] ul#Navigation2 {
margin-left: 5em; padding: 11px;
}
ul#Navigation2 li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0; /*Abstand untereinander */
}
ul#Navigation2 li ul {
margin: 0; padding: 0;
position: absolute;
/top: 1.6em; Zwei Zeilenmneü weglassen!/
left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
ul#Navigation2 li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation2 a, ul#Navigation2 span {
display: block;
width: 6em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-align: center;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
/– lässt die dritte Ebene verschwinden–/
ul#Navigation2 li:hover ul ul {display: none;}
/– lässt die dritte Ebene beim Hovern über die zweite in Erscheinung treten–/
ul#Navigation2 ul li:hover ul {display: block; position: absolute; top: -0.5em; left: 100%;}
/– lässt die vierte Ebene verschwinden–/
ul#Navigation2 li:hover ul ul ul {display: none;}
/– lässt die vierte Ebene beim Hovern über die dritte in Erscheinung treten–/
ul#Navigation2 ul ul li:hover ul {display: block; position: absolute; top: -5em; left: 100%;}[/code]
Ich hoffe ihr versteht, was ich meine…
