✔ divs beim scrollen fix positionieren?

Status
Nicht offen für weitere Antworten.
M

mcreisi

Grünschnabel
Hallo.
Ich bastl grad an einer Seite und hab ein kleines Problem.
Ich habe ein div-tag mit dem Namen "content" wo der Inhalt rein kommt. Dieser kann natürlich auch länger sein und meine Seitenhöhe überschreiten. Dann muss man klarerweise scrollen.
Ich möchte jedoch dass die div tags "menü" und "header" fix an einer Stelle bleiben und beim scrollen nicht mitgehn.

Sollte sich jemand noch nicht auskennen was ich meine, hier der Link zur Seite
Link

Danke jetzt schon mal fürs helfen!
 
  • Gefällt mir
Reaktionen: eWe
Du musst den div-Elementen die nicht weggescrollt werden sollen position:fixed geben.
Jedoch unterstuetzt das dieser schrottige Internet Exploder nicht.
Bin auch grad am basteln und schlag mich auch damit rum, dass der IE so sch..... ist.
 
Hier ein Workaround:

HTML: 
<html>
<head>
<title></title>

<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
overflow: hidden; /* Scrollbars für BODY deaktivieren */
background-color: #000010;
font-family: verdana, sans-serif;
font-size: 11px;
color: #ddeeff;
}

#scrollContent
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto; /* Scrollbars für scrollfähigen DIV-Container zulassen */

/* IE-Scrollbars formatieren */
scrollbar-base-color: #000010;
scrollbar-3d-light-color: #aabbcc;
scrollbar-arrow-color: #aabbcc;
scrollbar-darkshadow-color: #000010;
scrollbar-face-color: #000010;
scrollbar-highlight-color: #8899aa;
scrollbar-shadow-color: #8899aa;
scrollbar-track-color: #000010;
}

#fixMenu
{
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 180px;
z-index: 100; /* Schichtposition */
background-color: #001B3B;
padding: 10px;
font-weight: bold;
filter: alpha(opacity=90); /* optional Hinter- u. Vordergrund verschmelzen im IE */
-moz-opacity: 0.9; /* optional Hinter- u. Vordergrund verschmelzen im Mozilla, Netscape */
}

#fixMenu a
{
display: block;
text-decoration: none;
color: #00c0ff;
margin: 7px 0 0 15px; /* Aussenabstand : top - right - bottom - left */
}

#fixMenu a:hover
{
display: block;
text-decoration: underline;
color: #ddeeff;
margin: 7px 0 0 30px; /* Aussenabstand : top - right - bottom - left */
}
-->
</style>

</head>
<body>

<div id="scrollContent">
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
     <p>- END -</p>
</div>


<div id="fixMenu">
     :: fix.menu<br>
     <a href="#" onfocus="this.blur()">link 1</a>
     <a href="#" onfocus="this.blur()">link 2</a>
     <a href="#" onfocus="this.blur()">link 3</a>
     <a href="#" onfocus="this.blur()">link 4</a>
     <a href="#" onfocus="this.blur()">link 5</a>
     <a href="#" onfocus="this.blur()">link 6</a>
</div>

</body>
</html>
[ Browsercheck: IE 5.5, Mozilla 1.6, NN 7.0, Opera 7.23 ]

greez, maik.l
 
Ich hab mich entschlossen fuer den IE das Menue auf absolute zu setzen und eine Meldung auszugeben, dass der IE Schrott ist, auf der Website verwendete Features nicht unterstuetzt und die Leute mal 'nen anstaendigen Browser installieren sollen.
Ist mir echt zu doof mit Microsoft.
Ich programmier jetzt einfach so, dass es den Standards entspricht. So laeuft es bisher mit jedem anderen grafischen Browser den ich gecheckt hab (Konqueror, Mozilla, Firefox, Netscape, Opera). Dass der IE das nicht gebacken kriegt ist nicht mein Problem, daher gibt's einfach nur 'ne Info und ein paar Beschneidungen beim Layout fuer IE-User.
 
Zuletzt bearbeitet:
Jetzt hab ich die ganze Zeit getüftelt und poste auch mal mein Ergebnis:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Roman Reisenberger :: www.reisi.at :: roman.reisenberger.info :: webfeeling.at
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	html, javascript, php, sql, flash, htm, webfeeling, webdesign, web, creation, reisenberger, roman, innsbruck, kirchschlag, uibk, oberösterreich, tirol, austria, homepage</title>
	<meta name="robots" content="INDEX,FOLLOW">
	<meta http-equiv="content-language" content="at">
	<meta name="description" content="roman reisenberger, private homepage">
	<meta name="abstract" content="roman reisenberger, private homepage">
	<meta name="keywords" content="html, javascript, php, sql, flash, htm, webfeeling, webdesign, web, creation, reisenberger, roman, innsbruck, kirchschlag, uibk, oberösterreich, tirol, austria, homepage">
	<meta name="author" content="webfeeling.at | Prugger & Reisenberger GesbR">
	<meta name="publisher" content="webfeeling.at | Prugger & Reisenberger GesbR">
	<meta name="copyright" content="webfeeling.at | Prugger & Reisenberger GesbR">
	<meta name="audience" content="Alle">
	<meta name="page-type" content="Produktinfo">
	<meta name="page-topic" content="Alle">
	<meta name="revisit-after" content="7 days">
	<meta name="robots" content="INDEX,FOLLOW,All">
	<meta NAME="language" CONTENT="de">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body scroll="no">
<div id="contentof1">
  <div class="head">Roman Reisenberger</div>
  <div class="head2">webdesign &bull; webprogrammierung</div>
  <div class="menu">
  	<div class="menupoints">home&nbsp;&bull;</div>
  	<div class="menupoints">about&nbsp;&bull;</div>
  	<div class="menupoints">weblog&nbsp;&bull;</div>
  	<div class="menupoints">guestbook&nbsp;&bull;</div>
  	<div class="menupoints">pictures&nbsp;&bull;</div>
  	<div class="menupoints">development&nbsp;&bull;</div>
  	<div class="menupoints">studium&nbsp;&bull;</div>
  	<div class="menupoints">links&nbsp;&bull;</div>
  	<div class="menupoints">kontakt&nbsp;&bull;</div>
  </div>
</div>
  <div id="contentof2" class="content">An dieser Stelle m&ouml;chte ich mich kurz vorstellen. <br />
              <br />
              Ich wurde in Linz (Ober&ouml;sterreich) geboren und wohne in <a href="http://www.kirchschlag.net"
target="_blank"><strong>Kirchschlag bei Linz</strong></a>. <br />
        <br />
        Nach Abschluss der Volkschule in Kirchschlag und der Hauptschule in Hellmons&ouml;dt besuchte ich das LITEC (Linzer Technikum) in Linz. Als Ausbildungszweig hatte ich mich f&uuml;r Maschinenbau entschieden. <br />
        <br />
        Neben der Schule war eines meiner gr&ouml;&szlig;ten Hobbies das Tanzen. Als ich damit anfing, war ich 11 Jahre alt. Warum so fr&uuml;h? Naja.... mein Onkel und meine Tante haben eine Tanzschule (<a
href="http://www.tanzschule-reisenberger.at" target="_blank"><strong>Tanzschule Reisenberger</strong></a>). Durch das Tanzen lernte ich meine Freundin Marion kennen. Durch das Private Training konnten wir schon sehr fr&uuml;h bei Showeinlagen auf B&auml;llen zeigen was wir gelernt hatten. Unter anderem haben wir alle Tanzleistungsabzeichen (Bronze, Silber, Gold, Gold Star) sowie die Rock'n'Roll Abzeichen (Bronze und Silber) abgelegt.<br />
        <br />
        Nach der Matura war ich als Zivildiener beim Roten Kreuz, als Rettungssanit&auml;ter, in Walding und Kirchschlag t&auml;tig. <br />
        <br />
        Seit Oktober 2001 studiere ich Informatik an der Leopold Franzens Universit&auml;t in Innsbruck. <br />
        <br />
        Anfang 2003 habe ich, gemeinsam mit meinem Studienfreund Stefan Prugger, das Projekt <b><a href="http://www.webfeeling.at"
target="_blank">webfeeling</a></b> gegr&uuml;ndet. Mit diesem Projekt versuchen wir, uns etwas Geld neben dem Studium zu verdienen, indem wir Internetseiten f&uuml;r Firmen, Privatpersonen, Organisationen,... erstellen. <br />
        <br />
        Nach unserem Startprojekt <a href="http://www.stargastronomie.at"
target="_blank"><strong>stargastronomie</strong></a> versuchten wir unser "know how" bei einigen Anderen Projekten umzusetzten.<br />
        Seit 14. Juni 2004 bin ich in als Webdesigner und Webentwickler Selbstst&auml;ndig. Gemeinsam mit Stefan Prugger gr&uuml;ndete ich die 'webfeeling.at | Prugger &amp; Reisenberger GesbR." Durch eine Partnerfirma kommen wir regelm&auml;&szlig;ig zu Auftr&auml;gen. Dabei haben wir uns speziell auf CMS Systeme spezialisiert, aber auch komplette Internetauftritte werden f&uuml;r die Partnerfirma abgewickelt.<br />
        <br />
        Seit November 2004 arbeite ich noch zus&auml;tzlich im <a href="http://www.tkfi.at" target="_blank"><strong>Tiroler Krebsforschungsinstitut</strong></a>.<br />
        Dort betreue ich das Netzwerk und bin Ansprechperson bei Technischen Problemen. Weiters konnte ich ein Intranet f&uuml;r das Institut einrichten, welches ich in den ersten Monaten entwickelte.<br />
        Derzeit wird von mir die Internetseite des Instituts neu implementiert, da die alte Seite nicht mehr den Anforderungen entspricht.<br />
        <br />
        So das war's. Viel Spa&szlig; noch beim Durchschauen meiner Homepage. <br />
        <br />
        mfg, <br />
        Roman Reisenberger
  </div>
  <div class="containerbox">
	  <div class="boxtitel">News</div>
	  <div class="news">So wird meine neue Seite ausschaun. derzeit ist leider nicht viel zu sehn, da ich nur sehr wenig Zeit habe um an ihr zu basteln.</div>
	  <br />
	  <div class="boxtitel">development</div>
	  <div class="development">development</div>
  </div>
</body>
</html>

Code: 
body{
	background:#fff url(../img/bg.gif) fixed no-repeat;
}




.head {
	font-size:14px;
	font-family:Thoma, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000;
	text-align: center;
	position: absolute;
	left: 10px;
	width: 220px;
	height: 20px;
	top: 31px;
}
.head2 {
	font-size:11px;
	font-family:Thoma, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFBF01;
	text-align: center;
	position: absolute;
	left: 10px;
	width: 220px;
	height: 16px;
	top: 51px;
}

.menu {
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	position: absolute;
	left: 0px;
	width: 320px;
	height: 85px;
	top: 131px;
}
.menupoints{
	padding: 4px 30px 2px 0;
	border-bottom: 1px dashed #CCC;
}
#contentof1 { overflow:hidden;
	     width:320px;
              height:400px;
              left:0px;
              top:0px;
              position:absolute;

}

#contentof2 {
	    position:absolute;
             width:400px;
             height:500px;
             overflow:auto;

}

.content {
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	position: absolute;
	left: 347px;
	width: 372px;
	top: 50px;

}

.containerbox {
	padding: 1px 1px 1px 2px;
	border-left: 1px solid #FFBF01;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	position: absolute;
	left: 747px;
	width: 200px;
	top: 70px;
}
.boxtitel {
	font-weight:bold;
	text-align:right;
	padding: 2px 5px 2px 5px;
	float:inherit;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*background-color: #FFBF01;*/
}
.news {
	padding: 5px 5px 5px 15px;
	border-bottom: 1px dotted #CCC;
	border-top: 1px dotted #CCC;
	border-right: 1px dotted #CCC;
	float:inherit;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*background-color: #FFFFFF;*/
}
.development {
	padding: 5px 5px 5px 15px;
	border-bottom: 1px dotted #CCC;
	border-top: 1px dotted #CCC;
	border-right: 1px dotted #CCC;
	float:inherit;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/*background-color: #FFFFFF;*/
}

Das einzigste was ich nicht hinbekommen habe war das die Höhe des scrolbaren Divs 100% beträgt. Wollte einfach nicht funktionieren. Obwohl height:100%; ja erlaubt ist.
 
Hi,

dann will ich meinen Senf auch noch dazu geben.

Folgendes Dokument erfüllt die Forderung, 100% Höhe des Bodys einzunehmen und einen
scrollbaren Content-Div zu besitzen.

Die Grössenangaben für nicht IE-Browser erfolgen über die absoluten Angaben top, bottom, left
und right.
Da der IE diese Form der Zuweisung nicht akzeptiert, wurde korrigierend eingegriffen. Näheres
ist in den Kommentaren des Quellcodes nachzulesen.

Soll der Header entfallen, muss er entsprechend entfernt werden. Die Rahmen der Navigation
und des Contents müssen ebenfalls angepasst werden.

Zu beachten ist, dass der IE im Quirksmode läuft, da sonst die Höhenangabe height: 100% nicht
interpretiert wird (@DirtyWorld: dürfte auch dein Problem gewesen sein).

Der IE befindet sich z.B. im Quirsmode, wenn
  • kein DocType angegeben wird
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (HTML 4.01)
  • bei XHTML 1.0 Dokumenten, wenn der Prolog angegeben wird:
    <?xml version="1.0" encoding="iso-8859-1"?>

Dokument:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title></title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
body, html{ margin: 0;
            padding: 0;
            height: 100%;}
body{ overflow: hidden;}

#headerDiv{ position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: #6584A3;
            z-index: 5;}

/* Vorgehensweise für navDiv ähnlich zu contentDiv (siehe unten) */
#navDiv{ position: absolute;
         top: 120px;
         left: 0;
         bottom: 0;
         width: 200px;
         background: #B1BEC3;
         z-index: 2;}
* html #navDiv{ position: absolute;
                top: 0;
                height: 100%;
                border-top: 120px solid #ffffff;}

/* Content-Container ************************************************************ *
 * Nicht-IE-Browser lassen es zu, die Grösse über die absoluten Werte top, bottom *
 * left und right anzugeben.                                                      *
 * Content-Ebene liegt unter allen anderen Ebenen                                 *
 * ****************************************************************************** */
#contentDiv{ position: absolute;
	           top: 120px;
	           left: 200px;
	           right: 0;
	           bottom: 0;
	           background: #E2E9E9;
	           overflow: auto;
	           z-index: 1;}
/* Content-Container (IE-Filter) ************************************************ *
 * IEs erkennen Grössenangaben über absolute Werte nicht. Deshalb muss hier       *
 * korrigierend eingegriffen werden. Zunächst werden alle bereits gesetzten Werte *
 * wieder entfernt. Anschliessend wird der gesamte Body ausgefüllt. Die Abstände  *
 * zu den Seitenrändern werden durch Rahmen realisiert. Damit erscheint auch der  *
 * Scrollbar an der richtigen Stelle. Da der Content-Container auf der tiefsten   *
 * Ebene liegt, sind die Rahmen auch nicht sichtbar!                              *
 * ****************************************************************************** */
* html #contentDiv{ top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    border-top: 120px solid #ffffff;
                    border-left: 200px solid #ffffff;}

.marginDiv{ margin: 6px;}
.bottomSpacer{ font-size: 1px;
               line-height: 0;
               height: 6px !important; /* Unterer Anbstand im Content für non-IEs */
               height: 0;              /* Unterer Abstand im Content für IEs */}
 //-->
</style>
</head>
<body>
<div id="headerDiv"><div class="marginDiv">Header</div></div>

<div id="navDiv"><div class="marginDiv">Navigation</div></div>

<div id="contentDiv">
  <div class="marginDiv">
    Content
    <div style="height: 1000px; border: 1px dashed #AFAFAF;">Höhendiv</div>
    <div class="bottomSpacer">&nbsp;</div>
  </div>
</div>
</body>
</html>
Ciao
Quaese
 
Hi,

das ist lediglich ein Div zum Erzeugen von Höhe und somit zum Einblenden des Scrollbars.

Ciao
Quaese
 
Heyho,

ich bastele gerade eine kleine Konfigseite für meinen Chef auf unserer Firmenhomepage... Die wird allerdings enorm breit werden und deshalb sollte die Erklärung am linken Rand fixiert sein... Dazu habe ich jetzt auch einfach "fixed" als Position eingetragen. Da es ja lediglich intern zu sehen sein wird, kann man Chef auch einfach mal Firefox benutzen, finde ich (ich würde den IE hier sowieso gerne los werden ;) )...
Na ja, jedenfalls sollte der Div Container senkrecht mitscrollen, aber waagerecht fixiert sein. Denn im Moment stehen unter dem Container noch ein paar Sachen, die beim Scrollen davon überlagert werden.
Bekommt man das mit CSS auch irgendwie hin, oder wird das nichts?

Viele Grüße,
eWe
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück