CSS: unterstrichene Links mit Class und Seitenausrichtung

Webdesign & Technik HTML & CSS
1

Guten Morgen,

ich habe mir jetzt vorgenommen, meine Seite W3C-konform zu gestalten. Dabei ist mir folgendes aufgefallen:

Mittels CSS unterdrücke ich die Linkunterstreichung. Aber in Sonderfällen brauche ich dennoch eine Unterstreichung des Links. Das hatte ich in der CSS-Datei deklariert und über id an die HTML-Datei weiter gegeben. Aber auf einer Seite hatte ich dann mehrere ids und das ist ja nicht konform mit W3C. Deshalb habe ich es auf class umgestellt. Leider wird der Link, trotz gleicher CSS-Deklaration nicht mehr unterstrichen. Warum?

Die ganze Seite soll horizontal zentriert sein. Im IE6 funktioniert es. Aber im IE7+8 und im FF leider nicht. Warum?

Vielen Dank.

Gruß Elsner

Link: http://www.elsner.bplaced.net/test/index.html

CSS:

[code]* {color:white;
}

html,body {background-color:#555555;
font-family:verdana,arial,sans-serif;
}

#alles {margint:0 auto;
text-align:center;
clear:both;
}
#kopf {width:800px;
clear:both;
}
#navi {width:750px;
margin-top:15px;
clear:both;
}
#navi_1 {width:750px;
margin-top:5px;
clear:both;
}
#inhalt {background:url(hintergrund_inhalt.jpg);
width:750px;
margin-top:15px;
text-align: justify;
padding:10px;
border: 2pt #000000 solid;
clear:both;
}
#navieinzelbild {text-align:center;
}

#td_galerie {vertical-align:top;
margin:0 auto;
text-align:center;
padding:10px;
}
#galerieuebersicht {margin:0 auto;
}
#galeriebild {text-align:center;
margin:10px 0;
}
.kommentar {text-align:center;
}
#a_img {margin:0 1em;
}

a:link {text-decoration:none;
text-underline: none;
}
a:visited {text-decoration:none;
text-underline: none;
}
.link {color:white;
text-decoration:underline;
text-underline: none;
}

img {border:0
}
#ueber_mich {float:right;
margin-left:10px;
}
#portfolio {text-align:center;
margin-top:10px;
}

h2 {margin-bottom:0;
}
p {margin-bottom:0;
}
input {color:#000000;
}
textarea {color:#000000;
}[/code]

2

Zeit für ein paar Grundlagen :ps:

1.) Zentrieren geht so:

div#container { /*So heißt die Standard-ID, bzw. viele verwenden diese */
   width: 600px; /* Zentrieren andernfalls nicht möglich */
   margin-left: auto;
   margin-right: auto; /*Außenabstand links und rechts sind gleich */
}

2.) Die Link-Unterstreichung:

a {
  color: #8f8f8f; /* Die Standardformatierung usw... */
}
a:hover { text-decoration: none; }
a.link:hover { text-decoration: underline; }

hier ist auf das .link:hover zu achten, das a davor gibt nur den Tag-Typ an (was ich immer mache)

PS: Das ist natürlich Blödsinn:

   text-decoration:underline;
   text-underline: none;
3

Danke michi7x7.

1.) Hier dachte ich, dass Margin weitervererbt wird. Durch wiederholten Margin-Befehl konnte ich das Problem beheben.

2.) Deine Version brachte mir nicht das gewünschte Ergebnis. Aber du hast mir durch den Code ein paar Hinweise gegeben. Ich habe es jetzt wie folgt gelöst:

a:link {text-decoration:none; } a:link.link {text-decoration:underline; } a:visited {text-decoration:none;; } a:visited.link {text-decoration:underline; } a:hover {text-decoration:underline; } a:hover.link {text-decoration:none; }