Problem mit Menü
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
beschreiben
code
dank
datei
eigene datei
einbinden
erstellen
farbe
glauben
haupt
http
inhalt
liste
problem
punkt
speichern
tauchen
url
verweis
-
Hallo zusammen!
Ich möchte ein Menü erstellen und habe auch ein schönes gefunden: http://www.jeremymartin.name/examples/kwicks.php?example=6
Mein Problem ist jetzt wie ich das Ganze auf meiner Seite erstelle, abänder usw.
Zwar ist es hier beschrieben ( http://www.jeremymartin.name/projects.php?project=kwicks ) aber ich verstehe es leider nicht...
Welche Dateien muss ich mit welchem Inhalt erstellen? Und wie muss ich die Dateien dann in meiner Haupt-HTML Seite einbinden?
Es wäre lieb, wenn mir das hier jemand detailliert beschreiben könnte!
Danke!!! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
neuhaus-bonn schrieb:
Hallo zusammen!
Ich möchte ein Menü erstellen und habe auch ein schönes gefunden: http://www.jeremymartin.name/examples/kwicks.php?example=6
Mein Problem ist jetzt wie ich das Ganze auf meiner Seite erstelle, abänder usw.
Zwar ist es hier beschrieben ( http://www.jeremymartin.name/projects.php?project=kwicks ) aber ich verstehe es leider nicht...
Welche Dateien muss ich mit welchem Inhalt erstellen? Und wie muss ich die Dateien dann in meiner Haupt-HTML Seite einbinden?
Es wäre lieb, wenn mir das hier jemand detailliert beschreiben könnte!
Danke!!!
Du brauchst im Prinzip gar keine Daten erstellen, das ist ja schon alles fertig! Du musst nur den HTML Code aus der Datei kopieren und in dein HTML Dokument einfügen, die css Dateien hochladen und fertig!
Vielleicht kannst du ja mal posten, wie du das ganze abgeändert hast und dein Problem nochmal etwas genauer beschreiben.. Weil bei "verstehe es leider nicht" kann man dir net so ganz helfen ^^ -
Hi!
Also mein Problem besteht darin, dass ich eigetnlich noch nie mit sowas gearbeitet habe und daher von gar nix ne Ahnung habe.
Auf der Seite http://www.jeremymartin.name/projects.php?project=kwicks Unter Example 6 sind einmal die HTML, CSS und JavaScript Codes entahlten. Muss ich daraus nun jeweils eine eigene Datei machen und hochladen?
Was mache ich mit dem Default CSS Code am Anfang der Seite?
Muss ich noch etwas anderes beachten?
Ich möchte erstmal, dass es zunächst einfach "nur" so funktioniert wie es ist. Mit Inhalt füllen und in meine eigene Seite einbauen werde ich es anschließend.
-
neuhaus-bonn schrieb:
Muss ich daraus nun jeweils eine eigene Datei machen und hochladen?
Was mache ich mit dem Default CSS Code am Anfang der Seite?
Muss ich noch etwas anderes beachten?
Okay nun hab ich es verstanden (:
Also folgt eine kleine Kurz-Dokumentation:
________________________________________________________________________________________________________
<ul class="kwicks"> <li id="kwick1"></li> <li id="kwick2"></li> <li id="kwick3"></li> <li id="kwick4"></li> </ul>
Das ist der HTML Code, diesen fügst du in dein HTML Dokument ein.. Du hast also z.B. deine index.html und wenn du diese öffnest findest du einen <html> und </html> Teil. Dort hinein kopierst du den oben genannten Code. Der Code stellt eine Liste da, wobei ul class die classe ist (vergleichbar mit einer einzigartigen Signatur). Der <ul> und </ul> Tag beginnt und beendet die Liste. <li> und </li> steht für die einzelnen Listenobjekte. In der oben genannten Liste hast du 4 Objekte, du kannst die Anzahl allerdings beliebig erweitern!
________________________________________________________________________________________________________
.kwicks li { float: left; width: 125px; height: 100px; margin-right: 5px; } #kwick1 { background-color: #53b388; } #kwick2 { background-color: #5a69a9; } #kwick3 { background-color: #c26468; } #kwick4 { background-color: #bf7cc7; margin-right: 0px; }
Das ist der Code für die Css Datei. Du kannst entweder eine vorhandene Datei benutzen die bei dir vielleicht "style.css" heißt oder einfach eine neue erstellen (Neues Textdokument öffnen, Code einfügen und als style.css speichern). .kwicks li erzählt uns, wie die Liste aussieht, diese ist mit float left nach links ausgerichtet und die Breite und Höhe wurde mit width und height angepasst. #kwick1 - 4 stellt unsere Listenobjekte da, in diesem Beispiel hat jedes Objekt eine andere Farbe bekommen mit background-color (Tipp: Farbtabelle).
________________________________________________________________________________________________________
$().ready(function() { $('.kwicks').kwicks({ max: 320, spacing: 5, duration: 1500, easing: 'easeOutBounce' }); });
Das stellt unsere eigentliche Funktion da. Es ist eine JavaScript, dass IMMER in einer JavaScript Datei steht, welche die Endung .js hat. Wir erstellen also wieder ein neues Textdokument, fügen den Code ein und gehen auf Speichern unter. Dann löschen wir das vorhandene *.txt und nennen es meinetwegen "script" (script.js).
________________________________________________________________________________________________________
Das wars dann auch schon, wenn du nicht weißt, wie man css Dateien und Js Dateien einbindet bzw. verlinkt melde dich noch mal, hoffentlich konnt ich helfen!
Mfg
Martin
Beitrag zuletzt geändert: 24.9.2011 16:03:33 von kill-a-teddy -
Vorschau einer einzigen HTML-Datei gefällig?
Die wichtigsten Angaben in einer HTML-Datei zusammengefasst
Und hier der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Beispiel einer (fast) kompletten Seite</title> <!-- Ausgelagerte CSS & Codes --> <link rel="stylesheet" type="text/css" href="http://jmar777.googlecode.com/svn/trunk/css/main.css" /> <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script> <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script> <!-- Ausgelagerte CSS & Codes --> <script type="text/javascript"> $().ready(function() {$('#example6 .kwicks').kwicks({ max: 320, spacing: 5, duration: 1500, easing: 'easeOutBounce' });}); </script> <style type="text/css"> <!-- html { margin: 0; overflow: auto; } body { background-image: none; background-color: #1d1e21; padding: 30px 0 0 30px; text-align: left; font-family: verdana,tahoma; color: white; font-size: 0.7em } h1 { margin: 30px 0 10px 0; padding: 0; color: white; font-size: 1.5em; } .returnToKwicks { display:block; border:1px dashed #888; padding:5px; float:right; } .returnToKwicks:hover { background-color: #5e5e76; text-decoration: none; color: #aaa; } /* defaults for all examples */ .kwicks { list-style: none; position: relative; margin: 0; padding: 0; } .kwicks li{ display: block; overflow: hidden; margin-right: 5px; cursor: pointer; } /* example6 */ #example6 a { width: 100%; height: 125px; padding: 600px; } #example6 li { float: left; width: 125px; height: 100px; margin-right: 5px; } #example6 #kwick1 { background-color: #bfdd59; background-image: url('http://www.lima-city.de/images/layout/top/logo/branding_stamp.png'); } #example6 #kwick2 { background-color: #990100; background-image: url('http://diehoerbar.net/images/hoerbarheader2c.jpg'); background-repeat:no-repeat; } #example6 #kwick3 { background-color: #fff; background-image: url('http://www.lima-city.de/images/avatar/yoLpGTbTSiZrwV.jpeg'); } #example6 #kwick4 { background-color: #fff; background-image: url('http://blogoscoped.com/files/google-new-year-logos-2007.png'); margin-right: 0px; } --> </style> </head> <body> <div id="example6"> <ul class="kwicks"> <li id="kwick1" title=" Besuche Lima-City "><div align="center">Lima-City</div><a target="bla" href="http://www.lima-city.de/"><br /><br /><br /><br /><br /><br /> </a></li> <li id="kwick2" title=" Besuche die Hörbar "><div align="center">Die Hörbar</div><a target="bla" href="http://diehoerbar.net/"><br /><br /><br /><br /><br /><br /> </a></li> <li id="kwick3" title=" Besuche das Menschle "><div align="center" style="color:#000;font-weight: bold;">Menschle</div><a target="bla" href="http://menschle.lima-city.de/"><br /><br /><br /><br /><br /><br /> </a></li> <li id="kwick4" title=" Nicht das passende dabei? Frage Google. "><div align="center" style="color:#000">Google</div><a target="bla" href="http://www.google.de/"><br /><br /><br /><br /><br /><br /> </a></li> </ul> </div> <div style="clear:both;"></div> Seiteninhalt 1 <div style="width:600px;background-color:#3f3f54;margin-top:20px;"> Seiteninhalt 2 <div style="padding:10px;color:white;font-size: 1.2em;"> <h3 style="float:left;font-weight: bold;">Seiteninhalt 3 (Überschrift)</h3> <!-- <a class="returnToKwicks" href="http://www.jeremymartin.name/projects.php?project=kwicks" title="Kwicks Homepage">Return to Kwicks for jQuery</a> --> <div style="clear:both;"></div> <br /> Seiteninhalt 3 (Aufzählungspunkte) <ul> <li><a href="#">Punkt 1</a></li> <li><a href="#">Punkt 2</a></li> <li><a href="#">Punkt 3</a></li> </ul> usw. </div> </div> </body> </html>
Have Fun.
-
menschle schrieb:
Vorschau einer einzigen HTML-Datei gefällig?
Sehr unübersichtlich und die Hörbar wird net richtig angezeigt, aber sonst funktioniert es soweit.. -
@ kill-a-teddy und menschle: Erstmal: Ganz lieben Dank für die ausführliche Beschreibung!
Aber ich hab da noch ne Frage: Was ist mit den JavaScript Datein? Ich erstelle doch nur eine einzige .js Datei, oder? Aber im Quellcode sind drei .js Dateien zu finden... Muss ich dann in meiner HTML Datei auch auf die .js Datein auf dem Fremden Server verweisen?
Die .css Datei erstelle ich ja auch und lege damit die Farben fest. Die Datei speicher ich bei mir auf dem Server ab und verweise im HTML Code darauf, richtig?
<link rel="stylesheet" type="text/css" href="http://jmar777.googlecode.com/svn/trunk/css/main.css" />
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script> -
neuhaus-bonn schrieb:
...
Ich erstelle doch nur eine einzige .js Datei, oder? Aber im Quellcode sind drei .js Dateien zu finden... Muss ich dann in meiner HTML Datei auch auf die .js Datein auf dem Fremden Server verweisen?
Die .css Datei erstelle ich ja auch und lege damit die Farben fest. Die Datei speicher ich bei mir auf dem Server ab und verweise im HTML Code darauf, richtig?
Das kannste machen, wie Du lustig bist.
Die Haupt-JavaScript-Dateien kannste von Fremd-Seiten laden, oder auch vom eigenen Host.
Wichtig ist nur, beim entwickeln die wichtigsten Dateien innerhalb der HTML-Datei zu lassen.
Danach kann alles ausgelagert werden.
Der Grund ist einfach:
Bei Änderungen wird jeweils die (HTML)Seite neu geladen.
Sind CSS & Javascript -Dateien ausgelagert, werden die vom Browser geladen, und sind somit im Browser-Cache.
Änderungen von ausgelagerten Dateien machen so manchen Web-Designer völlig kirre, da sie nicht sofort angezeigt werden.
Tipp:
Zunächst das Wichtigste innerhalb der HTML modifizieren.
Wenn zufrieden, dann erst auslagern.
LG, Menschle -
Ja, das verstehe ich.
Nur vertsehe ich noch nciht so ganz, was genau in den drei .js Dateien drinsteht. Weil sobald ich nur auf die eine .js datei auf meiner seite verweise, bewegt sich nix mehr...
Ich glaube also, dass ich immer noch irgendwas vergesse, übersehe oder nicht verstehe... -
neuhaus-bonn schrieb:
Ja, das verstehe ich.
Nur vertsehe ich noch nciht so ganz, was genau in den drei .js Dateien drinsteht. Weil sobald ich nur auf die eine .js datei auf meiner seite verweise, bewegt sich nix mehr...
Ich glaube also, dass ich immer noch irgendwas vergesse, übersehe oder nicht verstehe...
Magst du vielleicht einmal sagen, wie die drei .js Dateien heißen? Denn es kann sein, dass zwei Dateien nur die Bibliotheken sind, die gleich mit geliefert wurden. Diese müsstest du dann noch einbinden. -
Das wären diese drei Dateien:
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
Was deren Inhalte sind, weiß ich nicht... Sie tauchen z.B. auch im Beispiel von Menschle auf (weiter oben). -
neuhaus-bonn schrieb:
Das wären diese drei Dateien:
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
Was deren Inhalte sind, weiß ich nicht... Sie tauchen z.B. auch im Beispiel von Menschle auf (weiter oben).
^^ Jetzt lassen sie sich anschauen ;)
Das aufgeführte Beispiel nutzt JQuery, was eine JavaScript-Klassenbibliothek ist.
Klassenbibliotheken dienen dem Zweck, den Entwicklern die Arbeit zu erleichtern.
Sie können als Module eingebunden werden; somit muss das Rad nicht immer wieder neu erfunden werden.
Weitere bekannte JavaScript-Frameworks sind Prototype, Script.aculo.us und MooTools.
Noch mehr Links
Framework
Liste von Webframeworks -
neuhaus-bonn schrieb:
Das wären diese drei Dateien:
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
Was deren Inhalte sind, weiß ich nicht... Sie tauchen z.B. auch im Beispiel von Menschle auf (weiter oben).
Ja, wie vermutet sind es nur die Bibliotheken ;)
Die solltest du halt mit einbauen, einfach den Code dort nutzen, die vorhandene URL durch deine ersetzen und denn so laufen lassen, sollte funktionieren. Zumindest sehe ich dort grad keinen Fehler!
Mein "vorposter" menschle hat ziemlich gut erklärt, wofür man die braucht :P -
Ja, dem kann ich nur zustimmen!
Ich danke euch beiden für eure tolle Hilfe und eure straken Nerven mit mir
Ich habs jetzte ndlich verstanden und kann es verwenden!! :-) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
