Hinderlijke rand rondom rollover-button

Status
Niet open voor verdere reacties.
M

McNismo

Gebruiker
Lid geworden
8 jan 2011
Berichten
8
Beste mensen,

Heeft iemand een oplossing om de hinderlijke rand die verschijnt rondom een rollover-button weg te krijgen?

Ik heb een simpele rollover-button gemaakt, doormidden van twee verschillende images. Dus als je met de muis er overheen beweegt, veranderd de button. Maar het vervelende is, is dat als je op deze button klikt, dat dan de randen van de images van deze button zichtbaar zijn met een dun rood lijntje.

Hoe los ik dit op?

Ik hoop dat jullie kunnen helpen.
Marco
 
Hoi Marco,
Het dunne rode lijntje is het "focus" lijntje, dat alleen heel even verschijnt als je klikt.

Het is ervoor bedoeld, dat mensen die niet met de muis kunnen surfen, via hun toetsenbord met de Tab-toets van link naar link kunnen springen (en met Enter dan een link aanzetten). Het focus-lijntje is er om te laten zien waar je zit; want als je niet met de muispijl over het scherm beweegt, weet je dat natuurlijk niet.

Op zich valt het focus-lijntje met css wel weg te halen, maar daarmee verklein je de toegankelijkheid van de site. En de meeste mensen zullen het niet eens zien, belust als ze zijn op wat er op de nieuwe pagina zal gaan komen! :)

Met vriendelijke groet,
CSShunter
 
focuslijntje uitzetten

CssHunter,

Kan je mij vertellen hoe ik dat focuslijntje kan uitzetten?

Ik hoor het graag van je
Groet
Marco
 
Hoi Marco,
Even een tegenvraagje: heb je een link naar een (test-)pagina met dat rode lijntje?
Met een beetje geluk is er een mooi alternatief op te vinden, maar dat hangt van de pagina en de gebruikte kleuren af.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
cssHunter

Nee, de site waar ik aan werk staat nog niet online.

Maar ik ben nu ergens achter gekomen.

Want het betreft hier om de navigatie rollover-buttons van mijn site waarbij die hinderlijke stippellijntjes verschijnen. Ik had deze rollover-buttons (6 stuks) allemaal afzonderlijk in elke een aparte div gezet. Dus 6 divs achter elkaar. (waarschijnlijk niet logisch?)

Maar is het niet slimmer en logischer om deze 6 buttons als li's neer te zetten in één ul?

Als ik dat doe, heb ik die lijntjes niet.

Ik hoop dat je het snapt

Gr
Marco
 
Maar is het niet slimmer en logischer om deze 6 buttons als li's neer te zetten in één ul?
Klik om te vergroten...
Zeker wel!
Ken je trouwens de css-hover over een menu-item? (hier een mooier voorbeeld).

Als ik dat doe, heb ik die lijntjes niet.
Ik hoop dat je het snapt.
Klik om te vergroten...
Nee, dat snap ik niet. Als het echte links zijn, zou er altijd een stippellijntje bij klik moeten komen, welke constructie je ook gebruikt.
Het is toch niet alleen in de ontwerp-weergave van een html-editor een stippeltjeslijntje (dat aangeeft dat er van een <div> sprake is), dat er niet is als je de pagina in een browser bekijkt?
 
Nee, in de browserweergave komt het desbetreffende stippellijntje
 
O, maar:
... slimmer en logischer om deze 6 buttons als li's neer te zetten in één ul?
Als ik dat doe, heb ik die lijntjes niet.
Klik om te vergroten...
Dan is het probleem toch opgelost? :)
 
Toch is dat niet de oplossing, ben ik nu achter gekomen.

Door er een extra css-bestand (genaamd: reset) aan te hangen met onderstaande code, zijn de stippellijnen weg.

----------------
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
-----------------


Ik ben erachter gekomen, door een site die ik op mijn opleiding heb gemaakt uit te pluisen. En daarin werd er gewerkt met deze methode. Daar kwam de leraar mee.
 
Hoi McNismo,
Leuk dat je er door speurwerk achter gekomen bent. :thumb:
Het kon ook niet, dat de stippeltjes vanzelf zouden verdwijnen door er een <ul><li> lijstje van te maken.

En aha, daar komt de aap uit de mouw! :D
Dit is een stukje van de reset.css van css-goeroe Eric Meyer van een aantal jaren geleden.

Het idee erachter is: zet van alle html-elementen de css-eigenschappen expliciet op nul; dan kunnen eigenwijze browsers (met "interpretatie-verschillen", we denken aan niemand, IE ;) ) niet ontsnappen door er een eigen default-waarde aan te geven. Als je vervolgens per element opgeeft wat er dan wel moet gebeuren, geven alle browsers dat exact hetzelfde weer, voor zover ze geen andere echte bugs hebben (we denken aan niemand, IE ;) ).

Maar de laatste jaren is Internet Explorer redelijk zijn leven aan het beteren (ze hebben ingezien dat algemene standaarden beter zijn dan eigen standaarden), en met het verdwijnen van IE5, IE5.5 en IE6 (de laatste bijna-bijna-bijna) is de reset-noodzaak ook afgenomen. Het schijnt dat IE9 ook een aardige gooi doet in de inhaalslag. De andere browsers deden al bloedig hun best om zo goed mogelijk de css2.1-standaarden te gebruiken en de css3 vernieuwingen in te voeren.

In ieder geval, ik ben er nooit wows op geweest, op die reset.css.
Citaat uit eigen werk:
Als je Eric Meyers reset-css toepast *), moet je alles en ook alles weer opnieuw gaan instellen. Bv. alle <ul>'s, <ol>'s en <li>'s hebben ook een reset naar {margin:0; padding:0;} gekregen, en dat moet ik dan met de hand weer goedmaken zodat de bullets weer tevoorschijn komen. Bij <ol>'s en <ul>'s gooit ie er ook standaard de bullets uit, zie ik: {list-style: none;}. Enz.
- In plaats van eerst alles resetten en dan weer invoeren, pak ik liever alleen die elementen vast die ik wel wil standaardiseren. Anders wordt 't me veel te veel werk.
En ik ben lui aangelegd! ;)
__________
*) Ha, Eric Meyer past op zijn eigen site ook niet die reset-css toe, maar gaat op die pagina gewoon instellen wat ie wel nodig heeft. Zie z'n css! :d
Klik om te vergroten...
Met vriendelijke groet,
CSShunter

__________
PS: Heeft de leraar ook uitgelegd, wat je na het gebruik van de reset.css in je styles moet doen om bezoekers zonder muis te bedienen?
Test: muis op zijn kop leggen, en via het toetsenbord (Tab en Enter) een website proberen te bezichtigen. Neem deze maar eens. En daarna ter vergelijking deze.
 
Hoi csshunter,

Nee, dat had hij niet gezegd, hoe je dat moet oplossen. Zal het eens vragen.

Maar je zegt dat het niet slim is om deze reset te gebruiken omdat je dan alles weer opnieuw moet instellen.

Maar kan ik die reset.css niet vereenvoudigen zodat alleen die irritantie stippellijn alleen verdwijnt? (Ik ben vormgever van beroep, en hecht veel waarde aan het uiterlijk van een site. Vandaar dat ik die stippellijn weg wil hebben)

Ik hoor het graag van je.

Gr
Marco
 
Nou, volgens mij heb ik dat ook al gevonden.

Door alleen de volgende code in het reset.css bestand te zetten:

a
{
outline: 0;
}


Ja, voor de pro's onder ons zal dit waarschijnlijk een lachertje zijn. Maar ik ben pas enkele weken met de opleiding bezig. Dus voor mij een mijlpaal.
 
Hoi Marco,
(Ik ben vormgever van beroep, en hecht veel waarde aan het uiterlijk van een site. Vandaar dat ik die stippellijn weg wil hebben)
Klik om te vergroten...
Zolang 't niet gaat ten koste van de toegankelijkheid, ben ik je man/vrouw! :)

... heb ik dat ook al gevonden.
Door alleen de volgende code in het reset.css bestand te zetten:
a { outline: 0; }
Klik om te vergroten...
Klopt! Ik wilde 'm niet verklappen, omdat het zonder meer rücksichtslos weglaten van de outline (zoals hele volksstammen per ongeluk willen doen "voor 't mooi") tot ontoegankelijkheid van een hele site kan leiden.
Vandaar wilde ik ook even de aanblik van de site zien:
  • Als een link/knop bv. bij een hover en bij focus van gedaante verandert, hoeft het vaak niet:
Code: 
#menu a {
    color: black;
    background: white;
    }
#menu a:hover,
[B]#menu a:focus[/B] {
    color: white;
    background: black;
    }
  • Hetzelfde geldt voor een wisseling van achtergrond-image bij een hover/focus, of een andere visuele verandering (stukje opschuiven van een menu-item, vet worden ervan, enz.).
  • Bij kleurwisseling moet er wel voldoende kleurverschil en contrastverschil zijn tussen de twee toestanden: anders komen kleurenblinden en mensen met verminderd gezichtsvermogen in de knel (ken je deze al? daar schrok ik van!).
  • Het toevoegen van de focus-eigenschap aan een link met een veranderde hover-eigenschap is dus essentieel, maar wordt vaak vergeten.
  • Meer over toetsenbordtoegankelijkheid in dit artikeltje.
Mocht dit alles voor jou bekende kost zijn, dan kunnen misschien wat over-de-schouders-meelezers er iets aan hebben. ;)

Met vriendelijke groet,
CSShunter
 
Nee, het is niet zo dat bij mijn site onduidelijk is geworden door het weglaten van de outline. Maar bij sommige items vond ik het er een stuk netter uitzien.

Bij het menu van mijn site veranderd de link van kleur.

Ik ga jouw tips ook nog even uitproberen.
Bedankt alvast.
Ik zal vast wel weer eens wat hulp kunnen gebruiken, dus dan neem ik weer contact op.
Want ik krijg het idee dat jij er wel veel van weet.

Gr.
Marco
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan