---
title: "fixieren von Menü/Bild beim Scrollen"
url: "https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen"
source: "typo3.net"
tags: ["TYPO3","Template","Frage","HTML & CSS"]
created: "2004-07-08"
last_reply: "2004-07-23"
replies: 9
solved: false
page: 1
pages: 1
lang: "de"
---

# fixieren von Menü/Bild beim Scrollen

TYPO3 › Template · 9 Antworten · gestartet 2004-07-08

## Eröffnungsbeitrag

**jo.​cologne** · 2004-07-08 · [Beitrag #1](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/1)

Hallo NG,

ich habe bisher noch keine Erfahrung mit Frames.

Ich wollte bei mehr Inhalt und 'herunterscrollen' des Inhaltes mein Menü links und das Bild oben fixieren.

Muss ich da mit iFrame arbeiten oder gibt es andere Möglichkeit(en)?

## Antworten

### [#2](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/2) · FlashKasper · 2004-07-20

hi,

in dem Fall hättest du einfach einen eigenen Frame für dein Menü einen Frame für den Inhalt und einen Frame für das Bild im oberen Bereich. Hier hilft dir sicher selfhtml <http://de.selfhtml.org/html/frames/index.htm> weiter.

Oder du machst das Ganze mit CCS und Layern und kannst somit ganz auf Frames verzichten.

Gruss
FlashKasper

### [#3](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/3) · jo.​cologne · 2004-07-20

Hallo FlashKaspar,

Danke für die Info.
Ich bin bisher in beidem ein greenohr.

Wenn ich es richtig sehe gibt's bei den Seiten mit Frames immer riesen Papiermüll beim Ausdrucken (z.B. bei Netscape). Das wollte ich eigentlich vermeiden.

Da werde ich mich wohl mit css beschäftigen müssen.

Hast Du da auch einen Tipp für den Einstieg??

### [#4](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/4) · tomww · 2004-07-20

auch wenn es vielleicht noch einige gibt die anderer Meinung sind: Ich finde die Zeit für Webseiten mit Frames ist überwiegend vorbei !

SelfHTML ist ganz gut -schau Dir aber mal die Seite an:
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm>

Vor allem position absolute ...

Tom

### [#5](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/5) · Unbekannter Benutzer · 2004-07-20

na dann mach mir doch mal n vorschlag dazu, ich lerne ja gerne:
habe content mit ner festen breite von 750 und ner höhe von 600, der immer zentriert angezeigt werden soll. bisher fällt mir dazu nur ein frameset mit 3 reihen und 3 spalten ein, bei dem jeweils 2 reihen/spalten spacer sind...

### [#6](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/6) · Gatekeeper · 2004-07-21

Mir fällt da auch noch 'ne Tabelle ein, die zugegeben nicht eleganter ist, oder css, wobei du für eine vertikale Zentrierung evtl. Javascript/PHP brauchst.

### [#7](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/7) · jo.​cologne · 2004-07-21

Hallo Tom,

ich mache gerade meine ersten Gehversuche.
Habe auch meine HTML Datei umgestellt von Tabellenform auf CSS, siehe unten

ohne Typo3 klappts prima, nur wenn ich die Datei uebernehme, dann stehen auf einmal alle Elemente untereinander...

Ich habe die Kurve zu Typo3 noch nicht.
Wahrscheinlich muss ich mein Template auch umbauen?

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

</head>
<style type="text/css">
<!--
body { }
#boxblue { position:absolute; top:0px; left:000px; width:194px; height:612px; z-index:1; }
#boxlogo { position:absolute; top:0px; left:0px; width:194px; height:60px; z-index:2; }
#boxmenu { position:absolute; top:65px; left:0px; width:194px; height:500px; z-index:2; }
#boxbild { position:absolute; top:0px; left:194px; width:810px; height:306px; z-index:3; }
#boxinhalt { position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:4; }
-->

</style>

<!--###DOKUMENT###-->
<div id="boxblue" style="background:#ADE3FF; border:solid 2px orange;"></div>
<div id="boxlogo" style="border:solid 2px orange;">###LOGO###</div>
<div id="boxmenu" style="border:solid 2px orange;">###MENU###
###SPRACHE###</div>
<div id="boxbild" style="border:solid 2px orange;">###BILD###</div>
<div id="boxinhalt" style="border:solid 2px orange;">###INHALT###</div>

</div>
<!--###DOKUMENT###-->

</html>
_________________

### [#8](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/8) · tomww · 2004-07-21

@Jörg,
hast Du mal den HTML-Output von Deiner Typo3-Seite angeschaut ?
Am HTML-Code unten ist mir nur aufgefallen, dass Du kein <body>- Tag hast

Normallerweise ergänzt Typo ja Header und Body.
Da wäre es weise die css-Datei in eine externe Datei auszulagern und diese über Typoscript einzubinden ....

Wenn Du nicht weiterkommst und die Seite irgendow online ist, bitte einen Link posten dann schau ich noch einmal ...

@Daniel_S,
wie schon jemand anmerkte wäre da auf jeden Fall eine Tabelle besser als Frames - mit css müßte ich auch erst mal rumprobieren - wenn ich was hinbekomme poste ich es hier ... (geht wohl wirklich nur über javascript - also doch besser eine Tabelle bauen ...)

Tom

### [#9](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/9) · jo.​cologne · 2004-07-23

Hallo Tom,

Danke für Deinen Tipp.

Bin jetzt auch schon weiter! Das css klappt jetzt so wie mit meiner Tabelle, gut.

Was ich noch nicht hin bekommen habe, ist das das Logo, Menü und Header Gif beim Scrollen nach unten stehen bleibt (immer am Platz zu sehen).

Hier der Code:
++++++++++++++++++++
indextemplate.html

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

</head>
<style type="text/css">
<!--
body { }
#boxblue      { position:absolute; top:0px; left:000px; width:194px; height:612px; z-index:1; }
#boxlogo      { position:absolute; top:0px; left:0px; width:194px; height:60px; z-index:2; }
#boxmenu    { position:absolute; top:65px; left:0px; width:194px; height:500px; z-index:2; }
#boxbild       { position:absolute; top:0px; left:194px; width:810px; height:306px; z-index:3; }
#boxinhalt    { position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:4; }
-->

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

</div>
<!--###DOKUMENT###-->
</body>
</html>

+++++++++++++++++++++++
styles.css:

body { }
#boxblue      { border:solid 2px orange;position:absolute; top:0px; left:000px; width:194px; height:612px; z-index:1; }
#boxlogo      { border:solid 2px orange;position:absolute; top:0px; left:0px; width:194px; height:60px; z-index:2; }
#boxmenu    { border:solid 2px orange;position:absolute; top:65px; left:0px; width:194px; height:500px; z-index:2; }
#boxbild       { border:solid 2px orange;position:absolute; top:0px; left:194px; width:810px; height:306px; z-index:3; }
#boxinhalt    { border:solid 2px orange;position:absolute; top:326px; left:214px; width:770px; height:274px; z-index:4; }

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

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

+++++++++++++++++++++++++++++++++

### [#10](https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen/10) · doku · 2004-07-23

<http://devnull.tagsoup.com/fixed/>

---

Quelle: „fixieren von Menü/Bild beim Scrollen“, typo3.net, https://www.typo3.net/d/13274-fixieren-von-menuebild-beim-scrollen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.