Hallo zusammen,
ich habe 4 divs, die untereinander stehen:
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
ich habe 4 divs, die untereinander stehen:
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>