Menü

[quote='Skeptar','index.php?page=Thread&postID=33660#post33660'

Das Problem ist: Das Bild wird nicht komplett angezeigt. Ich habe ein <div id="bg"></div> erstellt und dem einen Background-Image gegeben, dies wird jedoch nur so weit angezeigt wie Text drin steht.

In diesem <div id="bg"></div> ist jedoch nicht die Navigationsleiste (<div id="nav"></div>). Muss die Navigationsleiste auch dort rein?[/quote]

Nein die Hintergrundfarbe vom Navigationsbereich habe ich bei meinem Quode durch einen eigenen div geregelt...

<div id="hg_nav">




<div id="navi">




<ul>




    <li><a href=""></a>Link 1</li>
    <li><a href=""></a>Link 2</li>
    <li><a href=""></a>Link 3</li>
    <li><a href=""></a>Link 4</li>
    <li><a href=""></a>Link 5</li>







</ul>
<!-- Navigationsleiste Ende -->
</div>
<!-- Ende Hintergrund Naviagationsleiste -->
</div>




<div>
<img id="hintergrund" src="Bilder/seifenstuecke-hell.jpg" alt="" title=""  />
<!-- src dann einfach anpassen -->
</div>




<div id="scrollbereich">




    <div id="inhalt">




        <h1>Hintergrund unter Navigationsleiste anzeigen</h1>




        <p>




        Eine Variante, um ein Bild unter den Navigationsleiste aufzuspannen.
        <br />
        Jetzt die Fenstergröße im Browser varrieren!










        </p>
    </div>
    <!-- Inhalt -->
</div>
<!-- Scrollbereich -->




</body>

html, body
{




overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;







}




body {




font-family: sans-serif;




}




#hg_nav {
    width:100%;
    background-color: #808080;
}




#navi li {
    display: inline;
    text-align:center;
    padding: 10px 20px 10px 20px;
    margin: 10px 20px 10px 20px;
}




#hintergrund {
  /*position:absolute; */
  width:100%;
  height:100%;
  z-index:1;
}










#scrollbereich {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:auto;
  z-index:2;
}




#inhalt {
  padding:20px 100px 30px 200px;
  z-index:2;
}

So klappts mit dem Bild

mfg Nita

Zitat von Skeptar

So habe das nächste Problem.
I
Wie mache ich das den so das ich die <section></section> auch vor dem Bild sehe? Ich habe den z-index davon zum testen auf 1 geändert und vom Bild auf 2 aber das Bild überdeckt trotzdem alles.

Es ist zwar super super super nett das Du mir immer solche riesen Beispiele bastelst nur das Problem es verwirrt mich viel zu sehr :s

Ich hoffe ich nerve dich nicht allzu sehr und du kannst mir nochmal helfen

Alles anzeigen

Hier mal ein Link zum z-index:

http://de.selfhtml.org/css/eig…ositionierung.htm#z_index

Zitat

Erläuterung:

Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.

Je höher die Zahl umso weiter rückt es in den Vordergrund

Das mit dem Verschwinden der Navigationsleiste verstehe ich gerade nicht ganz, kannst du mir da mal einen Screnn/Quellcode dazu besorgen?

Edit: Habs mir mal angeschaut und den Fehler gefunden...

Wenn du willst das die Fuß/Kopfzeile(Footer/Header) immer angezeigt wird musst du in diesem Fall einen stick - header basteln.
Gibt im Seminar eine schöne Anleitung zum sticky-footer , den kannst du dann einfach auf den header umlegen

http://www.html-seminar.de/sti…fussleiste-ganz-unten.htm

mfg NIta

Zitat von Skeptar

Nun wäre es nett wenn Du nochmal drüber schauen könntest und mir sagen könntest ob man das so lassen kann

Lassen könnte man es durchaus so, auch wenn mich der Abstand zwischen dem Bild und der Leiste stören würde.

Habe dir oben per Edit noch einen Link im Seminar gepostet, kannst du dir ja mal anschauen...

(sticky-footer)

Edit: Auf der Seite schaut es jetzt gut aus, würde es erstmal so lassen.
Den weißen Abstand gibt es wohl nur beim Screen....

mfg Nita