Verschieden Große Menüs

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.
    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 */
    }

    • 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;
      }

    ul#Navigation2 li ul {
    margin: 0; padding: 0;
    position: absolute;
    /top: 1.6em; Zwei Zeilenmneü weglassen!/
    left: -0.4em;
    display: none; /* Unternavigation ausblenden */
    }

    • 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 */
      }

    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;
    }

    • 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;
      }

    /– 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…

Ich hab mir die Seite angeschaut und weiß, was du meinst, würde aber grundsätzlich den Text und das Menü über den Bildern zwecks besserer Optik bündig mit den Bildern machen. Würde einfach deutlich angenehmer und ruhiger wirken.

was meinst du konkret?
Das linke Menü direkt an den Bildern?

Ich meine das so, wie ich es schrieb: Daß es wohl angenehmer aussehen würde, das obere Menü und den darunter stehenden Text bündig mit den Bildern beginnen zu lassen. Das würde auch die unsinnige Idee, den ersten Menüpunkt an die breite des linken Menüs anzupassen, hinfällig machen.

Wobei man durchaus insgesamt den Aufbau der Seite noch ein wenig überdenken könnte, aber das würde jetzt zu weit gehen. :wink:

Das Problem was ich habe ist, dass dann die 8 Woche und ein evtentuelle 9. Woche nicht mehr hinpassen.

Nein, eigentlich nicht. Wenn ich jetzt die Anzeigegröße verändere, rutschen die letzten Menüpunkte unter die Vorderen und das ist eigentlich auch ok so, sofern man die Unterpunkte (Tag X…) auslagert. Könnte man etwa so machen, daß man bei Klick auf die Woche auf eine Seite kommt, wo jeweils ein kleines Vorschaubild (so wie die Bilder jetzt sind, sind sie meiner Meinung nach eh viel zu groß eingebunden, nicht zu sprechen von den gigantischen Dateigrößen :wink: ), von vielleicht 200-300 px, und darunter dann Tag X angezeigt werden. Bei Klick auf Bild/Tag kommt man dann zur entsprechenden Galerie.