foto als link naar een video, in hetzelfde kader

[herman]

Goede avond Goeroeboeroe,

ten eerste wil ik je bedanken voor je eerdere hulp en de geboden leermomenten met mijn site.
Zoals je weet is de site inmiddels online.
Vanwege "voortschrijden inzicht" heb ik besloten wat veranderingen aan te brengen.

De vorige keer hebben we (jij) het effect gecreeerd van een foto (stieren.jpg) waaronder (met muisover) een andere foto (detail_stieren.jpg) te voorschijn komt.
Daar was ik alleen nooit uitgekomen.
Om het "moeilijk te maken had ik rond "stieren.jpg" een bredere border geplaatst dan onder "detail_stieren.jpg". De maten zijn: "stieren.jpg" = 180x101 en "detail_stieren.jpg" = 190x111.
Maar omdat de border van "stieren.jpg" groter is dan die van "detail_stieren.jpg" bleef het totaal van foto-en-border hetzelfde.
Ja, je moet er maar opkomen. Ik moet er eerlijk bij zeggen dat het een toevallige ontdekking was bij wat geexperimenteer waartoe jij me had aangezet.
Het is gegaan zoals, naar ze zeggen, het buskruit is uitgevonden (het Europese buskruit dan wel te verstaan, de Chinezen waren wat dat betreft al wat verder).
Gelukkig heb ik het overleefd. Tenminste gezien vanuit mijn perspectief. Anderen zullen denken: Jezus, daar heb je 'm weer. Vervolgens roepen ze in paniek naar de kantelen: "Smelt de kazen, the bodysnatcher* is back again".

Nu probeer ik uit te zoeken of het mogelijk is om na de muisover -als "detail_stieren.jpg" zichtbaar wordt- met klikken een video te activeren die in hetzelfde kader gaat afspelen. En dan is HTML 5 misschien de beste keuze. Daar hebben we het eerder over gehad.
Toen, 1 jaar geleden, was de HTML 5 nog niet zo duidelijk, tenminste niet voor mij, maar de vooruitgang heeft niet stil gezeten. Toen heb ik het opgelost met een Quicktime player. Bij klikken opende zich een nieuwe (witte, bij Google chrome was ie zwart) pagina waar in het midden de video te zien was. Niet erg mooi maar verder kwam ik niet. Tijdgebrek zullen we maar zeggen.

Hierbij voeg ik de HTML en de CSS code toe van toen.
(In de HTML: Het # teken in "<a href="#" etc" staat voor de naam van de video dacht ik.)

Code: Selecteer alles

HTML:
<a href="#" title="stieren door de straat" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">
				</a>

CSS:

Code: Selecteer alles

.lk_foto1a {
	padding: 5px;
	border: #daa520 10px ridge;
	/*margin-top: -10px;*/
	margin-top: -10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: -10px;
}
.lk_foto1b {
	padding: 0;
	border: #daa520 10px ridge;
	/*margin-top: 20px;*/
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}
div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}
div#links a:hover img {display: none;}
a.lk_foto1b:hover {background: url(detail_stieren.jpg);}

Hoe moet ik te werk gaan om dit probleem op te lossen?
Als het onduidelijk is, of als je informatie mist dan sta ik voor je klaar.

Grt Herman

* "The invasion of the bodysnatchers" (??? Jaren '70) met in de hoofdrol ... , naam vergeten) vond ik een goede film.

[Goeroeboeroe]

Hoi,
Leuk weer van je te horen. Moest wel grinniken om je verhaal. Die film, hmmm, dat is niet helemaal mijn smaak, vrees ik.

Ik heb je site weer even bekeken en zo om het op te halen. In principe denk ik dat dat moet kunnen met het <video>-element. Dat is inderdaad html5.
Als je geen 'autoplay' gebruikt, gaat de video pas afspelen als je dat wilt. Dat is - volgens vrijwel iedereen - ook het beste. Stel dat de toespraak van de koningin tijdens het diner te lang duurt en jij zit stiekem te surfen op je tablet. En de video over bodysnatchers begint spontaan ijselijk te gillen... Er zijn er voor minder onder de guillotine terecht gekomen.
<video> kan niet in de css, die moet in de html. De image die verschijnt bij hoveren kan dan uit de css.
De video is even groot als de <img> die er nu staat, neem ik aan. Je zou de <video> boven de <img> kunnen zetten, en dan de <img> met een negatieve marge omhoog kunnen zetten, zodat die over <video> komt te staan.
Als je dan over de <img> hovert, moet die verdwijnen, net zoals nu ook al gebeurt. Hierdoor wordt de video zichtbaar, die dan kan worden afgespeeld. Maar pas als de gebruiker dat wil.
De video blijft afspelen tot het eind, of tot je hem stopzet, ook als je niet meer over de afbeelding hovert. Maar dat lijkt me geen probleem, want dat is vrij logisch. (Dit is wat ik dénk dat er gebeurt, maar ik heb het niet getest.)
Nou ben ik alleen absoluut geen expert op het gebied van video. <video> is een blok-element, dus het is net zo te positioneren enz. als elk blok-element, en kan ook hoogte, breedte, enz. krijgen. Dat zou dus geen problemen moeten opleveren.
<video> heeft een hele reeks attributen, dat zou ook niet al te veel problemen moeten opleveren. Je kunt daar o.a. hier iets meer over vinden:
http://www.css-voorbeelden.nl/afbeeldin ... itleg.html
Het ingewikkelde zit hem in die fijne Internet Explorer 8 (en eerder, maar die ondersteun ik niet meer), want die kent <video> niet. Daar moet je flash voor gebruiken. Dat zit in die zelfde uitleg verwerkt. Maar de in dat voorbeeld voor flash gebruikte videospeler (JWPlayer, er zijn er meer) heeft ook heel veel extra mogelijkheden, en daar ben ik niet in thuis. Als je die zou willen gebruiken, moet je daarvoor naar de site (en het forum) van JWPlayer. Maar mogelijk ga je die niet gebruiken.

Ik zou eerst die <video> erin zetten. Gelijk boven de <img>. Erboven, want dan komt de <img> over <video> te staan, omdat <img> later in de html staat.
<video> de juiste maten geven. En 'n achtergrondkleur of zo, zodat je ziet waar hij (zij?) (het?) staat. Dan <img> naar boven verplaatsen met behulp van css. Zodat de <img> precies boven <video> staat.
En dan <video> pas gaan invullen met de daadwerkelijk video's enz. Dan splits je het in tweeën, wat waarschijnlijk makkelijker werkt.

Als ik me goed herinner, heb ik me al 'ns eerder verbaasd over die "#". Of eigenlijk over die <a>. Volgens mij kan het hele gebeuren gewoon in een div in plaats van een <a>. Dan vervalt die "#". Hoveren werkt in élke browser (na IE 6) over alle elementen. (Voor de desktop, touchscreen is 'n ander verhaal. Maar dat moet ook op te lossen zijn.)
Oh, wacht even. Die laatste alinea neem ik terug. In iOS6 (iPad) en Android 4.0.3 en 2.3.6 (dus ook in tussenliggende en nieuwere versies, neem ik aan), werkt dat hoveren ook (snel even geprobeerd). Omdat het in 'n link zit. Dan zou <video> in principe ook moeten werken. (Het werkt alleen niet in Opera Mini, maar die wordt gebruikt om heel snel te kunnen surfen, dus mensen zullen daar geen video's mee gaan bekijken, neem ik aan. Werkt wel in Opera Mobile.)

Nou, hopelijk ben je hier iets mee op weg geholpen.
Overigens schaalt <video> een video naar een kleiner formaat, als je hoogte en/of breedte opgeeft. Maar het kost natuurlijk heel veel extra bandbreedte en tijd om een grote video naar een klein venstertje te downloaden.

Succes!

[herman]

Hoi GB (ik gebruik maar de afkorting),

Die film, hmmm, dat is niet helemaal mijn smaak, vrees ik.

Dat zou kunnen, maar ik vrees dat de titel wellicht iets anders suggereert dan je te zien krijgt. Het genre wordt "misbruikt" om een ander verhaal te vertellen. Er zijn een aantal versies gemaakt van "Invasion of the bodysnatchers". De 1e is van Don Siegel uit '58 (?) en de 2e uit '78 van Kaufmann (met Donald Sutherland). Beide vechten ze bij mij om de 1e plaats. Die met Sutherland heeft een lichte voorkeur vanwege het einde en omdat ik hem geweldig vind acteren. Maar de 1e is meesterlijk vertelt. Die Siegel is nog een vakman van de oude snit. Toegegeven, je moet er wel van houden.
Ik wilde hem vanmorgen via internet nog eens bekijken, het was er echt zo'n ochtend voor, maar het is me niet gelukt hem te downloaden. Van die download technieken heb ik geen kaas gegeten.

En nu to the point.
Ik heb het <video> verhaal op je site doorgelezen en kwam daar een stukje tegen waar je de "poster"-functie beschrijft. Deze laat automatisch het 1e beeld van de video zien, heb ik begrepen. Maar er zijn nogal wat voetangels. En die heb ik niet zo best begrepen.
Ik vroeg me af, voordat ik allerhande ingewikkelde dingen ga doen, of ik deze functie niet beter kan gebruiken. Dan wordt het 1e beeld van de video de detail foto die ik nu onder de bovenfoto heb staan.
Dat resulteert in hetzelfde effect wat ik voor ogen heb, lijkt me.
Uiteraard wil ik niet dat de video auto start en dat er mogelijkheden zijn om te pauzeren en het geluid te muten, en het liefst houd ik er JAVA uit. Wat dan betekent dat ik een mp4 en een WebM zal moeten renderen.

Je kent m'n site en zo ongeveer (helemaal) mijn bedoeling. Wat denk je?

grt herman

[Goeroeboeroe]

Ik zou die posterfunctie lekker weglaten, want dat is een redelijke puinhoop. En omdat IE nooit wordt geüpdatet (behalve als het om veiligheid gaat) zitten we nog járen met die fouten. Jij hebt er al 'n afbeelding boven staan, dus je kunt je afvragen of het eerste beeld of zo nog veel nut heeft.
Dat je dat deel over poster niet helemaal hebt begrepen, kan prima. Dat ís namelijk niet te begrijpen, omdat de specificatie wat vaag is. Wat IE de mogelijkheid gaf om er een werkelijk volslagen dolzinnige interpretatie aan te geven. Zal 't trouwens ook nog 'ns herlezen, wie weet begrijp ik mezelf nu ook niet meer en moet het wat duidelijker.
Java heb je helemaal niet nodig als je <video> gebruikt. Maar mogelijk bedoel je JavaScript? Dat is alleen nodig voor IE 8 met flash. Maar JavaScript staat eigenlijk alleen maar uit vanwege de veiligheid, en mensen die zo voorzichtig zijn surfen echt niet meer met IE 8. Het heeft ook weinig zin je vergiet dicht te maken met van die ouderwetse stoffen pleisters...
<video> zit ingebouwd in de browser. In alle uitvoeringen zit een volumeregelaar, dus geluid kan altijd worden aan/uitgezet. Je kunt eventueel 'muted' toevoegen (moet je even precies opzoeken, ik dacht dat het zo heette), dan start de video zonder geluid. Maar dat is niet meer dan 'n aanwijzing, de browser mag dat negeren.
<video> is eigenlijk van alle basisdingen voorzien. Aan/uit, geluidsregeling, fullscreen (of juist niet), pauzeren, en je kunt via 'n regelaar naar 'n bepaald deel van de video slepen. Dit zit gewoon standaard in álle browsers, ook mobiele (behalve hele primitieven, maar die zijn niet voor video's bedoeld.)
Je kunt er nog veel meer mee, maar dan moet je JavaScript gebruiken. En in dat deel heb ik me nooit verdiept. Als je zoekt naar 'video javascript api' vind je tal van sites, ook Nederlandstalig. Maar je kunt je afvragen of dat voor een voorvertoning nodig is.
Als je wat hebt geprobeerd, kan ik hier wel even kijken hoe het in de diverse browsers werkt. Succes!

[herman]

Hoi GB,

Even kijken of we nog op dezelfde lijn zitten.
Ik heb het een en ander bekeken en geprobeerd en ben de weg een beetje kwijt.

In de versie die nu nog steeds on line staat gebeurt het volgende.
Als je met de muis (bij mij 'n pijltje) over een van de 6 foto's in de rechter- of linkerkolom gaat, verschijnt er een detailfoto en het pijltje verandert in een handje.
Dat betekent dat er iets te "klikken" valt en dat er wat anders verschijnt.
Mijn bedoeling was dat dan de video (het eerste beeld) te voorschijn zou komen en dat die dan geactiveerd kon worden met "play" in te drukken.
(daarom ook mijn eerdere vraag over het gebruik van "poster").

De code in de HTML:

Code: Selecteer alles

<a href="#" title="stieren door de straat" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">
				</a>

Ik dacht dat de "#" in de "<a href ..." daarvoor vervangen moest worden met het adres naar de video. bvb:

Code: Selecteer alles

<a href="expresso.mp4" title="Barcelona winkelstraat" class="Plk_foto1b"><img src="Barca_Passeig_180.jpg" alt="winkelstraat" width="180" height="101" class="Plk_foto1a">
				</a>

Het filmpje expresso.mp4 start dan ook (na een tijdje) maar wel in een apart venster.
Terwijl ik dit graag in het venster van de (detail)foto zou hebben gezien.

Maar bovenstaande code is dus niet de goede manier om dat voor elkaar te krijgen.
Jij stelde voor om bvb zoiets als

Code: Selecteer alles

<video
			controls
			src="expresso.mp4"
			width="190"
			height="111"
			<!-- poster="detail_stieren.jpg"-->
>
</video>

in de HTML boven de vorige code te zetten. Dan de <img> met een negatieve marge omhoog zetten, zodat die over <video> komt te staan. De IMG zou dan de videotag in 1e instantie overrulen en pas bij klikken geactiveerd worden.

De <video> van de HTML positioneer je dus in de CSS. Door het een verwijzing (ID of zoiets) mee te geven die naar de CSS verwijst?

Ik ben bang dat ik er nu niets meer van snap. Daarom vraag ik of we nog op dezelfde lijn zitten.

grt herman

[Goeroeboeroe]

Nee, we zitten nu op een gruwelijk botsende lijn
Goed dat je het even vraagt, voor je dagen bezig bent.
In de css kunnen alleen achtergrond-afbeeldingen. Geen blok-elementen zoals een <p>, <div>, <h...> of <video>.
<video> moet dus in de html. Ik ga er vanuit dat de film even groot wordt als de afbeelding.

De "#" in de <a> geeft aan, dat dit geen echte link is. Als je daarin een echte link zet naar de video, of naar een afbeelding, of naar een site, of... gaat die werken als een echte link, en open je inderdaad een nieuw venster (of tab) met daarin de video, afbeelding, ...
Daarom is die link eigenlijk overbodig. Alleen werkt hoveren niet goed op een touchscreen, omdat je moet aanraken. Nou blijkt dat zo'n link wél werkt als je hem aanraakt: dat werkt ongeveer zoals hoveren op de desktop. Leuk meegenomen, toch? Dus kan de link beter blijven staan, in dit geval.
Jij hebt nu dit:

Code: Selecteer alles

<a href="#" title="bulls on the street" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a"></a>

Dat wordt dan iets als:
<video> gruwelijke hoeveelheid code </video> Die code zou ik er later in zetten, dan hak je het probleem in tweeën.
<a ....></a> Zoals hierboven, verandert niets aan.
De <video> komt dus gelijk boven de <a> te staan en is dus eigenlijk altijd zichtbaar. Maar daar gebruiken we plamuur voor.

De css voor de oorspronkelijke afbeelding blijft hetzelfde:
div#links a:hover img {display: none;} (en natuurlijk alle randen enz., maar het gaat hier alleen even om de hover).

<video> is 101 px hoog, even hoog als de afbeelding (neem ik aan). De <a> met de afbeelding wordt hierdoor 101 px omlaag gedrukt.
Daarom moet de afbeelding 101 px omhoog worden gezet, dan komt hij over de video heen te staan. Omdat hij later in de html staat, komt hij over de video heen te staan. Precies de bedoeling.
In de css voor de afbeeldingen moet je toevoegen:
div#links a {margin-top: -101px;}
Nu staat de afbeelding over de video heen. Als je over de afbeelding hovert, zal deze verdwijnen, net zoals nu het geval is. Maar nu zal de video zichtbaar worden.

Omdat er alleen nog maar <video> staat, zie je geen video. De video's zou ik er later in zetten, want dat is een klus op zich. Als <video> eerst op de goede plaats staat, heb je de helft al gedaan.
<video> is nu nog een leeg blok-element en heeft daarom geen hoogte, maar wel een onwijze breedte. Daarom zet je in de css:
video {height: 101px; width: 180px;} Nu is <video> even groot als de afbeelding.
Maar omdat <video> leeg is, zie je niets. Daarom zou ik zolang ook even toevoegen:
video {background: red;} , of welke kleur dan ook, zodat je ziet waar hij precies staat.

Het kan tenslotte nog zijn, dat de marges die nu in de css bij de afbeeldingen staan, naar <video> moeten verhuizen.

Ik kan me voorstellen dat dit erg ingewikkeld lijkt (en misschien ook is). Als het nou helemaal niet lukt, kan ik er wel eentje voordoen, maar dat wordt pas woensdag op z'n vroegst.

Ik heb dit trouwens allemaal uit m'n hoofd gedaan bij gebrek aan tijd om het echt te testen. Maar tenzij ik 'n gigantische blinde vlek heb, zou dit moeten werken. Waarbij je waarschijnlijk nog wel even moet pielen met marges en zo.
Benieuwd of het lukt!

[herman]

Beste GB,
Nog snel een SOS bericht uit het ondergrondse.
Vanmorgen na het lezen van je reactie met een hoera stemming begonnen. Hier volgt het relaas.
Seatbells on, please.

In de css kunnen alleen achtergrond-afbeeldingen. Geen blok-elementen zoals een <p>, <div>, <h...> of <video>.

Dat had ik begrepen (div te noemen was een slordigheidje), ik wilde de <video> dan ook boven de <a href="#" … etc> in de HTML zetten.
Zoiets als:

Code: Selecteer alles

<video width="190" height="111">
    	<source src="expresso.mp4" type="video/mp4">
	<source src="expresso.webm" type="video/webm">
</video>
		
<a href="#" title="stieren door de straat" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">
				</a>

Dat had ik dus gedaan. Maar ik wist niet hoe ik het <video> element van de HTML in de CSS moest aanspreken (dat is dus gewoon “video”, zonder aanhaaltekens) om 'm op de goede plek onder de foto's te te krijgen.

En natuurlijk wist ik me geen raad met de <a href. ; hoe ik dat met de video kon kortsluiten. Behalve dan door de # te vervangen door "expresso.mp4",
die in de oude situatie de video op een andere (blanco) pagina laat zien. Dus ik heb er nog even aan gedacht voor deze link een hele nieuwe pagina te maken. Wat ik gelukkig snel weer heb verworpen.
Maar toevallig komt de # dan volgens jou goed uit met latere touchscreens. Zullen we het maar houden op een vooruitziende blik.

Ik heb jouw aanwijzing gevolgd en in de HTML een kale <video> </video> gezet, zonder toeters en bellen zoals ik had gedaan in bovenstaand HTML voorbeeld.

Vervolgens heb ik in de CSS gezet:

Code: Selecteer alles

video {height: 101px; width: 180px;}
video {background: red;} 

<video> is 101 px hoog, even hoog als de afbeelding (neem ik aan). De <a> met de afbeelding wordt hierdoor 101 px omlaag gedrukt.

Dat klonk me logisch maar …. de foto's bleven gewoon staan waar ze stonden. Er gebeurde niets. Ik kon ook geen rood rechthoekje zien. Dat vond ik raar (nu, achteraf, denk ik dat ik hier ergens een fout heb gemaakt).

En vervolgens moest ik nog toevoegen:

Code: Selecteer alles

div#links a {margin-top: -101px;} 

Maar daar kwam ik in het probleem tegen dat er bij div#links a al stond:

Code: Selecteer alles

div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}

Hoe letterlijk moest ik het toevoegen interpreteren? Wat moest ik dan doen met “margin: 70px auto 0;” ? Dit vervangen? Leek me van wel.

Enfin, hier heb ik het een en ander mee geexperimenteerd maar er kwam niets bevredigends uit. Er was geen rood rechthoekje te constateren op de site.
Verder nog gerommeld in de video {} met de marges. Maar helaas, gesmolten kaas.

En later toen ik alles weer in “originele” staat had gebracht bleek ook nog dat alleen de CSS code

Code: Selecteer alles

video {height: 101px; width: 180px;}
video {background: red;} 

de site behoorlijk in de war schopte.
Iets wat hij niet deed toen ik 'm er net in had gezet (want ik controleer vaak wat een toegevoegde code op de site doet). De rotzak.

Daarna nog wat gerommeld met het diafragma (en cameralens) en de video die daar onder moet komen. Dat lukte dus ook niet.
Op een of andere manier kan ik niet goed overweg met dat <video> element.
Ik denk dat ik ergens iets mis.

Mocht je kunnen zien wat ik fout heb gedaan en nog een tip hebben...
.. en anders houd ik me aanbevolen voor je voorstel.

Maar misschien is het handig dat ik de oude versie van het internet verwijder en de nieuwe versie die nog maar uit een paar (basis) pagina's bestaat, het MOVIMAG portaal en de CULT&ART en FLATSCREEN subsites, daarvoor in de plaats zet.
In wezen is er niet veel veranderd, de linker- en rechter kolom heb ik iets breder gemaakt en daarom de content in het midden iets smaller. En nog wat andere make-up.

Ik moet er nu vandoor. Vanavond ben ik weer terug.
Maar voel je niet verplicht.

Grt herman

[herman]

Ai, ai, ai.

Ik denk dat ik de oorzaak van mijn probleem gevonden heb.
Ik gebruik dus HTML-KIT en daar bekijk ik ook alles in. En daar was niets van video (rode rechthoek) te zien.
Ik heb hem uiteindelijk via de firefox browser geprobeerd (dus niet in KIT) en daar stond de rechthoek dus wel (zie foto).

Maar hoe ik KIT ook aanpas -er zijn wat opties het in een andere browsers te zien-, er is niets te zien.
(firefox stond er niet bij maar ook nadat ik hem had toegevoegd en geactiveerd, was er nog steeds niet te zien)
In de lijst van HTML tags staat het element <video> ook niet opgenomen.
Zou KIT deze tag niet herkennen?
Ik kan het me bijna niet voorstellen, het is zo'n beetje de laatste versie (build 292, sept '12).

Nu moet ik eerst dat probleem zien op te lossen, want het is wel handig om te zien wat je doet.
Of ik moet hem telkens in firefox gaan openen.

Enfin, we gaan door. Ik moet wel zeggen dat ik er een beetje gammel van wordt
Dus jouw voorstellen werken wel.
Ikga nog wat experimenteren.

groet, herman

[herman]

ik word met dt....
tijd voor een pauze.

[Goeroeboeroe]

Ha, dat ziet er inderdaad uit zoals ik bedoelde.
Of kit <video> kent, weet ik niet. Het is al 'n tijd behoorlijk in gebruik, dus het zou me verbazen als dat niet zo was.
Maar leuk dat het je toch is gelukt! Jij geeft bepaald niet snel op!

[herman]

Oke, ik kreeg het idee dat het misschien ligt aan het doctype wat ik gebruikt heb.
Het was:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML[b] 4.01[/b]//EN" "http://www.w3.org/TR/[b]html4/strict[/b].dtd">

en al ik het verander in (dit is toch de officiele code voor html5?):

Code: Selecteer alles

 <!DOCTYPE html>

verandert de plaatsing van de kolom foto's (een kleine verschuivig).
Maar die onderhand berucht geworden rode rechthoek krijg ik niet te zien.

Ik ga even kijken op een HTML-KIT forum.

grt herman

[Goeroeboeroe]

Hoi,
Dat is de officiële code voor html5. Maar als je html4 strict hebt gebruikt, zou dat geen enkel verschil moeten maken. (Ook niet bij transitional trouwens, behalve dat de validator dan ernstig begint te protesteren...)
Maar als ik het goed begrijp zie je het in Firefox wel? Dan zou het dus iets te maken moeten hebben met die kit, maar daar heb ik geen enkele ervaring mee.
Die kleine verplaatsing van de kolom hoort trouwens ook niet als je het doctype verandert. Is dat ook in Firefox? Of alleen in dat kit.
Ik zie trouwens in je doctype hier < b > en < / b > (zonder spaties, maar anders wordt het hier vet...) in je doctype. Maar ik neem aan dat dat alleen hier even erin is gezet? Een ongeldig doctype kan vreemde dingen veroorzaken.

[herman]

Ja, in firefox zie ik het wel. Ik heb inmiddels een sos bericht op het KIT forum geplaatst, het is dus even afwachten.
Ik experimenteer nu een beetje via firefox maar dat schiet niet op.

Niet de kolommen verplaatsen met <!DOCTYPE html> maar de foto's die onder elkaar liggen. Ze liggen dan niet precies meer onder elkaar.
Maar misschien komt dat ook wel door de code die ik nu bijgevoegd heb.
Ik heb de <video> nu in een a href gezet en hij staat nu keurig boven de rij van de drie foto's.
Ook heb ik 'm voor de duidelijkheid een"poster" meegegeven en die afbeelding is keurig zichtbaar.
Alleen de consol wil niet werken.

Nu moet ik 'm nog precies onder de 1e foto zien te krijgen.
Daar had je voorgesteld:

Code: Selecteer alles

div#links a {margin-top: -101px;} 

Maar moet ik 'm nou toevoegen of in de al bestaande zetten?:

Code: Selecteer alles

div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}

Is het voor de juiste plaatsing nodig om in de a href een class aan te maken of is dat niet nodig als je met jouw bovenstaande code werkt?

En wat betreft de KIT.
Ik krijg de indruk dat ie de <video> tag gewoon niet snapt. Want ook bij bovenstaande toevoegingen blijf ik niets zien in de KIT en wel in firefox dus.
Het blijft bij de KIT zwart, de basiskleur van de kolom, maar de foto's schuiven wel een hele fotogrootte naar beneden. Met dezelfde afstand als tussen de anderen.
En als ik met de cursor over dat zwarte stuk ga waar ik 'm zou moeten zien, verandert ie in een handje. Maar bij klikken doet ie niks.
Strange, strange.
En alweer 23.00
Time flies.

grt herman

[herman]

Voor de volledigheid de code zoals die nu in de HTML staat en een foto:

Code: Selecteer alles

<div id="links_container">
                <div id="links">				
								
<a href="#" class="video_1">
		<video consols poster="scotch-soda_180.jpg">
    	<source src="expresso.mp4" type="video/mp4">
			<source src="expresso.webm" type="video/webm">
		</video>
				</a>
		
<a href="#" title="stieren door de straat" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">
				</a>

en de CSS:

Code: Selecteer alles

video {height: 111px; width: 190px;}/* background: red;}*/
/*evt class van de a href waar de <video>... </video>tussen staat, nog geen invulling gegeven*/
.video_1 {
}

.lk_foto1a {
	padding: 5px;
	border: #daa520 10px ridge;
	/*margin-top: -10px;*/
	margin-top: -10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: -10px;
}
.lk_foto1b {
	padding: 0;
	border: #daa520 10px ridge;
	/*margin-top: 20px;*/
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}
div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}
div#links a:hover img {display: none;}
a.lk_foto1b:hover {background: url(detail_stieren.jpg);}
/* jouw voorgestelde code: div#links a {margin-top: -101px;}*/ 

Dat maakt het voor jou wellicht iets inzichtelijker.

Ik ga nog even een biertje ontkurken en me op de nacht voorbereiden.
Grt herman

[Goeroeboeroe]

Hoi,
Ik had al iets geschreven toen jouw tweede bericht kwam. Ik houd het even hierbij.

Als het woensdag nog niet is gelukt, hoop ik zelf tijd te hebben even grondig te kijken. Maar dan ga ik alles van je server afhalen en bij mij erop zetten, zodat ik echt álles zie. En dat kost even tijd.
Die extra code voor div a kan gewoon bij de al bestaande. Alleen moet je die even aanpassen.
Aan het einde staat nu:
margin: 70px auto 0;
(Overigens met twee keer
In diezelfde regel komt margin-top: -101px;

margin: 70px auto 0; betekent eigenlijk:
margin-top: 70px; En dan de rest, maar het gaat hier alleen om de marge aan de bovenkant. De margin-top wordt dan 70 - 101 = -31 px:
margin: -31px auto 0;

Een extra class is niet nodig, denk ik, omdat in principe alle drie de <a>'s evenveel omhoog moeten.

Nog steeds aangenomen dat het enigszins zou moeten werken, gaat enigszins passen. Enigszins, want je moet die marge vast nog wat aanpassen.

<video> geeft geen handje bij 'n muisover, dus dat moet daar de <a> staan. Alleen die geeft 'n handje, tenzij je dat expliciet wijzigt.

Alvast voor als de hele <video> goed staat en de code erin moet:
ik heb het stukje over poster even overgelezen. Het toevoegen van poster is dus prima. Alleen moet je er voor IE 9 preload="none" aan toevoegen. Anders zie je niets in IE 9 voordat je gaat afspelen. Maar in dit geval is dit prima, denk ik, omdat je zes video's op die pagina gaat zetten. Je maakt je niet populair als die video's allemaal gelijk gaan downloaden, ook als ze niet worden afgespeeld.
Ook hier geldt trouwens weer: de browser mag dit negeren, het is een hint. Maar je mag aannemen dat smartphones e.d. inderdaad pas gaan downloaden als je de film echt afspeelt.

O, en slaap lekker.

[herman]

Stoppen is moeilijk. De aard van het beestje.
Maar voor alle duidelijkheid:
De foto is dus van firefox (ik gebruik hiervoor FastStone Capture, erg handig tooltje) en aan de bovenkant iets afgesneden.
De onderkant wordt afgesneden door de footer.

Denk je dat ik gek aan het worden ben .

slaap goed (straks), herman

[herman]

En mijn laatste bericht kruiste het jouwe weer.
Ik ga het snel even lezen... en wie weet...
... komt er nog een 2e biertje .

[Goeroeboeroe]

Ik heb nog heel vluchtig even gekeken. Ik werk dan met wat bij jou op de site staat. Als ik bij

Code: Selecteer alles

div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}

de marge verander in
margin: -40px, auto, 0;
(-40 is 'n willekeurig getall)
dan verschuiven alle foto's aan de linkerkant naar boven.

Als ik boven

Code: Selecteer alles

<a class="lk_foto1b" title="bulls on the street" href="#"><img width="180" height="101" class="lk_foto1a" alt="Stieren_door_straat" src="stieren.jpg">

in de html het volgende invoeg:
<video style="background: red; height: 100px;">
(Dit is een inline-stijl, dat werkt hetzelfde als in de stylesheet, maar is makkelijker voor even proberen.)
dan komt de bovenste foto enigszins over <video> te staan. Bij bij hoveren wordt de rode achtergrond van <video> volledig zichtbaar.
Het past niet goed omdat ik willekeurige maten heb genomen, maar het principe zou moeten werken.

Als ik het woensdag bekijk, kan ik dan de code van m o v i m a g.c o m gebruiken? Als ik daaraan werk, weet ik zeker dat we het over dezelfde code hebben. En nu ga ik ook lekker pitten.

[herman]

Hoi GB,

Ik heb nog heel vluchtig even gekeken. Ik werk dan met wat bij jou op de site staat. Als ik bij

Code: Selecteer alles
div#links a {display: block; width: 190px; height: 111px; margin: 70px auto 0;;}

de marge verander in
margin: -40px, auto, 0;
(-40 is 'n willekeurig getall)
dan verschuiven alle foto's aan de linkerkant naar boven.

Aha, dus niet toevoegen maar veranderen. Oke.
Heb ik gedaan maar bij mij schuift er dan niets naar boven (wat gespeeld met -40px). Niet in de KIT en niet in firefox.
Met die margin had ik al eerder gespeeld, herinner ik me, omdat ik de kolom van 3 foto's (links en rechts) in zijn geheel iets hoger in de layout wilde hebben. Dat geeft aan de onderkant wat meer ruimte.
Dat lukte me toen ook niet. Wel lukte me het op een of andere manier de afstand tussen de foto's te manipuleren. Hoe weet ik niet meer.

Maar ik begin nu een beetje wantrouwend te worden over wat ik te zien krijg.

Ik heb inmiddels wel een antwoord gekregen van het KITforum maar die was niet geheel bevredigend dus ik wacht nog op antwoord op mijn vervolgvraag
(ik neem aan dat ze daar in een andere tijdzone leven).

(Overigens met twee keer
In diezelfde regel komt margin-top: -101px;

ik kreeg na: twee keer een Smiley te zien.
-twee keer ";" - dus. Bedoelde je dat als doordenkertje?

Lijkt je het een idee als ik de oude versie helemaal van de provider haal en de nieuwe (gedeeltelijke) versie met de 2 subportalen, C&A en Flatscreen, er op zet? Dan zal ik ook wat overbodige (experimenteer) code met de voor mij bedoelde -maar voor voor jou- onzinnige opmerkingen/uitleg weghalen.
Ai. Ik denk er plotseling aan dat ik dan de veranderde CSS voor strict in de IE ook moet veranderen. Nog helemaal niet aan gedacht.

Ik ga nog wat rommelen en dan zet ik als je dat beter lijkt vanavond de boel om. Moet ik nog wel dat upload programma even downloaden.
Uiteraard kun je de m o v i m a g . c o m code gebruiken.

Ik ga nu nog even wat proberen, wie weet ...

grt herman

ps: het zijn twee biertjes geworden.

[Goeroeboeroe]

Ha, die smiley kreeg ik ook. Dit forum vertaalt die smileys naar vreemde teken-volgordes, zoals twee keer ; achter elkaar. Hebben trouwens veel forums. Type je 'n stukje code, krijg je opeens smileys.

Of die nieuwe versie erop zetten zinvol is, kan ik niet beoordelen. Als hij enigszins werkt in de meest gebruikte browsers (Google Chrome, IE 8/9, Firefox, Safari) zou dat kunnen. Maar persoonlijk wacht ik vaak liever tot iets min of meer af is, want als je later de code gaat veranderen en dat gaat écht mis, zit je met 'n probleem in je live site. (Dit was een bericht van de bij mij zeer actief aanwezige Afdeling Schade en Schande.)

Waar het mij vooral om gaat: als ik morgen iets downloadt, moet het hetzelfde zijn als waar jij aan werkt. Of in ieder geval vrijwel hetzelfde. Zodat jij, aangenomen dat het lukt, de wijzigingen ook aan kunt brengen.
Als ik het heb gedownload en bij mij erop heb gezet, kan ik echt kijken of het overal werkt. En dan kan ik hier de wijzigingen neerzetten, maar als dat nog niet lukt, kun je ook bij mij op de server kijken. Maar dat werkt alleen als we het over ongeveer dezelfde code hebben.