nicht angemeldet
Navi hilfe
hallo ich wollte fragen ob das mit css machbar ist
ich zeig euch mal was ich möchte
http://bw.drafdbzr12.com/navi.html
hab das so gemacht:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"></head>
<body background="navi.jpg" bgproperties="fixed"></html>
<a class="navi1" href="#" target="_blank"> Nummer I</a>
<a class="navi2" href="#" target="_blank"> Nummer II</a>
</head>
</html>
Body{
color:#FFFFFF;
font-family:Arial;
font-size: 14px;
}
a.navi1:link{color:#000000; font-size:14px; background-image:url(naviactiv.png); z-index:1; position:absolute; top:100px; width:100px; text-decoration: none;}
a.navi2:link{color:#000000; font-size:14px; background-image:url(naviactiv.png); z-index:2; position:absolute; top:100px; left:80; width:100px; text-decoration: none;}
a:visited {color:#000000; font-size:14px; text-decoration: none;}
a:active{color:#000000; font-size:14px; text-decoration: none;}
a:hover {color:FFFFFF; font-size:14px; background-image:url(navi.png); z-index:3; position:absolute; background-repeat:no-repeat; width:100px; text-decoration: none;}
also ich möchte das so machen wenn man mit der maus rüber geht das nummerI in den vordergrund rückt und nummer II dan in den hintergrund rückt
danke schon mal im vorraus ^^
-
Erstmal solltest du dein HTML richtig ordnen, die Links gehören nicht in den Head bereich. Ausserdem brauchst du unbedingt eine DOCTYPE angabe.
-
Ausserdem brauchst du unbedingt eine DOCTYPE angabe.
Wie kommst du darauf?
-
Wie kommst du darauf?
Weil ich schätze dass der TE ein anfänger ist und die erstellung einer Seite im Quirksmodus nicht lehrreich sein wird.
Lieber gleich den richtigen Weg lernen als den falschen, oder nicht?-
Weil ich schätze dass der TE ein anfänger ist und die erstellung einer Seite im Quirksmodus nicht lehrreich sein wird.
Lieber gleich den richtigen Weg lernen als den falschen, oder nicht?Das bestreite ich nicht - allerdings suggeriert deine Aussage, dass die Doctype-Angabe pflicht sei.
-
-
-
Erstmal solltest du dein HTML richtig ordnen, die Links gehören nicht in den Head bereich. Ausserdem brauchst du unbedingt eine DOCTYPE angabe.
ups sorry hab ich übersehen hab den body nicht gesetzt.
und ich hab noch nie mit Doctype angaben gearbeitet man braucht das ja nicht wirklich
kann man das nicht einfacher machen mit z index?
-
und ich hab noch nie mit Doctype angaben gearbeitet man braucht das ja nicht wirklich
Wenn man sich das Leben leichter machen möchte und auf hunderte fixes für den IE verzichten will, sollte man sich schon einen geeignete Dokumenttyp-Deklaration anschaffen. Zwingend erforderlich ist er hingegen nicht - aber das wurde bereits gesagt.
kann man das nicht einfacher machen mit z index?
Sicher - aber auch dafür wirst du JavaScript benötigen, selbes Problem: kein :hover für nicht-a-Elemente in alten IE-Versionen
-
»» kann man das nicht einfacher machen mit z index?
Sicher - aber auch dafür wirst du JavaScript benötigen, selbes Problem: kein :hover für nicht-a-Elemente in alten IE-Versionenhm.. mit javascript kenn ich mich garnicht aus gibst es nicht dafür irgendwo ein tutorial wie man genau so eine navi macht
-
hm.. mit javascript kenn ich mich garnicht aus gibst es nicht dafür irgendwo ein tutorial wie man genau so eine navi macht
Wie bereits empfohlen solltest du dich mit jQuery anfreunden - dafür brauchst du eigentlich kein JavaScript-Wissen.
Die Selektoren funktionieren wie in CSS und entsprechende Methoden für deinen Zweck sind reichlich vorhanden.
Für ein Menü bestehend aus einer unsortierten Liste innerhalb eines Elements mit der id "navigation" reicht z.B. folgender Schnipsel:
function navigation() { // Selektiere alle li-Elemente welche direkte Nachfahren eines ul-Elements innerhalb eines Elements mit der id navigation sind // wende darauf das Event "hover" an $('#navigation ul>li').hover( // Ast für onouseover function() { // füge die Klasse hover hinzu $(this).addClass("hover"); }, // selbriges, nur für onouseout function() { $(this).removeClass("hover); } ); }Somit wird bei onmouseover die klasse "hover" hinzugefügt und bei onmouseout wieder entfernt
Anstatt
li:hover { z-index: 10; }kannst du in deinem CSS dann
li:hover ul,
li.hover ul { z-index: 10; }Notieren und so dem IE auch in Genuss eine "Pseudo-Pseudo-Klasse" .hover brinden.
-
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body background="navi.jpg" bgproperties="fixed"> <script language="JavaScript" type="text/javascript"> function navigation() { // Selektiere alle li-Elemente welche direkte Nachfahren eines ul-Elements innerhalb eines Elements mit der id navigation sind // wende darauf das Event "hover" an $('#navigation ul>li').hover( // Ast für onouseover function() { // füge die Klasse hover hinzu $(this).addClass("hover"); }, // selbriges, nur für onouseout function() { $(this).removeClass("hover); } ); } </script> <a class="navi1" href="#" target="_blank"> Nummer I</a> <a class="navi2" href="#" target="_blank"> Nummer II</a> <ul> <li id="navigation"><a class="navi1" href="#">NummerI</a></li> <li id="navigation"><a class="navi2" href="#">Nummer II </ a> </ li> </ul> </body> </html>css datei:
Body{ background-repeat:no-repeat; color:#FFFFFF; font-family:Arial; font-size: 14px; } a.navi1:link{color:#000000; font-size:14px; background-image:url(navi.png); z-index:1; position:absolute; top:100px; width:100px; text-decoration: none;} a.navi2:link{color:#000000; font-size:14px; background-image:url(navi.png); z-index:2; position:absolute; top:100px; left:80; width:100px; text-decoration: none;} a:visited {color:#000000; font-size:14px; text-decoration: none;} a:active{color:#000000; font-size:14px; text-decoration: none;} li:hover ul, li.hover ul { z-index: 10; background-image:url(naviactiv.png); }was hab ich den jetzt falsch gemacht
-
was hab ich den jetzt falsch gemacht
Das jQuery-JavaScript fehlt - ohne jQuery keine jQuery-Methoden.
Am besten du liest dir das Getting Started kurz durch (zumindest Punkt 1 und 2).Dann solltest du deine Funktion überhaupt ausführen - üblicherweise geschicht das Event, welches deine Funktion überhaupt ausführt. Notiere nach deiner Funktion
$(document).ready( function() { // auszuführenden Funktionen wenn das DOM fertig ist navigation(); } );Prüfe ob jQuery überhaupt läuft.
Führe also sowas in die Richtung aus um zu sehen ob du überhaupt am richtigen Element bist.
$('#navigation').css('border', '5px solid red');
Bereinige deinen Code, aussehen sollte das html etwa so:
<div id="navigation"> <ul> <li>foo</li> <li>bar <ul> <li>2 foo</li> <li>2 bar</li> <li>2 baz</li> </ul> </li> <li>baz</li> <li>qux <ul> <li>3 foo</li> <li>3 bar</li> <li>3 baz</li> </ul> </li> </ul> </div>Anm.: das div-Element rundherum ist nicht notwendig, aller die id kann direkt in das äusserste ul-Element eingetragen werden. der jQuery-Selektor muss dann allerdings auf '#navigation li' angepasst werden und gilt sommit für alle li-Element in der navigation, nicht nur jene die Kinder von ul-Elementen sind. In gemischten ul/ol-Navigationlisten kann das ggf nicht gewünscht sein.
Mein fehler - natürlich willst du den z-index des li-elements manipulieren, nicht eines ul-Elements innerhalb eines li-Elements.
-
Nachtrag: meine Sprache scheint heute sehr stark degeneriert zu sein - wenn du den Sinn nicht erfassen kannst (von dem, was ich grade geschrieben habe), frag bitte nach :) ich bin nicht so ganz fit.
-
ok ^^
also da mein english nicht grad gut ist hoffe ich hab alles richtig verstanden ^^
also ich brauche eine jquery.js datei. und in der soll dann das drin stehn:
jQuery(document).ready(function() { $('#navigation').css('border', '5px solid red'); });und dann eine html datei in der das drin stehn soll:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <script type="text/javascript"> function navigation() { // Selektiere alle li-Elemente welche direkte Nachfahren eines ul-Elements innerhalb eines Elements mit der id navigation sind // wende darauf das Event "hover" an $('#navigation ul>li').hover( // Ast für onouseover function() { // füge die Klasse hover hinzu $(this).addClass("hover"); }, // selbriges, nur für onouseout function() { $(this).removeClass("hover); } ); } </script> <div id="navigation"> <ul> <li><a class="navi2" href="#">Nummer I </ a></li> <li><a class="navi2" href="#">Nummer II </ a></li> </ul> </div> </body>ist das so richtig ?
-
also ich brauche eine jquery.js datei. und in der soll dann das drin stehn:
Nein, du brauchst nicht eine jquery-Datei sondern DIE jQuery-Datei (welche die Bibliothek beinhaltet).
ist das so richtig ?
Und den Test-Schnipsel mit dem
jQuery(document).ready(function() { }kannst du entweder in ein ausgelagertes JavaScript-File schreiben oder in das script-Element deines HTML-Dokuments.Wichtig ist nur, dass zuerst die Bibliothek eingebunden wird und dann funktionen daraus ausgeführt werden.
-
hm ._. ich hoffe ich nerve nicht
ich hab das jetzt so gemacht:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { function navigation() { // Selektiere alle li-Elemente welche direkte Nachfahren eines ul-Elements innerhalb eines Elements mit der id navigation sind // wende darauf das Event "hover" an $('#navigation ul>li').hover( // Ast für onouseover function() { // füge die Klasse hover hinzu $(this).addClass("hover"); }, // selbriges, nur für onouseout function() { $(this).removeClass("hover); } ); } }); </script> </head> <body background="navi.jpg" bgproperties="fixed"> <div id="navigation"> <ul> <li><a class="navi1" href="#">Nummer I </ a></li> <li><a class="navi2" href="#">Nummer II </ a></li> </ul> </div> </body> </html>ich hab den test schon durchgefürt es wurde ein roter kasten erstellt
-
hm ._. ich hoffe ich nerve nicht
Nein, keineswegs - sofern etwas hängenbleibt, ist das kein Nerven sondern ein konstruktives Lernen.
jQuery(document).ready(function() {
});Du musst die Funktion irgendwo aurufen - am besten führst du den Code gleich innerhalb document.ready oder du setzt dort nur den Funktionsaufruf zu einer bereits definierten funktion (siehe mein Beispiel später)
Anbei ein Beispiel mit einem Versuchsaufbau - wenn du dich nach den Sliding Doors richtest, sollest du keine Probleme haben. Die Pseudoklasse :hover fehlt absichtlich, damit du das JavaScript deaktiveren und ausprobieren kannst, wie es sich bei einem Browser verhält, der die Pseudoklasse :hover nicht versteht (der IE 6 z.B.).
Im Script war übrigens noch ein Fehler: removeClass("hover); anstatt removeClass("hover"); (mein Fehler).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> // Funktion definieren function navigation() { // Selektiere alle li-Elemente innerhalb von #navigation // wende darauf das Event "hover" an jQuery('#navigation li').hover( // Ast für onmouseover function() { // füge die Klasse hover hinzu jQuery(this).addClass('hover'); }, // selbriges, nur für onmouseout function() { jQuery(this).removeClass('hover'); } ); } // Funktion bei fertigem DOM ausführen jQuery(document).ready( function() { navigation(); } ); </script> <style type="text/css"> #navigation { margin: 0; font: bold 12px sans-serif; } #navigation li { list-style: none; margin: 0 0 0 -7px; float: left; background: #A0E0A0; position: relative; z-index: 5; } #navigation li a { background: #80C080; text-decoration: none; float: left; padding: 3px 2px 3px 9px; margin-right: 7px; } #navigation li.cur { background: #E0A0A0; z-index: 10; top: -3px; } #navigation li.cur a { background: #C08080; padding-top: 6px; } #navigation li.hover { background: #A0A0E0; z-index: 10; } #navigation li.hover a { background: #8080C0; } </style> </head> <body> <ul id="navigation"> <li><a href="#">foo foo foo</a></li> <li class="cur"><a href="#">bar bar</a></li> <li><a href="#">baz</a></li> <li><a href="#">qux qux qux</a></li> </ul> </body> </html>-
-
woran kann das liegen? ._.
Am CSS :) ich hab das nur schnell hingebastelt und ausschließlich unter Firefox 3 getestet - wie gesagt, nimm dir den Sliding-Doors-Artikel zur Brust, der beschreibt die Formatierung ins Detail.
Die techische Grundlage bez. JavaScript solltest du jetzt haben.
-
ok ^^
wie mach ich das eigentlich das a:active im ie und im fox funktioniert?
bekomm das nur für den ie hin-
wie mach ich das eigentlich das a:active im ie und im fox funktioniert?
bekomm das nur für den ie hinunterscheide zwischen :active (einem derzeit aktiven Link - die Unterschiede zu :focus sind gering, aber im IE halt anders als im FF) und dem _derzeitigen_ Menüpunkt, den ich entweder garnicht verlinken (durch ein span-Element ersetzen) oder mit der Klasse "current" kennzeichnen würden.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
also ich möchte das so machen wenn man mit der maus rüber geht das nummerI in den vordergrund rückt und nummer II dan in den hintergrund rückt
Allerdings wirst du um ein paar Zeilen JavaScript (Empfehlung: jQuery .hover()) nicht herumkommen, da ältere Internet Explorer mit der Pseudoklasse :hover auf einem li-Element nichts anfangen können.
