anoniem Geplaatst: 12 september 2004 Delen Geplaatst: 12 september 2004 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 Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 ja, gebruik dan display: block; width: 170px; Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 Johnny, geweldig! Kan de instelling ook zo dat hij een aantal pixels voor de list items al blauw is? Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 negatieve margin of padding instellen Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 Daar zat ik ook aan te denken, ik ben aan het proberen maar dat lukt tot nu toe nog niet, alvast bedankt. Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 online voorbeeld? Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 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. Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 [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. Quote Link naar reactie
anoniem Geplaatst: 12 september 2004 Auteur Delen Geplaatst: 12 september 2004 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 Quote Link naar reactie
anoniem Geplaatst: 15 september 2004 Auteur Delen Geplaatst: 15 september 2004 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? Quote Link naar reactie
anoniem Geplaatst: 15 september 2004 Auteur Delen Geplaatst: 15 september 2004 Ik denk dat dit artikel wel nuttig is: [url]http://www.alistapart.com/articles/taminglists/[/url] Succes. Quote Link naar reactie
anoniem Geplaatst: 15 september 2004 Auteur Delen Geplaatst: 15 september 2004 Henkz, bedankt, voorlopig weer even wat uit te proberen, staat veel nuttige info in. Moos Quote Link naar reactie
anoniem Geplaatst: 20 september 2004 Auteur Delen Geplaatst: 20 september 2004 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 Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 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. Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 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 Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 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. Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 lorem, vertel eens, container-div met rode achtergrond. Of een goede link waar ik daar meer over kan vinden. Alvast bedankt. Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 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] Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 [url=http://www.maxdesign.com.au/presentation/process/]Dit[/url] vind ik ook altijd wel een fijne... Quote Link naar reactie
anoniem Geplaatst: 21 september 2004 Auteur Delen Geplaatst: 21 september 2004 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 Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen