CSS Problem Hoverbreite mit background-color

Diskutiere das Thema CSS Problem Hoverbreite mit background-color im Forum Web-Design. Ich habe eine Navigation wie folgt definiert: a.mainlevel { color...

Oliver23

Oliver23

Mitglied
Thread Starter
Mitglied seit
16.10.2004
Beiträge
568
Ich habe eine Navigation wie folgt definiert:

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

Code:
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

msslovi0

Mitglied
Mitglied seit
20.03.2005
Beiträge
2.727
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

Oliver23

Mitglied
Thread Starter
Mitglied seit
16.10.2004
Beiträge
568
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.

Code:
<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

msslovi0

Mitglied
Mitglied seit
20.03.2005
Beiträge
2.727
Ja Gesundheit aber auch. Modernes Webdesign sieht anders aus...

HTML:
<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

QuickSilverEX

Mitglied
Mitglied seit
13.06.2004
Beiträge
770
@msslovi0
hast du gerade mal eben diesen code produziert?
Das sieht ja top aus!
 
2nd

2nd

Mitglied
Mitglied seit
25.07.2004
Beiträge
9.020
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

msslovi0

Mitglied
Mitglied seit
20.03.2005
Beiträge
2.727
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
 
Oben