ich hab irgendwie das Problem, das ich in einem Div die links anders gestalten will wie in einem anderen div.
Aber irgendwie schaffe ich es nicht per classe , wie macht man das. immer wenn ich links bezeichne dann verändern sich alle auf der Seite
Links anders bezeichnen je nach div
-
Kämpfer -
20. Oktober 2009 um 19:18
-
-
-
ich glaub ich meinte natürlich so
HTML
Alles anzeigen#navi_top { /* Navigation unter dem Header */ width: 828px; height: 18px; padding: 4px 2px 4px 20px; background-color: #000000; word-spacing: 25px; } #navi_top a:link, a:visited, a:hover, a:active { color: #ffffff; text-decoration: none; } #navi_top a:hover { color: #d8ebe9; }
Irgendwie geht der active befehl nach klick auf den link im IE8 nicht mehr -
-
Ja alle Links sollen in der Navi_top weiß sein und bei überfahren grau bzw silber, und wenn man die maus entfernt müsste es wieder weiß werden.
Und hatte eigentlich auch schon funktioniert,
wenn ich jetzt aber bei der anderen vertikalen navi auch so verfahre dann verändern sich die links alle. hier mal der ganze quellcode
HTML
Alles anzeigen<div class="rahmen"> <div id="header"><h1>Templates for FREE</h1></div> <div id="navi_top"> <a href="?action=start">Übersicht<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> <a href="">Seitenname<img src="img/navipfeil.png" alt="" /></a> </div> <div id="leftrahmen"> <div class="leftbox"> <form action="" method="post"> <p>Username:</p> <p><input type="text" name="username" /></p> <p>Passwort:</p> <p><input type="password" name="passwort" /><br /><br /></p> <p><input type="submit" class="submit" value="Login" /></p> </form> </div> <div class="leftbox"><a href="">Startseite</a></div> <div class="leftbox"></div> </div> <div id="content"> <h2>Valide Templates und Codes</h2> <br /> <h3>Was heisst überhaupt Templates for FREE, genau übersetzt heisst es soviel wie "Kostenlos frei verfügbare Schablonen".</h3> <br /><br /><br /><br /><br /><br /> </div> <div id="adbox_right"> <a href="http://clix.superclix.de/cgi-bin/clix.cgi?id=azax&pp=13124&linknr=41546"> <img src="http://www.imagesup.de/banner/Banner120x600.gif" alt="" /></a> </div> <div id="footer"> <a href="http://validator.w3.org/check?uri=referer">XHTML</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">Css</a> </div><br /><br /><br /> </div>
HTML
Alles anzeigen* {margin: 0; padding: 0;} body { font-size: 13px; background-image: url(img/hintergrund.png); background-attachment: fixed; } .rahmen { /* Zentriertes RahmenDIV */ width: 850px; height: auto; margin: auto; } #header { /* Kopf der Seite */ width: 100%; height: 80px; background-image: url(img/header2.gif); } #navi_top { /* Navigation unter dem Header */ width: 828px; height: 18px; padding: 4px 2px 4px 20px; background-color: #000000; word-spacing: 25px; } #navi_top a:link, a:visited, a:hover, a:active { color: #ffffff; text-decoration: none; } #navi_top a:hover { color: #d8ebe9; } #leftrahmen { width: 170px; height: 1000px; float: left; background-color: #ebf5f4; } .leftbox { width: 130px; height: 170px; padding: 10px; margin: 12px auto; color: #000000; } .leftbox input { width: 100px; border: 1px outset #000000; } input.submit { width: 60px; } .leftbox a:link, a:visited, a:hover, a:active { color: #000000; text-decoration: none; } .leftbox a:hover { color: #000000; text-decoration: underline; } #content { width: 510px; height: auto; padding: 10px; float: left; background-color: #d8ebe9; } #adbox_right { width: 125px; height: 976px; float: left; background-color: #bce0dd; padding: 12px; } #footer { width: 844px; height: 17px; clear: both; background-color: #000000; padding: 2px; text-align: center; word-spacing: 15px; } /* Andere Auszeichnungen */ #header h1 { padding: 20px 0 0 100px; color: #ffffff; }
-
Siehe meinen Code über diesem Post.:D da ist es so wie du sagtest. Ist eigentlich auch kein Ding, ich wusste es ja schon vor deinem Post. -
Nein eben nicht, du sollst diese "," da weglassen und die Zustände einzeln zuweisen, sollte eigentlich auch einen weg geben mehrere gleichzeitig einzustellen -> aber so geht das nicht und ich bin jetzt zu faul google auszuquetschen.
Hab mir dein Code gerade mal in ne html reingehauen, mit firebug kurzerhand alle zustände bis auf a:hover entfernt (bei .leftbox) - tada, jetzt passt die zugehörigkeit wieder und die top_navi wird richtig dargestellt.
/p.s. doch was ausprobiert
Funktioniert auch, sprich ich hab sogar richtig gedacht *wohoo* - du schreibst .irgendEinDiv a:yx soll das bekommen und jetzt soll a:yx das bekommen... Das ist das, was da steht ;P
-
aber die css datei wird ja dadurch unendlich lang. Na gut wenn es anders nicht geht, dankeschön Grevas:)
Im Firefox klappts eigentlich auch wie obiger Code. Firefox lebe hoch.
So klappts überall:
HTML
Alles anzeigen/**************** Links ***************/ #navi_top a:link {color: #000000; text-decoration: none;} #navi_top a:visited {color: #000000; text-decoration: none;} #navi_top a:hover {color: #bce0dd; text-decoration: underline;} #navi_top a:active {color: #000000; text-decoration: none;} .leftbox1 a:link {color: #000000; text-decoration: none;} .leftbox1 a:visited {color: #000000; text-decoration: none;} .leftbox1 a:hover {color: #000000; text-decoration: underline;} .leftbox1 a:active {color: #000000; text-decoration: none;} #footer a:link {color: #000000; text-decoration: underline;} #footer a:visited {color: #000000; text-decoration: underline;} #footer a:hover {color: #000000; text-decoration: none;} #footer a:active {color: #000000; text-decoration: underline;}
-
Nicht getestet, aber so müsste es auch gehen und vor allem kürzer:
Code
Alles anzeigena {color: #000; textdecoration: none;} a:hover {text-decoration: underline;} #navi_top a:hover {color: #bce0dd;} #footer a:link {text-decoration: underline;} #footer a:visited {text-decoration: underline;} #footer a:hover {text-decoration: none;} #footer a:active {text-decoration: underline;}
Alles, was einheitlich ist, kann man zusammenfassen; nur die Abweichungen dann gesondert definieren.
-
-
Sejuma kannst du auch trauen *g*, allerdings war deins nicht richtig - seins schon.
Er hat es ja auch einzeln zugewiesen.
Die mehrfache Zuweisung machst du eben falsch.
da steht
#navi_top a:link { einstellungen-1 }
a: visted { einstellungen-1 }
usw.
du musst den tag auch eindeutig zur id / klasse zuweisen nach dem komma. -
Es gibt eben immer viele Wege, um ans Ziel zu kommen.
Wenn das Ziel jedoch ein kurzer CSS-Quelltext ist, dann kann man so vorgehen:Alle Linkzustände, die div-übergreifend gleich sind, kann man zusammenfassen, was in meinem Beispiel durch "a" und "a:hover" erfolgt. Das gilt für alle Divs einheitlich.
Für alles, was davon abweichen soll, kann man die einzelnen ID-Bezeichnungen voranstellen und individuell formatieren.