2 Fieldsets untereinander - 1 soll fixiert sein beim scrollen

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Hallo Community,

ich möchte innerhalb einer Tabellenzelle 2 <fieldset> untereinander erstellen.
Das obere soll ein Bild enthalten und das untere einen seeeehr langen Text.
Nun hätte ich es gerne so gemacht, dass das obere <fieldset> beim Scrollen stehen bleibt und das untere sich dann nach oben wegscrollt.

Ist das machbar?

Danke für die Hilfe :)
 
Hi,

vielleicht hilft dir da dieses Modell weiter?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Eiszwerg</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

html {
overflow-x:auto;
overflow-y:hidden;
}

body {
overflow-y:auto;
}

td.scrollCell {
height:300px;
position:relative;
}

div.scrollBox {
height:300px;
overflow:auto;
}

fieldset {
margin:5px;
}

fieldset#header {
position:fixed;
}

fieldset#text {
margin-top:120px;
}

legend {
border:1px solid black;
background:#BBBBBB;
padding:0 2px 0 2px;
font-weight:bold;
}

div.desc {
padding:5px;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
fieldset#header { position:absolute; }
</style>
<![endif]-->

</head>
<body>

<table><tr><td class="scrollCell">
<div class="scrollBox">
       <fieldset id="header">
                 <legend>Preview</legend>
                 <div class="desc">
                      <img src="..." alt="...">
                 </div>
       </fieldset>
       <fieldset id="text">
                 <legend>Textbeschreibung</legend>
                 <div class="desc">
                      <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>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>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>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>
                 </div>
       </fieldset>
     </div>
</td></tr></table>

</body>
</html>
 
Das sieht schon sehr geil aus :)
Werde das später mal einbauen, wenn ich mit meiner Wohnung durch bin. Heute ist Putztag :rolleyes:

Melde mich anschliessend, ob's geklappt hat :)

Vielen Dank soweit!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück