navigation template

[tlrookie]

hallo typolight profis,

beschäftige mich seit ein paar tagen mit typolight und soweit finde ich dieses cms ganz ok. um ein bischen übung mit dem teil zu bekommen habe ich mir auf der showcase seite mal angesehen was so alles möglich ist. nun wollte ich die www.sorex-austria.com seite nachbauen und habe probleme mit der hauptnavigation.

probleme verursacht first und last.

mein navigationstemplate nav_mainmenu.tpl sieht so aus:

<ul id="navi">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li><a class="activ" href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" id="<?php echo $item['class']; ?>" onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>" id="<?php echo $item['class']; ?>" onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

im browser sieht das dann so aus:

<div id="headerhome" class="header">
<!-- indexer::stop -->
<div class="mod_navigation header block">
<h1>Sorex Austria</h1>
<a href="#skipNavigation1" class="invisible">Navigation überspringen</a>
<ul id="navi">
<li><a class="activ" href="home_flash.html" title="Home" id="linkhome first" onclick="this.blur();">Home</a></li>
<li><a href="aktuell.html" title="News" id="linknews last" onclick="this.blur();">News</a></li>
</ul>
<a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>
</div>
<!-- indexer::continue -->
</div>

speichere ich das ganze als statisches html und entferne ich die first und last tags wird alles wie auf der orginalseite richtig angezeigt.

also sind die zwei tags für die probleme verantwortlich...
nur, wie bekomme ich die first und last tags weg?

danke für eure hilfe.

tlrookie

[BugBuster]

Hast Du CSS Angaben wie

.mod_navigation .first

bzw. mit .last ?

[tlrookie]

hallo BugBugster,

danke dir für die schnelle reaktion...

die klassen .mod_navigation .first ist in keiner css datei vorhanden wie auch auf der orginalseite.

der css teil für die navigation sieht so aus:

#navi {
position: absolute;
top: 40px;
left: 0;
list-style-type: none;
width: 725px;
height: 20px;
background-image: url(../images/bgnavi.gif);
background-repeat: no-repeat;
}

#navi li {
height: 20px;
float: left;
}

#navi li a {
display: block;
height: 20px;
background-repeat: no-repeat;
text-indent: -9999px;
}

#navi li a:hover {
background-position: 0 -20px;
}

#linkhome {width:58px;background-image:url(../images/linkhome.gif);z-index:1;position:relative;}
#linknews {width:57px;background-image:url(../images/linknews.gif);margin-left:-8px;z-index:2;position:relative;}
#linkuntern {width:104px;background-image:url(../images/linkuntern.gif);margin-left:-8px;z-index:3;position:relative;}
#linkprodukte {width:81px;background-image:url(../images/linkprodukte.gif);margin-left:-8px;z-index:4;position:relative;}
#linkdienst {width:125px;background-image:url(../images/linkdienst.gif);margin-left:-8px;z-index:5;position:relative;}
#linktech {width:147px;background-image:url(../images/linktech.gif);margin-left:-8px;z-index:6;position:relative;}
#linkvertrieb {width:118px;background-image:url(../images/linkvertrieb.gif);margin-left:-8px;z-index:7;position:relative;}
#linkref {width:91px;background-image:url(../images/linkref.gif);margin-left:-8px;z-index:8;position:relative;}

wie geschrieben... werden die first und last tags entfernt wird alles richtig angezeigt...

danke für weitere tips

[Andreas]

Hallo tlrookie,

willkommen im Forum von TYPOlight.

IDs mit Leerstellen (doppelt belegte IDs) könnte Problemen geben. Arbeite hier lieber mit einer Klasse, auch schon aus dem Grund, da "last" und "first" auch in anderen Templates hinzugefügt werden (allerdings default nat. als Klasse).

BTW first und last sind keine tags. A ist das Element, ID ist das Attribut und first, last sind die Attributwerte. Für meine Begriffe hast du das Template zu stark modifiziert. Dein Ziel müsstest du auch rein mit CSS mit dem default Template erreichen, außer dass bei dir der aktive Menüpunkt wohl auch ein Link sein soll.

Bei CSS-Fragen am besten immer einen Link auf die Seite mitschicken.

Andreas

[BugBuster]

Ach, jetzt sehe ich das erst.
Wieso hast du aus "class" denn "id" gemacht?
Klar das es geht wenn du "first" entfernst, weil deine ID dann erst eine passende CSS Angabe hat.
Mach wieder class draus und alles ist gut. (nat. auch die CSS anpassen)

Die first und last Angaben die durch TL eingefügt werden machen durchaus Sinn, zumindest habe ich die bisher immer benutzt.

[tlrookie]

hallo an alle,
nochmal zum verständnis.

diese seite soll zu lernzwecken nachgebaut werden.

http://www.sorex-austria.com/

ein blick auf den seitenquelltext kann nicht schaden.

diese seite wurde mit typolight erstellt. meine frage ist nun wie machen die es das kein first und last eingefügt wird.

danke für weitere vorschläge.

tlrookie

[Andreas]

Hallo tlrookie,

das musst du die Programmierer fragen, wir können nur sehen, was uns der Server liefert.

Mit $this->showTemplateVars() innerhalb deines Templates kannst du dir anzeigen lassen, welche Variablen dein Template ausspuckt.

Innerhalb der foreach-Schleife gibt dir $itemClass() z.B. den String 'linkhome first' aus. Entferne das was du nicht möchtest mit PHP aus diesem String.

Versuche aber besser nicht die Fehler der Seite nachzubauen, sie ist nicht valide

Andreas

[tlrookie]

hallo,
na gut, muss also im navi template mit php entfernen was ich nicht möchte, toll.
habe von php keine ahnung und verstehe trotzdem den sinn dieser "atributwerte" nicht...

danke für die unterstützung

tlrookie

[Andreas]

<?php echo $this->class; ?>
oder manchmal auch in einer foreach-Schleife
<?php echo $item['class']; ?>
generiert dir CSS-Klassen, sie tauchen dann in den Elementen als Attribut auf z.B.
<div class="klasse1 klasse2"></div>
Somit hast du die Möglichkeit das Element DIV anzusprechen und zu formatieren.
.klasse1 { color: red; }
.klasse2 { border: none; }
Anders ist es bei dem Attribut id="". Hier dürfen keine zwei Werte mit Leerzeichen getrennt enthalten sein. Auch darf eine ID nur einmal pro Seite vorhanden sein, eine Klasse mehrmals. Eine ID sprichst du nicht mit einem Punkt, sondern mit einer Raute an.
#eineID { color: red; }

In Listen, Tabellen und dort wo es sonst noch Sinn macht, generiert dir TYPOlight die Klassen first in das erste Element und last in das letzte Element. Somit hast du die Möglichkeit die ersten und die letzten Elemente anders zu formatieren als den Rest. Wenn man das nicht benötigt, dann ignoriert man diese Klassen einfach, sie stören nicht.

In deinem Fall hast du die Klassen nicht in das class-Attribut, sonder ins id-Attribut gerendert, das geht natürlich nicht, da $this->class auch schon mal mehrfache Werte mit Leerzeichen getrennt liefert, z.B. wenn du im BE einem Objekt eine Klasse hinzufügst.

Mit der PHP-Funktion str_replace() http://de2.php.net/manual/de/function.str-replace.php kannst du das ' first' aus dem String entfernen. Das nützt dir aber nicht so viel wenn du keine PHP-Grundkenntnisse hast. Ich hab dir mal ein paar Links hier hingesetzt, welche man in seinen Bookmarks haben sollte.

Stylesheets (CSS)
Kurzreferenz: CSS
CSS-Eigenschaften
Quakenet/#php Tutorial - de - Einleitung

Dein Ziel kannst du allerdings auch erreichen ohne die Klassen first und last zu entfernen.

Andreas