Hi Gnop.
Ich bin schwer begeistert von eurer Seite.
Mich würde brennend interessieren, wie ihr die auf CSS basierende Top Navigation hinbekommen habt?
Ich würde mich super über einen Tipp freuen, da ich ein ähnliches, jedoch simpleres Horizontales Menü erstellen will, das aus Images besteht für drei Zustände. Ich bekomme das aber nicht hin. 🙁
Das mit dem Top Menü ist eigentlich "relativ" einfach:
Das ganze ist ein unordered list mit den li als einzelne Links, also:
<ul>
<li><a href=""><span>Link 1</span></li>
<li><a href=""><span>Link 2</span></li>
<li><a href=""><span>Link 3</span></li>
</ul>
Die Liste als ganzes bekommt list-style:none; und <li> bekommt float:left; zugewiesen, damit die einzelnen Punkte horizontal nebeneinander erscheinen.
(Wenn Du grafische Links haben möchtest, dann weist Du dem <span> ein lächerlich niedriges padding-left zu, z.B.
ul li a span {padding-left: -1000px;}
Dadurch verschwindet der Text nach links aus dem viewport (=kein Scrollbalken unten), wird aber von Screenreadern immer noch vorgelesen.)
Dem <a> weist Du eine absolute Höhe und Breite zu, und schaltest display: block; ein, damit die ganze Linkfläche angeklickt werden kann.
Jetzt kannst Du dem a und dem a:hover verschiedene Hintergrundgrafiken zuweisen, und voilà: "Buttons" mit Hovereffekt, ohne Javascript. Für den angewählten Zustand gibt es einfach eine eigene Klasse, "a.selected" bzw. <a class="selected"> mit einem eigenen Hintergrundbild.
Um den Hovereffekt ohne Nachladen hinzukriegen, machst Du einfach eine Grafik mit beiden Zuständen untereinander, also obere Hälfte normaler Link, untere Hälfte mit Hovereffekt. Und dann folgendes ins CSS:
a {
background: url(grafik.gif) top left no-repeat;
}
a:hover {
background: url(grafik.gif) bottom left no-repeat;
}
Falls das jetzt zu viel auf einmal oder unklar war, einfach noch mal nachfragen :-)
Wow. Vielen Dank für Deine Antwort! 😃
Ich habe auch drei Grafiken, also eine für den NORMAL Zustand, eine für den HOVER und eine für den SELECTED Zustand. Das CSS ist auch korrekt, soweit ich weiss.
Mein Problem beginnt eher in der Umsetzung via TemplaVoila und im Typoscript Setup. Da habe ich schon so einiges versucht, jedoch ohne wirkliche Erfolge.
Vielleicht hier ein kleiner Auszug aus meiner CSS Datei:
#navigation {
width: 900px;
height: 20px;
min-height:20px;
top:113px;
margin: 0;
padding: 0;
background: url(navigation/topnav.gif) no-repeat;
}
#navigation ul {
position:relative;
width: 900px;
height: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
#navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li a {
height: 20px;
display: block;
}
#navigation ul li a#home {
position: absolute;
top: 0;
left: 0;
width: 54px;
background: url(navigation/home.gif) top left no-repeat;
}
#navigation ul li a:hover#home, ul li a:active#home {background: url(../images/nav/h_home.gif) top left no-repeat;}
#navigation ul li a#home_selected {
position: absolute;
top: 0;
left: 0;
width: 54px;
background: url(navigation/c_home.gif) top left no-repeat;
}
Und nun habe ich mit TemplaVoila mein Template gestaltet. Dort habe ich als Typ "Element" mit dem Attribut "*:inner". Die Navigation ist ein div Element (also im Template steht dann <div id="navigation"></div>
Soweit so gut. Aber mein eigentliches Problem liegt beim Setup. Da hatte ich einiges versucht, bin aber auf keinen grünen Ast gekommen. Daher eine Verständnis Frage. Hast Du die unordered List einfach in den Setup geschrieben und dort nochmal die ganzen widths etc. eingetragen? Ich hatte vermutet, dass diese nicht nötig sei, da diese Daten bereits in der CSS Stylesheet definiert sind.
Hallo, jetzt mal die Antwort von mir, da ich im Team hier die wunderbare Aufgabe hatte, die UNICEF Seite in Typo3 umzusetzen ...
Ich bin nicht ganz sicher, wo Dein Problem liegt. "width", "height" und alle anderen Angaben haben ja im Setup nichts mehr zu suchen, da alles ja extern im CSS gesteuert wird. Eigentlich muss im Setup ja tatsächlich nur die unordered List erzeugt werden, in denen sich nur die ID - Namen und die Links unterscheiden.
Hier mal ein Auszug ...
lib.topnav = HMENU
lib.topnav.special = directory
lib.topnav.special.value = 'uid des menubaums'
lib.topnav.1 = TMENU
lib.topnav.1.NO.beforeWrap = <li> |
lib.topnav.1.NO.linkWrap = |
lib.topnav.1.NO.doNotShowLink = 1
lib.topnav.1.NO.before.cObject = TEXT
lib.topnav.1.NO.before.cObject.field = uid
lib.topnav.1.NO.before.cObject.dataWrap = <a id="{field:subtitle}" href="index.php?id=|"><span class="hidden">
lib.topnav.1.NO.after.cObject = TEXT
lib.topnav.1.NO.after.cObject.field = title
lib.topnav.1.NO.after.cObject.wrap = |</span></a>
lib.topnav.1.NO.wrapItemAndSub = </li>
Dies ist nicht das Skript, mit welchem wir die Navigation auf der Hauptseite von UNICEF erstellen, sondern aus einem Bereich, der demnächst online geht. (Bei der Hauptseite ist es tatsächlich so, dass die UL und LI schon im Template stehen, und wir mit li:attr:id die Parameter einzeln gesetzt haben). Das obige Beispiel ist aber wohl passender für Deine Frage ...
Probiers mal aus ... :p
Mit {field:subtitle} habe ich das "subtitle"-Feld zweckentfremdet und die Namen der IDs gepeichert, die dann für die einzelnen Menüpunkte ausgelesen werden.
Gemappt wird dass ganz dann in das Element "topnav", welches das "ul" ist. Als "inner" definiert.
Hilft Dir das schonmal? Sonst frag weiter! #giggle#
Grüzi aus dem windigen Köln
Julian
Woops. Hatte nicht die Antwort gesehen. Sorry. 😃
Danke nochmal an euch beide!
Maleika 😃
#giggle# HIHI, ich glaube, wir schreiben gerade aneinander vorbei ! #giggle#
Hi Julian.
Genau dasselbe habe ich auch gemacht.
In meinem Template, welches ich via TemplaVoila erstellt habe, hatte ich zuvor auch alle einzelnen links und deren ID angegeben. Also, z.B. so:
<ul>
<li><a id="home" href="index.php?id=45"><span class="hidden">Home</span></a></li>
<li><a id="news" href="index.php?id=61"><span class="hidden">News</span></a></li>
<li><a id="videoguide" href="index.php?id=64"><span class="hidden">Videoguide</span></a></li>
<li><a id="audioguide" href="index.php?id=65"><span class="hidden">Audioguide</span></a></li>
<li><a id="tour" href="index.php?id=66"><span class="hidden">tourhistory</span></a></li>
<li><a id="chronicles" href="index.php?id=18"><span class="hidden">Chronicles</span></a></li>
<li><a id="community" href="index.php?id=67"><span class="hidden">Community</span></a></li>
<li><a id="multimedia" href="index.php?id=52"><span class="hidden">Multimedia</span></a></li>
<li><a id="multimedia" href="index.php?id=68"><span class="hidden">Memorabiliae</span></a></li>
<li><a id="multimedia" href="index.php?id=33"><span class="hidden">Miscellaneous</span></a></li>
</ul>
Das erschien mir als sinnvoll, da die horizontale Navigation nicht dynamisch ist, d.h. die links in der top navigation immer gleich bleiben.
Daraufhin hatte ich versucht, genau die o.g. Struktur in mein Setup einzubinden. Das hat aber nicht funktioniert.
Dann habe ich diverse Kombinationen versucht, ebenfalls ohne jeglichen Erfolg. Abgesehen davon, dass die links in der Source dann immer alle in einer Reihen stehen und nicht fein säuberlich dargestellt wird. Ich stehe da ein wenig auf dem Schlauch. Die Lösung von Dir oben sieht in der Tat sehr nobel aus. Aber sie greift bei mir nicht. Wahrscheinlich ist sie zu nobel für meinen Code. #giggle#
Daher, wenn ihr noch einen Tipp habt, wie ihr die Auflistung innerhalb des Setup für Unicef hinbekommen habt, wäre ich sehr glücklich. Ich brauche nicht den Code an sich. Nur einen Tipp, da ich im Moment nur Bahnhof verstehe.
Auf jeden Fall möchte ich mich ganz herzlich bei euch bedanken, dafür dass ihr mir so viel code als Beispiel gezeigt habt. Daraus werde ich sicherlich viel lernen können. 🙂
Maleika
Hallo Maleika,
was hat denn bei Dir nicht geklappt, als Du diese Struktur ins Setup eingebunden hast. Denn, wenn sich bei Dir nichts dynamisch ändert, brauchst Du ja eigentlich über das Setup auch nichts einzufügen/generieren.
Dann müsste, ein funktionierendes CSS vorrausgesetzt, die Topnavigation doch eigentlich funzen.
Beschreib doch sonst mal kurz, was nicht funktionierte, dann kommen wir wahrscheinlich eher weiter ... #paralyzed#
Grüüüsse Julian
Hi Julian. Danke für die Tipps.
Nach längerem Herumprobieren funktioniert es nun.
Nur die Hover Funktion will nicht so ganz funktionieren.
Da werde ich nochmal ein wenig ausprobieren müssen.
Danke nochmal für alles. 😃
Maleika
Hallo Maleika,
also vielleicht komme ich ja zu spät zum Kommentieren, und vielleicht verstehe ich Dien Problem deshalb immer noch nicht o.O
Aber unter dem obigen Link sieht die Navigation doch super aus. Ich weiss gar nicht was Du hast. Zumindest die "rote" Navigation mein ich. Was sonst noch erscheinen soll weiss ich ja nicht. Aber Du sprichst ja von der Topnavigation, die so Ärger macht!?
Nun, denn .. vielleicht läuft ja tatsächlich alles. Dann noch viel Erfolg weiterhin ... 😃
Grüzili Julian
Hi Julian.
Was passiert, wenn man die Images falls bezeichnet? #giggle#
Isch bin sooooooooooo bescheuääääääääääääääääht! lol
Also, nochmal ganz lieben Dank. So langsam sickert das ganze in mein Erbsen Hirn. #giggle# 😃
ALLES WIR GUT 😃
EINEN SCHÖNEN ABEND NOCH 😉
Wünsche ich Dir auch Julian. 😃
Julian ...
Ich habe Dir eine private message gesendet. Ist mir zu peinlich, nochmal dämlich zu fragen. :o
Hallo!
Also erstmal auch von mir ein richtig fettes Lob für die wirklich gelungene Seite - macht richtig Lust sich endlich mal mehr mit TemplaVoila auseinander zusetzen.
Erlaube mir noch schnell mal, eine freche Frage zu stellen:
Wie habt ihr denn die "UNICEF Arbeitsgruppen"-Suche, unter dem Punkt "Aktiv für ...", realisiert? Basiert die auf einem Modul?
Danke und grüße
philipp
Hallo Phillip,
die Antwort hat nen bisschen gedauert, da ich ein paar Tage in Hong Kong weilen "musste" ...
Die Suche ist ein eigenes Plugin, welches per Formular-Parameter in einer eigenen MySQL Tabelle nach passenden Einträgen sucht. Also .. bei der PLZ Suche eben in 2 Tabellen. 1 für die PLZ-Bereiche, die einen speziellen Code zurückgeben mit welchem ich in einer anderen Tabelle die Adressen auslesen kann.
Bei einem Klick auf das Budesland wird einfach auch über die Imagemap ein Code an mit der URL übergeben, der auf der Seite arbeitsgruppe.html auch wieder mit dem Plugin ausgelesen wird und dann das selbe wie oben.
Kurz ... Mit dem Kickstarter eine neues Frontend-Plugin erstellt. In PHP dann das Auslesen der Form-Parameter realisiert .. MySQL -Abfrage ... HTML zusammengebaut ... und dann an die $content - Variable zurückgegeben.
Soweit so gut !?
Prima!
Besten Gruss Julian
Hallo,
wir habt Ihr das auf der unicef-Seite denn gemacht, dass bei ner Überschrift nur h1 als markup rauskommt und nicht noch irgendwelche divs drumherum. css_styled_content geändert?
gruß, fedaykin
Hallo fedaykin,
eigentlich ist das ganz einfach. Die Inhalte werden ja von Redakteuren eingegeben, und die geben Überschriften auch direkt im RTE mit ein.
Dort haben wir einfach die Formatierungs-Styles auf <h1>,<h2> und <p> begrenzt.
Den Inhaltspunkt "Überschrift" im Content-Element an sich haben wir einfach pauschal ausgeschaltet. Der wird nur zur Bennenung des Content-Elements benutzt aber eben nicht gerendert.
So weit verstanden? Prima!
Grüsse Julian
ist das eigentlich der standard advanced calendar oder handelt es sich um eine eigenversion? finde die anordnung einfach super.
Hallo wikki,
das ist die Extension "extCalender".
An der haben wir natürlich noch ein bisschen an den Templates gebastelt.
Für die Verlinkung der Tage zu den Einträgen und die Blätter-Funktion mussten wir auch in den Quellcode eingreifen. Sind aber alles nur Standard-Programmierungen. Wirklich kein gehexe 😃
Besten Gruss
Julian