Zurück   PSD-Tutorials.de > Webbereich > (X)HTML & CSS
Seite neu laden a:hover mit span und padding
Interessengemeinschaften Kostenlos registrieren Kalender Suchen Letzte 24h Alle Foren als gelesen markieren


Antwort
 
Themen-Optionen
Alt 05.05.2012, 23:59   #1 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 16.12.2006
Ort: Blaustein
Beiträge: 32

a:hover mit span und padding

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


Hier ein Beispiel
HTML-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;
}
    
.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>
Geändert von cebito (06.05.2012 um 12:13 Uhr). Grund: Bitte die Codewerkzeuge (oben rechts) benutzen!
  Mit Zitat antworten


Alt 06.05.2012, 03:12   #2 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 14.02.2010
Beiträge: 65
display:inline-block;

sollte das machen was du suchst
  Mit Zitat antworten
Alt 06.05.2012, 10:04   #3 Nach oben scrollen
Helper
HelperHelper
 
Benutzerbild von vincitore
 

Registriert seit: 22.01.2005
Ort: Darmstadt; Lorch am Rhein
Beiträge: 579
Kamera: Canon EOS 5D Mark III
Verwendet: Adobe Photoshop CS4, Lightroom 4, Coda 2, Cinema 4D R13 Student
was meinst du denn mit Rand ändern?
  Mit Zitat antworten
Alt 06.05.2012, 13:47   #4 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 16.12.2006
Ort: Blaustein
Beiträge: 32
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
  Mit Zitat antworten
Alt 06.05.2012, 15:34   #5 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 12.05.2009
Ort: Hagen
Beiträge: 52
Kamera: OLYMPUS E-420
Verwendet: Adobe Creative Suite 5
So?

HTML-Code:
<!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>
  Mit Zitat antworten
Alt 06.05.2012, 19:26   #6 Nach oben scrollen
Member
MemberMember
 
Benutzerbild von ADcosmos
 

Registriert seit: 25.01.2012
Beiträge: 176
Kamera: Canon EOS 60D
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;
}

.menu a{
  background-color:#C6C2C6;
  padding:5px;
  color:#000;
  text-decoration: none;
}

.menu a:hover{
  background-color:#7C7C7C;
}

</style>

</head>
<body>
        <div class="menu">
          <a href="">Monate</a>
        </div>
</body>
</html>
MFG ADcosmos
  Mit Zitat antworten
Alt 06.05.2012, 19:45   #7 Nach oben scrollen
Newbie
Newbie
Themenstarter
 

Registriert seit: 16.12.2006
Ort: Blaustein
Beiträge: 32
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.
  Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen