Hallo,
ich habe einfach mal die komplette CSS hier eingefügt, damit ihr es im Gesamten sehen könnt.
Meine Frage: Fällt euch irgendwo auf, warum a:visited in den div’s wie #top, #main nur teilweise funktioniert?
Bei mir in allen Browsern werden alle besuchten Links schwarz dargestellt. Der Rest der Eigenschaften wird korrekt gelesen.
Ich werde nicht schlau daraus, obwohl ich vorhatte, wo wenig wie möglich zu formatieren.
[HTML]@charset „iso-8859-1“;
- {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, sans-serif;
margin-top:0.6em;
background-color:#6DBFFB;
background-image:url(images/bg.png);
background-repeat:repeat-x;
color:#000;
}
/* ÜBERSCHRIFTEN */
h1, h2, h3 {
font-family:Arial, Helvetica, sans-serif;
background-color:#DCF1FE;
letter-spacing:0.1em;
padding:5px;
margin-bottom:5px;
border-top:#000 1px solid;
border-bottom:#000 1px solid;
}
h1 {
font-size:1.0em;
}
h2 {
font-size:0.9em;
}
h3 {
}
/* */
a {
color:#286ea0;
text-decoration:none;
font-weight:bold;
background-color:transparent;
}
a:visited, #main a:visited {
color:#6DBFFB;
font-weight:normal;
text-decoration:none;
}
a:hover, #main a:hover {
color:#000;
background-color:transparent;
text-decoration:underline;
}
a img {
border:0 none;
}
p {
font-size: 0.8em;
line-height:140%;
}
/* Klassen, Style */
.border {
border:#000 1px solid;
}
.small {
font-size:0.8em;
}
.strong {
font-weight:bold;
}
.red {
color:#F00;
}
.clear {
clear:both;
}
.float_left, .float_right {
line-height:0;
height:0;
padding:0;
margin:0;
}
.float_left {
float:left;
}
.float_right {
float:right;
}
.center {
text-align:center;
}
.searchbutton {
background:url(/images/search.png) no-repeat center;
width:25px;
height:24px;
border:0 none;
}
.padding20t {
padding:20px 0;
}
/* MENÜS */
#menu {
background-color:#6DBFFB;
height:30px;
line-height:30px;
text-align:right;
padding:0 5px;
color:#FFF;
border-top:3px #FFF double;
border-bottom:5px #FFF double;
}
#menu img, #menu input, #menu form {
vertical-align:middle;
}
#menu li, #menu li a {
margin:0 auto;
display:block;
float:left;
background-color:#6DBFFB;
padding:0 5px;
color:#FFF;
font-size:0.9em;
text-decoration:none;
font-weight:bold;
}
#menu li a:hover, a:visited {
color:#000;
background-color:#FFF;
}
#smallnavi {
font-size:0.7em;
list-style:none;
text-align:right;
padding-right:10px;
margin-bottom:5px; /* #top border-top: 5px */
}
#smallnavi li {
display:inline;
}
#smallnavi li a {
background-color:#6DBFFB;
color:#FFF;
font-weight:bold;
padding:5px;
}
#smallnavi li a:hover {
color:#6DBFFB;
background-color:#FFF;
}
ul#artist {
font-size:0.8em;
margin-left:5px;
margin-bottom:5px;
text-align:left;
list-style-image:url(images/pfeil_k.gif);
list-style-position:inside;
border-bottom:#000 1px solid;
}
ul#artist a:hover {
text-decoration:underline;
}
ul#artist a:visited {
font-weight:bold;
color:#286ea0;
}
#footnavi {
font-size:0.8em;
color:#999;
margin:10px auto 0;
padding-top:5px;
text-align:center;
list-style-type:none;
border-top:2px solid #DCF1FE;
}
#footnavi li {
display:inline;
padding:0 10px;
}
#footnavi li a {
font-weight:normal;
color:#06F;
}
#footnavi li a:hover {
text-decoration:underline;
}
/* Divs, Template (ID) */
#head {
min-width:1100px;
}
#top {
width:auto;
margin-bottom:5px;
padding:0 20px;
height:100px;
line-height:100px;
border-top:#FFF 5px solid;
border-bottom:#FFF 3px solid;
}
#top div {
line-height:100px;
}
#container {
width:1010px;
margin:1em auto;
border:10px #DCF1FE solid;
background-color:#FFF;
-moz-border-radius:10px;
-khtml-border-radius:10px;
}
#div_left, #div_right {
float:left;
text-align:center;
}
#div_left {
width:150px;
border-right:#000 1px solid;
}
#div_right {
width:200px;
border-left:#000 1px solid;
}
#main {
float:left;
width:645px;
margin:2px 4px;
}[/HTML][B]
Edit[/B]: Auf welche (zum Beispiel doppelt gemobbelten) Eigenschaften kann ich getrost verzichten?
Was kann ich tun, dass selbst IE5 & 6 die Seite trotzdem gut darstellen, wenn der Viewport kleiner als ~1000px; ist?
Da verschiebt sich dann einiges.
Ist alles noch roh.
Achso. HTML:
[HTML]
© website 2009 - <?php echo date('Y'); ?>