css Elemente fixieren

jo.cologne · 24. Juli 2004 12:27

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>

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

</style>
<body bgcolor="#FFFFFF" text="#000000">

<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>

</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 =   <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 =   <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 =   <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 =   <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 =   <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

jo.cologne · 25. Juli 2004 18:47

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?