fixieren von Menü/Bild beim Scrollen

jo.cologne · 8. Juli 2004 11:18

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

FlashKasper · 20. Juli 2004 15:42

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

jo.cologne · 20. Juli 2004 19:11

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

tomww · 20. Juli 2004 23:32

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

Unbekannter Benutzer · 20. Juli 2004 23:48

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

Gatekeeper · 21. Juli 2004 14:08

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.

jo.cologne · 21. Juli 2004 14: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?

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

</style>

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

</html>
_________________

tomww · 21. Juli 2004 20:24

@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

jo.cologne · 23. Juli 2004 08:51

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

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

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

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

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

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

doku · 23. Juli 2004 09:59

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