hilfdirselbst.ch
Facebook Twitter gamper-media
Tipps und Tricks zu Adobe GoLive von Dirk Levy, GoLive FAQ's von Randolph Sterna
Laisha
Beiträge: 20
15. Mär 2004, 23:45
Beitrag #1 von 9
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Hallo,

kann mir jemand sagen, wie die Navigationsleiste folgender Seite realisiert wird? Ich komm einfach nicht dahinter...

http://www.bentrop.net Top
 
X
Tömsken
Beiträge: 720
16. Mär 2004, 00:00
Beitrag #2 von 9
Beitrag ID: #75186
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Schauen wir doch mal in den Qualcode:

<a class="menu" href="#">&raquo; Home</a>
<a class="menu" href="#">&raquo; News</a>

Also eine ganz schlichte Variante, die den Rollover-Effekt einzig per CSS realisiert. Schauen wir also in's CSS-File:

/* Dieser Style definiert das Aussehen des "normalen" Menü-Links */

a.menu:link, a.menu:visited {
display : block;
background-color : white;
color : #900;
font-weight : bold;
text-decoration : none;
padding : 2px;
border : 1px solid black;
width : 120px;
margin : 5px 0px 5px 0px;
}

/* ...und damit's "leuchtet", wenn die Maus drüber ist: */

a.menu:active, a.menu:hover {
color : white;
background-color : #900;
}
als Antwort auf: [#75185] Top
 
Laisha
Beiträge: 20
16. Mär 2004, 00:04
Beitrag #3 von 9
Beitrag ID: #75187
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Wow!

Dankeschön! Mal schaun ob ich das auch hinkrieg...
als Antwort auf: [#75185] Top
 
Laisha
Beiträge: 20
16. Mär 2004, 00:09
Beitrag #4 von 9
Beitrag ID: #75189
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Kannst Du mir vielleicht noch sagen, was ich tun muss, wenn ich die Buttons nebeneinander statt übereinander haben will...?
als Antwort auf: [#75185] Top
 
Laisha
Beiträge: 20
16. Mär 2004, 00:46
Beitrag #5 von 9
Beitrag ID: #75190
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Oder kennt jemand einen Link zu einem fertigem Skript, dass so aufgebaut ist?
als Antwort auf: [#75185] Top
 
Tömsken
Beiträge: 720
16. Mär 2004, 01:39
Beitrag #6 von 9
Beitrag ID: #75191
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Probier mal das "display : block;" wegzulassen.
als Antwort auf: [#75185] Top
 
r a c
Beiträge: 955
16. Mär 2004, 02:38
Beitrag #7 von 9
Beitrag ID: #75194
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Ich würde display: block drin lassen und die Links in eine einfache Tabelle packen (damit eben die Blockelemente neben einander stehen können).


als Antwort auf: [#75185] Top
 
SabineP  M 
Beiträge: 7586
16. Mär 2004, 10:53
Beitrag #8 von 9
Beitrag ID: #75218
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


Hier noch ein Online-Generator für solche Buttons:
http://www.accessify.com/...tic/list-o-matic.asp

und viele Beispiele:
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/index.htm

Und eine Liste der Browser, die das Menü darstellen können:
http://css.maxdesign.com.au/.../browser-support.htm
http://css.maxdesign.com.au/.../browser-support.htm

Gruß Sabine
als Antwort auf: [#75185]
(Dieser Beitrag wurde von SabineP am 16. Mär 2004, 11:04 geändert)
Top
 
Laisha
Beiträge: 20
16. Mär 2004, 11:31
Beitrag #9 von 9
Beitrag ID: #75228
Bewertung:
(1399 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie wird diese Navigationsleiste erstellt? (mit Bsp-Link)


yupp, genausowas hab ich gesucht! Danke!

(P.S.: Die block-Funktion ist tatsächlich für das Untereinanderschreiben verantwortlich!)
als Antwort auf: [#75185] Top
 
X