• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bgcolor bei a:hover ändern

Status
Für weitere Antworten geschlossen.
F

Frettchen

Neues Mitglied
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 :)

Code: 
  <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>
 
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?
 
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.
 
versuchs ma mit sowas in der art:

Code: 
.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;
}

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

Das müsste dann klappen.
(Farben und das ganze Zeugs kannste natürlich auch ändern.)
 
Frettchen schrieb:
Code: 
  <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>
Zum Vergrößern anklicken....


Und:
Frettchen schrieb:
Habe nur leider ohne [*] geschafft.
Zum Vergrößern anklicken....

;ugl
 
Sorry, hab es mittlerweile zu Divs geändert

Code: 
<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>
 
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.
 
Jep, so siehts aus. Ist zwar wieder andere code wi im anfang aber das selbe im prinzip.

index.php

Code: 
<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
Code: 
.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;
}
 
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....
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben