|
|||
Navigation mit CSS und Bilder
Guten Tag Leute,
Da ich eine bestimmte Schriftart unbedingt benutzen möchte, und der Weg über Bilder unvermeidlich ist, da nicht jeder die Schrift hat. Im PS template habe ich schon eine NavBar vorgesehen, daher will ich nur die Schriften irgendwie drüber kriegen mit CSS. Navi mit Standard Schriften passen nicht zum Design,habe ich schon probiert. meine erste Frage ist. wie gehe ich da konkret vor mache ich ein transparenter gif mit alle links drauf oder für jeden Link ein gif ( bei beiden Schrift auf transparenter Bg)? Nur die Schriftfarbe soll sich ändern in den jeweiligen Zustände. Es ist mir klar, dass ich für die jeweiligen Zustände (link, hover, focus), gif in unterschiedliche Farben machen muss. Ich vermute auch, dass ich für jeden Link eine entsprechende id in der CSS Datei definieren muss. Hoffe es kann mir jemand helfen oder hat ein guter Tut zu empfehlen. dank im voraus. |
Sponsored Links |
|
|||
Hi,
ich würde vorschlagen, für jeden Link und für jeden Zustand ein Bild. Klar musst du dann auch für jeden Link eine Id haben um ihn gezielt ansprechen zu können. Falls du jetzt also mit Grafiken arbeiten wirst musst du die Sache mit dem Preload beachten... Möcht nicht rumquasseln... Sag bescheid falls du dazu Infos brauchst. Gruß urklmurkl |
Sponsored Links |
|
|||
also ich würde auf keinen fall für jeden zustand ein eigenes Bild machen. Es sieht einfach nur hässlich aus wenn so ein Bild nachlädt.
Verbreitet ist die Methode ein bild mit allen 3 zuständen zu haben und das bild jeweils so zu verschieben wie man es braucht. Ich hoffe ich hab deine frage richtig verstanden PS: Achja, hier ein paar Image replacement Techniken: http://meiert.com/de/publications/articles/20050513/ |
|
|||
Zitat:
danke, ich melde mich wenn ich steckenbleibe. gruss |
|
|||
Zitat:
gruss |
|
|||
Das Original dieser Methode stammt von Pixy. Seine ziemlich gute Beschreibung findet sich hier:
http://www.wellstyled.com/css-nopreload-rollovers.html Ahnung von Mathe braucht man nicht, nur etwas Ahnung von Englisch. Gruß Chattanooga |
|
|||
Zitat:
gruss |
Sponsored Links |
|
|||
Morgen Leute,
Mit dem Link von Chatta, habe ich folgende Navi erstellt. Firefox zeigt alles an problemlos, nur im IE sieht man gar nichts. Könnte mir bitte da jemand helfen, bin für jede Hilfe dankbar. Bin kein Experte; also bitte so dass ich verstehen kann. Dank im voraus. HTML: Code:
<div id="navigation"> <ul id="navi"> <li id="home"> <li id="about"> <li id="news"> [/list]</div> CSS: Code:
#navigation { margin: 0 auto; padding: 0px; background: url(../design/navbar.png) no-repeat; height: 58px; width: 984px; overflow: hidden; } #navigation ul { margin: 0; padding: 0 100px; list-style-type: none; text-align: center; } #navigation li { float: left; list-style: none; display: inline; padding: 28px 0px 0 5px; } #navigation ul { margin: 0; padding: 0 100px; list-style-type: none; text-align: center; } #navigation li a { display: block; padding: 25px 0 0; overflow: hidden; height: 0 !important; height /**/: 35px; /* for IE5/Win */; font-size: 10px; border-bottom: none; text-align: center; } #navigation li a:hover { background-position: 0 -25px; text-decoration: none; } li#home a { background: url(../images/navhome.gif) no-repeat left top; width: 65px; } li#about a { background: url(../images/navabout.gif) no-repeat left top; width: 65px; } li#news a { background: url(../images/navnews.gif) no-repeat left top; width: 65px; } |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe bei CSS Navigation | trimalchio | CSS | 7 | 10.01.2011 13:13 |
Bilder werden aus dem CSS nicht angezeigt | dihegroup | CSS | 6 | 13.04.2010 08:48 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 15:46 |
Listenformatierung mit CSS Problem bei Navigation | loozy | CSS | 4 | 07.06.2006 14:03 |
Horizontale Navigation mit Rollovergrafiken – mit CSS? | Kirsten | CSS | 6 | 04.06.2006 11:57 |