navileiste über headerbild

[jary]

Ich will dazulernen und versuche nun, meine HP neu zu programmieren und dabei schön vorbildlich Inhalt und Layout trennen...

Habe einen Header, der meine Menüleiste umschließt.
Wollte jetzt das Menü per CSS über den Header schieben, aber ich kriegs nicht hin. Das Menü liegt immer UNTER dem Header und ist dann logischerweise nicht mehr zu sehen.

mein html Code:

<div id="wrapper">
    <h1 class="header"><img src="design/head.jpg" alt="Haus der Musik" width="600" /></h1>
    <ul id="navi">
      <li>Home</li>
      <li>&Uuml;ber Uns</li>
      <li>Unterricht</li>
      <li>Download</li>
      <li>Kontakt</li>
    </ul>
    <img ... />
    <img ... />
    <img ... />
    <img ... />
    <p>...</p>
    <p>impressum</p>
</div>

und der CSS Code dazu:

body { background-color:#965403; 
     margin:0;
     padding:0;  
     }

#wrapper { margin:0 auto;
         padding:0 auto; 
         margin-top:-21px;
         background-color:#65a4c9;
         width:600px;
         height:100%;
         }

#navi, #navi ul { list-style-type:none; margin:0; padding:0; }
#navi li { width:100px; 
         float:left;
         text-align:center;
         font-family:arial;
         font-size:0.9em;
         font-weight:bold;
         color:white; 
         }

Und das Bild des Headers: die Menüleiste soll in dem schwarzen Balken sein.

Danke schonmal für eure Mühe und Hilfe.

 

[prm]

"header" ist bei dir ja eine Klasse, die der Überschrift h1 zugewiesen ist.
Nachdem die Überschrift mit "</h1>" geschlossen ist, ordnet sich die Navi zwangsläufig darunter an.
Innerhalb einer Überschrift kannst du aber auch keine Navi einfügen.

In deinem Fall wäre es sinnvoll, die Grafik als Hintergrundgrafik einzubinden (könnte durchaus auch dem #wrapper zugewiesen werden) und die Navi mit einem entsprechenden margin-top-Wert zu platzieren.

 

[jary]

Dankeschön. Nächste Frage...

Mein "Wrapper" soll sich jetzt mit einem kleinen Schatten links und rechts vom Hintergrund abheben. Vgl.: Entwurf.

Wie kriege ich die beiden Schatten-Grafiken an den "Wrapper"?
Habe es mit weiteren div-Boxen versucht, deren Hintergrund dann die Grafiken sind, aber ich schaffe es nicht, diese von der Mitte her auszurichten.
Ausrichtung von der Seite nützt ja nichts, weil die dann bei unterschiedlich großen Browserfenstern falsch positioniert wären?

Oder gibt es einen anderen Weg?
Dankeschön.

 

[prm]

Ein Div mit fixer Breite wird mit "margin: 0 auto;" horizontal zentriert, siehe Horizontale Zentrierung mit CSS

Wie das mit der Schattengrafik funktioniert, findest du hier erklärt: Schatteneffekt mit Schatten-Boxen

 

[freakXHTML]

Hallo jary,
nur kurz zu deiner Info: Man kann eine Homepage nicht programmieren.

lg, freakXHTML