Suche im Forum:
Suchen


Autor Nachricht
Beitrag17.06.2007 um 16:17 (UTC)    
Titel: Navigation oben

Hallo Leute wollte mal fragen wie seine navigation (Menü) nach oben über oder unter dem heder macht also bitte antworten

z.B wie auf dieser seite

http://www.outcast-inventions.de.tl/Projekte.htm


Zuletzt bearbeitet von russian-gangster am 17.06.2007, 22:05, insgesamt 2-mal bearbeitet
Beitrag17.06.2007 um 16:20 (UTC)    
Titel:

Hi,

diese Navigation habe ich mir selbst geschrieben, also mit eigenen Klassen!
Wenn du auch so eine Navi haben möchtest, dann schreib mich per PN an! Wink
______________
==> OutCast Inventions

Der DesignCreator für den PC ... in wenigen Minuten das eigene individuelle Iceblue-Design!
Beitrag17.06.2007 um 21:05 (UTC)    
Titel:

Wäre schön, wenn Du es für alle erklärst Wink
Beitrag18.06.2007 um 08:08 (UTC)    
Titel:

Alles klar!
Also hier der Code, um ein einfaches Menü in den Header zu bekommen:

Das ganze wird bei Text unter dem Design eingegeben, da es für die absoluten Positionen besser ist, damit die Navi auch nicht hinter dem Design verschwindet:

Zitat:

<!-- CSS-Code für Header-Buttons -->

<style type="text/css">
<!--
.HeaderLink {
background-image: url(http://Der-Link-zum-Button);
color: #FFFFFF;
width: 80px;
height: 18px;
font-size: 13px;
text-align: center;
text-decoration: none;}

.HeaderLink:link {
color: #FFFFFF;
font-size: 13px;
text-decoration: none;}

.HeaderLink:hover {
background-image: url(http://Der-Link-zum-Hover-Button);
color: #FF8000;
width: 80px;
height: 18px;
font-size: 13px;
text-decoration: none;}

.HeaderLink:active {
color: #FF8000;
font-size: 13px;
text-decoration: none;}

.HeaderLink:visited {
color: #FF8000;
font-size: 13px;
text-decoration: none;}
-->
</style>

<!-- Ende -->


Ja, dass ist der CSS-Code für die "Header-Links".
Das rot makierte ist die Klasse ("HeaderLink").
Das blau makierte ist einmal für den normalen Button und einmal für den Hover-Button, diese Müssen angepasst werden.
Desweiteren muss außerdem das orange makierte angepasst werden. Zum einen die Breite des jeweiligen Buttons (width / bei mir 80 Pixel) und zum anderen die Höhe (height / bei mir 18 Pixel). Ein Beispiel:
Euer Button hat eine Breite von 185 Pixeln und eine Höhe von 33 Pixeln! Somit muss man bei "width:" "185px;" eintragen und bei "height:" "33px;".
Wer sich mit CSS auskennt, kann natürlich auch noch die jeweiligen Schriftfarben/Schriftgrößen/Schriftdeklerationen ändern, aber das möchte ich nicht noch alles erklären! Gut. Als nächstes kommen dann die Links...

Diesen Code müsst ihr dann nach dem oben genannten Code einfügen:
Zitat:

<!-- Header-Boxen-Links -->

<a href="http://www.deineDomain.de.tl/EineSeite.htm" class="HeaderLink" style="position: absolute; top: 160px; left: 545px;">Name auf Button</a>
<a href="http://www.deineDomain.de.tl/EineSeite.htm" class="HeaderLink" style="position: absolute; top: 160px; left: 635px;">Name auf Button</a>
<a href="http://www.deineDomain.de.tl/EineSeite.htm" class="HeaderLink" style="position: absolute; top: 160px; left: 725px;">Name auf Button</a>
<a href="http://www.deineDomain.de.tl/EineSeite.htm" class="HeaderLink" style="position: absolute; top: 160px; left: 815px;">Name auf Button</a>

<!-- Ende -->


Ja und das sind dann die Links.
Viel makiert durch Farben, die ich jetzt erkläre.
Also:
Zum ersten das hellblau makierte:
Dort müsst ihr dann die Adressen zu den jeweiligen Seiten eintragen.
Zum orange makierten:
Das ist für euch nichts wichtiges. Hier wird einfach nur die Klasse, die wir im darüberstehenden Code deklariert haben, angegeben.
Zum rot makierten:
Das müsst ihr dann selbst anpassen! Hier werden die Positionen (natürlich absolute) für die jeweiligen Links angegeben! Die Positionen werden durch "top" und "left" ermittelt (in Pixeln).
Zum blau makierten:
Hier müsst ihr den "Text" eintragen, der auf dem Button stehen soll. Beispielsweise "Home" / "Impressum" / ...

Ja, dass wars eigendlich...ich hoffe Ihr habt es verstanden... Wink

mfg OutCast Inventions
______________
==> OutCast Inventions

Der DesignCreator für den PC ... in wenigen Minuten das eigene individuelle Iceblue-Design!


Zuletzt bearbeitet von outcast-inventions am 18.06.2007, 09:09, insgesamt einmal bearbeitet
Beitrag18.06.2007 um 10:07 (UTC)    
Titel:

wo genau muss man den unteren code oben einfügen??
und geht dies für iceblue weil ich dieses nämlich habe

mfg
Beitrag18.06.2007 um 10:13 (UTC)    
Titel:

Also du musst es über Desing einstellen und es ist für ice blue.
Beitrag18.06.2007 um 16:42 (UTC)    
Titel:

ist schon cool musst aber nicht si große buttem nehmen Wink
Beitrag18.06.2007 um 18:45 (UTC)    
Titel:

steffenstrack hat Folgendes geschrieben:
Also du musst es über Desing einstellen und es ist für ice blue.


Ich denke, dass dieser Code bei allen Designs funktionieren würde, da es ja eine eigenständige Klasse ist, die es im HPBK nicht gibt...
Kann mich aber nicht festlegen, da es nur für Iceblue optimiert ist und ich es noch bei keinem anderen Design getestet habe... Wink

Edit:
Soo...habe es jetzt mal mit mehreren Designs ausprobiert und es hat alles einwandfrei funktioniert Exclamation
______________
==> OutCast Inventions

Der DesignCreator für den PC ... in wenigen Minuten das eigene individuelle Iceblue-Design!


Zuletzt bearbeitet von outcast-inventions am 19.06.2007, 17:13, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de