Meine CSS Navi updaten

UT2003ler

Lebende Foren Legende

Dabei seit: 04.10.2002

Beiträge: 1 514

1

Freitag, 26. Oktober 2007, 23:03

Hoi

Ich hab mir eine CSS navigation zusammengebastelt mit der hilfe von selfhtml.net
Nun möchte ich nur noch einige updates hinzufügen...

1. Update
Ich würde gerne vor dem Text ein kleines symbol einfügen (ca 10x10 px) das sich beim Hovern auch nicht verändern muss. Ist das möglich? Cool wäre es wenn man dem über die <li> noch andere symbole zuteilen könnte...

2. Update
Active Link.. ich möchte gern das sich der Button grafisch verändert wenn er gerade aktiv ist... habs schon probiert... hab ich aber wohl versagt

Ist das alles irgendwie möglich?

Hier erstmal der code

PHP-Quelltext

ul#Navigation {
    margin: 0; padding: 0em;
  }

ul#Navigation li {
    display: inline;
    width: 130px;
    list-style: none;
    margin: 0.1em; padding: 0;
    
  }

ul#Navigation a {
    display:block;
    padding: 0.1em;
    text-decoration: none; font-weight: bold; color: #333333;

  }
ul#Navigation a:hover {
    border: 1px solid black;
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: black; background-color: white;
  }
ul#Navigation a:active {
    border: 1px solid black;
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: black;
  }

gruß

Hardy

wir leben um zu (er)leben

Website: www.virtoreal.net

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

2

Samstag, 27. Oktober 2007, 00:36

Also erstmal zu deinem ersten Problem.

So ist das bei meinem Blog (http://zoryfl.wmw.cc wenn du dir die Navi mal anschaun willst..) realisiert:

	Quellcode
1	background-image: url(images/navbulle.gif);

Müsste bei dir theoretisch auch so funktionieren..

Und zum Zweiten: "während er aktiv ist", meinst du damit, während die Seite zu der der Link führt, geöffnet ist?
So oder so: das hier sollte dir helfen: http://www.css4you.de/wscss/css03.html
Such einfach (Strg +f suche meine ich jetzt) nach "active" und du gelangst zum richtigen Part.
Überschrift ist: "Pseudoformate für Hyperlinks und Anderes"

http://zoryfl.wmw.cc

Fab

Lebende Foren Legende

Dabei seit: 30.03.2003

Beiträge: 1 635

3

Samstag, 27. Oktober 2007, 12:02

Hi

Wie schon gesagt, kannst du diese 10x10 Grafik über ein Hintergrundbild einfügen. Es gibt allerdings noch eine weitere Möglichkeit:

http://www.css4you.de/list-style-image.html

Wegen deinem zweiten Problem:

Du hast ja bereits :active auf das Element "a" angewendet. Sinnvoll wäre jedoch auch, wenn du zusätzlich "display: block; height: xx; width: xx;" angeben würdest. Dann kann der Benutzer überall auf den Button klicken, anstatt das nur gerade der Link zum Ziel führt

Echt gut, dass immer mehr auf den CSS-Zug umsteigen :thumbup:

Mfg Fab

-->Vokaline - schneller und effizienter Wörter lernen<-- (kostenlos!)

UT2003ler

Lebende Foren Legende

Dabei seit: 04.10.2002

Beiträge: 1 514

4

Sonntag, 28. Oktober 2007, 12:28

Hoi

Danke für die Tipps...

Jedoch hab ichs nicht wirklich sonderbar hinbekommen...

PHP-Quelltext

ul#Navigation {
    margin: 0; padding: 0em;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
  }

ul#Navigation li {
    display: inline;
    width: 130px;
    list-style: none;
    margin: 0.1em; padding: 0;
  }

ul#Navigation a {
    background-image: url(../gfx/Table/Navi/Icons/sackl.gif); background-repeat: no-repeat;
    display:block;
    padding: 0.1em;
    text-decoration: none; font-weight: bold; color: #333333;
  }

ui#Navigation a:active {
    display: block; height: 10; width: 30;
    border: 1px solid white;
    border-color: white;
    border-left-color: white; border-top-color: white;
    color: black;
  }

ul#Navigation a:hover {
    filter:alpha(opacity=40);
       opacity:0.4;
       -moz-opacity:0.4; 
    border: 1px solid black;
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: black; background-color: white;
  }

Das Icon wird zwar angezeigt... nur is das Icon direkt hinterm Text.. wie schiebe ich den text einwenig nach vorne? Und das Active fenster funzt auch nicht so richtig

also wenn ich auf den link klicke wird nach öffnen der nächsten seite der button nicht verändert...

Das mit den auflistungssymbol ändern ist ne feine sache, jedoch will ich ja das symbol innerhalb des buttons haben... daher background mit no repeat...

Könnt ihr mir nomal helfen

EDIT:
Hab das mitn background und den text hingekriegt! Padding is genial, und background-position auch

css gefällt mir immer mehr

PHP-Quelltext

ul#Navigation {
    margin: 0; padding: 0em;
    font-size: 11px;
    font-family: Verdana, Helvetica, sans-serif;
  }

ul#Navigation li {
    display: inline;
    width: 130px;
    list-style: none;
    margin: 0.1em; padding: 0;
  }

ul#Navigation a {
    background-image: url(../gfx/Table/Navi/Icons/sackl.gif); background-repeat: no-repeat;
    background-position:2px 3px;
    display:block;
    padding-left: 13px; padding-top: 2px;
    text-decoration: none; font-weight: bold; color: #333333;
  }

ui#Navigation a:active {
    display: block; height: 10; width: 30;
    border: 1px solid white;
    border-color: white;
    border-left-color: white; border-top-color: white;
    color: black;
  }

ul#Navigation a:hover {
    filter:alpha(opacity=40);
       opacity:0.4;
       -moz-opacity:0.4; 
    border: 1px solid black;
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: black; background-color: white;
  }

Nur noch das problem mit active!

wir leben um zu (er)leben

Website: www.virtoreal.net

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »UT2003ler« (28. Oktober 2007, 12:47)

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

5

Sonntag, 28. Oktober 2007, 12:51

Zitat

ui#Navigation a:active {
display: block; height: 10; width: 30;
border: 1px solid white;
border-color: white;
border-left-color: white; border-top-color: white;
color: black;
}

Also das wäre zwar jetzt schon fast zu primitiv, aber.. schau mal auf das rot eingefärbte xD
Hat sich da etwa ein kleines i anstelle eines kleinen l eingeschlichen? :o

http://zoryfl.wmw.cc

UT2003ler

Lebende Foren Legende

Dabei seit: 04.10.2002

Beiträge: 1 514

6

Sonntag, 28. Oktober 2007, 13:38

ups

etz geht da was... aber mir fällt grad auf das das nicht das ist was ich meinte

... das ist ja quasie nur so lang aktiv wie ich den button gedrückt halte...

Hab nun auch mal visited ausprobiert... aber das ändert quasie jeden link der besucht wurde

Was ich halt suche ist das der button andersfarbig wird.. wenn der link auf dem der button verweißt bereits geöffnet ist... geht sowas?

EDIT:
Noch ne frage

Wenn ich in einen UI nochn UI mache... wird der nächste eintrag etwas verschoben... kann ich das verschieben beeinflussen das der abstand nicht ganz so groß ist?

Ja ich weiß echt viele ansprüche... ich machs einem nicht leicht

EDIT:
habs mit

	PHP-Quelltext
1 2 3 4 5 6	ul#Navigation li ul { margin: 0 0 0 1em; padding: 0; } ul#Navigation li ul li { margin: 0.1em 0; }

Probiert... funktioniert jedoch nicht -.-

wir leben um zu (er)leben

Website: www.virtoreal.net

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »UT2003ler« (28. Oktober 2007, 13:53)

zoryfl

Moderator

Dabei seit: 14.01.2003

Beiträge: 2 766

7

Sonntag, 28. Oktober 2007, 14:12

Da hab ich grade mal folgendes bei google dazu gefunden: Link

Löst das dein problem? Habe leider gerade nicht die Zeit das auszuprobieren.

Was meinst du mit verschoben? Achja und: du würdest es (mir zumindest) um einiges leichter machen dir zu helfen, wenn du einfach mal einen Link zur Seite rausgeben würdest, dass man sich das auch anschaun kann..
Dann hätte sich die Frage mit dem "was meinst du mit verschieben?" sprich wohin, etc. vllt. schon erledigt.

Gruß

http://zoryfl.wmw.cc

UT2003ler

Lebende Foren Legende

Dabei seit: 04.10.2002

Beiträge: 1 514

8

Sonntag, 28. Oktober 2007, 14:32

Das mit dem was ich meine kann man nicht realisieren mit CSS... das muss ich wohl mit php machen

oder ich lass es einfach ganz weg, so wichtig ist das nicht... eigentlich überhaupt nicht

Das einzige was ich noch möchte ist.. das die zweite einrückung wie man hier schön sehn kann

http://www.virtoreal.net/Blog/Test.php

sich nicht so weit nach rechts rausrückt... soll nur 10px weiter rechts sein das das obige also Servus von Seite 2 so 10 px weiter vorne...

Das ganze mach ich mit <ui><li>Seite 2</li><ui><li>Servus</li></ui></ui>

In css stand der code den ich oben reingepostet hab, aber er funzt hier irgendwie nicht... weiß nicht wieso...

EDIT:
Habs hingekriegt... hab nen fehler gemacht.. müsste es so machen

<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>

hab jedoch das zweite UI nicht mit in den <li> von Seite 2 genommen, so hats net gefunzt

Etz bast alles perfekt

Vielen dank für die viele Hilfe

EDIT:

Nur noch eines wollt ich haben.. das sich das Icon beim einrücken verändert... steig aber net dahinter wie ich das machen könnt... man könnt das ganze dann viel besser abgrenzen...

hier mein code bisheer

PHP-Quelltext

ul#Navigation {
    margin: 0; padding: 0em;
    font-size: 11px;
    font-family: Verdana, Helvetica, sans-serif;
  }

ul#Navigation li {
    display: inline;
    width: 130px;
    list-style: none;
    margin: 0.1em; padding: 0;
  }

ul#Navigation li ul {
    margin: 0 0 0 1em; padding: 0;
  }

ul#Navigation li ul li {
    margin: 0.1em 0;
  }

ul#Navigation a, ul#Navigation span  {
    background-image: url(../gfx/Table/Navi/Icons/sackl.gif); background-repeat: no-repeat;
    background-position:2px 3px;
    display:block;
    padding-left: 13px; padding-top: 2px;
    text-decoration: none; font-weight: bold; color: black;
  }

ul#Navigation a:hover, ul#Navigation span {
    filter:alpha(opacity=40);
       opacity:0.4;
       -moz-opacity:0.4; 
    border: 1px solid black;
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: black; background-color: white;
  }

ul#Navigation p {
    margin: 0em; padding: 0;
    text-decoration: none; font-weight: bold; color: white;    
  }

wir leben um zu (er)leben

Website: www.virtoreal.net

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »UT2003ler« (31. Oktober 2007, 19:32)

Breschniew

Jungspund

Dabei seit: 08.11.2007

Beiträge: 11

9

Freitag, 30. November 2007, 19:45

List Style

Hallo,

Du könntest den gewünschten Effekt auch mit dem "list-style-image" Tag hin bekommen.

es sieht dann so aus: Musst dann als Quelle deine 10x10px Bilddatei angeben:

#.....li {
...
...
...
...
...
list-style-image: url (images/...rot_quadraht.gif) }

Bedenke nur das der Firefox dieses Tag nicht anzeigt, sondern nur der Inetexplorer...

Mfg Simon

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

10

Freitag, 30. November 2007, 20:32

hm, na wenns der firefox nicht anzeigt, was bringt ihm das dann?

PHP-Quelltext

.classname li{
    list-style:none;
    background-image:url(../grafik.gif);
    background-repeat:no-repeat;
    background-position:left; /* anpassen natürlich // bottom, center, inherit, left, right, top  */
    margin:0px;
    padding-left:12px; /* anpassen natürlich */
    height:10px; /* anpassen natürlich */
    width:10px; /* anpassen natürlich */
}

so sollte ein schuh draus werden

FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Rene82« (30. November 2007, 20:33)