MySpace: Hover-Problem und Code für Trennlinie gesucht

[mvp]

Guten Abend, bin neu hier in diesem Forum und hätte gleich mal 2 Fragen.
Ich bin dabei mein Myspace-Profil zu designen, das hier ist es ersteinmal: klick

1) Ich bräuchte eine vertikale schwarze Trennlinie zwischen den beiden Inhalten. Also zwischen "Plus, Minus, Buddies" und "Pics, Add, Blk usw."
Das es möglich ist, hab ich schon in einem anderen Profil gesehen, aber ich weiß nicht wie. Hat da jemand eine Lösung?
(Sind das zwei verschiedenen Tables und dadurch irgendwie möglich? - Sorry ich kenn mich nicht sonderlich gut in CSS aus)

2) Ich will die Bilder auf der rechten Seite sowie die Bilder, die später bei "Buddies" kommen mit einem Hovercode versehen.
Die Bilder sollen schwarz/weiß sein und bei Mausberührung farbig werden.
Ich hab da schon einen Code gefunden, allerdings funktioniert er nicht. Wo genau muss er also eingefügt werden, oder kann es sein, dass er vielleicht nur mit dem Internet Explorer funktioniert?

Code: Alles auswählen

<style> a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;} </style>

Was noch zu erwähnen ist, dass sich hinte den Bildern kein Hyperlink versteckt.

Die Bilder binde ich mit folgendem Code ein:

Code: Alles auswählen

<img>

Liegt hier der Fehler und ich muss hier einen Bezug zum Hover-Code herstellen?

Für eventuelle Hilfe bedanke ich mich schoneinmal

[Laus]

Hallo

Zu 1.
Das sind sogar 3 Tabellen, die mittlere ist nur 15px breit. Wenn du dieser einen Hintergrund gibst, sollte deine Trennlinie zu realisieren sein.


Zu 2.
Diese Filter sind kein CSS Standard und funktionieren nur im IE.
Nimm doch einfach 2 Bilder die du dann mit hover einfach austauscht. Wenn du das so wie du das sowieso schon machst auch bei den Bildern als Link deklarierst, (welche du mit href="#" auszeichnest) klappt das auch im IE und ist wesentlich einfacher als mit Filtern.

Gruß Xaver

[mvp]

Das mit dem Hintergrund ist schonmal eine gute Idee, aber ich find nicht den richtigen Bereich, den ich mit einem schwarzen Hintergrund versehen muss.
So sieht das im Moment aus:

Code: Alles auswählen

table td div div font {
   visibility:none;}
td {
   background-color: white;
   border: 0px;
   }

table table {
   border: 0px;
   }

table table table table{
   background-color: white;
   border:0px;
   }

table table table {
   border-width: 0px;
   border-color: 0px;
   border-style: solid;
   background-color: white;
   }
table table table td {
   background-color: transparent;
   }
table table table table td {
   filter:none;
   }

Wie gesagt, hab schon ein bisschen rumprobiert mit den Farben, bin aber auf kein Ergebnis gekommen.

Und das mit den zwei Bildern werd ich mal ausprobiern, danke

[mvp]

Das mit dem Hover funktioniert jetzt auch einigermaßen
Das hier steht im CSS:

Code: Alles auswählen

.foto-link
{
width: 50px;
height: 50px;
display: block;
margin: 0 auto;
}

.foto1
{
background: url(bild.jpg) no-repeat;
}

.foto-link:hover
{
background-position: 0 -50px;
}

und das im HTML-Teil:

Code: Alles auswählen

<a></a>

Hm irgendewie kann das nicht angezeigt werden, egal auf jedenfall so, dass es auf den CSS-Teil zurückgreift und mit dem href="#"

Mich stört das display: block
Ich will mehrere Bilder nebeneinander stellen, aber so sind sie untereinandern zentriert.
Wenn ich das display: block einfach rauslösche bleibt das Problem und auch eine anderen Zuordnung wie inline nützt nichts, dann ist plötzlich garnichts mehr zu sehen.
Gibts dafür eine Lösung?

Das Problem mit der vertikalen Trennlinie besteht weiterhin.