Hi ich habe ein Textmenü, welches mit CSS deisgnt ist. Vor jedem Link soll allerdings noch ein Pfeil stehen.
Mein Versuch im Typoscript war nun folgender:
NO.allWrap = <div class="menue_link"><img src='fileadmin/images/blauer_pfeil.gif'> | </div>
Ich dachte damit löse sich das Problem. Der Pfeil wird auch wunderbar eingebunden jedoch jeweils eine Zeile über dem Link, d.h. der Pfeil erscheint und dann eine Zeile drunter erst der Link...
Irgendjemand ne Idee?
Ah nochwas: Die Links sind im css mit display:block; definiert... Ich habe rausgefunden dass "none" z.B. das Problem behebt, dann zerroppts mir aber leider die gesamte navigation. Deswegen brauche ich das disply:block;...
Gruss vielen Dank
Flo
sorry ich bin noch nicht so der typocrack.... kannst du mir das genauer erläutern!?
Tag,
also im typoscript schaut das dann so aus:
NO {
beforeImg = fileadmin/beforeimg.gif
beforeROImg = fileadmin/beforero.gif
}
beforROImg ist nicht nötig die ist nur für den rollover zuständig
MFG
Dander
hi, schön er setzt den Pfeil.... Dummerweise immer noch eine Zeile drüber....
Trotzdem danke für die hilfe
gib mir mal dein setup bitte
MFG
Dander
# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/home.html
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
}
# Prefix all relative paths with this value:
relPathPrefix = fileadmin/
}
# Menu 1 cObject
temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <img src="fileadmin/images/blauer_pfeil.gif" width="5" height="10" border="0"><div class="menue_link"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menue_link_dummy_active"> | </div>
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="submenue_link"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="submenue_link_dummy_active"> | </div>
}
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
# Substitute the ###menu_1### subpart with dynamic menu:
subparts.menu_1 < temp.menu_1
# Substitute the ###content### subpart with some example content:
subparts.content < styles.content.get
}
# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
page.bodyTag = <body background="fileadmin/images/bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate
pack das bild in das div rein
hab ich auch schon gemacht! Hat nicht funktioniert!
Gruss florian
nimm das div mal raus...
und probier es dann
( was steht im quelltext??)
MFG
Dander
ohne div-tag gehts zwar aber er zerroppt mir deie navigation...
hier ist der generierte html code (jedenfalls der anfang)
<td id="menu_1"><img src="images/blauer_pfeil.gif" width="5" height="10" border="0"><a href="index.php?id=7" onfocus="blurLink(this);">Profil</a><img src="images/blauer_pfeil.gif" width="5" height="10" border="0"><a href="index.php?id=6" onfocus="blurLink(this);">Link</a>
Guten Tag,
kannst mal das ausprobieren:
In der Designvorlage (HTML-Quellcode):
<div id="nav_1_body">###DEINE_NAVIGATION###</div>
Im TEMPLATE SETUP:
# ----------------- DEINE_NAVIGATION----------------- #
#DEINE_NAVIGATIONpage.10.marks.DEINE_NAVIGATION_1 = HMENU
page.10.marks.DEINE_NAVIGATION_1.1 = TMENU
page.10.marks.DEINE_NAVIGATION_1.1 {
NO.RO = 0
}
(Anmerkung: es muss etwas zwischen den geschweiften Klammern stehen, z. B. NO.RO = 0 muss, sonst funktioniert es nicht.)
Im Stylesheet:
#nav_1_body {
background-image: url(images/nav_body.gif); background-repeat: repeat-y;
width: 158px;
}
#nav_1_body a {
color: #012873;
display: block;
background-image: url(images/nav_1.gif);
background-repeat: no-repeat;
width: 158px;
height: 28px;
padding: 6px 0px 0px 22px;
border: none;
}
#nav_1_body a:hover {
background-image: url(images/nav_1_hover.gif); background-repeat: no-repeat;
}
Die Stylesheet-Definitionen können von Fall zu Fall unterschiedlich ausfallen, kommt halt drauf an, was man will. In diesem Beispiel wird ein Mouseover-Effekt erzielt mit einem Pfeil davor (ohne JavaScript). Das funktioniert immer, auch wenn JavaScript aus.
Es gibt zwei unterschiedliche Bilder:
nav_1.gif = Bild im Normalzustand
nav_1_hover.gif = Bild mit Pfeil
Damit der Menütext nicht über dem Pfeil steht, wird er mittels Padding ein bisschen nach rechts versetzt. Padding oben ist erforderlich, damit der Menüpunkt in der Mitte des a-Containers steht.
Anmerkung: Leider interpretiert Mozilla die padding-Angaben etwas anders als der IE, deshalb ist das Erscheinungsbild etwas anders, aber keinesfalls zerschossen.
Gruß anbei
Stefan
Hi Stefan,
vielen Dank für deine Lösung... Das selbe hatte ich mir auch schon überlegt... Nur wie du bereits sagtest der Mozilla.... und der Opera erst recht...
Aber ich hab eine viel einfachere Lösung gefunden! ;D
Wenn man die Grafik mit in den Link setzt, dann geht es. Bsp.
<a href="linkseite.php"><img src="test.gif" border="0">Ab zur Linkseite</a>
Dann wird alles korrekt angezeigt.... und sogar in allen Browsern! ;D
Gruss danke Flo
Guten Tag Flo(rian),
unter www.linkmule.de/navigation/index.html findest Du
ein kleines Beispiel für eine css-Navigation.
Wenn man innerhalb des <a>-Tags noch was tippern kann, gibt es diese Lösung:
<a href="#" id="nav_1"><div id="nav_1_text">Nav 1</div></a>
Das Problem mit der unterschiedlichen Interpretation von Padding (IE <-> Mozilla & Co.) ist dann behoben.
Allerdings weiß ich nicht, wie ich in Typo3 angeben kann, dass innerhalb des <a>-Tags noch zusätzlicher Code stehen soll (<div id="nav_1_text>...).
Mit den verschiedenen Wrap-Tags (beforeWrap, afterWrap etc.) habe ich es getestet, funktionierte aber nicht.
In Deinem Beispiel gibt es innerhalb des <a>-Tags auch noch Code
<img src="test.gif" border="0">.
Wie machste das (mit beforeROImg)?
Schöne Grüße
Stefan
ich habs mit prepend gelöst:
NO {
#including the blue arrow
stdWrap.prepend = TEXT
stdWrap.prepend.dataWrap = <img src="fileadmin/images/blauer_pfeil.gif" width="5" height="10" border="0">
allWrap = <div class="menue_link"> | </div>
}