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
    MacUser 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.713
    Zustimmungen:
    115
    MacUser 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
    MacUser seit:
    16.10.2004
    Das sieht so aus, der Hover sollte nicht breiter als die Wörter werden:
    [DLMURL]http://server37.hostpoint.ch/~webgarte/[/DLMURL]

    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.713
    Zustimmungen:
    115
    MacUser 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:
    773
    Zustimmungen:
    24
    MacUser 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.902
    Zustimmungen:
    242
    MacUser 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.713
    Zustimmungen:
    115
    MacUser 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...
Ähnliche Themen - CSS Problem Hoverbreite
  1. Saugkraft
    Antworten:
    5
    Aufrufe:
    604
    Saugkraft
    07.10.2014
  2. muplo
    Antworten:
    5
    Aufrufe:
    992
    Zieger
    06.08.2013
  3. mingorius
    Antworten:
    16
    Aufrufe:
    1.261
    Isegrim242
    04.07.2011
  4. jürgenh
    Antworten:
    2
    Aufrufe:
    983
    jürgenh
    11.09.2010
  5. mad dog
    Antworten:
    4
    Aufrufe:
    757
    mad dog
    23.03.2009