position: fixed deluxe

Levis · 26.12.2007, 19:45

Servus!

Ich will eine Seite designen, deren Aufbau grob dem Bild im Anhang entspricht. Besonderheit dabei: Nur der graue Bereich soll scrollbar sein, der Rest soll immer "stehen" bleiben, auch der untere kleine blaue Rahmen.

Für IE >= 7 und Firefox wohl kein Problem, aber für die anderen Kollegen? Hat jemand zufällig schonmal eine ähnliche Seitenstruktur aufgebaut oder hat jemand Tipps für die Herangehensweise?

Vielen lieben Dank im Voraus!

Mich@el · 26.12.2007, 19:51

Hi Levis, die könnte passen?!
http://www.cssplay.co.uk/layouts/body2.html

Grüße
Michael

Levis · 26.12.2007, 23:57

Danke Michael!

Die schaut schon sehr gut aus, aber leider passt sich der Inhalt des Contents automatisch an die Browserbreite an. Ich will/muss mit festen Breiten arbeiten. Die Seite soll insgesamt 968px breit sein, der Rest (rechts) mit Farbe aufgefüllt werden.
Ich habe versucht das css entsprechend anzupassen, aber eine wirklich überzeugende Lösung ist nicht herausgekommen

Evtl. gibts eine noch passenderen Vorschlag?

Rinaldo · 27.12.2007, 00:34

Zitat:

Zitat von Levis

Ich habe versucht das css entsprechend anzupassen, aber eine wirklich überzeugende Lösung ist nicht herausgekommen

Hab mir das mal angesehen:

HTML-Code:

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

HTML-Code:

#head {position:fixed; margin:0; top:0; left:0; display:block; width:950px; height:100px; background:url(topclown.jpg) #ddd; font-size:4em; z-index:5; color:#fff;}

HTML-Code:

#foot {position:fixed; margin:0; bottom:-1px; left:0; display:block; width:950px; height:50px; background:rgb(214,100,50); color:#fff; text-align:right; font-size:1em; z-index:4;}

Im body gibst Du die Breite mit den gewünschten 968px an.
Den head gibst Du dem Abstand links 0 und eine Breite von 950px (damit der Scrollbalken schön zu sehen ist; klappt aber auch mit 968px Breite - dann wird der Scrollbalken aber überdeckt mit dem Inhalt des Headers/Footers).
Beim foot ist es genauso wie mit dem head.

So ist jetzt die komplette Breite bei den besagten 968px - Scrollbalken eingeschloßen! Um für den Inhalt die Breite von 968px zu erhalten, müsstest Du noch jeweils 18px dazu geben...

So sollte Deine Idee zu lösen sein - verbessert mich, wenn ich irgendwo falsch liege.

EDIT

Um die linke Spalte dann noch über den Header zu legen, einfach den z-index ändern

. (Das wir Deiner Grafik näher kommen)

Levis · 27.12.2007, 10:31

Danke Rinaldo! Das hatte ich auch schon probiert. Aber der Scrollbalken soll schön ganz rechts bleiben!

hero-master · 27.12.2007, 12:09

Hab mal ein wenig herumgetrickst, vielleicht stellt ja diese Variante dich zufrieden

http://nicogutmann.de/levis.htm

HTML-Code:

<!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>Viel Spass</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0
}

html, body {
height:100%;
max-height:100%;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

body {
overflow:auto
}

#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
width:100%
position:relative;
z-index:1
}

h2 {
margin-top:140px;
}

#head {
position:fixed;
top:0;
left:200px;
display:block;
width:786px;
height:100px;
background:#ddd;
font-size:4em;
z-index:2;
color:#fff
}

#foot {
position:fixed;
bottom:-1px;
left:0;
display:block;
width:968px;
height:50px;
background:rgb(214,100,50);
color:#fff;
text-align:right;
font-size:1em;
z-index:3
}

#left {
position:fixed;
left:0;
top:0;
height:100%;
width:200px;
background:#aaa;
font-size:1em;
color:#fff;
z-index:4
}

* html #head, * html #foot,* html #left {
position:absolute
}

#inhalt {
padding-left:200px;
width:768px
}

</style>
</head>

<body>
<div id="head">Header</div>
<div id="foot">

Tja, das ist unten</div>

<div id="left">
<div class="pad2"></div>
<ul>
<li><a class="nav" href="http://www.cssplay.co.uk/comments/comments.php?comment_id=fixit layout 2" title="Your comments">Comments</a></li>
<li><a class="nav" href="bodyfix.html" title="Version 1">Layout 1</a></li>
<li><a class="nav" href="body4.html" title="Version 2">Layout 3</a></li>
<li><a class="nav" href="body5.html" title="Version 2">Layout 4</a></li>
<li><a class="nav" href="index.html" title="Layouts Home Page">Layouts</a></li>

<li><a class="nav" href="http://www.cssplay.co.uk/index.html" title="Site Home">Home Page</a></li>
</ul>
</div>

<div id="content">
<div id="inhalt">
<h2>Titel</h2>
<p>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>
<h3>17th August 2005</h3>
<p>Since serving content<br />

as application/xhtml+xml<br />
Opera adds the html scroll bar<br />
(I don't know why but there it is).</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>
</div
</div>
</body>
</html>

Levis · 27.12.2007, 17:16

hm, auch nicht das Wahre

Da zerstört die vertikale Scrollleiste das Design, und eine vertikale gibts überhaupt nicht..

Also das Design soll so wie im Bild abgebildet sein, wobei die komplette Seite nur 950px hat. Der graue Bereich also z.b. 700px, die rote Navigation 250px.
Der graue Bereich soll scrollbar sein, der Rest immer stehen bleiben...

Ich habe jetzt auch schon so viel probiert, komme aber auf keine gescheite Lösung, die in allen gängigen Browsern brauchbar ist...

hero-master · 27.12.2007, 17:28

Zitat:

Zitat von Levis

hm, auch nicht das Wahre

Da zerstört die vertikale Scrollleiste das Design, und eine vertikale gibts überhaupt nicht..

Wie sieht es denn bei dir aus? Ich habe es gerad in allen IE Versionen getestet und im FF. Da passt es und sieht s aus wie auf deiner Skizze

Zitat:

Zitat von Levis

Ich habe jetzt auch schon so viel probiert, komme aber auf keine gescheite Lösung, die in allen gängigen Browsern brauchbar ist...

form follows function, vielleicht einfach ein wenig Spielraum lassen für andere Sachen?

Rinaldo · 27.12.2007, 19:45

Zitat:

Zitat von hero-master

in allen IE Versionen getestet und im FF

Kann dem zustimmen und hab´s auch noch im Opera9.5 angesehen - kein Fehler zu sehen...

Zitat:

Zitat von Levis

Da zerstört die vertikale Scrollleiste das Design, und eine vertikale gibts überhaupt nicht..

Wie kann etwas, das gar nicht existiert, ein Design zerstören weil es da ist?

Levis · 27.12.2007, 20:46

Zitat:

Wie kann etwas, das gar nicht existiert, ein Design zerstören weil es da ist?

Da hast natürlich Recht

Ich meinte, dass die horizontale Leiste nicht existiert.

Auf dem Screenshot seht Ihr, wie es im Internet Explorer 7 aussieht. Achtet auf die Scrollleiste rechts...

Levis · 27.12.2007, 20:50

Um etwas konkreter zu werden: Im Anhang befindet sich das Design. Der weiße Bereich unter News bis ausschließlich der unteren orangenen Linie soll scrollbar sein. Der Rest soll immer fest stehen...

hero-master · 27.12.2007, 21:49

Was hast du denn für eine Auflösung?

Kannst ja mal an meinem Ding herumexperimentieren, und die größen an dein Design anpassen. Bei mir sieht das alles ganz gut aus auf 1280x800

theo · 28.12.2007, 12:55

HTML-Code:

<?xml version="1.0"?>
<!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" xml:lang="en" lang="en">
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      * { margin: 0; padding: 0; }
      html, body { overflow: hidden; }  /* body wieder nur fuer ie6 */
      body {
        background-color: #000;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: small;
      }
      #wrapper {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #fff;
      }
      #head {
        position: absolute;
        top: 0;
        left: 200px;
        height: 50px;
        width: 100%;
        background-color: #ddd;
        z-index: 20;
      }
      #head h1 {
        position: absolute;
        left: 10px;
        bottom: 5px;
        font-size: 150%;
        color: #fff;
      }
      #navi {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 200px;
        background-color: #eee;
        overflow: hidden;
        z-index: 20;
      }
      #footer {
        position: absolute;
        bottom: 0;
        left: 200px;
        height: 35px;
        width: 100%;
        background-color: #333;
        overflow: hidden;
        z-index: 20;
      }
      #content {
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 35px;
        left: 200px;
        padding: 10px;
        overflow: auto;
        color: #666;
      }
      #content p {
        line-height: 1.5em;
        font-size: 1em;
        margin-bottom: 0.5em;
      }
      * html #content { /* kleiner fix fuer den doofen ie6 */
        position: absolute;
        top: 0;
        left: 0;
        border-top: 50px solid #fff;
        border-bottom: 35px solid #fff;
        border-left: 200px solid #fff;
        height: 100%;
        width: 100%;
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
    
      <div id="head"></div> <!--end head -->
      
      <div id="navi"></div> <!--end navi -->
      
      <div id="footer"></div> <!--end footer -->
      
      <div id="content">
        <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer iaculis mi faucibus sapien. Fusce quis nisi eu urna pharetra rutrum. Nulla dolor. Pellentesque a risus. Pellentesque id erat vel elit consectetuer adipiscing. Morbi eu pede dictum nulla lobortis sodales. Curabitur nulla leo, nonummy quis, hendrerit sit amet, interdum viverra, augue. Quisque vestibulum euismod neque. Pellentesque dui. Sed consequat. Fusce sapien. Nunc at leo vel massa congue lobortis. In posuere purus. Vivamus fringilla cursus magna. Morbi augue lacus, aliquet et, rutrum et, dictum a, nulla. Pellentesque lacinia ipsum vel mauris. Nunc ac lacus. Morbi eget metus elementum tortor pellentesque venenatis.
</p>
<p>
Donec aliquet odio vitae turpis. Donec ut sapien id ipsum eleifend commodo. Sed quis nisi. Integer arcu. Donec vel leo non orci tincidunt blandit. Phasellus nunc arcu, laoreet eu, egestas nec, imperdiet ac, urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui. Donec erat libero, lobortis semper, cursus quis, imperdiet at, pede. Sed at justo. Suspendisse lectus.
</p>
<p>
Donec urna eros, feugiat quis, varius a, dignissim vel, justo. Etiam turpis massa, tristique eu, pretium ac, suscipit sollicitudin, risus. Vestibulum ipsum ipsum, facilisis id, venenatis ut, eleifend eget, augue. Ut non velit eu sem dignissim pharetra. Donec ut tortor et odio condimentum faucibus. Praesent non eros sodales magna ultricies rhoncus. Aliquam pellentesque viverra nunc. Quisque dolor ipsum, mollis at, volutpat eu, lobortis quis, lorem. Cras est. Morbi et enim sit amet odio iaculis tincidunt. Phasellus nec lorem.
</p>
<p>
Nulla lectus. Aenean egestas, metus vitae lobortis vehicula, tortor lacus convallis nisi, vel sodales urna odio convallis enim. In molestie. Duis lorem. Ut mollis fermentum nunc. Phasellus tincidunt posuere nibh. Nam ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at tellus. Sed a nunc. Cras egestas auctor sem. Fusce commodo tortor at lectus. Proin lacinia, erat eu pharetra cursus, leo sem varius ipsum, ac fermentum erat ipsum vitae magna. Proin semper lorem non sapien. Suspendisse rutrum pede sit amet enim. Aliquam sodales magna quis est. Sed nec nisl. Nulla tincidunt imperdiet enim. Donec quis lacus.
</p>
<p>
In ante libero, accumsan eu, semper in, facilisis ac, mi. Nunc feugiat pellentesque orci. Morbi viverra vulputate turpis. Nullam velit lorem, tristique a, tristique sed, bibendum eu, mauris. Suspendisse nec pede nec velit tincidunt convallis. Nam non enim. Curabitur faucibus nisi sed quam. Vestibulum fringilla, mauris rutrum eleifend mollis, massa ligula vehicula eros, eu tempor tortor urna sit amet neque. Fusce placerat tortor sed eros. Mauris et purus a purus hendrerit mattis. Curabitur ac justo quis turpis fermentum consequat. Cras nunc. Morbi in quam ut massa hendrerit gravida. Donec at odio in tellus cursus euismod. Integer varius nibh ut mauris. In pretium augue eu quam. Proin et libero eu metus vestibulum feugiat. Maecenas est nisi, volutpat eu, viverra luctus, dignissim ut, sem. Nullam rhoncus dolor vel quam. Nunc ac neque.
</p>

<p>
In tincidunt molestie leo. Nullam et purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus commodo diam. Aenean feugiat odio. Sed gravida risus et justo porta fermentum. Nullam tincidunt ligula non arcu. Morbi posuere, neque id pulvinar consectetuer, urna justo malesuada quam, vitae molestie diam enim vel tortor. In urna mauris, sodales sit amet, fringilla non, rhoncus sit amet, massa. Quisque varius.
</p>
<p>
Donec id quam nec enim tempus congue. Phasellus mollis laoreet justo. Integer dui quam, dignissim a, volutpat nec, egestas quis, arcu. Curabitur risus. Aliquam pulvinar, neque tristique elementum semper, elit magna tristique magna, lobortis pharetra tellus ante ac enim. Sed aliquet, mi mattis convallis viverra, dolor augue egestas tellus, consectetuer suscipit dolor libero nec nisi. Duis at magna. Donec imperdiet auctor augue. Sed sit amet sem. Fusce varius sapien in sem pulvinar consequat. Suspendisse erat.
</p>
<p>
Nullam turpis. Ut venenatis. Vivamus viverra laoreet metus. Nulla facilisi. Suspendisse at nisl. Aliquam pretium enim tincidunt mauris. Duis felis augue, ultrices ut, ornare ornare, mattis vitae, dolor. Duis adipiscing, lorem ut adipiscing porttitor, turpis nunc vehicula turpis, nec tristique arcu ligula at mauris. Aenean blandit, elit ut fringilla semper, ante massa pretium nisl, id sagittis urna felis ut quam. Nullam vitae nunc et eros posuere pulvinar. Aliquam rutrum mollis risus. Donec dolor risus, tincidunt vel, venenatis non, consequat id, orci. Donec gravida volutpat tellus.
</p>
<p>
Praesent feugiat, velit quis dictum tempus, augue augue rhoncus augue, gravida porttitor nisl elit eget dui. Suspendisse a felis. Quisque pellentesque sem vitae ligula. Proin commodo. Suspendisse ut orci sed orci faucibus mollis. Suspendisse potenti. Sed eu turpis. Vestibulum consequat porta nisl. Aliquam nibh ligula, bibendum eget, rhoncus eget, bibendum eu, dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut dui. Phasellus purus quam, mollis eget, cursus et, elementum non, dolor. Nulla id justo vitae tortor eleifend semper. Nullam sit amet lorem ac augue ultricies dignissim. Vestibulum leo arcu, laoreet quis, semper non, molestie ac, purus. Integer aliquam magna eget leo. Suspendisse mattis libero accumsan orci. Nam tristique pede eu lorem. Donec aliquet. Cras elementum eros sed magna.
</p>
<p>
Donec justo. Mauris adipiscing, nulla quis ornare tempor, justo eros iaculis nisi, sed tempus est elit eget risus. Maecenas suscipit. Ut nec enim. Sed massa dui, tempus ac, accumsan nec, ornare at, neque. Nunc orci. Vestibulum fringilla, justo at ornare laoreet, dui elit suscipit metus, sed ultrices leo augue vulputate erat. Curabitur mattis lobortis velit. Phasellus quam velit, sodales at, porta sagittis, rutrum vitae, mi. Morbi a urna sed elit feugiat sollicitudin.
</p>
      </div> <!--end content -->
      
    </div> <!--end wrapper -->
  </body>
</html>

... in der art?

position: fixed deluxe

Mia Bayern hoid...