hover achtegrondkleur css

[anoniem]

Hallo allemaal, ik wil in css bij een a:hover dat de achtergrondkleur van een list item blauw wordt, nou kan dat wel maar dat is alleen de achtergrond bij de letters blauw, kan je het zo instellen dat er een blauwe balk onstaat die altijd bijvoorbeel 170 pixels breed is? ongeacht het aantal letters waar het achter staat? Moos

[anoniem]

ja, gebruik dan display: block; width: 170px;

[anoniem]

Johnny, geweldig! Kan de instelling ook zo dat hij een aantal pixels voor de list items al blauw is?

[anoniem]

negatieve margin of padding instellen

[anoniem]

Daar zat ik ook aan te denken, ik ben aan het proberen maar dat lukt tot nu toe nog niet, alvast bedankt.

[anoniem]

online voorbeeld?

[anoniem]

Kijk maar op http://www.deknotwig.com/index.htm ik wil bij een hover de blauwe balk op dezelfde breedte als de rode balk. Net een margin geprobeerd maar dat deed wel erg vreemd.

[anoniem]

[code:1:1eeae408f6] ul.navbar { margin: 0px; } ul.navbar li { padding-left: 20px; } [/code:1:1eeae408f6] Je moet iets spelen met die padding, kweet niet hoeveel et exact is. Succes.

[anoniem]

Ik heb het geprobeert maar de li items verplaatsen nu 20px naar rechts inclusief het block, kijk maar op de site. Als ik de padding -20 maak komt hij terug op z'n gewone plek (alsof je geen padding hebt). Dit is mijn totale .css met padding-left: 20px body{ padding-left:14em; font-family:Arial,Verdana; color:black; background-image:url("images/blok_red.jpg"); background-repeat: repeat-y} h2, h3, h4, h5, h6 { color:darkblue} ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 17em; left: 1.5em; width: 13em } ul.navbar li { margin: 0.3em; padding-left: 20px } ul.navbar a { text-decoration: none; font-size: 18px; font-weight: bold} a:link { color: black ; font-weight: bold} a:visited { color: black ; font-weight: bold} a:hover { background: blue; display: block; width: 171px; color: white; font-weight: bold} a:active { color: blue ; font-weight: bold} h1{ font-family:"Comic Sans Ms",Arial,Verdana; color:black} voorbeeld op site

[anoniem]

Nou ik heb van alles geprobeerd maar lukt tot nu toe nog niet. Ik heb ook een plaatje als background tijdens de hover geprobeerd maar dat werkt ook niet ik denk dat ik gewoon zelf wat fout doe maar weet nog niet wat. Iemand nog suggesties?

[anoniem]

Ik denk dat dit artikel wel nuttig is: [url]http://www.alistapart.com/articles/taminglists/[/url] Succes.

[anoniem]

Henkz, bedankt, voorlopig weer even wat uit te proberen, staat veel nuttige info in. Moos

[anoniem]

Nou henkz bedankt, ik heb de aanwijzigen van je link gevolgd, en het is gelukt! Kijk maar op http://www.deknotwig.com/index.htm , weer een heleboel geleerd. Moos

[anoniem]

Er is nu wel een verschil tussen het hover-effect in IE en in Firefox: In IE gaat de hoverkleur wel tot de rand van de rode achtergrond. In Firefox echter niet. Volgens mij moet je in de a:hover ook een width:100% geven.

[anoniem]

Volgens de heren van A List Apart werkt deze css wel in IE/win IE/mac en netscape/mozilla, kan ik op het moment even niet controleren, dus zou kunnen dat dit niet helemaal werkt in firefox, daar ga ik nog wel eens naar kijken. Dit is de CSS: [code:1:6e465b9436]body{ padding-left:14em; font-family:Arial,Verdana; background:white; color:black; background-image:url("images/blok_red02.gif"); background-repeat: repeat-y } h2, h3, h4, h5, h6 { color:darkblue} #button ul { list-style: none; margin: 0; padding: 0; border: none; position: absolute; top: 17em; left: 0em; width: 10.4em; } #button li { border: 0; margin: 0; } #button li a { display: block; padding: 2px 5px 2px 0.5em; border-left: 20px solid red; color: black; font-size: 18px; font-weight: bold; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 20px solid darkblue; background-color: darkblue; color: #fff; font-weight: bold } h1{ font-family:"Comic Sans Ms",Arial,Verdana; color:black} [/code:1:6e465b9436] Om het in meerdere browsers te laten werken staat de code: html>body #button li a { width: auto; } er in, wat ik daar nog meer aan moet doen weet ik (nog) niet, maar ik ga binnenkort wel weer proberen. In ieder geval bedankt voor de reactie lorem ipsum. Moos

[anoniem]

Je gebruikt voor de rode achtergrond een gif van 200px breed. (ik zou trouwens een container-div gebruiken met rode achtergrondkleur, maar goed). Voor de breedte van de ul gebruik je em. em is gerelateerd aan de gebruikte font-grootte en dus niet handig om hier te gebruiken. Als je daar 200px van maakt is het probleem ook opgelost.

[anoniem]

lorem, vertel eens, container-div met rode achtergrond. Of een goede link waar ik daar meer over kan vinden. Alvast bedankt.

[anoniem]

Het idee is dat je een pagina indeelt m.b.v. DIV's (boxen). In jouw geval zou dat een 2-column lay-out zijn. Meer info bijv. op: [url]http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html[/url]

[anoniem]

[url=http://www.maxdesign.com.au/presentation/process/]Dit[/url] vind ik ook altijd wel een fijne...

[anoniem]

Hartstikke mooi, bedankt, kan ik voorlopig even mee voort, jullie zien het resultaat wel, of een hulp post als het niet lukt :wink: . Als iemand anders nog een link heeft, alles is welkom. Moos