• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS: Allgemeiner Check und a:visited color funktioniert nicht.

A

aJunkie

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


Edit: 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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function clearField(field)
{
if(field.value == field.defaultValue)
    {
    field.value = "";
    }
}
</script>
<title>Test</title>
</head>

<body>
<div id="head">
  <ul id="smallnavi">
    <li><a href="#z">Link</a></li>
    <li><a href="#y">Link</a></li>
    <li><a href="#x">Link| Link</a></li>
    <li><a href="#q">Link-Link</a></li>
  </ul>
  <div id="top">
  <div class="float_left">
  <a href="http://<?php echo $_SERVER['SERVER_NAME']; ?>" title="Startseite">Hier kommt Logo</a>
  <a href="#" target="_blank" title="Facebook"><img src="/img/icon_facebook.png" alt="Facebook" height="35" width="35" /></a> 
  <a href="#" target="_blank" title="MySpace"><img src="/img/myspace.png" alt="MySpace" height="35" width="35" /></a> 
  <a href="#" target="_blank" title="wer-kennt-wen"><img src="/img/werkenntwen.png" alt="wer-kennt-wen" height="35" width="35" /></a> 
  <a href="#" target="_blank" title="Youtube"><img src="/img/yout.gif" alt="Youtube" height="35" width="35" /></a>
    </div>
    <div class="float_right padding20t"> 
Hier kommen Ads
    </div>
  </div>
  
  <div class="clear"></div>
  
  <div id="menu">
    <ul>
      <li><a href="#1">Home</a></li>
      <li><a href="#4">Link2</a></li>
      <li><a href="#5">Link3</a></li>
      <li><a href="#7">Link4</a></li>
    </ul>
    <form action="" method="post">
      <span class="small">Suche:</span>
      <input type="text" value="Suche, wonach dir lieb ist" name="search" onFocus="clearField(this);" size="25" />
      <input type="submit" name="submit" value="" class="searchbutton" />
    </form>
  </div> <!-- #menu -->
  <div class="clear"></div>
</div> <!-- #head -->
<div id="container">
  <div id="div_left">
    <ul id="artist">
      <li><a href="#1">Link1</a></li>
      <li><a href="#5">Link2</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Beispielpage</h1>
    <p>Text</p>
    <p><a href="#wghwgh">So würde ein Link im #main aussehen</a></p>
  </div>
  <!-- #main -->
  
  <div id="div_right"> <img src="bild.jpg" alt="bild" /> </div>
  <div class="clear"></div>
  <div id="footnavi">
    <ul>
      <li><a href="#a">Impressum</a></li>
      <li><a href="#b">Kontakt</a></li>
      <li><a href="#d">Newsletter</a></li>
    </ul>
    <p>&copy; website 2009 - <?php echo date('Y'); ?></p>
  </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben