Scrollbalken bei DIV-Bereichen

Status
Nicht offen für weitere Antworten.
S

Smiths

Grünschnabel
Hallo
ich habe angefangen meine HP von Frames in DIV-Bereichen mit CSS umzubauen.
Leider klappt das mit dem Scrollen nicht so. Ich habe overflow:auto gemacht! Leider gibt es 2 Scrollbalken, der von der Seite und der vom DIV-Bereich!
Ich will nur den unteren rechten Bereich scrollen. Wenn ich außen scrolle geht link der Hintergrund weg. Welchen Fehler hab ich gemacht?
Hier die Seite zum Gucken: http://testseite.hotel-lavreysen.de/
Beachtet nicht die Umlaute, wird korrigiert wenn das Gerüst steht :)
Hier nochmal der Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hotel Lavreysen in Hergarten</title>
<style type="text/css">
<!--
#head {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:130px;
	z-index:1;
	background-image: url(bilder/frame.jpg);
}
#menu {
	position:absolute;
	left:0px;
	top:0px;
	width:197px;
	height:100%;
	z-index:2;
	background-image: url(bilder/menue.jpg);
}
#main {
	position:absolute;
	left:197px;
	top:130px;
	width:auto;
	height:100%;
	z-index:3;
	overflow: auto;
}
-->
</style>
</head>

<body>
<div id="head"><img src="bilder/logo.jpg" width="204" height="130" alt="logo" /></div>
<div id="menu"><img src="bilder/logo.jpg" alt="logo" width="204" height="130" /></div>
<div id="main">
  <p><?php include("freizeit.htm"); ?>
  </p>
</div>
</body>
</html>

Hoffe mir kann einer helfen.
gruß
Smiths
 
Zuletzt bearbeitet:
Hi,

zum einen muß der Scrollbalken für den Viewport und Dokumentkörper ausgeschaltet werden:

Code: 
html,body {
overflow:hidden;
}
und zum anderen das DIV #main wie folgt positioniert werden:

Code: 
#main {
        position:absolute;
        left:197px;
        top:130px;
        bottom:0;
        width:auto;
        /*height:100%;*/ /* auskommentiert = deaktiviert */
        z-index:3;
        overflow: auto;
}
Wenn du hierbei die Vorgängerversionen des IE7 berücksichtigen willst, empfehle ich dir das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken, da sie die angewandte Kombination der top- und bottom-Eigenschaft nicht unterstützen.

mfg Maik
 
Ich danke dir für die Hilfe. 50% behoben :)
Ich hatte immer nur bei body overflow hidden gemacht. Da das ned ging hatte ich es wieder rausgenommen. html war die lösung.
Leider kann im DIV-Bereich trotz overflow:auto (scroll geht auch nicht) nicht gescrollt werden. Wenn ich das noch hinkriege wär das super. Aktuelle Version wieder über den obigen Link zu finden.
Deinen Link werde ich mir auch ansehen, danke.
 
:-( uh das ist mir aber peinlich. Hatte gar nicht gesehen das du bottom hinzugefügt hattest.
Super, damit funktioniert es. Muss ich auch unbedingt mal nachlesen. Ist mir noch ned klar wieso es mit bottom funktioniert. Bitte ned sagen :), will das mit bottom selber nachlesen :)!
Aber vielleicht hast du ja noch eine Idee warum er den Text an der rechten Seite abschneidet? Scheint auch nur im IE so zu sein.
 
Bei mir wird der Text in #main nicht rechts abgeschnitten, sondern die Box kann nach rechts gescrollt werden, was daran liegt, dass du beim Includen ein vollständiges HTML-Grundgerüst in das Hauptdokument lädst, was so aber nicht valide ist.

Stattdessen wird aus "freizeit.htm" nur der Inhalt des Dokumentkörpers reingeladen, also das, was zwischen <body> ... </body> notiert ist.

mfg Maik
 
Schau dir mal dieses Dokument in einem standardkonformen Browser an - hierbei hab ich #main noch right:0 spendiert, die width- und height-Deklarationen entfernt, und besagten Fehler beim Includen korrigiert:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hotel Lavreysen in Hergarten</title>
<style type="text/css">
<!--
html,body {
overflow:hidden;
}
#head {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:130px;
        z-index:1;
        background-image: url(bilder/frame.jpg);
}
#menu {
        position:absolute;
        left:0px;
        top:0px;
        width:197px;
        height:100%;
        z-index:2;
        background-image: url(bilder/menue.jpg);
}
#main {
        position:absolute;
        left:197px;
        right:0;
        top:130px;
        bottom:0;
        z-index:3;
        overflow: auto;
}
-->
</style>
</head>

<body>
<div id="head"><img src="bilder/logo.jpg" width="204" height="130" alt="logo" /></div>
<div id="menu"><img src="bilder/logo.jpg" alt="logo" width="204" height="130" /></div>
<div id="main">


<p class="MsoNormal" align="center"><img border="0" src="bilder/freizeit.jpg" width="180" height="50"></p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">Hier bietet sich Ihnen der ideale
Ausgangspunkt für Freizeitaktivitäten rund um unser Familienhotel:</span></p>
<p class="MsoNormal" align="left">
<span style="font-family: American Classic; text-decoration: underline"><b>
Rursee</b></span></p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">Wer Zeit und Muße hat, sollte eine
Fahrt mit den leisen Schiffen der Rurseeschifffahrt ab Schwammenauel oder
Eschauel unternehmen.<br>
Der Rursee bietet Ihnen weiterhin diverse Wassersportmöglichkeiten, wie z. B.
Kanu-Fahrt, Bootstouren, Segelboot, Tretboot, usw.</span></p>
<p class="MsoNormal" align="center" style="text-align: left"><b><u>
<span style="font-family: American Classic">Im Rheinischen Freilichtmuseum
Kommern</span></u></b><span style="font-family: American Classic"> </span></p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">können Kinder und Erwachsene mit
allen Sinnen erleben, wie früher im Rheinland gelebt und gearbeitet wurde.
Machen Sie einen Spaziergang durch eine abwechslungsreiche Museumslandschaft.
Bewundern Sie Bauernhöfe, Windmühlen, Werkstätten, Schul- und Backhaus, Tanzsaal
und Kapelle. Rund 65 historische Gebäude aus den verschiedensten Regionen des
Rheinlandes sind auf dem 80 Hektar großen Gelände wiedererrichtet worden. Alle
sind Beispielhaft für das Bauen, Wohnen und Wirtschaften der ländlichen
Bevölkerung seit Ende des 15. Jahrhunderts.</span></p>
<p class="MsoNormal" align="center" style="text-align: left"><b><u>
<span style="font-family: American Classic">Nordic Walking</span></u></b></p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">Die Aktivregion Rursee bietet ideale
Voraussetzungen für Nordic Walking: eine gesunde Landschaft, den Nationalpark
Eifel, verschiedene Routenprofile, interessante Etappenziele für unterwegs oder
einfach durch die heimischen Felder und Waldwege.<br>
Wer Lust auf Nordic Walking hat, ist hier genau richtig. Ob Einsteiger oder
Profi – genießen Sie zwei oder drei Tage zu einem guten Preis; Spaß und
Verpflegung inklusive.<br>
Preise und genauere Informationen nach Absprache</span></p>
<p class="MsoNormal" align="center" style="text-align: left"><u>
<span style="font-family: American Classic; font-weight: 700">Umgebung</span></u></p>
<p class="MsoNormal" align="left"><span style="font-family: American Classic">
Diverse Freizeitmöglichkeiten zeigen Ihnen, dass es auch in der Umgebung der
Rureifel spannend zugeht . In Aachen die Carolus Therme, der Kölner Dom, das
Phantasialand in Brühl, ideal für Familien mit Kindern, das Wildfreigehege
Hellenthal, der Wildpark Schmidt, das Walderlebniszentrum Gemünd, Freibad
Heimbach, das Hohe Venn, Sommerrodelbahn in Rohren, Ritterfestspiele in Satzvey.
Dies ist nur eine kleine Auswahl der vielen Möglichkeiten, die sich Ihnen
bieten. Alles können Sie gut innerhalb einer Autostunde erreichen. Einen
Autobahnanschluss an die A1 erreichen Sie bereits in 20 Minuten.</span></p>
<p class="MsoNormal" align="left"><span style="font-family: American Classic">
Auch bestehen gute Verbindungen an das angrenzende Holland, Belgien und
Luxemburg. In ca. 50 min haben Sie die Holländische Grenze erreicht.</span></p>
<p class="MsoNormal" align="center" style="text-align: left">&nbsp;</p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">Aktuelle Informationen sowie
Öffnungszeiten und Preise der einzelnen Attraktionen können Sie auch ganz bequem
durch eine E-Mail an uns anfordern.</span></p>
<p class="MsoNormal" align="center" style="text-align: left">&nbsp;</p>
<p class="MsoNormal" align="center" style="text-align: left">fdssdfds</p>
<p class="MsoNormal" align="center" style="text-align: left">vc</p>
<p class="MsoNormal" align="center" style="text-align: left">dvsdv</p>
<p class="MsoNormal" align="center" style="text-align: left">svd</p>
<p class="MsoNormal" align="center" style="text-align: left">&nbsp;</p>

</div>
</body>
</html>
mfg Maik
 
Das passiert auch wie jetzt. Da steht nur die Teil im body in der freizeit.php! Versteh wohl ned ganz was du meinst. Kann ich generell keine Dokumente includen?
Grund das ich Dokumente include ist, weil ich später über das Menü je nach klick die entsprechende Seite includen will.
 
Mit meinem obigen Quellcode wird der Text rechts nicht abgeschnitten und die Box #main muß auch nicht mehr nach rechts gescrollt werden.

Selbstverständlich kannst du in die Seite weitere Dokumente laden, nur lautet der Code der "freizeit.php" dann:

PHP: 
<?php

echo"<p class="MsoNormal" align="center"><img border="0" src="bilder/freizeit.jpg" width="180" height="50"></p>
<p class="MsoNormal" align="center" style="text-align: left">
<span style="font-family: American Classic">Hier bietet sich Ihnen der ideale
Ausgangspunkt für Freizeitaktivitäten rund um unser Familienhotel:</span></p>
<!-- usw. -->";

?>
mfg Maik
 
sorry hatte die Antwort vorher gar nicht gesehen. War dann schlafen.
Ja mit right:0 funktioniert es. Auch dann wenn ich eine normale htm-Seite include.
Super danke dir. *knuddel* :-)
Muss übers WE weg, werde danach weitert workeln :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück