Forum Partner+Friends LinkUs Downloads KNW Suche TS³ Viewer Twitter Facebook

Navigation aus dem Kit in eigene HTML Seite

Jetzt kostenlos Anmelden!


Janni

unregistriert

1

Montag, 4. August 2008, 21:11

Navigation aus dem Kit in eigene HTML Seite

Guten Abend,

Auf www.phpkit.de finde ich die linke Navigation sehr hübsch, und denke mal, das die per CSS gesteuert wird. Ich würde diese Navigation gerne auch habe, aber auf einer reinen HTML Seite. Wie würde das Funktionieren, bzw der Code dafür aussehen???
Habe schon bei www.google.de danach gesucht, doch leider nichts passendes gefunden.
Klar würde es mit einem Mouseovereffekt auch gehen, doch ich möchte für die Link keine Grafiken erstellen. Würde mich über Hilfe freuen.

Liebe Grüße
  • Zum Seitenanfang
  • Zum Seitenende

Proggi

unregistriert

2

Montag, 4. August 2008, 21:19

Hi Janni ;)

Dabei könnte Dir diese Seite weiter helfen.
Sie beschreibt die Erstellung von "Listenmenüs" und gibt einige Beispiele.

EDIT:
Dieses Beispiel geht in die gewünschte Richtung
/EDIT

Netten Gruß Andy --- Proggi
  • Zum Seitenanfang
  • Zum Seitenende

Janni

unregistriert

3

Montag, 4. August 2008, 22:06

Danke Proggi, das hat fast geklappt, nur eine kleine Frage. So sieht mein fertiger Code aus:

style.css

PHP-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<style type="text/css">
#navlist
{
margin-left: 20px;
font: 12px Tahoma;
width: 140px;
}
#navlist li
{
list-style: none;
margin: 0;
border: 0px solid;
text-align: left;
}
#navlist li a
{
display: block;
border-left: 4px solid #26489F;
background: #B8C5E5;
text-decoration: none;
}
#navlist li a:link { color: #26489F; }
#navlist li a:visited { color: #000000; }
#navlist li a:hover
{
border-color: #FF7500;
color: #000000;
background: #EFEFEF;
}
</style>


navi.html

PHP-Quelltext

 
1
2
3
4
5
6
7
8
9

<div id="navcontainer">
<ul id="navlist">
</p><li id="active"><a href="seite1.html" id="current">&nbsp;&nbsp;Item one</a></li>
<li><a href="seite2.html">&nbsp;&nbsp;Item two</a></li>
<li><a href="seite3.html">&nbsp;&nbsp;Item three</a></li>
<li><a href="seite4.html">&nbsp;&nbsp;Item four</a></li>
<li><a href="seite5.html">&nbsp;&nbsp;Item five</a></li>
</ul>
</div>


Das sieht nun sehr hübsch aus, und fast wie bei www.phpkit.de. Nur halt andere Farben. Doch wie bekomme ich die Links etwas mehr zusammen? Die sind zu tief bis zum anderen. Di sollen links einen blauen balken darstellen, doch die Lücken unter den Links ist nicht so toll. Wie kann man die entfernen?
  • Zum Seitenanfang
  • Zum Seitenende

Proggi

unregistriert

4

Montag, 4. August 2008, 22:30

Dann ersetze mal bitte im style-Bereich folgendes

Quellcode

 
1
2
3
4
5
6
7

#navlist li a
{
display: block;
border-left: 4px solid #26489F;
background: #B8C5E5;
text-decoration: none;
}


durch folgendes:

Quellcode

 
1
2
3
4
5
6
7
8
9

#navlist li a
{
display: block;
height: 16px;
padding: 5px;
border-left: 4px solid #26489F;
background: #B8C5E5;
text-decoration: none;
}


Die Balken bekommt man durch die Angabe border-left....... Da einfach mal ein wenig mit der Stärke und den Farben probieren bis es Dir gefällt.
Einfach immer wieder ein oder zwei Angaben ändern und das Ergebnis davon anschauen ;)

Netten Gruß Andy --- Proggi
  • Zum Seitenanfang
  • Zum Seitenende

Janni

unregistriert

5

Montag, 4. August 2008, 22:34

Hammer, was du alles kannst, ich bin beeindruckt. Danke Dir, genau meinte ich es.

Liebe Grüße!
  • Zum Seitenanfang
  • Zum Seitenende

Proggi

unregistriert

6

Montag, 4. August 2008, 22:36

öööhhhmmm - das kann der Browser :D
Aber auch wieder nicht alle............
  • Zum Seitenanfang
  • Zum Seitenende

Janni

unregistriert

7

Montag, 4. August 2008, 22:45

Jetzt wo du es sagst, fällt es mir auf. Der FireFox stellt mal wieder alles total falsch da... ohhhhhhhhhhhhhhhhhh
Wieso ist im FireFox die Navi so weit nach rechts verschoben? Sie soll lediglich von linken Rand 20px entfernt sein, und insgesamt soll die navi 160px sein.

Warum nutzt nicht einfach jeder den IE7....
  • Zum Seitenanfang
  • Zum Seitenende

Proggi

unregistriert

8

Montag, 4. August 2008, 22:57

So probiert man sich durch:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
#navlist
{
margin: 0;
padding: 0;
/*margin-left: 20px;*/
font: 12px Tahoma;
width: 140px;
}
#navlist li
{
list-style: none;
margin: 0;
border: 0px solid;
text-align: left;
}
#navlist li a
{
display: block;
width: 160px;
height: 16px;
padding: 5px;
border-left: 4px solid #26489F;
background: #B8C5E5;
text-decoration: none;
}
#navlist li a:link { color: #26489F; }
#navlist li a:visited { color: #000000; }
#navlist li a:hover
{
border-color: #FF7500;
color: #000000;
background: #EFEFEF;
}
</style>


;)

Eine gute Seite für CSS ist auch noch diese hier

Netten Gruß Andy --- Proggi
  • Zum Seitenanfang
  • Zum Seitenende

Ähnliche Themen

Tagging