---
title: "css Elemente fixieren"
url: "https://www.typo3.net/d/13905-css-elemente-fixieren"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2004-07-24"
last_reply: "2004-07-25"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# css Elemente fixieren

Allgemein · 1 Antwort · gestartet 2004-07-24

## Eröffnungsbeitrag

**jo.​cologne** · 2004-07-24 · [Beitrag #1](https://www.typo3.net/d/13905-css-elemente-fixieren/1)

Hallo NG,

entlich habe ich es geschafft, das die Elemente des Menüs beim Scrollen nicht nach oben verschwinden.
Auch beim Test ohne Typo3 klappts prima mit allen Browsern (selbst mit IE).

Nachdem ich die html und css nach Typo3 übertragen habe, es klappt bei allen Browsern, NUR BEI IE  #evil# fehlt eine Box mit einem Bild vom Gifbuilder.

Ich bin am verzweifeln...   ...und hoffe irgendwer von Euch hat eine Idee.

Mein Code:

+++++++++++++++++
css:
body { }
#boxblue {
         background-color: #ADE3FF;
         position: absolute;
         top: 0;
         left: 0;
         width:194px;
         height:768px;
         z-index:1;
         position: expression("absolute");
         top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
      }
#boxblue[id] {
         position: fixed;
      }
#boxlogo {
         position: absolute;
         top: 20;
         left: 31;
         width:194px;
         height:60px;
         z-index:2;
         position: expression("absolute");
         top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
      }
#boxlogo[id] {
         position: fixed;
      }
#boxmenu {
         position: absolute;
         top: 70;
         left: 0;
         width:194px;
         height:708px;
         z-index:2;
         position: expression("absolute");
         top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
      }
#boxmenu[id] {
         position: fixed;
      }
#boxbild {
         position: absolute;
         top: 0;
         left: 194;
         width:810px;
         height:306px;
         z-index:3;
         position: expression("absolute");
         top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
      }

#boxbild[id] {
         position: fixed;
      }

#boxinhalt    { position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:2; }

margin-right : 0px;
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     font-style: normal;
     font-family: verdana

+++++++++++++++++++++++
html:
<html>
<head>
<!--###HEADER_CODE###-->

</head>
<style type="text/css">

</style>
<body bgcolor="#FFFFFF" text="#000000">
<!--###DOKUMENT###-->
<div id="boxblue" style="background:#ADE3FF"></div>
<div id="boxlogo" >###LOGO###</div>
<div id="boxmenu" >###MENU###<br>###SPRACHE###</div>
<div id="boxbild" ">###BILD###</div>
<div id="boxinhalt" >###INHALT###</div>

</div>
<!--###DOKUMENT###-->
</body>
</html>
++++++++++++++++++++++
template:

# Diverse Konfigurationen

# setze Standardsprache
config.linkVars = L
config.sys_language_uid = 0
config.locale_all = deutsch
config.language = de

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = en
[global]

[globalVar = GP:L = 2]
config.sys_language_uid = 2
config.language = sp
[global]

plugin.tx_sriframe_pi1._CSS_DEFAULT_STYLE = .tx-sriframe-pi1 { height:200%; }

# show ADM Panel
config.admPanel = 1

# style classes defined in RTE
page.insertClassesFromRTE = 0

# Defauslt PAGE object:
seite = PAGE
seite.typeNum = 0
seite.bodyTag = <body bgcolor = #FFFFFF>
seite.stylesheet = fileadmin/styles.css

seite.50 = TEMPLATE
seite.50 {
   template = FILE
   template.file = fileadmin/indextemplate.html
   workOnSubpart = DOKUMENT

marks.LOGO = IMAGE
   marks.LOGO.file = GIFBUILDER
   marks.LOGO {
      file = fileadmin/pineologo.gif
      transparentBackground = 1

}
   # Menu 1.Ebene NOrmal
   marks.MENU = HMENU
   marks.MENU.entryLevel = 1
   marks.MENU.1 = GMENU
   marks.MENU.1.expAll = 0
   marks.MENU.1.NO {
      # backColor = #DDDDDD
      backColor = #ABE1FA
      # XY = [10.w]+40, 40
      XY = 166, 40
      10 = TEXT
      10.text.field = title
      10.fontFile = fileadmin/fonts/sssbi.ttf
      10.fontSize = 16
      10.fontColor = #0089CE
      10.offset = 24,30
      10.niceText = 1
      allWrap = <tr heigh="20"><td class="navi">|</td></tr>
      before = &nbsp; <BR>
}

# Menu 1.Ebene ACTiv
   # Das vererben mit .< funktioniert scheinbar nicht richtig
   marks.MENU = HMENU
   marks.MENU.entryLevel = 1
   marks.MENU.1 = GMENU
   marks.MENU.1.expAll = 0
   marks.MENU.1.ACT = 1
   marks.MENU.1.ACT {
      # backColor = #DDDDDD
      backColor = #ABE1FA
      XY = 166, 40
      10 = TEXT
      10.text.field = title
      10.fontFile = fileadmin/fonts/sssbi.ttf
      10.fontSize = 16
      10.fontColor = #FFFFFF
      10.offset = 24,30
      10.niceText = 1
      allWrap = <tr heigh="20"><td class="navi">|</td></tr>
      before = &nbsp; <BR>
}

# Menu 2.Ebene
   marks.MENU.2 = GMENU
   marks.MENU.2.NO {
      # backColor = #CDCDCD
      backColor = #ABE1FA
      XY = [10.w]+40, 20
      XY = 166, 25
      10 = TEXT
      10.text.field = title
      10.fontFile = fileadmin/fonts/verdana.ttf
      10.fontSize = 11
      10.fontColor = #0089CE
      10.offset = 38,12
      10.niceText = 0
      5 = IMAGE

5.file = fileadmin/imgno.gif
      5.offset = 22,3
      allWrap = <tr heigh="20"><td class="navi">|</td></tr>
      before = &nbsp; <BR>

}

# Menu 2.Ebene Mouseover
   # marks.MENU.2.RO < marks.MENU.2.NO
   # marks.MENU.2.RO = 1
   # marks.MENU.2.5.file = fileadmin/roimg.gif
   # Menu 2.Ebene Mouseover
   marks.MENU.2 = GMENU
   marks.MENU.2.RO = 1
   marks.MENU.2.RO {
      # backColor = #CDCDCD
      backColor = #ABE1FA
      XY = [10.w]+40, 20
      XY = 166, 25
      10 = TEXT

10.text.field = title
      10.fontFile = fileadmin/fonts/verdana.ttf
      10.fontSize = 11
      10.fontColor = #0089CE
      10.offset = 38,12
      10.niceText = 0
      5 = IMAGE
      5.file = fileadmin/imgro.gif
      5.offset = 22,3
      allWrap = <tr heigh="20"><td class="navi">|</td></tr>
      before = &nbsp; <BR>
}

# Menu 2.Ebene ACTtiv
   # marks.MENU.2.ACT < marks.MENU.2.NO
   # marks.MENU.2.ACT = 1
   # marks.MENU.2.5.file = fileadmin/roimg.gif
   marks.MENU.2 = GMENU
   marks.MENU.2.ACT = 1
   marks.MENU.2.ACT {
      # backColor = #CDCDCD
      backColor = #ABE1FA
      XY = [10.w]+40, 20
      XY = 166, 25
      10 = TEXT
      10.text.field = title
      10.fontFile = fileadmin/fonts/verdana.ttf
      10.fontSize = 11
      10.fontColor = #0089CE
      10.offset = 38,12
      10.niceText = 0
      5 = IMAGE
      5.file = fileadmin/imgact.gif
      5.offset = 22,3
      allWrap = <tr heigh="20"><td class="navi">|</td></tr>
      before = &nbsp; <BR>
}

marks.BILD = IMAGE
   marks.BILD.file = GIFBUILDER
   marks.BILD.file {
      XY = 810,306
      10 = IMAGE
      format = jpg-image
      quality = "100"
      10.file = fileadmin/pineo_m_o.jpg
   }

marks.SPRACHE = PHP_SCRIPT
   marks.SPRACHE {
   file = fileadmin/languageMenu.php

}
   # ############## NEWS Einblendung
   marks.NEWS = TEXT
   marks.NEWS < styles.content.getBorder

#styles.content.get ist das selbe!!
   marks.INHALT = CONTENT
   marks.INHALT.table = tt_content
   marks.INHALT {
      select.orderBy = sorting
      # wenn Spalte Links oder Normal eingetragen wurde (normal <2)
      select.where = colPos < 5
      select.languageField = sys_language_uid
'<table border="0" cellpadding="0" cellspacing="0"><tr><td><img src="clear.gif" width="30" height="1" alt="" /></td><td>'.implode('',$flags).'</td></tr></table>'
      }
   # marks.RECHTS < .INHALT
   # marks.RECHTS.select.where = colPos >= 2

}
# Graphische Standard-Header
# "Layout 4"
lib.stdheader.10.4 < styles.header.gfx1
lib.stdheader.10.4.file.10.fontColor = #0089CE
lib.stdheader.10.4.file.10.text.crop >
lib.stdheader.10.4.file.10.fontFile = fileadmin/fonts/sssbi.ttf

lib.stdheader.10.4.file.10.fontSize = 18

# "Layout 5"
lib.stdheader.10.5.file.10.fontFile = fileadmin/fonts/sssbi.ttf
lib.stdheader.10.5.file.10.text.crop >
lib.stdheader.10.5.file.10.fontColor = #ABE1FA
lib.stdheader.10.5.file.10.fontSize = 18

## Antworten

### [#2](https://www.typo3.net/d/13905-css-elemente-fixieren/2) · jo.​cologne · 2004-07-25

Hallo NG,

die Lösung liegt soh nahe.  8-)

Ich muss(te) nur mit etwas abstand den Code von einem Tippfehler befreien.

Netscape, Opera etc. haben den Tippfehler einfach nicht beachtet. Aber IE stellt sich ziemlich zickig dabei an.

Mir fällt dabei auf, beim scrollen im IE, zittern die fixierten Elemente ziemlich. gibt es da einen Kniff das auchnoch zu umgehen?

---

Quelle: „css Elemente fixieren“, typo3.net, https://www.typo3.net/d/13905-css-elemente-fixieren
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.