Kleines Verständnisproblem

nilpferd · 16.10.2003, 15:38

Moinsen

Also CSS mag ja ne feine Sache sein, aber ich hab damit mal wieder ein Problem:

Code:

div#leftboxmenue a {
      color:#000000;
      font-family: verdana, helvetica, sans-serif;
      font-size:15px;
      padding-left:25px;
      padding-bottom:2px;
      margin-top:10px;
      background-color:Yellow;
      text-decoration:none;
      border-bottom:1px dotted black;
      z-index:4;
      }

Wenn ich dann in meiner XHTML Datei folgendes angebe:

Code:

          <div id="leftboxmenue"><a href="#">News</a></div>
          <div id="leftboxmenue"><a href="#">Hallo</a></div>

Dann überblendet aber das Hallo-Element, den unteren gestrichelten border, obwohl ich margin-top:10px mit angegeben habe.
Was mache ich falsch?

MFG

nilpferd

prefix · 16.10.2003, 15:41

du machst was grundsätzliches falsch - aber hallo

erstmal!

du darfst eine ID - welche, wie der name schon sagt, ein einzigartiger identifier ist - nur einmal pro seite anwenden.

für mehrmalige verwendung => klasse, in deinem fall:

Code:

div.leftboxmenue a {
      color:#000000;
      font-family: verdana, helvetica, sans-serif;
      font-size:15px;
      padding-left:25px;
      padding-bottom:2px;
      margin-top:10px;
      background-color:Yellow;
      text-decoration:none;
      border-bottom:1px dotted black;
      z-index:4;
      }

Code:

          <div class="leftboxmenue"><a href="#">News</a></div>
          <div class="leftboxmenue"><a href="#">Hallo</a></div>

alles klar??

nilpferd · 16.10.2003, 15:48

Ja erstmal danke für deine schnelle antwort prefix. hab das jetzt geändert, aber das löst mein Problem immer noch nicht.

Braucht ihr noch mehr Code???

prefix · 16.10.2003, 15:56

du solltest mal die klasse "leftboxmenu" zuerst definieren, danach erst das pseudo-element "a":

Code:

<!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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.leftboxmenue {
      color:#000000;
      font-family: verdana, helvetica, sans-serif;
      font-size:15px;
      padding-left:25px;
      padding-bottom:2px;
      margin-top:10px;
      background-color:Yellow;
      /*text-decoration:none;
      border-bottom:1px dotted black;*/
      z-index:4;
      }
.leftboxmenue a {
	border-bottom: 1px dotted black;
	text-decoration: none;
}

</style>
</head>

<body>
<div class="leftboxmenue"><a href="#">News</a></div>
<div class="leftboxmenue"><a href="#">Hallo</a></div>

</body>
</html>

das klappt mal (ie6/nn7/op7/mozfb0.61) - wobei bekanntermaßen der ie6 probleme mit "dotted" hat, hier würde ich "dashed" verwenden (nur so am rande)

nilpferd · 16.10.2003, 21:11

Besten Dank Prefix....