bgcolor bei a:hover ändern

[Frettchen]

bgcolor bei a:hover ändern

Ich glaub ich wechsel wieder zuTabellen und gif´s :lol:

Bin an meiner Navi dran. Jetzt habe ich z.B. schon mal versucht mit bei einem normal link in der Navi den hintergrund zu ändern von dem Feld in dem der link ist.

Mit z.B. "li a:hover {background-color: #FFFFFF;}" wird dann aber nur der direkte bg des Textes wie hier z.B. weiss, aber jedoch nicht das ganze feld.

Wie kann ich das machen das dass ganze feld z.B. weiss wird.
Ich hoffe ihr kapiert meine schlecht formulierte Frage :)

  <div class="navi">
	<ul>
	<li class="navi-kat">[url="index.php/#"]Home[/url]
	<li class="navi-kat">Kategorie
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[/list]
		
    <ul>
	<li class="navi-kat">Kategorie
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[*][url="index.php/#"] Link 1[/url]
	[/list]
  </div>

 

[Anonymous]

Hat das Feld denn eine fest Breite?

 

[Frettchen]

Ja, 120ps ist der div und darin sind die Listenelemente. Aber was hat denn das damit zu tun??? :?:

 

[Anonymous]

http://www.javarea.de/index.php3?opencat=xhtml-css&subcat=Codeschnipsel&id=484
So was?

 

[ingoS]

Oder

a {display: block;}

 

[Prophet]

und die linienhöh einstellen...

 

[Frettchen]

mit display:block gehts. Hab ich zwar schon vorher damit mal versucht, aber da muss ich irgendwie was falsch gemacht habe.

Was meinst du mit linienhöhe einstellen?? Ich glaube damit meinst du das ichoben und unten vom Link noch bissel Platz habe der die Farbe nicht verändert, kann das sein?

 

[Frettchen]

So, das hab ch auch schon hin bekommen. Was ic nciht verstehe warum das im IE und FF schon wieder anderes ist. Bei FF wird das ganze feld zum Link im IE aber nicht.

Bei www.kicker.de gehts das z.B. aber. Konnte aber nicht erkennen warum

Hier mal meine.

http://www.supporters-trier.de/sct2/

 

[Prophet]

ich sagte ja die line-height muss der höhe der zelle entsprechen...

 

[Volcom]

Also bei mir gehts im IE. ;)

 

[Frettchen]

Wenn du auf den Text gehst oder daneben? Wenn man auf den text von Link geht gehts bei mir auch. Aber es geht nich wenn ich nur auf das feld gehe ohne auf den text zu gehen.

 

[flapo]

Dann musst du für [*] ein :hover definieren:

li:hover{background-color:#000000;}

 

[Anonymous]

versuchs ma mit sowas in der art:

.navi-kat {
    background-color:#0000FF;
    color:#000000;
    width:200px;
    font-size:14px;
}

.navi-kat:hover {
    background-color:#FF0000;
    color:#000000;
    width:200px;
    font-size:14px;
}

[url="index.htm"]Startseite[/url]

Das müsste dann klappen.
(Farben und das ganze Zeugs kannste natürlich auch ändern.)

 

[Frettchen]

Dann musst du für [*] ein :hover definieren:

li:hover{background-color:#000000;}

Habe nur leider ohne [*] geschafft.

Ich versuchs mal mit der idee von LTM

 

[flapo]

  <div class="navi">
   <ul>
   <li class="navi-kat">[url="index.php/#"]Home[/url]
   <li class="navi-kat">Kategorie
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url] 
   [/list]
      
    <ul>
   <li class="navi-kat">Kategorie
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url]
   [*][url="index.php/#"] Link 1[/url]
   [/list]
  </div>

Und:

Habe nur leider ohne [*] geschafft.

;ugl

 

[Frettchen]

Sorry, hab es mittlerweile zu Divs geändert

<div class="navi">

	<div class="navi-kat">[url="index.php?site=home.php"]Home[/url]</div>
	<div class="navi-kat" style="border-top-color:#000000; border-top-style:solid; border-top-width:1px; margin-top:3px; ">[url="index.php?site=kat_unternehmen.php"]Unternehmen[/url]</div>
	<div class="navi-list">[url="index.php?site=entstehung.php"]Entstehung [/url]</div>
	<div class="navi-list">[url="index.php?site=grundsatz.php"]Grunds&auml;tze [/url]</div>
	<div class="navi-list">[url="index.php?site=jobs.php"]Jobs[/url]</div>
	<div class="navi-list">[url="index.php?site=standort.php"]Standort[/url]</div>

	<div class="navi-list">[url="index.php?site=kontakt.php"]Kontakt[/url]</div>
	<div class="navi-list">[url="index.php?site=impressum.php"]Impressum [/url]</div>

	<div class="navi-kat">[url="index.php?site=kat_service.php"]Service[/url]</div>
	<div class="navi-list">[url="index.php?site=privatkunden.php"]Privatkunden [/url]</div>
	<div class="navi-list">[url="index.php?site=firmenkunden.php"]Gesch&auml;ftskunden [/url]</div>

	<div class="navi-list">[url="index.php?site=notdienst.php"]Notdienst[/url]</div>
	<div class="navi-list">[url="index.php?site=webdesign.php"]Webdesign[/url]</div>
	<div class="navi-list">[url="index.php?site=wartungsvertrag.php"]Wartungsvertr&auml;ge[/url]</div>
	</div>

 

[Frettchen]

also das mit dem :hover definieren klappt irgendiwe nit.

Egal ob [*] oder <div>

Die Farbe verändert sich auch erst dann wenn ich den Text überfahre, jedoch nicht schon bei überfahren des <div> oder[*]

so wie es z.B. hier der fall ist -> www.kicker.de


Werd nochmal wahnsinnig mit dem kram.

 

[Prophet]

unter dem IE funzt :hover auch nur bei a falls du den benutzt...

 

[Frettchen]

Jep, so siehts aus. Ist zwar wieder andere code wi im anfang aber das selbe im prinzip.

index.php

<div class="navi-kat">Hauptmenü</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>
<div class="navi-link">[url="index.php"]Produkte[/url]</div>

css

.navi-kat {
	background-color: #FFC488;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #990033;
}
.navi-link a {
	display:block;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	text-decoration:none;
	color:#000000;
}
.navi-link a:hover {
	background-color:#00FF00;
	color:#0000CC;
}

 

[Prophet]

folgendes muss der link haben damit er den ganzenplatz ausnutzt:

display:block;
line-height:_XX_px; /* höhe des feldes */

das feld darf dann aber kein padding besitzen.

so klappt es immer....