✔ CSS Layout - fixe Seite und Scrollseite

Status
Nicht offen für weitere Antworten.
M

morgenstern

Erfahrenes Mitglied
Hallo Leute!

Ich habe eine bezüglich CSS Layer und deren Positionierung ein paar Fragen, die ich trotz Studium einiger CSS Seiten nicht ganz verstanden habe bzw. umsetzen konnte.

Ich habe ein 2 Spalten Layout. Die Seite ist zentriert (die habe ich selber leicht lösen können ;) ). Die linke Seite hat eine fixe größe (ca. 200 px). Diese sollte immer fix bleiben auch beim Scrollen. Dort ist das Bild, die Navigation und auch eine Kontaktinfo untergebracht.

Die rechte Seite sollte sich an die Fenstergröße anpassen, also mit Prozenten arbeiten, sodass links und rechts der gleiche Abstand zum Browserfenster bleibt.

Dies löse ich mit einem Layer, den ich zentriere (body usw.) und diesem einen Wert in der Breite gebe: 80%.

Nun stehe ich vor ein paar Fragen: Der linke Layer muss immer fix bleiben, 100% Höhe, da ja unten der Kontakt-Text steht (oder sollte man dies anders lösen?) eine fixe Breite haben und die Navigation, sowie ein Logo beinhalten.

Zurzeit arbeite ich mit float:left und beim 2. Layer ohne float. Das Problem ist nur, dass ich jetzt beim Content Layer scrollen möchte, und zwar mit dem Browserscrollbalken und dieser immer 100% Höhe hat, jedoch scrollt der linke Layer mit.

Muss ich hierbei mit fixed arbeiten oder gibt es bessere Möglichkeiten? Muss ich bei den Browsern auf irgendwelche Bugs achten? (IE und Firefox usw.)

Ich habe mal eine Grafik angehängt, welche die Seite darstellt. Falls ich eine halbwegs funktionstüchtige Version zusammenbringe, werde ich den Code posten.

Danke
 

Anhänge

  • 25935attachment.jpg
    25935attachment.jpg
    123,8 KB · Aufrufe: 21
Ich habe mal Stu Nicholls' CSS-Layout-Variante cross browser fixed header/footer/left column layout scrolling middle area auf Deine Vorstellungen angepasst ;)

Das zweispaltige Layout ist im Browserfenster horizontal zentriert und besitzt derzeit einen Abstand von 150px zum linken und rechten Fensterrand.

Die linke Spalte ist 200px breit, das Content-DIV besitzt somit eine variable Breite und ist zudem scrollfähig.


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:1;
top:0;
bottom:0;
left:350px;
right:150px;
background:#eee;
}

* html #content { /* Für IE */
top:0;
left:0;
right:0;
bottom:0;
height:100%;
max-height:100%;
width:100%;
overflow:auto;
position:absolute;
z-index:1;
border-left:350px solid #fff;
border-right:150px solid #fff;
}

#content p {
padding:10px;
}

#left {
position:absolute;
left:150px;
top:0;
bottom:0;
width:200px;
background: rgb(76,76,76);
font-size:1.2em;
color:#fff;
z-index:2;
overflow:hidden;
}

* html #left { /* Für IE */
height:100%;
top:0;
bottom:0;
}

#left #contactInfo {
position: absolute;
bottom: 10px;
left: 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 id="contactInfo">Contact-Info</div>
</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>
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>
 
Ich habe jetzt doch noch ein Problem. Ich kann beim Firefox nicht mehr mit dem Mausrad scrollen. Bei jeder anderen page geht es, auch im IE kann ich scrollen, jedoch nicht im Firefox.

http://www.sreyzone.org/css_test.htm

Ich habe es einmal raufgeladen. Könntet ihr mir sagen, ob bei euch das gleiche Problem besteht bzw. wie ich dieses lösen könnte.
 
Ich habe eine 4-Tasten-Maus von Logitech und die Daumen-Taste mit der Scroll-Funktion belegt. Diese funktioniert in Deinem Dokument einwandfrei.

Meine Testumgebung: Win2k, Firefox 1.5.0.6, Logitech MouseWare 9.79.1

Ich weiß aber leider nicht, wie sich das Problem bei Dir beheben lassen könnte.
 
Hallo!

Danke für die schnelle Antwort. Habe anscheinend irgendwie meinen Firefox zerschossen, da er laut About version 1.7 hatte o_O. habe jetzt neu installiert,jetzt klappt alles.
Danke!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück