CSS Problem Hoverbreite mit background-color

Diskutiere das Thema CSS Problem Hoverbreite mit background-color im Forum Web-Design.

  1. Oliver23

    Oliver23 Thread Starter Mitglied

    Beiträge:
    568
    Zustimmungen:
    58
    Mitglied seit:
    16.10.2004
    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?
     
  2. msslovi0

    msslovi0 Mitglied

    Beiträge:
    2.727
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    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
     
  3. Oliver23

    Oliver23 Thread Starter Mitglied

    Beiträge:
    568
    Zustimmungen:
    58
    Mitglied seit:
    16.10.2004
    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>
     
  4. msslovi0

    msslovi0 Mitglied

    Beiträge:
    2.727
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    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
     
  5. QuickSilverEX

    QuickSilverEX Mitglied

    Beiträge:
    804
    Zustimmungen:
    25
    Mitglied seit:
    13.06.2004
    @msslovi0
    hast du gerade mal eben diesen code produziert?
    Das sieht ja top aus!
     
  6. 2nd

    2nd Mitglied

    Beiträge:
    9.021
    Zustimmungen:
    242
    Mitglied seit:
    25.07.2004
    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.
     
  7. msslovi0

    msslovi0 Mitglied

    Beiträge:
    2.727
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    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
     
Die Seite wird geladen...
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite weitersurfst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...