DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Misschien zijn er tags niet goed afgesloten?quote:Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
WTF IE (6) probleem.
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
[afbeelding]
Hoe komt dit? :S
Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.quote:Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:
[..]
Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.
Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
Al eens getest met een tijdelijk bordertje rond die DIV?quote:Op donderdag 12 april 2007 00:22 schreef Tuvai.net het volgende:
WTF IE (6) probleem.
Het gaat om deze pagina. Rechts zie je een kopje 'Nieuw' staan waaronder de 10 meest recente boeken ingevoerd staan. Deze boeken stonden eerst in een <table> en werkte op zich prima, maar omdat de rest van de pagina ook netjes volgens het tableless principe gemaakt is en prima XHTML Strict en CSS valide is, besloot ik om daar ook maar <div>jes van te maken. Ziet ook mooier uit als je de pagina zonder stylesheet bekijkt zonder tabel natuurlijk.
Nu werkt het in Mozilla wel normaal, maar in IE6 gebeurt er iets heel mafs:
[afbeelding]
Hoe komt dit? :S
IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
dat dus.
Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.quote:Op donderdag 12 april 2007 18:16 schreef Tuvai.net het volgende:
[..]
Ik streef dus altijd naar toegankelijkheid en een webpagina dient ook toegankelijk te zijn voor mensen zonder stylesheet. Denk hierbij ook aan gevallen als PDA's, WAP browsers, text-to-speech en textbrowsers (Lynx). Die lezen alles netjes van boven naar onder op, en in het geval van een tabel van links naar rechts. Als je in Mozilla Beeld > Paginastijl > Geen stijl selecteerd dan zie je de pagina zonder stylesheet. Doe dat bijvoorbeeld maar eens hier op Fok!.
Als het een tabel met daadwerkelijke tabulaire data is dan maakt dit niks uit, maar bij een grotere tabel waar ook plaatjes en dergelijke in voorkomen is het geen gezicht, en sommige programma's zullen dit dan ook niet goed oppikken. Verder is het natuurlijk ook puur een principekwestie van opmaak en inhoud gescheiden houden.
Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.
De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
Heb je een test case hiervoor? Bij mij sluiten div's in IE namelijk ook altijd naadloos op elkaar aan. Daarnaast staan ze in FF en Opera ook onder elkaar wanneer je ze beide 50% breed maakt en er een border omheen zet (en een juist doctype gebruikt); de borders worden namelijk bij de breedte opgeteld waardoor 2 x 50% + border meer is dan 100%quote:Op donderdag 12 april 2007 20:19 schreef QM84 het volgende:
[..]
Al eens getest met een tijdelijk bordertje rond die DIV?
IE6 heeft problemen met 2 divs die nauw op elkaar aansluiten, ook naast elkaar te zetten. Op de een of andere manier heeft IE dus altijd een bepaalde marge ertussen nodig.
FF/Opera: 2 DIVs geloat op 50%/50% naast elkaar gaat goed, IE zet ze geheid onder elkaar.
Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.quote:Op donderdag 12 april 2007 19:07 schreef Geqxon het volgende:
[..]
Dat is mooie praat, maar je pagina werkt nu niet, dus toegankelijk is hij op het moment niet.
Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.quote:Op donderdag 12 april 2007 23:02 schreef CraZaay het volgende:
[..]
Je pagina zou veel toegankelijker zijn wanneer je een tabel gebruikt, zeker met een goed gebruik van table headers. Een alternatieve user agent als een screen reader kan daarmee per regel een verband leggen tussen een kolom en de bijbehorende titel, wat het veel 'leesbaarder' maakt. Dit wordt ook zo opgelezen, en dus niet van boven naar onder. Je hoort dan per regel "auteur: naam, titel: naam", etc.
Een overzicht van boeken met per boek een auteur, titel, etc. is simpelweg tabulaire data. Dat het "geen gezicht" is, is wat mij betreft geen argument. Zo te lezen ben je net als ik een voorstander van een strikte scheiding van structuur, presentatie en gedrag. Dat het "geen gezicht" is doet er dus niet toe: de structuur is wanneer je een tabel gebruiikt simpelweg beter, omdat dit beter toegankelijk is voor alternatieve user agents. Hoe geef je anders aan in welk veld een titel staat, en in welk veld een auteur? Daarnaast kunnen zo'n beetje alle user agents prima omgaan met tabulaire data, inclusief PDA's, etc.
De principekwestie is inderdaad opmaak en inhoud gescheiden houden, en dat doe je dus niet wanneer je enkel betekenis (= structuur) geeft aan je data door middel van styling.
Je kan nog aardig wat doen ook om dat te customizen (bijvoorbeeld wanneer de th "auter van het boek" is, een screen reader vertellen dat 'ie alleen "auteur" op moet lezen). Ik zal straks eens kijken of ik m'n bron terug kan vinden, volgens mij uit een boek wat op kantoor in de kast staat.quote:Op vrijdag 13 april 2007 08:30 schreef Tuvai.net het volgende:
[..]
Je, en daarom kom ik hier vragen waarom. Laat je kutposts dus achterwege of kom met een oplossing.
[..]
Hmm, dus als ik table headers (<th>) gebruik dan leest bijvoorbeeld een text-to-speech programma bij elke kolom de bijbehorende table header op? Als dat zo is dan hoeft 't voor mij inderdaad niet per sé niet in een tabel te staan dus.
en jawel hoor. Ik heb het design van een website gemaakt. Lekker opgebouwd. Ziet er goed uit in IE7, Opera 9.20 en FF 2.0.0.3.
Ik check in IE6, gaan er gewoon twee flinke dingen mis. Mijn middenstuk wordt eronder gebeukt en mijn menu is niet meer netjes gecentreerd. Dik balen dus.
Iemand een idee hoe ik dit op kan lossen want na flink klooien krijg ik het niet goed en mijn CSS lijkt me wel ok.
De website staat hier:
http://www.sieval.com/new/
Iemand dus een idee?
Ik check in IE6, gaan er gewoon twee flinke dingen mis. Mijn middenstuk wordt eronder gebeukt en mijn menu is niet meer netjes gecentreerd. Dik balen dus.
Iemand een idee hoe ik dit op kan lossen want na flink klooien krijg ik het niet goed en mijn CSS lijkt me wel ok.
De website staat hier:
http://www.sieval.com/new/
Iemand dus een idee?
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
Probleempje: ik heb nu hele leuke rollover buttontjes maar ik krijg ze enkel onder elkaar en niet nast elkaar! Iemand een idee hoe ik dat wel zo krijg?
CSS:
HTML:
uitkomst:
Iemand die me kan helpen ???
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | display: block; width: 186px; height: 20px; background-image: url(../_gfx/menu/weblog.gif); background-position: 0 0; margin-bottom: 10; margin-right: 10; } a#buttonweblog:hover { background-position: -186px 0; } a#buttonphotos { display: block; width: 186px; height: 20px; background-image: url(../_gfx/menu/photos.gif); background-position: 0 0; margin: 0; } a#buttonphotos:hover { background-position: -186px 0; } a .alt { display: none; } |
HTML:
| 1 2 | <a id="buttonphotos" href="#"><span class="alt">Photogallery</span></a> |
uitkomst:
Iemand die me kan helpen ???
???
elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
mijn dank is groot! terwijl ik al zo vaak met flaot: left heb gewerktquote:Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
elk item is een a, die komen standaard onder elkaar. Als je ze naast elkaar wilt hebben kan je ze allebei een float:left meegeven css.
Ik gebruik zelf hiervoor trouwens altijd een ul met li's erin.
Na een tijdje geen sites meer te hebben gebouwd heb ik me eens verdiept in css en nu zit ik wat te knutselen en loop ik tegen (uiteraard :P) IE6 frustraties aan.
Ik wilde een simpele rollover button maken van een standaard linkje, dus zo dat je met
automatisch een mooi plaatje krijgt met rollover-effect. De tekst moet onder dat plaatje staan, en dat is het probleem.
Mijn css voor dit stukje is:
Dat truckje met line height gebruikte ik omdat IE 6 de tekst anders niet netjes onderaan kreeg. Maar nu neemt datzelfde IE6 juist weer te veel ruimte; hij pakt de totale line height als hoogte van het blok, in plaat van de height. Hoe kan ik dit aanpassen, of is er een andere manier om dit in IE6 werkend te krijgen? Alvast bedankt :)
Ik wilde een simpele rollover button maken van een standaard linkje, dus zo dat je met
| 1 |
automatisch een mooi plaatje krijgt met rollover-effect. De tekst moet onder dat plaatje staan, en dat is het probleem.
Mijn css voor dit stukje is:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | position: static; text-align: center; display: block; line-height: 190px; width: 90px; height: 120px; background: url("images/button_normal.jpg") 0 0 no-repeat; text-decoration: none; } a.rollover:hover { background: url("images/button_roll.jpg") 0 0 no-repeat; } |
Dat truckje met line height gebruikte ik omdat IE 6 de tekst anders niet netjes onderaan kreeg. Maar nu neemt datzelfde IE6 juist weer te veel ruimte; hij pakt de totale line height als hoogte van het blok, in plaat van de height. Hoe kan ik dit aanpassen, of is er een andere manier om dit in IE6 werkend te krijgen? Alvast bedankt :)
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
Nee, a's komen standaard naast elkaar. Ze komen hier onder elkaar vanwege de uitdrukkelijk opgegeven 'display: block'. Dat is dan ook wel weer nodig als je ze een breedte, hoogte, marge enz. wilt geven.quote:Op woensdag 25 april 2007 10:27 schreef hornage het volgende:
elk item is een a, die komen standaard onder elkaar.
Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.quote:Op woensdag 25 april 2007 14:08 schreef De_Hertog het volgende:
Daarmee ontstaat hetzelfde probleem als bij IE ook op andere browsers. En als ik die padding-top te laag zet, verschuift de tekst mee omhoog.
Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
| 1 2 3 4 5 6 7 8 9 10 11 12 | position: absolute; height: 100%; margin: 0px; margin-left: 15px; padding: 5px; border-left: 1px #000000 solid; border-right: 1px #000000 solid; background-color: #E9E9E9; } |
Lijkt mij enigszins duidelijk wat het doet. Wat mij niet lukt:
-Height 100% zorgt voor een kleine scrollbar vanwege de 5px padding
-Bij het verkleinen van mijn venster wordt de div "container" even groot als het venster, als ik dan naar beneden scroll is alle data die er daardoor niet meer oppast vanaf gevallen.
Hoe kan ik zoiets slim aanpaken? :)
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.quote:Op woensdag 25 april 2007 23:23 schreef CraZaay het volgende:
[..]
Je wilt als ik het goed begrijp toch gewoon een link met een achtergrondafbeelding op de a en visueel de tekst onder die afbeelding? Zo ja, dan gaat padding-top prima werken.
CSS: zelfde als boven, maar dan met padding-top, dus:quote:Welk doctype gebruik je en welke html/css heb je gebruikt icm padding-top?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | position: static; text-align: center; display: block; padding-top: 80px; width: 90px; height: 120px; background: url("images/button_normal.jpg") 0 0 no-repeat; text-decoration: none; } a.rollover:hover { background: url("images/button_roll.jpg") 0 0 no-repeat; } |
Doctype:
| 1 |
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
My god, dat was nog simpeler dan ik dacht. Super, dit werkt echt geweldig!quote:Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie isquote:Op zaterdag 28 april 2007 14:45 schreef AnGabhar het volgende:
Komt het resultaat meer in de buurt als je niet een height: 100% opgeeft maar de top- en bottom-waardes, afhankelijk van de dikte van padding en border?
Je knop moet dus 200px hoog worden (height + padding)?quote:Op zaterdag 28 april 2007 15:18 schreef De_Hertog het volgende:
[..]
Dat is inderdaad wat ik wil. Als ik Padding-top gebruik in de code hierboven, dan maakt hij de ruimte tussen de knoppen óók veel te groot.
[..]
CSS: zelfde als boven, maar dan met padding-top, dus:
[ code verwijderd ]
Even getest:quote:Op zondag 29 april 2007 10:34 schreef CraZaay het volgende:
[..]
In welke browsers is dat allemaal getest? Ik hoor 'm nu voor het eerst namelijk en ben wel benieuwd hoe bruikbaar 'ie is
Opera 4 t/m 9: check
Mozilla: check (vanaf Milestone 3)
IE7: check
IE 6-: fout
Netscape 4: fout (verrassing)
Aandachtspuntjes: standaardmodus (anders werkt IE niet); html, body {height: 100%; margin: 0; padding: 0} geeft misschien net iets meer kans op succes.
Dat was inderdaad het probleem, dank je Ik dacht dat hoogte de hoogte van het totale blok was en padding hoe ver het van de bovenkant binnen dat blok af stond, had niet door dat beide waardes bij elkaar werden opgeteld. Bedankt voor de tip, het werkt nu (al moet ik IE nog steeds testen, enig voorbehoud dus.. )quote:Op zondag 29 april 2007 10:36 schreef CraZaay het volgende:
[..]
Je knop moet dus 200px hoog worden (height + padding)?
Mary had a little lamb
Then Mary had dessert
Then Mary had dessert
