CSS Problem Hoverbreite mit background-color

Dieses Thema im Forum "Web Page Design" wurde erstellt von Oliver23, 24.05.2006.

  1. Oliver23

    Oliver23 Thread Starter MacUser Mitglied

    Beiträge:
    519
    Zustimmungen:
    11
    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 MacUser Mitglied

    Beiträge:
    2.714
    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 MacUser Mitglied

    Beiträge:
    519
    Zustimmungen:
    11
    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 MacUser Mitglied

    Beiträge:
    2.714
    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 MacUser Mitglied

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

    2nd MacUser Mitglied

    Beiträge:
    8.901
    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 MacUser Mitglied

    Beiträge:
    2.714
    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...

Diese Seite empfehlen