Hi "wexpress" .. dankö schön ...
Das sieht in der Tat eigenartig aus ... müssen wir gleich mal checken. Vermute mal es war beim IE5 !? Oder?
Das alte CSS Grauen .. Da muss wohl ein Schatten verrutscht sein #paralyzed#
Beste Grüsse vom Julian
UNICEF Deutschland Relaunch
Ich gehe ins Netz mit IE version 6.0
Hallo mal wieder, ich glaube, da hat der Redakteur von UNICEF gerade dran gearbeitet. Bei mir sieht nun alles prima aus. Auch auf IE6.
Hoffe, ich bin da nicht die Ausnahme #paralyzed#
Grüzi an alle
julian
Wow, wow, wow! :o :o
Ich kann nur sagen: Das ist mit Abstand die ansprechendste Seite, die ich seit langem gesehen habe. Nachdem ich 5 Minuten umhergesurft bin, war ich sofort inspiriert etwas zu spenden. Kein Scherz!
Well done! Please give me your webdesign blessings #giggle#
Hallo zusammen!
Vielen lieben Dank für euer Lob. Besonderen Dank auch an die, die uns auf Fehler und/oder Ungereimtheiten auf der UNICEF Website aufmerksam gemacht haben.
Ihr wart eine große Hilfe!
Und nicht vergessen: Spendet fleissig!!! 😉
Grüzi
Chong
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