✔ Div Container ignorieren?

Status
Nicht offen für weitere Antworten.
C

chris4712

Erfahrenes Mitglied
Hallo,

hab mal wieder ein ungewöhnliches Problem:
Auf der rechten Seite soll ein DIV Container sein, in dem beliebige Zufallsbilder angezeigt werden.
Dieser Container soll so hoch sein, wie das aktuelle Browserfenster.

Der eigentliche Seiteninhalt soll in einem extra scrollbaren DIV Container stehen.

Zu besseren Veranschaulichung habe ich mal ein Bild angehängt.

Mein Problem besteht nun darin dass der DIV Container auf der rechten Seite natürlich immer höher ist (wegen den Bildern) und ich deswegen Scrollbalken habe. Der DIV Container müsste zwar angezeigt werden, aber eigentlich total ignoriert werden, damit ich dem DIV Container der den Seiteninhalt hat, sagen kann er soll 100% hoch sein.

Gruß

Christian
 

Anhänge

  • 26323attachment.jpg
    26323attachment.jpg
    22,9 KB · Aufrufe: 11
Hallo,

ne, leider nicht. Es würde mir weiterhelfen wenn bei Deiner Beispielseite das Menü über die tatsächliche Seitengröße reichen würde, und keine Scrollbars da wären.
Der Seitenbereich an sich ist aber OK :)

Gruß

Christian
 
Ein paar Änderungen im Quellcode et voilá:

HTML: 
<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/left column layout scrolling middle area </title>
<style type="text/css">
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#content {overflow:auto; position:absolute; z-index:3; top:0; bottom:0; left:200px; right:0; background:#eee;}

* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-left:200px solid #fff;}

#left {position:absolute; left:0; top:0; bottom:0; width:200px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:hidden; background-repeat:no-repeat;}

* html #left {height:100%; top:0; bottom:0; color:#fff;}

#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}

dd {display:none;}
a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
a.nav:hover {background:#000; color:#fff;}

</style>
</head>

<body>

<div id="left">
<dl>
<dt><a class="nav" href="#">Smog</a></dt>
<dd>The causes and effects of Smog</dd>
<dt><a class="nav" href="#">Acid Rain</a></dt>
<dd>How Acid Rain is formed and how to reduce it</dd>
<dt><a class="nav" href="#">Fumes</a></dt>
<dd>The main producers of poluting gasses</dd>
<dt><a class="nav" href="#">GM Crops</a></dt>
<dd>GM crops are they safe</dd>
<dt><a class="nav" href="http://www.cssplay.co.uk/comments/comments.php?comment_id=fixit layout 3" title="Your comments">Comments</a></dt>
<dd>A place to leave you comments on this layout</dd>
</dl>
<dl>
<dt><a class="nav" href="index.html">Layouts</a></dt>
<dd>Back to the list of layouts page</dd>
<dt><a class="nav" href="http://www.cssplay.co.uk">Home</a></dt>
<dd>Back to the Site Home Page</dd>
<dt><a class="nav" href="bodyfix.html">Layout 1</a></dt>
<dd>My first example of the fixed width layout with header and footer</dd>
<dt><a class="nav" href="body2.html">Layout 2</a></dt>
<dd>My second example of the semi-fluid layout with header, footer and two columns</dd>
<dt><a class="nav" href="body5.html">Layout 4</a></dt>
<dd>My last example of the semi-fluid layout with header, footer and four columns</dd>
</dl>
</div>

<div id="content">
<h2>Pollution ~ the facts.</h2>
<p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>

<p>NN7 displays correctly but the absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<p>The menus on the left are produced using definition lists which are easier to work with than unordered lists and have the additional benefit that you can give a 'definition' of each link for text-only browsers.</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>

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.
</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

<p>
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.
</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
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.
</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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>&copy; 2004/5/6 Stuart Nicholls</p>

</div>

</body>
</html>
 
Hey, danke!

Ich weiß zwar noch nicht wieso, aber es geht:-(
Danke und sorry dass mir das nicht aufgefallen ist!

Gruß

Christian
 
Okay, dann reiche ich zum Vergleich eine Gegenüberstellung der editierten ID-Selektoren nach ;)

Code: 
/* Original */
#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}

* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}

/* Neue Fassung */
#content {overflow:auto; position:absolute; z-index:3; top:0; bottom:0; left:200px; right:0; background:#eee;}

* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-left:200px solid #fff;}


/* Original */
#left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}

* html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}

/* Neue Fassung */
#left {position:absolute; left:0; top:0; bottom:0; width:200px; background:url(chimney.jpg) rgb(76,76,76); background-repeat:no-repeat: font-size:1.2em; z-index:4; overflow:hidden; background-repeat:no-repeat;}

* html #left {height:100%; top:0; bottom:0; color:#fff;}
Die IDs #head und #foot habe ich aus dem CSS- und HTML-Code genommen, da sie ja gemäß Deinem Preview nicht benötigt werden und dementsprechend die Positionsangaben für die beiden DIV-Elemente korrigiert, sowie im Star-HTML-Hack den oberen und untere Rahmen entfernt, da sie durch den Wegfall des Headers und Footers nicht mehr benötigt werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück