✔ Frage zu Dynamisch wachsender DIV-Box

T

theshu

Grünschnabel
Hallo Community!

Meine Frage bezieht sich auf das CSS-Tutorial von Maik:
http://www.tutorials.de/forum/css-t...xierten-und-separat-scrollbaren-bloecken.html

So wie es im Tutorial beschrieben wird, funktioniert es PROBLEMLOS.
Aber: wenn ich einen Hintergrund definiere (Sich wiederholendes Muster), dann überschreiben die Borderangaben (border-left, border-top...) meinen Hintergrund und im IE ist alles Schwarz oder halt in angegebener Farbe.
Um alles etwas zu vereinfachen, habe ich folgenden Code von Maik etwas gestutzt:#

Code: 
<?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>CSS-Beispiel 2: position_fixed</title>

<style type="text/css">
<!--
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	
}
body {
	background-color: #fff;
	overflow: hidden;	/* Scrollbalken im Fenster unterbinden */
}
#mitte {
	background-color: green;
	position: absolute;
	top: 150px;		/* Abstand zum oberen Fensterrand */
	left: 200px;		/* Abstand zum linken Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	right: 100px;		/* Abstand zum rechten Fensterrand */
	overflow: auto;		/* Scrollbalken, falls notwendig */
}
* html #mitte {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-width: 150px;	/* = Kopfzeilenhöhe */
	border-left-width: 200px;	/* = Spaltenbreite links */
	border-bottom-width: 50px;	/* = Fußzeilenhöhe */
	border-right-width: 100px;	/* = Spaltenbreite rechts */
	border-style: solid;
}
#mitte .inhaltDiv {
	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
}
-->
</style>
</head>

<body>
	<div id="mitte">
		<div class="inhaltDiv">
			<h1>#mitte:</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. 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>
			<p>
			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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
			<p>
			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.
			</p>
			<p>
			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.
			</p>
			<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
			</p>
			<p>
			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.
			</p>
			<p>
			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. 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>
	</div>
</body>
</html>

Im Firefox wird der Hintergrund weiß (wie angegeben) dargestellt. Im IE jedoch schwarz.
Habe schon mit margin und Extra-DIV-Boxen gearbeitet. Ohne erfolg. Hat jemand eine Idee?

Viele Grüße
 
Hi,

eines vorweg: Das Tutorial stammt nicht aus meiner Feder ;)

Für dein Vorhaben hast du aus dem Tutorial die falsche Variante gewählt - mit der Ersten von hela ist es im IE problemlos möglich, einen Seitenhintergrund zu verwenden:
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>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS-Beispiel 1: position_fixed</title>

  <style type="text/css">
  <!--
  html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          border: 0;
          padding: 0;
  }
  body {
          background-color: #fff; /* weißer Seitenhintergrund */
          overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
  }
  #mitte {
          position: absolute;
          top: 150px;                /* Abstand zum oberen Fensterrand */
          left: 200px;                /* Abstand zum linken Fensterrand */
          bottom: 50px;                /* Abstand zum unteren Fensterrand */
          right: 100px;                /* Abstand zum rechten Fensterrand */
          overflow: auto;                /* Scrollbalken, falls notwendig */
          background-color: green; /* grüner Boxenhintergrund */
  /* nur für IE: */
          width: expression((document.body.clientWidth - 300) + "px");
                                 /* left-Wert + right-Wert = 300 */
          height: expression((document.body.clientHeight - 200) + "px");
                                 /* top-Wert + bottom-Wert = 200 */
  }
  #mitte .inhaltDiv {
          margin: 20px;                /* Abstand des Inhalts zum Blockrand */
  }
  -->
  </style>
  </head>

  <body>

  <div id="mitte"><div class="inhaltDiv">
  <h1>#mitte:</h1>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
  </p>
  </div></div>


  </body>
  </html>


mfg Maik
 
Hallo Maik :)

Vielen Dank für den Lösungsvorschlag!
Ich werde nun versuchen den Rest (Header, Foot usw.) mit einzubinden.
Wenn alles geklappt hat, melde ich micht nocheinmal hier.

Nochmals vielen Dank!
 
Hallo!

Ich habe jetzt alles wie ich es mir vorgestellt habe geschafft :)

Es war noch eine weitere Content-Box nötig, damit ich bei übergroßem Inhalt die Scrolleisten noch von einem Rand (Runde Ecken Layout) umgeben lasse.

Alles perfekt, danke Maik!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück