Links anders bezeichnen je nach div

Kämpfer

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

Grevas

So

CSS:

Code

.div1 {
    background-color: black;
}
.div2 {
    background-color: yellow;
}


.div1 a{
    color: yellow;
}
.div2 a{
    color: black;
}

Alles anzeigen

HTML

<div class="div1">
    <a>test</a>
</div>
<div class="div2">
    <a>test</a>
</div>

Kämpfer

ich glaub ich meinte natürlich so

HTML

#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;
}

Alles anzeigen

Irgendwie geht der active befehl nach klick auf den link im IE8 nicht mehr

Grevas

Natürlich meintest du das...

hier

Code

.div2 a:visited {


}
.div2 a:hover {


}

usw.

/P.S. wie soll das bei dir bitte funktionieren? Du hast 2x #navi_top und meinst damit an 2 stellen unterschiedlich darzustellen? o.o

Kämpfer

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

<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&amp;pp=13124&amp;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>

Alles anzeigen

HTML

* {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;
}

Alles anzeigen

Kämpfer

Zitat von Grevas
Natürlich meintest du das...

hier
Code
.div2 a:visited {
 
}
.div2 a:hover {
 
}
usw.

/P.S. wie soll das bei dir bitte funktionieren? Du hast 2x #navi_top und meinst damit an 2 stellen unterschiedlich darzustellen? o.o

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.

Grevas

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

HTML

.leftbox a:link, .leftbox a:visited, .leftbox a:hover, .leftbox a:active {

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

Kämpfer

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

/**************** 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;}

Alles anzeigen

sejuma

Nicht getestet, aber so müsste es auch gehen und vor allem kürzer:

Code

a {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 anzeigen

Alles, was einheitlich ist, kann man zusammenfassen; nur die Abweichungen dann gesondert definieren.

Kämpfer

War meins dann nicht schon richtig.

HTML

#navi_top a:link, a:visited, a:hover, a:active {
color: #ffffff;
text-decoration: none;
}
#navi_top a:hover {
color: #d8ebe9;
}

Grevas, der meiner Meinung nach auch Ahnung hat meinte "Nein"

Grevas

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.

sejuma

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.

Tags