nicht angemeldet
Float Textumfluss und Overflow
Kaum ist ein Problem geklärt..
Folgendes:
Ich hab den Inhalts div links gefloatet, die Subnavi steht rechts von diesem.
Weiterhin beinhaltet der Inhaltsdiv einen weiteren Navigation und ein Mainframe in welchen der eigentliche Text kommt.
Dieser hat folgende Eigenschaften:
div#Mainframe{
background-color:#FFFFFF;
height:990px;
margin:5px 0 0 0;
overflow:auto;
}
Entfern ich das Overflow arbeitet der Container genau wie gewünscht.
Das Mainframe ist hinter dem Navigationsdiv, der Text umfließt jenes und wird nicht überdeckt.
Füge ich das Overflow ein, erscheint meine Scrollbar(wie gewünscht) allerdings wird das Mainframediv nun nach links begrenzt und stößt an den Rand des Navigationsdiv - Was er nicht soll.
Weiterhin würd es mich interessieren(Situation wenn Overflow nicht vorhanden)wie ich den Textumfluss einen Abstand Links vom übergeordnetem floatenden Element geben kann.
Padding würde auf die komplette Seite wirken und somit nicht den gewünschten Effekt bringen.
Aber anbei den kompletten Htmlcode, damit ihr es euch veranschaulichen könnt - der erste Code ist ohne Overflow, der zweite mit Overflow.
<html>
<head>
<style type="text/css">
html, body {
background-color:#000000;
margin: 0;
padding: 0;
}
div#body {
background-color:#000000;
width: 800px;
margin:auto;
height:1200px;
overflow: hidden !important;
z-index:1;
}
div#Header{
height:50px;
background-color:#FFFFFF;
z-index:2;
}
div#Subcontainer{
height:50px;
background-color:#33FF00;
z-index:2;
}
div#Inhalt{
height:1000px;
background-color:#000000;
float:left;
}
div#Subnavi{
width:48px;
height:100px;
background-color:#00FFFF;
border:1px #707070 solid;
margin:5px 0 0 802px;
position:fixed;
}
div#Navigation{
height:250px;
width:198px;
float:left;
background-color:#00FF00;
border:1px #707070 solid;
margin:5px 0 0 0;
}
div#Mainframe{
background-color:#FFFFFF;
height:990px;
margin:5px 0 0 0;
}
div#Footer{
background-color:#FFFF00;
height:50px;
width:800px;
clear:both;
margin:5px 0 60px 0;
border:1px #FFFFFF solid;
}
</style>
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="body">
<div id="Header">
</div>
<div id="Subcontainer">
</div>
<div id="Inhalt">
<div id="Navigation">
Unterhalb dieser Box, soll Mainframe und der Text weitergehen
</div>
<div id="Mainframe"> Dieser Text soll 5px Abstand zum Navigationsdiv haben
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Dieser Text soll unterhalb des Navigationsdiv stehen<br /><br /><br /><br /><br /><br /><br /><br /><br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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. atum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
<div id="Subnavi">
</div>
<div id="Footer">
</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
html, body {
background-color:#000000;
margin: 0;
padding: 0;
}
div#body {
background-color:#000000;
width: 800px;
margin:auto;
height:1200px;
overflow: hidden !important;
z-index:1;
}
div#Header{
height:50px;
background-color:#FFFFFF;
z-index:2;
}
div#Subcontainer{
height:50px;
background-color:#33FF00;
z-index:2;
}
div#Inhalt{
height:1000px;
background-color:#000000;
float:left;
}
div#Subnavi{
width:48px;
height:100px;
background-color:#00FFFF;
border:1px #707070 solid;
margin:5px 0 0 802px;
position:fixed;
}
div#Navigation{
height:250px;
width:198px;
float:left;
background-color:#00FF00;
border:1px #707070 solid;
margin:5px 0 0 0;
}
div#Mainframe{
background-color:#FFFFFF;
height:990px;
margin:5px 0 0 0;
overflow:auto;
}
div#Footer{
background-color:#FFFF00;
height:50px;
width:800px;
clear:both;
margin:5px 0 60px 0;
border:1px #FFFFFF solid;
}
</style>
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="body">
<div id="Header">
</div>
<div id="Subcontainer">
</div>
<div id="Inhalt">
<div id="Navigation">
Unterhalb dieser Box, soll Mainframe und der Text weitergehen
</div>
<div id="Mainframe"> Dieser Text soll 5px Abstand zum Navigationsdiv haben
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Dieser Text soll unterhalb des Navigationsdiv stehen<br /><br /><br /><br /><br /><br /><br /><br /><br />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. 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. atum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
<div id="Subnavi">
</div>
<div id="Footer">
</div>
</div>
</body>
</html>
-
Hi,
Entfern ich das Overflow arbeitet der Container genau wie gewünscht.
Das Mainframe ist hinter dem Navigationsdiv, der Text umfließt jenes und wird nicht überdeckt.
Füge ich das Overflow ein, erscheint meine Scrollbar(wie gewünscht) allerdings wird das Mainframediv nun nach links begrenzt und stößt an den Rand des Navigationsdivoverflow ist eine der Eigenschaften, die dafür sorgen können, dass ein Element einen eigenen Block Formatting Context bildet.
Welche Auswirkungen das hat, findest du hier beschrieben:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflowMfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
So wie ich das rausintepretiere gibt es also im CSS keine Möglichkeit die Haupteigenschaft von Overflow zu benutzen und gleichzeitig die Nebeneigenschaften "abzuschalten" ?
-
Hallo,
So wie ich das rausintepretiere gibt es also im CSS keine Möglichkeit die Haupteigenschaft von Overflow zu benutzen und gleichzeitig die Nebeneigenschaften "abzuschalten" ?
Nein, gibt es nicht.
Mathias
-
-