html5 audio speler past breedte niet aan in de width

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

ik heb deze code toegepast op me website:

HTML: 
<audio width="100" height="32" src="http://prostreams.nl:8140/start/remcmaas" controls="controls">Deze speler werkt niet op deze internet browser.</audio>"]<audio width="100" height="32" src="http://prostreams.nl:8140/start/remcmaas" controls="controls">Deze speler werkt niet op deze internet browser.</audio>

je ziet de speler staan in de stream aan de linker kant.
probleem is dat hij de breedte niet toepast in de code. als ik de width aanpast veranderd er niks.
Nu loopt deze speler dus door onder me tekst, welke niet mag.

Ik wou dat de speler dan netjes in het kleurde vakje blijft.

M.v.g.

Eric Bosman
 
Mijn browser inspector zegt dat de width op 100% staat, wat blijkbaar by default 300px is.
Probeer eens door de style via css te zetten:
HTML: 
<audio src="http://prostreams.nl:8140/start/remcmaas" controls="controls" style="width: 100px; height: 32px;">Deze speler werkt niet op deze internet browser.</audio>
 
Johantrax zei:
Mijn browser inspector zegt dat de width op 100% staat, wat blijkbaar by default 300px is.
Klik om te vergroten...

je code heb ik wel toegepast, en idd werkt het nu wel.
Krijg hem netjes op de pagina. heb de width toch op 100% gezet, want staat mooi in het midden in me gekleurde blok, wat de bedoeling is.

Alleen weer die verdomde validator zegt 4 fouten te hebben gevonden. zie: hier.

Blijkbaar is dit voor een website met strict. (toch?)
Me site ff verbouwen zie ik niet zitten, heb er echt veel werk van gemaakt, en koste me enorm veel moeite hem mooi validate te krijgen.
Mij bedoeling enkel van die audio code is dat ik alle mobiele gebruikers een plezier er mee doe, omdat op die speler juist op alle type mobiels goed afspelen.

de fouten snap ik niet van de validator nu, dus hoe krijg ik hem validate?
 
Je site heeft als doctype 'HTML 4.01 Transitional', maar het audio-element bestaat daar nog niet in, dat werd geïntroduceerd in html5.

Je kan simpelweg je eerste twee lijnen
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
vervangen door
HTML: 
<!DOCTYPE html>

Als je daarna valideert verwacht ik wel dat je nog een aantal kleine errors/warnings zal krijgen, maar ik vermoed dat ze makkelijk weg te werken zijn. Als je ze niet zou begrijpen, laat het dan hier weten en dan helpen wij je hier wel verder.
 
Johantrax zei:
Je site heeft als doctype 'HTML 4.01 Transitional', maar het audio-element bestaat daar nog niet in, dat werd geïntroduceerd in html5.
Klik om te vergroten...

Als ik de resultaat bekijk op mij scherm zie ik niks vreemds, Kan je dan beter deze fout negeren misschien van de validator?

b.t.w.

Heb de code toegepast en gecontrolleerd, maar toen had ik 8 errors en 3 waarschuwingen.
Dus heb het maar terug gezet.
Dit waren de fouten als ik jou code toepast Johantrax:
Error Line 35, Column 46: No space between attributes. <li><a href="links.html"target="_top">Links</a></li>

✉

Error Line 37, Column 51: No space between attributes. … <li><a href="gastenboek.html"target="_top">Gastenboek</a></li>

✉

Error Line 99, Column 72: Bad value 100% for attribute width on element img: Expected a digit but saw % instead. <IMG src="images/top.jpg" height="220" width="100%" alt="foto top">

Syntax of non-negative integer:One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
Error Line 101, Column 166: Bad value 42px for attribute height on element iframe: Expected a digit but saw p instead. …ng="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>

Syntax of non-negative integer:One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
Error Line 101, Column 166: Bad value 100% for attribute width on element iframe: Expected a digit but saw % instead. …ng="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>

Syntax of non-negative integer:One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
Error Line 101, Column 166: The scrolling attribute on the iframe element is obsolete. Use CSS instead. …ng="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>

✉

Error Line 101, Column 166: The frameborder attribute on the iframe element is obsolete. Use CSS instead. …ng="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>

✉

Error Line 101, Column 166: The align attribute on the iframe element is obsolete. Use CSS instead. …ng="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>

✉

Warning Line 127, Column 118: The language attribute on the script element is obsolete. You can safely omit it. …vaScript" src="http://www.webhelpje.nl/poll/pollsc.php?name=hitdance"></script>

✉

Warning Line 209, Column 108: The language attribute on the script element is obsolete. You can safely omit it. …text/javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>
Klik om te vergroten...
 
Laatst bewerkt:
Je kan foutmeldingen uit de validator altijd negeren natuurlijk :p In dit geval zal het vaak nog goed komen omdat de meeste browsers vrij goed 'gokken' wat je bedoelt. Indien je browser strict zou reageren, zou hij het audio-element negeren, omdat het nog niet bestond..

De errors die je krijgt wanneer je naar HTML5 opschuift, zijn gelukkig zeer eenvoudig te verhelpen:
De eerste twee errors zijn hetzelfde
validator zei:
No space between attributes
Klik om te vergroten...
en is op te lossen door een spatie toe te voegen tussen de sluitingsaanhalingstekens en het 'target'-attribuut dat erop volgt. Voor de eerste wordt het verbeterde resultaat dus
HTML: 
<li><a href="links.html "target="_top">Links</a></li>
idem voor de gastenboeklink
HTML: 
<li><a href="gastenboek.html" target="_top">Gastenboek</a></li>
De volgende 3 errors zijn ook zeer gelijkaardig en gaan erover dat de waardes die je bij width en height hebt ingevuld ongeldig zijn. In HTML5 mag daar enkel een getal staan, zonder eenheid (dus zonder '%' of 'px'), het getal is altijd in pixels. Aangezien jij voor de elementen wel een breedte in procenten wenst in te geven, zullen we een andere manier moeten gebruiken om de afmetingen te zetten. Dat kan je doen door middel van CSS toe te passen. Meestal wordt CSS code in een apart bestand of een aparte stijlblok opgenomen, maar je kan en mag dat ook rechtstreeks in het element zelf doen, door het style-attribuut te gebruiken.
Ik doe hier het eerste element even als voorbeeld; Je gaat dan van de huidige code
HTML: 
<IMG src="images/top.jpg" height="220" width="100%" alt="foto top">
over naar de HTML5 en CSS versie die er als volgt uitziet:
HTML: 
<img src="images/top.jpg" style="height: 220px; width: 100%;" alt="foto top">
Probeer het voor de twee andere errors maar zelf, als het niet lukt, vraag je het maar.

De laatste 3 errors gaan over attributen van het iframe-element die niet langer bestaan, maar ook via CSS moeten geregeld worden. Het gaat over 'align', 'frameborder' en 'scrolling'.
Het align-attribuut kunnen we eigenlijk gewoon weglaten. Waarom? De huidige waarde is 'middle', wat wil zeggen dat het moet gecentreerd worden met de inhoud die er op dezelfde lijn naast staat. Maar jouw iframe is 100% van de breedte. Er staat dus niets naast en dat hoeft dan ook niet uitgelijnd te worden.
Het frameborder-attribuut wordt in CSS opgevangen door de meer algemene 'border' property. Jij kan dus in je CSS voor dit element schrijven "border: none;" of "border: 0;". Maar ook hier hoeven we eigenlijk helemaal niets meer te doen, want dit wordt al gezet in jouw stylesheet (hitdance.css lijn 20).
Als laatste moeten we dan even kijken naar het scrolling-attribuut, dat bij jou op 'no' staat; wat wil zeggen dat je nooit scrollbalken wil tonen. In CSS kan je dat dmv "overflow: hidden;". Maar ook dit hoeven we niet toe te voegen, want dit gebeurt al in je stylesheet (opnieuw hitdance.css lijn 20)
We kunnen dus besluiten dat deze drie attributen gewoonweg verwijderd mogen worden. De code gaat dan van
HTML: 
<iframe src="http://server13003.irserv2.com/nowplaying/" name="iReQuest_NoWPlayinG" scrolling="no" frameborder="0" align="middle" height = "42px" width = "100%"></iframe>
naar het eenvoudigere
HTML: 
<iframe src="http://server13003.irserv2.com/nowplaying/" name="iReQuest_NoWPlayinG" style="height: 42px; width: 100%;"></iframe>

Als laatste hebben we dan nog de 2 warnings die je laten weten dat het language-attribuut op een script-element niet langer bestaat. Je mag dat dus gewoon weglaten. Zo wordt
HTML: 
<script type="text/javascript" language="JavaScript" src="http://www.webhelpje.nl/poll/pollsc.php?name=hitdance"></script>
nu
HTML: 
<script type="text/javascript" src="http://www.webhelpje.nl/poll/pollsc.php?name=hitdance"></script>
en
HTML: 
<script language="javascript" type="text/javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>
wordt
HTML: 
<script language="javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>

Veel succes!:thumb:
 
Johantrax zei:
Je kan foutmeldingen uit de validator altijd negeren natuurlijk :p In dit geval zal het vaak nog goed komen omdat de meeste browsers vrij goed 'gokken' wat je bedoelt. Indien je browser strict zou reageren, zou hij het audio-element negeren, omdat het nog niet bestond..

Als laatste hebben we dan nog de 2 warnings die je laten weten dat het language-attribuut op een script-element niet langer bestaat. Je mag dat dus gewoon weglaten. Zo wordt
HTML: 
<script type="text/javascript" language="JavaScript" src="http://www.webhelpje.nl/poll/pollsc.php?name=hitdance"></script>
nu
HTML: 
<script type="text/javascript" src="http://www.webhelpje.nl/poll/pollsc.php?name=hitdance"></script>
en
HTML: 
<script language="javascript" type="text/javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>
wordt
HTML: 
<script language="javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>
Klik om te vergroten...

echter ontdekte ik hierna 1 fout in de validator en je type al dat het language-attribuut op een script-element niet langer bestaat.
hoewel de laatste omschrijving toch nog die language bevat. :d

ik heb de fout dan aangepast en nu is het goed. :thumb:

HTML: 
<script type="text/javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>
Klik om te vergroten...

toch alles toegepast en nagekeken, en moet zeggen dat de pagina wel validate is idd.
maar 1 error is nog wel te zien op de validator. alleen krijg je die error volgens mij omdat hij deze doctype niet herkent?

The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

Info Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.
Klik om te vergroten...

Maar welke doctype kan ik het beste aanhouden?
Voor de home pagina heb ik nu dan de: <!DOCTYPE html> aangehouden.
En html5 valideert hij. hoewel ik vermoed dat het bij sommige bezoekers het niet meer werkt.
is dan strict weer beter?
 
Laatst bewerkt:
djeric zei:
maar 1 error is nog wel te zien op de validator. alleen krijg je die error volgens mij omdat hij deze doctype niet herkent?
Klik om te vergroten...
Die waarschuwing houdt in dat de validator voor HTML5 nog niet compleet is. HTML5 zelf is namelijk nog niet zo lang een officiële standaard, de programmeurs van de validator laten je gewoon weten dat zij nog niet alles van die standaard controleren.

djeric zei:
Maar welke doctype kan ik het beste aanhouden?
Voor de home pagina heb ik nu dan de: <!DOCTYPE html> aangehouden.
En html5 valideert hij. hoewel ik vermoed dat het bij sommige bezoekers het niet meer werkt.
is dan strict weer beter?
Klik om te vergroten...
Het audio-element bestaat pas sinds HTML5, dus dat is vast en zeker het doctype dat jij nodig hebt (nog een voordeel: het is makkelijker te onthouden ;) ). Er bestaat geen 'strict' variant voor HTML5, die bestaat wel nog voor de vorige versie, maar daarin bestaat het audio-element dan weer niet meer.

Je kan ook gerust zijn over bezoekers die een browser gebruiken die nog geen HTML5 kent; in bijna alle gevallen doet de browser dan een gok, waarbij die zo 'vergevingsgezind' mogelijk is. De browser zal dus zoveel mogelijk toelaten en proberen doen werken. Als je audio niet werkt voor een bezoeker, dan is dat omdat zijn/haar browser dat niet kan: je doctype zal hier niets aan veranderen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan