Seite 1 von 3

Navi Leiste..

Verfasst: Di 26. Jan 2010, 13:49
von moni
Hallo Zusamemn

ich könnte etwas Hife gut gebrauchen.. versuche ein Navi Leiste zu bastelln aber dies mal mit Buttons... hab auch einen guten Beispiel gefunden in Internet...
komme leider nicht weiter... glaub man muss noch Java Skript dazu machen oder wie bringe ich das zum leben...

http://www.thestyleworks.de/examples/li ... av214.html

Grüsse alle..monika

Re: Navi Leiste..

Verfasst: Di 26. Jan 2010, 13:53
von carino
So wie ich das auf der Seite sehe ist es ohne Java Script.

Muss halt in deine CSS rein.
Aber von CSS hab ich keine Ahnung.
Man kann es auch in dein HTML Script mit <style einbauen.
Aber warte besser mal bis die anderen antworten haben.

Re: Navi Leiste..

Verfasst: Di 26. Jan 2010, 14:05
von stundenbanner
Also eigentlich íst es ganz einfach, erstelle einfach auf deinen PC eine neue Textdatei (Name egal).

In dieser Textdatei fügst du dann den Code ein der auf der Seite steht:

Code: Alles auswählen

body {
   font-size: 15px;
   color: #000;
   background-color: #eee;
   padding: 0;
   margin: 0;
   }

#maincontent {
   background-color: #f7f7f7;
   padding: 1em;
   border-left: 2px dotted #ccc;
   margin: 0 0 0 174px;
   }

#navigation {
   background-color: transparent;
   position: absolute;
   top: 7px;
   left: 7px;
   }

#navigation LI {
   background-color: transparent;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 160px;
   }

#navigation UL {
   background-color: transparent;
   padding: 0;
   margin: 0;
   }

#navigation A {
   font: bold 1em/25px sans-serif;
   text-align: center;
   text-decoration: none;
   display: block;
   padding: 5px 10px;
   border: none;
   margin: 0;
   }

#navigation A:link, #navigation A:visited {
   color: #000;
   background: #eee url(../../graphics/navback4.gif)
               no-repeat
               0% 100%;
   padding: 1px 10px 9px;
   width: 140px;
   display: block;
   }

#navigation A:hover, #navigation A:focus {
   color: #000;
   background: #eee url(../../graphics/navback4.gif)
               no-repeat
               0% 0%;
   padding: 1px 10px 9px;
   width: 140px;
   display: block;
   }
Danach Datei speichern unter Zielordner wählen wählst unten aus alle Dateien.
Und oben schreibst du rein 1.css

Danach bei NPage Hochladen eigenes Design umsschalten einen neuen Style erstellen IM Header das einfügen:

Code: Alles auswählen

<html>
<head>
<link rel="stylesheet" type="text/css" href="Link zur CSS Datei">
</head>
<body>

<div id="navigation">
<ul>
<li><a title="Grundlagen"
       href="#">Grundlagen</a></li>
<li><a title="Referenz"
       href="#">Referenz</a></li>
<li><a title="Tutorials"
       href="#">Tutorials</a></li>
<li><a title="Browsers"
       href="#">Browsers</a></li>
</ul>
</div>
<div id="maincontent"></div>

Im footer:

Code: Alles auswählen

</body>
</html>

Und das Design müsste fertig sein.

Re: Navi Leiste..

Verfasst: Di 26. Jan 2010, 19:37
von moni
"Danach Datei speichern unter Zielordner wählen wählst unten aus alle Dateien.
Und oben schreibst du rein 1.css"

Sorry aber das hab ich nicht so richtig verstanden... :II
Was für Ziel Ordenr und wo Oben soll man 1Css schreiben...Bitte nicht lachen kappiere echt nichts ... :II

also ich mache eine(mit meinen Code) datei in Word und speicher sie...aber in welchen Format? Es gibt so viele alternativen.. XML- Dokument usw usw...


Wenn du so lieb bist Stundenbanner und näher beschreiben kannst.... :X

werde inzwischen schon etwas üben.... :I

Re: Navi Leiste..

Verfasst: Di 26. Jan 2010, 20:49
von stundenbanner
Nein, nicht Word.

Gehe bitte auf den Destop Rechte Maustaste > Neues Textdokument erstellen.

http://www.forumla.de/attachments/windo ... enue-2.jpg


Die Datei dann öffnen und den Code einfügen dann Datei Speichern unter und unten alle Dateien auswählen und im Datei Feld 1.css reinschreiben.

Danach wie meine Beschreibung weiter..

Wenn dus trotzdem nicht hin bekommst sage ich dir wie du es einlagerst.

Bis dahin noch einen schönen Abend..

Re: Navi Leiste..

Verfasst: Di 26. Jan 2010, 21:47
von moni
Hallo ..
Danke dir .. werde morgen das ausprobieren ,es ist einfach interesant wie was man fertig hin bekommt ..
Ich h ab den ganzen Abend mit den HTML Editor versucht und so was ist raus gekommen...ist erst nur zum zeigen...aber kappiere so langsamm wie das geht... nur was mir nicht gelungen ist das Hintergrung zu ändern hitern die navi ...aber für heute mach ich schon erstmal garnichts.. :R :R
http://mondschein21.npage.de/navi_f%C3% ... 29298.html

und was ich noch nicht verstehe das..warum die buttons wenn man druf mit die maus geht zucken zusammen ? :E

Schönen Abend noch und danke dir noch mals...werde mit sichereit sich noch paar mal melden bis ich fertig bin... :G :G

Re: Navi Leiste..

Verfasst: Mi 27. Jan 2010, 11:48
von stundenbanner
Hallo Moni,

habe mir graden den Queltext angeschaut und gesehen das du mehrere head bereiche hast.

Und das du den Style eingelagert hast.
Natürlich ist es egal ob man einlagert oder ausgelagert hat, nur ich entfehle es auszulagern da dies übersichtlicher ist.

Am besten, du machst nur einen head Berech dann kommt es auch nicht zu Problemen.

Re: Navi Leiste..

Verfasst: Mi 27. Jan 2010, 11:56
von moni
Hi..also ich hab nur einen head bereich gemacht..aber dann hab ich das auf Npage koppiert und musste einen style zuordnen..und dann kam automatisch das zweite dazu..das ganz oben....

Re: Navi Leiste..

Verfasst: Mi 27. Jan 2010, 12:10
von goefi-chiangmai
Ich bin mir nicht ganz sicher ob Ihr vom gleichen Spricht,
Denn diese HP hat ein Frame Design
@ Moni
Vermutlich hast Du in deiner Textseite wo Du die Navi hast zusätzlich einen Headbereich reingemacht, deswegen zwei!
am besten gibtst uns mal das was in deinem Style Steht, und der HTML Code wo in deiner Textseite steht

Re: Navi Leiste..

Verfasst: Mi 27. Jan 2010, 17:17
von moni
Hallo Peter...


Diese Leiste ist nicht für mich, was für mich wichtig war das sie überhaupt funktioniert. ich musste sie irgendwo ausprobieren.,bin auch längst damit nicht fertig, andere Buttons kommen warscheinig rein, und auch das ganze verlinken noch ..
und das mit den Skripten und Code da bin ich echt nicht schlau was genau gemeint ist... :II
Vielleicht kann man so machen, wenn ich die Leiste fertig habe da könnte man später dafür sorgen das es ordnungsgemäß eingetragen wird auf die richtige HP... :E