text: Cooking Cup - der Kochwettbewerb in neuer Runde - Mambers.com
  > Mamboseiten
  Cooking Cup - der Kochwettbewerb in neuer Runde
  06.05.2005, 22:08
  Hallo liebe Mambo-Gemeinde,
  wir haben mal wieder eine neue Mambo-Seite online gebracht: http://www.cooking-cup.de. Dieses Jahr ist das Thema die asiatische K�che. Sch�ne Gr��e,
  P.S.: Kommentare und Feedback immer gern erw�nscht!
  Do you lock your front door but keep all windows open? Right! Get Firefox
  Last edited by gateone; 07.05.2005 at 18:18.
  Send a private message to gateone
  Visit gateone's homepage!
  Find More Posts by gateone
  08.05.2005, 09:19
  AW: Cooking Cup - der Kochwettbewerb in neuer Runde
  Die Seite ist dir mal wieder gelungen, echt klasse, aber eine Sache gibts f�r mich dann doch trotzdem zu kritisieren, irgendwie kann ich mich nicht mit der Subnavi also die Links ist zufriedenstellen die f�llt optisch etwas aus dem rahmen ich wei� nicht wieso da fehlt das gewisse etwas.
  Ansonsten klasse Tabellenloses Layout respekt.
  08.05.2005, 15:50
  Re: Cooking Cup - der Kochwettbewerb in neuer Runde
  nette seit..nur eine frage wie mache ich eine navliste mit der <li> funktion!? bzw wie verlinke ich die dann mit den modulen!?
  Send a private message to Skytrix
  Find More Posts by Skytrix
  ich versuche mal die Frage mit ner Navliste zu erkl�ren:
  also generell baue ich ein Template wie jeder andere - zun�chst. Allerdings nur semantisch richtig und ohne Design. Also im Grunde ein nacktes Template ohne Layout - keine Tabellen, keine Grafiken, die dem Design dienen. Alle Module lasse ich mit dem -1-Switch ausgeben, das bringt Mambo dazu, Men�s z.B. als Unorderd List <ul> auszugeben, mit allen Men�punkten als <li>-Elemente.
  "Normalerweise" w�re ein Modul ja: PHP Code:
  <?php mosLoadModules( 'left' );?>
  Wenn man aber das Modul so ausgibt:
  <?php mosLoadModules( 'left', -1 );?>
  dann verzichtet Mambo auf das ganze "Tabellenged�ns" und gibt das Modul, z.B. das Men�, xHTML-like aus, und das macht man eigentlich immer als Liste. Schau dann bitte mal hier, um von dort ab weiter zu finden, z.B. wie mache ich aus einer ungeordneten Liste dann ein horizontales Men�: http://css.maxdesign.com.au/listamatic/
  Bei Webseiten wie dem Cooking Cup, die ganz schnell gemacht werden m�ssen, dann ein Jahr lang halten, und dann wieder durch eine neue Seite ersetzt werden, mache ich mir meist nicht die M�he, die Men�s tats�chlich dynamisch aufzubauen. Das mache ich nur bei Seiten, die f�r eine l�ngere Zeit online sein sollen und wo sich Dinge in den Men�strukturen �ndern k�nnten.
  Beim Cooking Cup sind also die horizontalen Hauptmen�-Punkte fest im Template "hard-ge-coded". Woher wusste ich dann die Men�-Links: nun, das "Main Menu" gibt es noch, ist jedoch auf der Position "debug" und wird, wenn die Seite live geht - einfach ausgeschaltet. Bis dahin kopiere ich mir von dort die eigentlichen Men�links f�r meine Hartvercodung. Wie gesagt: das mag nicht sonderlich elegant sein, ist aber in Anbetracht dessen, das diese Seite gerade mal bis Hebst/Winter diesen Jahres aktuell bleibt und dann wieder durch eine komplett neue ersetzt werden wird eine etwas einfachere Sache.
  In Listamatic siehst Du auch, wie Du generell Drop-Down-Men�s auf diese Weise machen kannst. Das per Hand aufzubauen kann aber dann doch sehr nervig sein, und darum bevorzuge ich hier Stingreys Men�-Module. Siehe http://www.stingrey.biz/
  Die Subnavi war urspr�nglich so gar nicht vorgesehen und musste dann recht kurzfristig eingefriemelt werden. Darum ist sie auch bei mir ein wenig das "Stifkind" dieser Seite. Hier nervt mich dann auch mein eigenes Layoutraster, dass diese Submen�s auf eine feste Breite von 120px fest setzt, und manchmal musste ich da schon etwas erfinderisch in der Wortwahl werden, damit es rein passte... Diese Subnavi k�nnte man sicher noch verbessern, z.B. sch�nere Over-Effekte etc. Aber da fehlte einfach Zeit und Geld - leider. Ach ja, hier haben wir �brigens wieder Stingreys "Tigra Display Menu" in der Subnavi - http://mamboforge.net/projects/displaymenu/
  Die Hintergrundbilder sind �brigens nicht im Template enthalten. Es gibt insgesamt 5 Templates: Startseite, 2 Varianten der Unterseiten (wie unter "So kochen Sie mit" und "Newsletter"), das Magazin und der Shop. Die Bilder jeweils im Hintergrund sind Module, die nur das Bild selbst enthalten. Kleiner Gag hier: die helle Fl�che auf dem der Text liegt ist nicht im Bild enthalten. Das ist einfach eine wei�e Fl�che, die per CSS auf eine Transparenz gesetzt wurde. Hier das Beispiel aus der CSS-Datei:
  /* Opacity in IE */
  /* Opacity in Mozilla */
  #content ist die hellere Fl�che generell, mit "absolut" positioniert, so kann man dann sch�n weitere Elemente dr�ber stapeln und so stapelt sich auch die Fl�che �ber das darunter liegende DIV, dass das Bild aus einer bestimmten Modul-Position ausgibt. Dann die beiden Filter-Regeln f�r (in diesem Falle) 60% Durchsichtigkeit f�r je Internet Explorer und Mozilla-basierten Browsern (dabei kann z.B. Safari zwar nichts mehr mit Anfangen, aber dieser Brower sieht dann einfach eine farbliche Fl�che auf dem der Text liegt). Danach kommt dan ein weiterer DIV, der in diese Fl�che hineinverschachtelt ist, der dann die Regeln f�r den Text und den Overflow (f�r die Scrollbalken bei Bedarf) enth�lt. W�rde ich auf genau diesen #content-DIV schon den Text packen, w�re er n�mlich auch 60% durchscheinend und entsprechend schwer lesbar. Der Shop basiert (bei den B�chern und CDs auf AWESOME! - eine Superkomponente, auch wenn es ewtas m�hsam ist, sie zu bedienen) - Infos und Download unter http://mamboforge.net/projects/awesom/
  Das Handyangebot ist leider momentan noch ein wenig ein "Medienbruch" - wer's haben will muss unseren Partner anrufen. Das wird aber in den kommenden Wochen noch mit deren Online-Shop verlinkt werden. Die ganze Seite wird inhaltlich in den kommenden Wochen auch noch anwachsen. Im Magazin gibt es w�chentlich einen neuen Artikel und es werden auch noch weitere Sponsoren des Kochwettbewerbs dazu eingestellt. Warum das ganze mit Mambo gemacht ist? Weil Mambo elegant, superschnell und leicht zu bedienen ist. Und weil ich f�r die gesamte Seite Dank Mambo nur 1 1/2 Wochen gebraucht habe. Ich kenn kein System mit dem es besser und einfacher ginge, komplexe Seiten zu bauen. DANKE AUCH AN ALLE, DIE MIR BEI FRAGEN HALFEN UND HELFEN! Ich hoffe ich kann so viel wie m�glich selbst zur�ck geben. Bei Fragen: einfach fragen! ;-)
  Und danke noch mal f�r die Komplimente!
  wow...super das h�tte ich jetzt nicht gedacht, dass du dir soviel m�he gibst mir das zu erkl�ren wie deine seite aufgebaut ist bzw. eine navliste! danke...ich werde mich morgen gleich dran machen das zu testen!
  08.05.2005, 23:05
  ich bedanke mich vor allem f�r den klasse link f�r die navi....
  09.05.2005, 10:21
  Kein Problem! Listamatic ist ein ganz guter Einstieg das Prinzip zu begreifen. Im Grunde wird hier per CSS der Liste ihre typischen Attribute abgenommen und dann neu umformatiert, so dass es ein Men� ergibt.
  Diese Vorgehensweise ist vor allem wichtig, wenn man "Accessible" programmieren m�chte - ist inzwischen auch in Deutschland �brigens f�r �ffentliche Webseiten (z.B. Regierung, Verwaltungen, aber auch �ffentlichen Einrichtungen etc.) als gesetzliche Vorgabe fest vorgeschrieben (auch wenn's mit der Umsetzung auch noch nicht so klappt). Per EU-Direktive k�nnte sich das ganze auch noch auf Webseiten von Unternehmen ausdehen, so wie in England bereits in nationales Gesetz umgewandelt. Gut, die Frage ist: wer kontrolliert das. Aber vielmehr als hier rechtliche Vorgaben zu beherzigen sollte man es so sehen: man hilft Menschen mit k�rperlichen Handicaps das Internet besser und sch�ner zu genie�en - und - man hilft sich damit, weil die eigene Seite f�r Suchmaschinen f�r Google besser erfassbar damit werden. Und das hilft dem Ranking.
  Jetzt wollte ich noch von einer Sache in Bezug auf "Zug�nglichkeit" erz�hlen. Viele werden sich fragen: macht das Sinn, wer wird das denn dann nutzen, wenn die Seite zug�nglich gemacht worden ist. Im letzten Jahr hatten wir die Webseite des Cooking Cups auch schon zug�nglich aufgebaut. Zwar mit ganz anderem Layout und viel einfacher als diese aktuelle Seite, aber immerhin. Wir hatten auch ein Gewinnspiel auf der Seite, wo einer der Partner ein verl�ngertes Wochenende in einem Designerhotel in S�dtirol verlost hat - und noch ein paar Preise. Nach einiger Zeit hatten wir einen Brief mit einer Postkarte darin im Briefkasten. Die Postkarte war in Braille gestanzt. Also hab ich mich �ber Wikipedia hingesetzt und Buchstabe f�r Buchstabe der Braille-Schrift versucht zu entziffern. Und siehe da: es war eine junge blinde Frau, die �bergl�cklich dar�ber war, dass auch sie einmal an einem Preisausschreiben im Internet mitmachen konnte, weil ihr Sprachausgabesystem ihr alles richtig vorlesen konnte. Sie hatte auch das richtige L�sungswort. Dieser Brief war f�r mich der Augenblick zu sagen: es lohnt sich die Mehrm�he, sich zun�chst in das ganze Konzept von xHTML und CSS einzuarbeiten, im Grunde noch mal von Neu alles zu lernen, alles �ber Bord zu werfen, was man bis dahin vom Weblayouten wusste und mittels xHTML und CSS zu arbeiten.
  09.05.2005, 17:40
  hm..wenn ich die navlist nach dem maxdesign mach weiss ich doch aber nicht die links von mambo f�r home, contact usw ausserdem ist das dann nicht dynamisch wenn ich weitere men�s hinzuf�gen m�chte?
  wie hier die navi ist nicht schlecht nur ich weiss nicht wie ich das verbinden soll
  http://www.55thinking.com/laboratory/index.php?option=com_frontpage&amp;Itemid=&amp;mos_change_template=ytw_demo_menusIV&amp;task=publish
  Last edited by Skytrix; 09.05.2005 at 21:47.
  Also, wenn man so ein Men� statisch baut, also das Men�system nicht durch ein Mambo-Modul wie z.B. Stingrey's Display Menus aufgebaut werden, sondern regelrecht per Hand direkt in das Template gecoded sind, dann mache ich das meist so:
  Ich schaue, dass ich in meinem Template ganz unten auf der HTML-Seite das Modul "debug" einbaue. Du kannst aus den Beispieltemplates hier auch das debug r�berkopieren. Dann lege ich das Hauptmen� auf die Position debug. Im Hauptmen� baue ich mir meine Hauptnavigation auf. Im Frontent wird jetzt ja das Men� unter allem drunter angezeigt... Dann kopiere ich die Links aus dem Webbrowser zur�ck in mein Hart-Verlinktes Men� - so wei� ich dann, welche URL ich f�r einen Content-Bereich oder ein Komponente etc. verwenden muss. - Wenn ich fertig bin, dann unpublishe ich das Hauptmen� in den Modulen einfach (aber nicht l�schen!). Alternativ k�nnte man die Ausgabe des Debug-Moduls auch in ein DIV legen, dem eine Klasse oder ID geben, z.B. "entwicklung" und sobald die Seite live geht dies per display: none; einfach ausblenden...
  Wie gesagt: das ist die "Schnellmethode", wenn wenig Zeit da ist und die Seite sich in seiner Men�struktur nicht �ndern wird. Das ist nat�rlich nicht mehr so praktisch, wenn Du nachtr�glich Men�eintr�ge �ndern willst. Dann m�sstest Du das Men� wieder einblenden nachdem Du die �nderungen in Mambo gemacht hast und Dir die neuen Links aus dem Webbrowser kopieren um sie dann in Dein Template einzuf�gen.
  Darum: bei komplexeren Sachen oder Seiten, bei denen die Men�struktur sich �ndern k�nnte, sollte man auf eine der Display Menu Module zur�ck greifen, die im Grunde auch nichts anderes sind als CSS und/oder JavaScript-Men�s, die aber dynamisches einstellen von Men�eintr�gen erlauben. Das Beispiel auf 55thinking.com verwendet die ganz normale Men�ausgabe. Achte bei allen CSS-Seiten jedoch darauf, dass Du Deine Module mit dem -1 ausgibts, damit Mambo seine Tabellen weg l�sst und eine Liste ausspuckt. Bei der ganz normalen Men�ausgabe kann man nat�rlich per CSS auch wieder umgestalten, so wie bei Deinem beigef�gten Beispiel z.B. die horizontale Navigationsleiste oben. Das ganze hat nur eine Limitierung, dass dies keine Drop-Downs machen kann. H�tte ein Men�punkt z.B. einen Unterpunkt, w�rde - bei Klick auf den Men�punkt sich dieser Unterpunkt zwischen den Men�punkt und den n�chsten Hauptmen�punkt schieben. Aber: man kann hier ein wenig experimentieren, da Mambo f�r Submen�-Punkte eine andere CSS-Klasse ausgibt. Gro�e Hilfe ist hier der Firefox Webbrowser ( http://www.mozilla.org ) zusammen mit der WebDeveloper Extension ( http://chrispederick.com/work/firefox/webdeveloper/ ) - Hiermit kannst Du Dir z.B. die Class- und ID-Namen von Elementen anzeigen lassen. Gru�, Stephan