Designvorlage Menü über Grafik

**DIEBABS** · 02.01.2007, 20:27

Hallo!

Bin ein absoluter Neuling und beschäftige mich seit 2 Tagen mit Typo 3 und versuche während dem Durcharbeiten des Buches auch gleich eine HP zu erstellen. Nun stellt sich für mich folgendes Problem. Ich habe eine Designvorlage erstellt und auch geladen. Funktioniert super. Nun möchte ich ein Menü über die Grafik stellen (und zwar die erstellten Folgeseiten als Menü). Wenn ich aber lt. Buch den Marker setzte, dann verrutscht das gesamte Design und ich kann das Menü einfach nicht über die Grafik setzten.

Auch wenn ich die HP voll und ganz im template erstellt (in Tabellen) funkt es mit HMENU nicht. Bitte Tips oder eine Anleitung wie ich es machen kann.

danke!

**Kurt51** · 03.01.2007, 11:46

Wenn ich alles richtig vermute (leider kann man nur erahnen, welches Problem Du hast - demnächst bitte etwas detaillierter beschreiben!), dann kannste das mit Tabellen vergessen!
Du nimmst statt dessen DIVs, die Du im CSS absolut positionierst und ihnen einen z-index zuweist. In der Designvorlage stellst Du Deine Subparts oder Marker dann in dieses div ein.
Beispiel:

Code:

<div class="menue">
   <!-- ###menue### Beginn -->
        Menue01
        Menue02
   <!-- ###menue### Ende -->
</div>

**DIEBABS** · 08.01.2007, 15:31

Zitat von Kurt51

Wenn ich alles richtig vermute (leider kann man nur erahnen, welches Problem Du hast - demnächst bitte etwas detaillierter beschreiben!), dann kannste das mit Tabellen vergessen!
Du nimmst statt dessen DIVs, die Du im CSS absolut positionierst und ihnen einen z-index zuweist. In der Designvorlage stellst Du Deine Subparts oder Marker dann in dieses div ein.
Beispiel:

Code:

<div class="menue">
   <!-- ###menue### Beginn -->
        Menue01
        Menue02
   <!-- ###menue### Ende -->
</div>

Hallo! Sorry weil nicht detailliert. Ich probiers nochmal.

Meine Designvorlage:
<html>
<head>
<title>IRINA</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="365"><img src="fileadmin/beispiel_1/template/Spalte1.jpg" width="366" height="218" border="0" alt="" title="" /></td>
<td width="412"><img src="fileadmin/beispiel_1/template/Spalte2.jpg" width="413" height="218" border="0" alt="" title="" /></td>
<td width="203"><img src="fileadmin/beispiel_1/template/Spalte3.jpg" width="203" height="218" border="0" alt="" title="" /></td>
</tr>
</table><table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="365"><img src="fileadmin/beispiel_1/template/Spalte1_K.jpg" width="366" height="410" border="0" alt="" title="" />
</td>
<td width="615" bgcolor="#D5D9CF">


<h1>Probeschrift</h1>

</td>
</tr>
</table>
<img src="fileadmin/beispiel_1/template/Fusszeile.jpg" width="981" height="26" border="0" alt="" title="" />

</body>
</html>

wobei das Menü (sämtliche Unterseiten dieser Seite) über dem Bild Spalte1 generiert werden soll.
Also sollte Spalte1 als Hintergrund für das Menü ausfallen.

lg

**Kurt51** · 09.01.2007, 11:30

Du hast ja nirgends einen Menü-Marker oder Menü-Subparts!?!?!?
Guck mal:

<html>
<head>
<title>IRINA</title>
<style>
.menu { z-index:100; position: absolute; left:0px; top:0px; background:transparent; width:366px; height:218px; border:1px solid red; }
.tabellen { z-index:1; position: absolute; left:0px; top:0px; background:#ffffcc; }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="menu">

<ul>
<li>Menue1
<li>Menue2
</ul>

</div>
<div class="tabellen">
<table width="980" border="01" cellpadding="0" cellspacing="0">
<tr>
<td width="365"><img src="fileadmin/beispiel_1/template/Spalte1.jpg" width="366" height="218" border="0" alt="" title="" /></td>
<td width="412"><img src="fileadmin/beispiel_1/template/Spalte2.jpg" width="413" height="218" border="0" alt="" title="" /></td>
<td width="203"><img src="fileadmin/beispiel_1/template/Spalte3.jpg" width="203" height="218" border="0" alt="" title="" /></td>
</tr>
</table>
<table width="980" border="01" cellpadding="0" cellspacing="0">
<tr>
<td width="365"><img src="fileadmin/beispiel_1/template/Spalte1_K.jpg" width="366" height="410" border="0" alt="" title="" />
</td>
<td width="615" bgcolor="#D5D9CF">


<h1>Probeschrift</h1>

</td>
</tr>
</table>
</div>
<img src="fileadmin/beispiel_1/template/Fusszeile.jpg" width="981" height="26" border="0" alt="" title="" />

</body>
</html>

Der DIV "menu" überlagert (z-index) den DIV "tabellen" und damit auch die Tabellen mit ihren Inhalten!

**DIEBABS** · 09.01.2007, 14:36

ich probiers gleich aus!!! - den Menümarker hatte ich schon drinnen, aber dann hats mir nur das Bild verschoben, deswegen habe ich Ihn wieder rausgenommen.
Nochmals danke !!!!!!

**DIEBABS** · 19.01.2007, 16:33

HTML

<html>

<head>
<title>Unbenannte Seite</title>
</head>

<body bgcolor="#ffffff">

<table width="980" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="657" showgridx showgridy usegridx usegridy>
<tr height="218">
<td background="spalte1.jpg" content csheight="218" width="365" height="218" valign="top" xpos="0"><div id="nav">
<br><br><p>Hier kommt das Menü</p>
</div></td>
<td background="Spalte2.jpg" content csheight="218" width="412" height="218" valign="top" xpos="365"></td>
<td background="Spalte3.jpg" content csheight="218" width="203" height="218" valign="top" xpos="777"></td>
<td width="1" height="656" rowspan="3"></td>
<td width="1" height="218"><spacer type="block" width="1" height="218"></td>
</tr>
<tr height="410">
<td background="Spalte1_K.jpg" content csheight="410" width="365" height="410" valign="top" xpos="0"><div id="textierung_links">###INHALT_LINKS###</div></td>
<td bgcolor="#cccccc" content csheight="410" width="615" height="410" colspan="2" valign="top" xpos="365"><div id="textierung">###INHALT_NORMAL###
</div></td>
<td width="1" height="410"><spacer type="block" width="1" height="410"></td>
</tr>
<tr height="28">
<td background="Fusszeile.jpg" content csheight="28" width="980" height="28" colspan="3" valign="top" xpos="0"></td>
<td width="1" height="28"><spacer type="block" width="1" height="28"></td>
</tr>
<tr height="1" cntrlrow>
<td width="365" height="1"><spacer type="block" width="365" height="1"></td>
<td width="412" height="1"><spacer type="block" width="412" height="1"></td>
<td width="203" height="1"><spacer type="block" width="203" height="1"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<td width="1" height="1"></td>
</tr>
</table>
<p></p>

</body>

</html>

TEMPLATE DAZU

# Default PAGE object:
page = PAGE
page.stylesheet = fileadmin/titel.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/SEITE.html
workOnSubpart = DOKUMENT
subparts.MENUE = HMENU
subparts.MENUE {
wrap = <u1>|</u1>
1 = TMENU
1.NO.linkWrap = <li><b> | </b></li>
}
marks {
INHALT_NORMAL = CONTENT
INHALT_NORMAL {
table = tt_content
select {
where = colPos = 0
orderBy = sorting
}
}
INHALT_LINKS = CONTENT
INHALT_LINKS {
table = tt_content
select {
where = colPos = 1
orderBy = sorting
}
}
subparts.INHALT_NORMAL < styles.content.get
}
subparts.INHALT_LINKS < styles.content.get
}
}
}