Brüte schon ein Weilchen über folgendem Problem. Ohne Erfolg.
Das Menü sollte aus z.B. nachfolgenden <li></li> gebildet werden.
Dahinter hängt eine CSS-Datei, welche die jeweiligen Einträge mit dem dafür bestimmten GIF verbindet (vgl. css). Was mir schleierhaft ist, wie bringe ich das dynamisch hin, so dass wenn ich im Backend eine neue Seite erstelle, automatisch auch der <li>-Eintrag mit der entsprechenden "neuen" Klasse erstellt wird und ebenso auch die CSS Zeilen mit den "neuen" Klassenangaben erstellt werden (es ändern nur die Dateinamen der GIF's), so dass ich lediglich noch das neue dazugehörige GIF in den Fileadmin hochladen muss.
Hat das schon jemand gemacht oder Erfahrungen damit?
HTML:
<div id="navigation">
<ul id="nav">
<li class="artikel"><a href="#">Artikel</a></li>
<li class="videos"><a href="#">Videos</a></li>
<li class="downloads"><a href="#">Downloads</a></li>
</ul>
</div>
CSS:
ul#nav {
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 78px;
text-indent: -9999px;
float: left;
}
ul#nav li.articles a {
width: 120px;
background: url(designpics/artikel.gif) bottom center no-repeat;
}
ul#nav li.downloads a {
width: 120px;
background: url(designpics/videos.gif) bottom center no-repeat;
}
ul#nav li.videos a {
width: 120px;
background: url(designpics/downloads.gif) bottom center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
Besten Dank
dvm
Ciao maik
Vielen Dank für die Info. Es war zwar nicht ganz das was ich gesucht habe, aber es half mir einen Schritt weiter.
Ich habe nun mit folgendem TypoScript:
# Marker NAV
NAV=HMENU
NAV.special = directory
NAV.special.value = 2
NAV{
1 = TMENU
1.wrap = <ul id="nav">|</ul>
1.NO{
allWrap.insertData = 1
allWrap = <li class="{field:title}">|
wrapItemAndSub = |</li>
}
}
folgendes erreicht:
<div id="navigation">
<ul id="nav">
<li class="Artikel"><a href="#">Artikel</a></li>
<li class="Videos"><a href="#">Videos</a></li>
<li class="Downloads"><a href="#">Downloads</a></li>
</ul>
</div>
Was ich aber nicht verstehe: Wie bringe ich typo3 mittels TypoScript dazu die CSS angaben (vgl. oben) in einem separates, bestehendes CSS-File zu ergänzen, sobald eine neue Seite erstellt wird, welche im Menü erscheint? Sprich, wenn ich einen neue Seite (z.B. Books) erstelle, macht obiges TypoScript automatisch die richtigen HTML Einträge mit der Klasse "Books".
<li class="Books"><a href="#">Books</a></li>
Jetzt müsste im CSS-File (z.B. menu.css) noch folgender Eintrag an richtiger Stelle erstellt werden:
ul#nav li.Books a {
width: 120px;
background: url(designpics/Books.gif) bottom center no-repeat;
}
Geht das überhaupt mit typo3?
Besten Dank.
dvm
Schau mal hier auf der Startseite, da gibts einen Link zu einem Tutorial für dynamische CSS Files:
/faq/dynamisches-css
Damit solltest du weiterkommen. Wenn dir das zu aufwendig ist, mach im Menü ein Inline CSS auf die A-Tags, das ginge ja auch.
Ciao Kitsunet
Merci. Aber das ist mir etwas zu hoch (bin leider nur ganz einfach gestrickt). Irgendwie erstellt man mit Deinem Link einfach eine separate CSS-Datei über TypoScript. Oder verstehe ich das falsch. Wenn ich das richtig verstanden habe, dann hab ich leider keinen Schimmer, wie ich das in irgendwelcher Form mit der Navigation verkünpfe.
Inline-CSS auf dem A-Tag wäre natürlich eine Lösung an welche ich gar nicht gedacht habe. Leider geht so der a:hover nicht. Auch nicht wenn dieser separat noch im CSS steht.
Möglicherweise möchte ich auch zuviel von typo3. Wage mittelerweile zu beweifeln, dass ich durch das Erstellen einer neuen Seite, automatisch einen ensprechenden Menü-Link habe und gleichzeitig ein entsprechender CSS-Schnippsel in eine bestehende CSS-Datei ans Ende reingeschrieben wird.
Besten Dank.
dvm
Hallo dvm,
warum mischst du das ganze nicht einfach? Setze doch einfach die wichtigsten Style-Attribute in-line und das a:hover in einer externen Datei. Also dies hier im TypoScript:
# Marker NAV
NAV=HMENU
NAV.special = directory
NAV.special.value = 2
NAV{
1 = TMENU
1.wrap = <ul id="nav">|</ul>
1.NO{
allWrap.insertData = 1
allWrap = <li class="{field:title}" style="background-image: url(fileadmin/.../designpics/{field:title}.gif);">|
wrapItemAndSub = |</li>
}
}
Beachte hierbei bitte, dass für die Bilder eine relative Pfadangabe abhängig von der Style-Sheet-Datei hier nicht funktioniert. Also musst du den ganzen Pfad im "fileadmin"-Verzeichnis angeben.
Und das hier kommt in die CSS-Datei:
ul#nav li {
display: inline;
width: 120px;
background-position: bottom center;
background-repeat: no-repeat;
}
ul#nav li a {
display: block;
height: 78px;
/*text-indent: -9999px;*/
float: left;
}
ul#nav li a:hover {
background-position: center center;
}
Im HTML sieht das Ganze dann so aus:
<li class="Artikel" style="background-image: url(fileadmin/.../designpics/Artikel.gif);"><a href="#">Artikel</a></li>
Bei dieser Lösung mit dem "{field:title}" musst du allerdings gut aufpassen, dass du keine Leerzeichen oder irgendwelche Sonderzeichen im Seiten-Titel hast, da sonst deine CSS-Klasse und die URL zum Hintergrundbild nicht funktionieren.
Ciao speedprogs
Ich danke Dir recht herzlich für Deinen Input. Manchmal sieht man den Wald vor lauter Bäumen nicht mehr. Es wäre ja so einfach gewesen.
Besten Dank fürs aufrütteln.
Jetzt brauche ich die CSS-Datei nicht mehr jedes Mal um ein paar Codezeilen zu erweitern, wenn ich eine neue Menüseite erstelle. Jetzt muss ich nur noch das dazugehörige Bild erstellen und in den fileadmin hochladen et voilà.
Nochmals besten Dank.
Gruss
dvm
Korrektur:
Sorry. Hab mich zu früh gefreut.
Hab Deinen Input entsprechend verwendet und es hat lustigerweise gleich funktioniert. Der Link wurde mit dem jeweiligen Bild ersetzt und der Hoover hat auch funktioniert. Jetzt hab ich etwas Text in eine Seite reingeschrieben und abgespeichert, und siehe da, es geht nicht mehr. Nun werden mir die Links als Texte angezeigt. Das Bild ist verschwunden und der Hoover geht auch nicht mehr.
Ich verstehe das nicht.
Gruss
dvm
Hallo dvm,
Sorry, mein Fehler. Dein Browser hatte wohl noch das alte CSS im Cache und hat die Links deshalb richtig angezeigt, aber als du deinen Seiten Inhalt hinzugefügt hast, hat er vermutlich das neue CSS geladen. Da ich die Zeile mit dem "text-indent" auskommentiert hatte, wurde nun der Text angezeigt.
Ich habe die Lösung noch mal ein Bisschen überarbeitet. Diese Lösung kommt ohne eine Unordered List (ul) aus und die Links sowie die Zentrierung des Hintergrundbildes beim "hover" funktionieren.
NAV = HMENU
NAV {
special = directory
special.value = 2
1 = TMENU
1 {
wrap = <div class="nav">|</div>
noBlur = 1
NO {
ATagParams {
field = title
wrap = style="background-image:url(fileadmin/.../designpics/|.gif);"
}
}
}
}
Hier das zugehörige CSS:
div.nav a {
display: block;
height: 78px;
width: 120px;
float: left;
text-indent: -9999px;
background-position: center bottom;
background-repeat: no-repeat;
}
div.nav a:hover {
background-position: center center;
}
Und hier das Ergebnis:
<a style="background-image: url(fileadmin/.../designpics/Artikel.gif);" href="link/zu/Artikel.html">Artikel</a>
Genial.
Danke schön.
Jetzt klappts wunderbar.
Schönes Wochenende wünsche.
dvm
IE ist ein dämlicher Browser.
Auf IE 6 kommts nicht schön. Vorallem wegen den png's mit transparenten Bereichen oder transparenten Verläufen.
Naja. Mal schauen.