Dat float:right elementen op de volgende regel geplaatst worden als ze niet het eerste element op de regel zijn, is een bekende bug in Internet Explorer en Mozilla-gebaseerde browsers. Je kunt dit proberen te omzeilen door die elementen ook nog een negatieve margin-top mee te geven zodat ze weer omhoog getrokken worden, maar dan veroorzaak je weer problemen met browsers die het wel goed doen zoals Opera en Safari.quote:Op dinsdag 19 juni 2007 11:09 schreef Ewaldus het volgende:
hoe krijg ik het voor elkaar dat meerInformatie.gif rechts in de list komt?
Dus zo: http://www.ewaldvankampen.nl/upload/audio1.jpg
.
Als ik zorg dat de img float:right krijgt, komt hij te laag, en is het ontwerp niet meer zoals het zou moeten
nee niet, want ik wil van dat plaatje een link maken,quote:Op dinsdag 19 juni 2007 11:36 schreef CraZaay het volgende:
Dat plaatje hoort helemaal niet in je html, maar in je css. Het is namelijk geen illustratie maar een element om je link op te leuken.
Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
Opgelostquote:Een andere oplossing is het rechts-zwevende element als eerste in de regel op te nemen. Dan blijft het in alle browsers op dezelfde regel.
Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de htmlquote:Op dinsdag 19 juni 2007 12:08 schreef Ewaldus het volgende:
[..]
nee niet, want ik wil van dat plaatje een link maken,
maar nu ik het zo type zit ik er ook over te denken het plaatje als achtergrond te doen, de link display:block mee te geven...
Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.quote:Op dinsdag 19 juni 2007 13:29 schreef CraZaay het volgende:
[..]
Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de html
In het voorbeeld staat het binnen de link van de tekst, en hoort het dus in de css (er is al een tekstlink). Los of dit verwarrend is voor gebruiker, ik heb het niet over usability gehad.quote:Op dinsdag 19 juni 2007 14:54 schreef AnGabhar het volgende:
[..]
Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.quote:Op dinsdag 19 juni 2007 15:10 schreef CraZaay het volgende:
Met een eigen href zou het alsnog in de css moeten wat mij betreft, aangezien het geen afbeelding met toegevoegde waarde is. Je zou imo dan een tekstlink moeten maken waarvan je de tekst met css verbergt en het plaatje toont als achtergrondafbeelding. Accessibility enzo.
Het plaatje is puur ter decoratie en voegt niets toe aan de content. Het dingetje zou net zo goed in de achtergrond van het li element geplaatst kunnen worden.quote:Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:
[..]
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
Als we ons even limiteren tot screen readers, braille leesregels, zoekmachines en de meeste mobile devices dan is tekst verbergen en een afbeelding tonen middels css de meest ideale oplossing. Die kunnen hier allemaal prima mee overweg namelijk.quote:Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:
[..]
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
Precies. Dan heb je het dus in principe altijd over unieke afbeeldingen (dus geen plaatje wat 10 keer op een pagina staat) die een wezenlijke bijdrage leveren aan het begrijpen van de content. Inhoudelijk, dus niet "omdat mensen anders niet snappen dat het een knopje is".quote:Op dinsdag 19 juni 2007 15:39 schreef Bigs het volgende:
[..]
Het plaatje is puur ter decoratie en voegt niets toe aan de content. Het dingetje zou net zo goed in de achtergrond van het li element geplaatst kunnen worden.
Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
Een uitstekende vuistregel, maar in het voorbeeld waar het hier om gaat (indien en zodra de [ i ] tenminste een aparte link wordt, zoals de bedoeling lijkt te zijn) gaat het juist om een uitermate belangrijk element in je pagina: een link naar extra informatie. Dat is geen decoratie maar een navigatie-element met belangrijke toegevoegde waarde.quote:Op dinsdag 19 juni 2007 15:39 schreef Bigs het volgende:
Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
Idem als mijn vorige reactie: wij lijken het plaatje anders op te vatten. Als dit inderdaad een apart element met een eigen link wordt, dan ga je dat niet met allerlei css- of scriptingtruukjes wegwerken of onzichtbaar maken. Een betere oplossing zou dan zijn om er een plaatje met alt-tekst van te maken. Er is dan (zoals het geval kan zijn met decoratie en achtergrondplaatjes) geen sprake van 'progressive enhancement' maar van een essentieel element in je code.quote:Op dinsdag 19 juni 2007 15:45 schreef CraZaay het volgende:
Dit in tegenstelling tot wanneer je afbeeldingen gebruikt en een bezoeker het tonen van afbeeldingen uit heeft staan. Er is in dat geval dus helemaal geen toegankelijkheidsissue
Ok dan begrijp ik het plaatje inderdaad verkeerd. Door de smalheid van het geheel ding ik er vanuit dat het een navigatie iets was.quote:Op dinsdag 19 juni 2007 15:59 schreef AnGabhar het volgende:
[..]
Een uitstekende vuistregel, maar in het voorbeeld waar het hier om gaat (indien en zodra de [ i ] tenminste een aparte link wordt, zoals de bedoeling lijkt te zijn) gaat het juist om een uitermate belangrijk element in je pagina: een link naar extra informatie. Dat is geen decoratie maar een navigatie-element met belangrijke toegevoegde waarde.
Blijkbaar vatten wij het plaatje anders op.
1 |
En mijn posts zijn gebaseerd op wat OP heeft gezegd: dat er een eigen link komt voor die afbeelding.quote:Op dinsdag 19 juni 2007 17:41 schreef CraZaay het volgende:
Het plaatje staat gewoon binnen de link en is dus geen belangrijk element. Dat is precies waar al mijn posts hierover op gebaseerd zijn.
Blijkbaar. Het is tamelijk algemeen om iconen te gebruiken naast, maar ook in plaats van tekst, zeker als de iconen duidelijk genoeg zijn. Dat zie je in het verkeer, dat zie je ook op het web. Het teken [ i ] (of het vraagteken) voor "help", "meer informatie" of "inlichtingen" is internationaal alom bekend en behoeft geen tekst.quote:En kennelijk hebben wij een elementair andere kijk op plaatjes, want wat mij betreft gebruik je nooit een afbeelding tenzij het illustratief voor de andere content is In modern webdev-land is dat ook de gangbare opvatting overigens.
Precies, dat zie je in het verkeer. Dat is ook waarom blinden en zoekmachines geen autorijden.quote:Op dinsdag 19 juni 2007 18:19 schreef AnGabhar het volgende:
Blijkbaar. Het is tamelijk algemeen om iconen te gebruiken naast, maar ook in plaats van tekst, zeker als de iconen duidelijk genoeg zijn. Dat zie je in het verkeer, dat zie je ook op het web. Het teken [ i ] (of het vraagteken) voor "help", "meer informatie" of "inlichtingen" is internationaal alom bekend en behoeft geen tekst.
En die laatdunkende opmerking over "modern web-dev land" laat ik voor jouw rekening. Ik maak zelf wel uit met welke hype ik meega.
Blinden en zoekmachines lezen alt-teksten, zoals ik een bericht of wat geleden al schreef .quote:Op dinsdag 19 juni 2007 18:33 schreef CraZaay het volgende:
[..]
Precies, dat zie je in het verkeer. Dat is ook waarom blinden en zoekmachines geen autorijden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | float: left; width: 300px; margin: 0; padding: 0; } #main { margin: 0 300px 0 300px; padding: 0; } #foto { float: right; width: 300px; margin: 0; padding: 0; } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |