a:hover mit span und padding

gonzo_sh · 05.05.2012

Wie bekomme ich es hin, das sich auch der Rand bei a:hover ändert ohne ein div zu benutzen?

Hier ein Beispiel

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
/*** Menü *****************************************************/        
.menu{
  font-family: "Verdana", arial, sans-serif;
  padding:5px 0px 5px 0px;
  background-color: #dddddd;
  text-align:left;
}
    
.menuitem{
  background-color:#C6C2C6;
  padding:5px;
}
.menu a{
  color:#000;
  text-decoration: none;
}
.menuitem a:hover{
  background-color:#7C7C7C;
}
</style>

</head>
<body>
        <div class="menu">
          <span class="menuitem"><a href="">Monate</a></span>
        </div>
</body>
</html>

Misco · 06.05.2012

AW: a:hover mit span und padding

display:inline-block;

sollte das machen was du suchst

vincitore · 06.05.2012

AW: a:hover mit span und padding

was meinst du denn mit Rand ändern?

gonzo_sh · 06.05.2012

AW: a:hover mit span und padding

Vielen Dank für die Tips, aber irgendwie bekomme ich das nicht hin.
Bei den Menüpunkten soll kein Rand sein, wenn ich mit hover darüber gehe.
Hier kann man bei "Monate" den Rand sehen, aber der Rand soll auch dunkelgrau sein.

Vieleicht hat jemand noch eine Tip/Hilfe/Beispiel.

Danke

lipsum media · 06.05.2012

AW: a:hover mit span und padding

So?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*** Menü *****************************************************/
.menu{
font-family: "Verdana", arial, sans-serif;
padding:5px 0px 5px 0px;
background-color: #dddddd;
text-align:left;
}

.menuitem{
background-color:#C6C2C6;
padding:5px;
}

.menu a{
color:#000;
text-decoration: none;
}

/*geänderter Teil, einfach das a: rauslöschen*/
.menuitem:hover{
background-color:#7C7C7C;
}

</style>
<title>Test</title>
</head>

<body>
<div class="menu">
<span class="menuitem"><a href="">Jahre</a></span>
<span class="menuitem"><a href="">Monate</a></span>
<span class="menuitem"><a href="">Tage</a></span>
<span class="menuitem"><a href="">Stunden</a></span>
</div>
</body>
</html>

ADcosmos · 06.05.2012

AW: a:hover mit span und padding

Hi,

wieso nutzt Du überhaupt um das a-Tag ein span-Tag? Ich würde das span-Tag rausnehmen und die Css-Eigenschaften auf das a-Tag übertragen.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
/*** Menü *****************************************************/        
.menu{
  font-family: "Verdana", arial, sans-serif;
  padding:5px 0px 5px 0px;
  background-color: #dddddd;
  text-align:left;
}

[COLOR="Red"].menu a{
  background-color:#C6C2C6;
  padding:5px;
  color:#000;
  text-decoration: none;
}

.menu a:hover{
  background-color:#7C7C7C;
}[/COLOR]

</style>

</head>
<body>
        <div class="menu">
          <a href="">Monate</a>
        </div>
</body>
</html>

MFG ADcosmos

gonzo_sh · 06.05.2012

AW: a:hover mit span und padding

HE! Vielen Dank an alle.
Manchmal sieht man den Wald vor lauter Bäume nicht.
Die Lösung von ADcosmos habe ich genommen.
Das ich nicht selber auf diese einfache Lösung gekommen bin ärgert mich,
darum bin froh, dass es so schnelle und gute Antworten hier gibt.