✔ Banner und Navi sollen beim scrollen stehen bleiben

P

purpur

Grünschnabel
Hallo zusammen,

ich habe 4 divs, die untereinander stehen:
Banner (Grafik 800x105px)banner.png
Navigation
Content
Footer​

Der Content-div kann durch viel Inhalt groß werden.
Ich möchte nun, dass Banner und Navi stehen bleiben, wenn gescrollt werden muss. Dafür soll möglichst kein Frame verwendet werden. Die verschiedensten Versuche mit float, position usw. habe ich durchprobiert. Leider alles ohne vernünftiges Ergebnis. Im schlimmsten Fall ist der Content unter Navi und Banner nach oben aus der Seite gelaufen. Ich bekomme das einfach nicht hin.
Ich bin deshalb auf "Start" zurück und alles wieder brav untereinandergesetzt.

Zur besseren Ansicht ist die Content-Box grün umrandet. Sie soll beim scrollen unter Navi und Header durchlaufen - natürlich ohne dass ihr Inhalt durchscheint.

Ihr Cracks wißt sicher, wie das geht. Deshalb bitte ich euch hier mal um Hilfe. Im Anhang findet ihr den abgespeckten HTML- und CSS-Code.

Vorab schon mal vielen Dank für eure Hilfe.

Gruß, Purpur

CSS: 
/*-----------------------*/
/* Formatierung des Body */
/*-----------------------*/
body {
   margin: 0;
   padding: 0;
   text-align: left;
   font: 11pt/1.3em courier, serif;
   background-color: white;
   color: #303030;}

/*--------------*/
/* Die Hauptbox */
/*--------------*/
#wrapper {
   border: 0px solid red;
   position: relative;
   top: 0;
   left: 0;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 20px;}

/*-------------------*/
/* Header mit Banner */
/*-------------------*/
#header {
   border: 0px solid red;
   border-top: 1px solid #68695E;
   border-right: 0px solid #68695E;
   border-bottom: 0px solid #68695E;
   padding-bottom: 20px;}

/*--------------------------------*/
/* Formatierung Links Navtable  */
/*--------------------------------*/
#navibox {
   border: 0px solid blue;
   font-size: 10pt;
   min-height: 36px; /* Hoehe der Navigationsleiste: Firefox - IE 7 */
   height: auto !important; height: 36px; /* Hoehe der Navigationsleiste: IE 6 */
   border-top: 1px solid #68695E;
   border-right: 2px solid #68695E;}
  ul#Navigation {
  margin: 0; padding: 0.1em;}
  ul#Navigation li {
  list-style: none;
  display: inline;
  margin: 0; padding: 0;
  text-align: center;}
  ul#Navigation a, ul#Navigation span {
  float: left; width: 7.3em;
  margin: 0.4em; padding: 0.1em 0.2em;
  text-decoration: none;
  border: 0px solid black;
  color: #121210; background-color: #ccc;}
  ul#Navigation a:hover, ul#Navigation span {
  border-color: white;
  border-left-color: black; border-top-color: black;
  color: white; background-color: gray; font-weight: bold;}
  ul#Navigation div {
  clear: left;}

/*-------------*/
/* Content-Box */
/*-------------*/
#content {
   border: 1px solid green;
   min-height: 300px; /* Hoehe der Navigationsleiste: Firefox - IE 7 */
   height: auto !important; height: 525px; /* Hoehe der Navigationsleiste: IE 6 */
   padding-left: 20px;
   padding-right: 10px;
   padding-top: 30px;
   padding-bottom: 10px;
   border-right: 2px solid #68695E;}

/*--------*/
/* Footer */
/*--------*/
#footer {
   border: 0px solid yellow;
   font-size: 8pt;
   margin-bottom: 10px;
   padding-top: 2px;
   padding-left: 18px;
   border-right: 2px solid #68695E;
   border-bottom: 1px solid #68695E;}

/*----------------------------*/
/* Formatierung der Schriften */
/*----------------------------*/
/* ...der Ueberschriften */
h1 {font: 260%; margin: 0; padding-bottom: 20px;}
h2 {font: 185%; margin: 0; padding: 0px 0px 0px 0px;}

/* Standardformatierung unsortierter Listen */
li {text-align: justify; padding-right: 0.5em;}
/* ...weitere inline-Textauszeichnungen mit <span class="..."></span> */
.eingerueckt {   padding-left: 10px;}
.fett {   font-weight: bold;}
.wichtig {color: red; background-color: yellow;}
.big {font-size: 140%;}
.little {font-size: 80%;}
.disclaimer {font-size: 90%;}
.zitat {color: white; font-style: italic; font-weight: bold;}

/*----------------*/
/* Bilder im Text */
/*----------------*/
img {border: 1px solid #68695E;}
.noborder {border: 0px;}
.bild_links {float: left; margin-right: 50px;}
.bild_rechts {float: right; margin-left: 10px;}
.bild_mitte {text-align: center;}
.floatstop {clear:both;}

/* END CSS */

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" href="basic.css" />
</head>

<body>

<div id="wrapper">

    <!-- Header  -->
    <div id="header">
        <a href="index.html"> <img src="banner.png" style="border: 0px" /></a>
    </div>
    <!-- END Header -->


    <!-- Navi -->
    <div id="navibox">
        <ul id="Navigation">
        <li><span>Startseite</span></li>
        <li><a href="">N2</a></li>
        <li><a href="">N3</a></li>
        <li><a href="">N4</a></li>
        <li><a href="">N5</a></li>
        <li><a href="">N7</a></li>
        <li><a href="">N7</a></li>
        </ul>
    </div>
    <!-- END Navi -->

    <!-- Content-->
    <div id="content">
        <h1>Lorem ipsum</h1>
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <!-- END Content -->

    <!-- Footer -->
    <div id="footer">Fusszeile</div>
    <!-- END Footer -->

</div>
<!-- END wrapper -->

</body>

</html>
 
position:fixed ist hier die gewünschte Positionierungsart.

Im CSS zeige ich die ergänzten / geänderten Regeln:
CSS: 
/*--------------*/
/* Die Hauptbox */
/*--------------*/
#wrapper {
  position:absolute; /* anstelle von relative */
  top: 0;
  left: 50%;
  width:800px;
  margin-left:-400px;
  ... }
/*-------------------*/
/* Header mit Banner */
/*-------------------*/
#header {
  position:fixed;
  top:0;
  left:50%;
  width:800px;
  margin-left:-400px;
  z-index:2;
  ... }
/*--------------------------------*/
/* Formatierung Links Navtable  */
/*--------------------------------*/
#navibox {
  position:fixed;
  top:125px; /* ggfs. anpassen */
  left:50%;
  width:798px;
  margin-left:-400px;
  z-index:2;
  ... }
/*-------------*/
/* Content-Box */
/*-------------*/
#content {
  ...
  padding-top:155px; /* ggfs. anpassen */
}
 
Nachtrag:

Damit der Inhalt unter den fixierten Elementen durchläuft, habe ich für sie mittels z-index:2 eine höhere Schichtposition festgelegt.

Die Banner-Grafik verdeckt direkt den scrollfähigen Inhalt, aber für #navibox müsste noch eine Hintergrundfarbe definiert werden, damit er dort nicht durchscheint ;)
 
Hallo Spicelab,

herzlichen Dank für deine schnelle Hilfe - astreine Lösung.
Die Bannergrafik habe ich in der Höhe noch etwas angepasst, so dass sich die CSS-Formatierungen noch weiter reduzieren.
Und den Trick mit der Hintergrundfarbe bei der Navigation habe ich auch gefunden ;).
Besten Dank nochmal.

Gruß, Purpur
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück