CSS Problem Hoverbreite mit background-color

[Oliver23]

Ich habe eine Navigation wie folgt definiert:

a.mainlevel {
	color: 				#666;
	font-weight:		bold;
	background-color: 	inherit;
	text-decoration: 	none;
	display:			block;	
	margin-top: 		8px;
}

Der hover dazu so:

a.sublevel:hover {
	color: 				#fff;
	margin-left: 		6px;
	text-decoration: 	none;
	background-color:	#999933;
}

Das Problem, wegen dem "display: block" wird der Hintergrund des Hovers immer in der Breite des übergeordneten DIV angezeigt und nicht in der Breite des jeweiligen Wortes. Hat jemand eine Idee wie man das Problem lösen könnte?

 

[msslovi0]

Wie sieht denn dein zugehöriger HTML-Code aus? Ich kann mir das Problem aktuell nicht so recht vorstellen, vor allem da du einmal von mainlevel und einmal von sublevel sprichst...

Matt

 

[Oliver23]

Das sieht so aus, der Hover sollte nicht breiter als die Wörter werden:
http://server37.hostpoint.ch/~webgarte/

Es geht mit "Float: left" aber dann rutschen kurze Navigationspunkte auf die gleich Linie.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/14/28/" class="mainlevel" >Home</a></td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/12/26/" class="mainlevel" >Dienstleistungen</a></td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/16/29/" class="mainlevel" >Design</a></td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/17/30/" class="mainlevel" id="active_menu">Lösungen</a>

<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/25/39/" class="sublevel" >WCMS Überblick</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/32/46/" class="sublevel" >WCMS ezPublish</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/26/40/" class="sublevel" >WCMS Joomla!</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/28/42/" class="sublevel" >Joomla! Erweiterungen</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/27/41/" class="sublevel" >Contribute</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/29/43/" class="sublevel" >Newsletter</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/30/44/" class="sublevel" >Intra- Extranet</a></div>
<div style="padding-left: 4px"><a href="http://server37.hostpoint.ch/~webgarte/content/view/31/45/" class="sublevel" >e-Commerce</a></div>
</td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/18/31/" class="mainlevel" >Kunden</a></td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/19/32/" class="mainlevel" >Firma</a></td></tr>
<tr align="left"><td><a href="http://server37.hostpoint.ch/~webgarte/content/view/20/33/" class="mainlevel" >Kontakt</a></td></tr>
</table>

 

[msslovi0]

Ja Gesundheit aber auch. Modernes Webdesign sieht anders aus...

<style type="text/css">
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  color: #666;
}

#nav {
  list-style: none;
}

#nav li {
  display: block;
  margin-top: 0.6em;
}

#nav li a {
  background-color: inherit;
  color: #666;
  font-weight: bold;
  text-decoration: none;
}

#nav li a:hover {
  background-color: #993;
  color: #fff;
  text-decoration: none;
}

#nav ul li a {
  background-color: #fff;
  color: #666;
  font-size: 80%;
  font-weight: normal;
  margin-left: 6px;
  margin-top: 4px;
  padding: 0 1px;
  text-decoration: none;
}

#nav ul li a:hover {
  background-color: #993;
  color: #fff
  text-decoration: none;
}

#nav a.active, #nav a.active:hover {
  background-color: #fff;
  color: #993;
  text-decoration: none;
}
</style>

<ul id="nav">
  <li><a href="">Home</a></li>
  <li><a href="">Dienstleistungen</a></li>
  <li><a href="">Design</a></li>
  <li><a href="" class="active">L&ouml;sungen</a>
    <ul>
      <li><a href="">WCMS &Uuml;berblick</a></li>
      <li><a href="">WCMS ezPublish</a></li>
      <li><a href="">WCMS Joomla!</a></li>            
      <li><a href="">Joomla! Erweiterungen</a></li>            
      <li><a href="">Contribute</a></li>            
      <li><a href="">Newsletter</a></li>            
      <li><a href="">Intra- Extranet</a></li>            
      <li><a href="">e-Commerce</a></li>            
    </ul>
  </li>
  <li><a href="">Kunden</a></li>
  <li><a href="">Firma</a></li>
  <li><a href="">Kontakt</a></li>
</ul>

Matt

 

[QuickSilverEX]

@msslovi0
hast du gerade mal eben diesen code produziert?
Das sieht ja top aus!

 

[2nd]

Tja, HTML ist ein semantisches Markup, dass die Struktur eines Dokuments hinsichtlich der Bedeutung der Inhalte festlegt. Wenn man das verstanden hat, wird vieles einfacher.

Matt hats verstanden

F.

 

[msslovi0]

Danke für die Blumen. Wir üben ja auch schon 10 Jahre ;-)

Aber vernünftiges Markup macht die Arbeit wirklich viel leichter. Und man findet sich wesentlich besser zurecht als in einem Wust aus Tabellen uns Spacer-DIVs.

Matt