Twenty Eleven Menüleiste Problem

Hallo,

ich habe folgendes Problem mit einer Wordpress Seite. Ich nutze das TwentyEleven Theme (Natürlich als Child Theme) und habe vor längerer Zeit die Menüleiste über das Titelbild verschoben. Leider ist das Ganze schon etwas länger her, aber soweit ich mich erinnere habe ich header.php einfach diesen Teil über das Header Bild verschoben.

<nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->

Nun habe ich die letzten Tage damit verbracht (ja ich bin Anfänger) ein neues Menü zu designen und bin auch ganz zufrieden damit. Nur leider würde das Menü unterhalb des Kopfbilds wohl besser aussehen. Ich habe o.g. Code wieder nach unten gepackt und es ist gar nichts passiert.

In der Style.css sind natürlich einige Änderungen gemacht worden aber irgendwie bin ich gerade zu dumm um die Richtigen Rädchen zu drehen ;)

#access {
    background: #222; 
    background: -moz-linear-gradient(#f4f4f4, #ffffff);
    background: -o-linear-gradient(#f4f4f4, #ffffff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#ffffff)); 
    background: -webkit-linear-gradient(#f4f4f4, #ffffff);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    border-bottom: 1px solid #ffffff;
    position: absolute; top: 0;  
        }

Meiner Meinung nach muss ich einfach den "position" Wert ändern oder? Wenn ich das mit Firebug mache ( zB "top" zu "bottom" ändern) verschiebt sich natürlich die Ganze Leiste, aber dann hab ich oberhalb des Bildes Platz frei und die Leiste liegt irgendwie schräg im Bild drinnen.

Könnt ihr mir helfen? Ich komm gerade nicht so wirklich auf einen Grünen Zweig und steh nach ein paar Stunden rumprobieren immer noch komplett auf dem Schlauch, was ich falsch gemacht habe.

Es handelt sich um die Seite: http://www.varsity-culture.de

Ahja hab ich vergessen zu schreiben:

Klar, wenn ich das Top rausnehme, wandert die Leiste nach unten. Dann allerdings habe ich oben einen Teil frei und das Menü wandert zwar direkt unter das Titelbild, allerdings "beschneidet" es dann die Seite darunter, da es einfach nur nach unten rutscht und den ganzen Block da oben nochmal erweitert. Ich möchte, dass der ganze "Block" (Menü und Titelbild) gleich bleibt und eigtl nur dass Menü und Titelbild die Plätze tauschen. Ich hoffe du kannst mir folgen ;)

Zitat von F-rank

Das manövriert dir die Nav-Leiste nach oben:

Code

#access { position: absolute; top: 0; }

Streiche das, und sie sitzt unten.

Grüße,
Frank

Ahja auf ganz streichen bin ich natürlich nicht gekommen... super danke ;)