Eine individuelle Formatierung erfolgt üblerweise mit Klassen.
Möglicherweise hast du da was falsch gemacht, was man anhand eines Links zur Problemseite erkennen könnte.
Wie's funktioniert findest du hier erklärt.
Du hast hier einige HTML-Fehler eingebaut die auch zu Darstellungproblemen führen können:
http://validator.w3.org/check?verbose=…2520Homepage%2F
Merke: IDs darf man nur 1 Mal pro Dokument verwenden. Klassen beliebig oft.
Besonders das Menü fällt mir hier auch noch negativ auf. Menüs baut man nicht mit Tabellen sondern als Listen. Z.B. so:
<ul id="menu">
<li><a href="index.html">Startseite</a></li>
<li><a href="index2.html">Menüpunkt 1</a></li>
<li><a href="index3.html">Menüpunkt 2</a></li>
</ul>Und um zu deiner Frage zu kommen: wenn man nun die Links dieses Menüs besonders formatieren möchte, gibt man dies ohne ID oder Klassen für die Links an. Z.B. so:
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active, #menu a:focus {
color: red;
}Würde gerne versuchen ob auf diese Weise das mit den Links funktioniert, allerdings schaffe ich es partout nicht meine Navigation in eine Liste hineinzubekommen, die dann so dargestellt wird, wie bisher in der Tabelle.
Habe es so probiert:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
<div style="clear:both;"></div>
Habe hier die erste Liste auf float: left; gesetzt, funktioniert leider nicht.
Und so:
Jeweils zwei "li" nebeneinander mit mit display: inline;, geht auch nicht, da im Explorer die zwei links nicht horizontal dagestellt werden.
Mit deinem ersten Versuch warst Du dem Ziel schon recht nahe. Gib beiden <ul> neben float noch eine feste Breite, dann sollte es passen.
Du hast vergessen das erste <ul> auch wieder zu schließen vor dem zweiten:
http://validator.w3.org/check?verbose=…2520Homepage%2F
Tipp: valider Quellcode ist die Basis für die Bewertung irgendeiner Fehldarstellung.
Könnte sich jemand mein Quelltext ansehen, da jegliches verschieben und verändern nichts bewirkt?
Danke
So sollte es funktionieren:
ul#menuelist {
float:left;
width:105px;
list-style:none;
}
ul#menuelist li {
font-family: 'Cabin', arial, tahoma, Geneva, verdana, sans-serif;
font-size: 90%;
}
ul#menuelist li a {
color: #626262;
text-decoration:none;
font-weight: bold;
display:block;
padding:5px;
}
ul#menuelist li a:hover {
color:#000;
}Den rest kannst du ja erweitern. Deine Klassen .navilist und naviline wewrden nicht gebraucht. #menuelist2 kann auch weg.
Super, habe es noch etwas modifiziert, aber funktioniert endlich.
Wie kann ich jetzt noch die rote Linkunterstreichung unter den Bilder wegbekommen?
Das alle Links mit einem border unterstrichen werden, hast Du hier definiert:
a:hover {
color: #DE5A51;
border-bottom: 1px solid #DE5A51;
}Wenn Du das für einzelne Bereiche nicht haben willst, überschreibe diese Eigenschaft mit
border: 0;Also z.B.
.navipicture a:hover { border: 0; }Dein CSS-Code ist auch noch fehlerhaft. Wenn man dort Bereiche auskommentieren will nimmt man nicht HTML-Kommentare wie Du es hier getan hast:
<!-- {
font-family: 'Cabin', arial, tahoma, Geneva, verdana, sans-serif;
font-size: 90%;
table-layout: fixed;
width: 95px;
padding: 0px 12px 2px 0px;
} -->In CSS werden Kommentare mit /* */ umschlossen. Also:
/* {
font-family: 'Cabin', arial, tahoma, Geneva, verdana, sans-serif;
font-size: 90%;
table-layout: fixed;
width: 95px;
padding: 0px 12px 2px 0px;
} */Nein, Du hast wie oben geschrieben alle Links der Seite so definiert. Nicht nur die vom Footer. Und jetzt wo ich mal näher geschaut habe denke ich, bist Du einem Irrtum erlegen beim Schreiben deiner Stylesheets. Mit
#footerlink a{
color: white;
text-decoration:none;
}
a:visited {
color: white;
}
a:active {
color: #DE5A51;
}
a:focus {
outline: none;
}
a:hover {
color: #DE5A51;
border-bottom: 1px solid #DE5A51;
}willst Du doch eigentlich nur die Links in der ID footerlink bearbeiten?! Das geht aber nicht so. Dafür müsst Du vor jede Link-Definition auch die ID schreiben. Also:
#footerlink a{
color: white;
text-decoration:none;
}
#footerlink a:visited {
color: white;
}
#footerlink a:active {
color: #DE5A51;
}
#footerlink a:focus {
outline: none;
}
#footerlink a:hover {
color: #DE5A51;
border-bottom: 1px solid #DE5A51;
}Optimal wäre es dann noch in der richtigen Reihenfolge für die Pseudoklasse: link, visited, hover, active, focus.
Jetzt funktioniert alles wie es soll, danke nochmal
Ohne nachgeschaut zu haben (hab auch keinen IE hier):
img { border: 0; }