www.css-voorbeelden.nl

"Godver..."
Ja, dat was een heel gepiel om de twee plaatjes goed onder elkaar te krijgen.
En dat komt waarschijnlijk omdat het 1e plaatje (diafragma) 160x160 is en het onderliggende plaatje, de aarde met de rode tekst, 320x180 (en het was ook zoeken naar de juiste achtergrondkleur van de aarde (die was zwart) zodat die precies hetzelfde was als de achtergrondkleur van de container (#363636 dwz donkergrijs) zodat het lijkt of het de aardbol "zweeft".

Ik heb de code aangepast in de css (ook in de css van ie-7) maar de afbeeldingen staan nu bovenaan in de contentcontainer en niet onder elkaar. Ook zie ik stukken blauw van de contentcontainer-achtergrond kleur om de afbeelding heen (niet aan de onderkant).
Ik heb wat om gegooid, gewisseld, geexperimenteerd, etc. maar ik krijg ze niet goed.
Het verhaal van het weghalen van "position:absolute;" snap ik. Maar ondanks die "margin: 47% auto 0;" staat het plaatje toch bovenin de contentcontainer. De bovenkant van de aardbol staat zelfs een stukje onder het menu. Heeft dat toch te maken omdat het geen inhoud heeft'
Ook nog gekeken naar: Zou het daaraan liggen?
Als je er nog eens naar wilt kijken.

Je mail is aangekomen. Een zorg minder. Dat kalmeert. Maar ik neem aan dat het beter is als ik je hier GB blijf noemen.

Groetjes Herman.

Hoi,

Hele dag zonder internet gezeten. Gisteren ook al. Echt geweldig dat de overheid deze essentiële diensten steeds meer aan 'de markt' overlaat.
Ik ben even begonnen met je laatste vraag, maat dat gaat niet lukken zo. Ik werk met de code die op jouw server staat. Daar zijn wat fouten ingeslopen, en die kunnen de vreemdste problemen veroorzaken. Het is trouwens handig als je even erbij zet of het probleem zich in IE 8 of in Firefox voordoet. Het kan namelijk prima een afwijking in IE 8 zijn.
Het gaat zo niet lukken, omdat we nu 'n beetje langs elkaar heen werken. En het kost ook heel veel tijd voor mij zo.
IE 7 heeft een hopeloos slechte editor voor css, html, e.d. (IE 8 is beter, en alle andere browsers hebben al jááááren fatsoenlijke hulpmiddelen.)
De wijzigingen voor de css staan nog niet op de server. Het probleem is, dat het vrijwel onmogelijk is om in IE 7 css te veranderen. Ik kan wel toevoegen, maar het weghalen van die position: absolute; is vrijwel onmogelijk. De ene keer werkt het wel, de andere keer niet, en je kunt niet zien wanneer het wel en wanneer het niet werkt. De debugger van IE 7 is echt door 'n waanzinnige in elkaar gezet.
Dat betekent dat ik alles van jouw server moet kopiëren (afbeeldingen, css, html), de wijzigingen in de css moet aanbrengen (position: absolute en zo weg), dan op mijn server moet zetten, en dan kan ik eindelijk met dat kreng aan de slag.
Dat zou nog tot daaraan toe zijn, maar er zitten ook nog wat fouten in de html die, typisch fouten met plaatsing en zo kunnen veroorzaken. Die fouten moeten dus eerst eruit, anders heeft het geen zin naar dit probleem te kijken. Maar als ik die fouten eruit haal, zit ik aan andere html te werken dan jij.
Het geldt trouwens voor álle browsers dat die html-fouten er eerst uit moeten, want het zijn serieuze fouten.

Kun jij die fouten in de html verbeteren, en de nieuwe css (zoals ik in het bericht hiervoor gaf) aanbrengen? Als je dat dan op de server zet, dan is de basis goed en kan ik van daaruit met alle browsers kijken wat er mis gaat.

Dus de css van het vorige bericht aanbrengen.
In de html gaat het om index.html. Als het in die pagina goed is, zal het overal goed zijn (met 'n klein beetje geluk).
Regel 93 (bij mij, kan iets afwijken):
Er staat: Die .jpg" na de "#" moet weg. Er staat nu geen even aantal " (openen/sluiten). Dat kan tot vreemde fouten leiden, ook elders op de pagina. Hoeft niet, maar kan.

Er staat: De afsluitende </a> is weggevallen. Dit is 'n fout waar browsers echt door van slag kunnen raken.

Op regel 126 is nog 'n border="none" blijven staan, maar die kan nooit échte fouten geven zoals verkeerde plaatsingen.
Door die missende </a> (en mogelijk deels ook door die oneven aantallen ") raakt de opbouw van de pagina fors van slag. In Firefox levert dat 'n hele serie erop volgende fouten op van dingen die niet zouden mogen, die allemaal veroorzaakt worden door die twee kleine dingetjes. In andere browsers kan het andere problemen opleveren, daar is eigenlijk weinig van te zeggen.
(Firefox denkt nu dat je 'n <div> in 'n <a> hebt gezet, dat soort dingen. Iedereen die beweert dat computers echt slim zijn, heeft nog nooit écht met 'n computer gewerkt...)
Met heel veel geluk werkt het dan zoals bedoeld (dat centreren van diafragma).

Overigens was ik gisteren ook niet helemaal jofel, geloof ik. Niet dat ik ooit fouten maak...
Er staat #godver .content
Dat moet natuurlijk zijn: #content .godver

Ik ben al die tijd 'n eerdere vraag vergeten over hoe je verschillende talen bereikt en zo.
Je hebt al aparte mappen voor afbeeldingen en zo gemaakt, las ik.
Ik neem even aan dat je indeling nu zo is: (tussen / staat 'n map)

index.html
/afbeeldingen/
/css/
/nederlands/
/spaans/
Enz.

In de root (de hoofdingang, zeg maar) staat index.html. Die wordt automatisch opgestart als iemand het adres van je site intypt. In welke taal je die dan schrijft, daar heb ik geen idee van. Lijkt me de meest gevraagde.
Als iemand nou op index.html kiest voor Spaans, dan moet onder de vlag voor Spaans de volgende link zitten:
<a href="spaans/index-spaans.html"><img en zo></a>
Dat is alles. Let er wel op dat je / gebruikt en geen \. Windows gebruikt om een of andere krankzinnige reden intern \, terwijl iedereen (en internet) / gebruikt. Een van de vele vreemde beslissingen van Microsoft, want dat was al zo toen Windows voor het eerst verscheen. Levert regelmatig problemen op.
Omdat het adres begint met spaans/, 'weet' de server dat het gaat om een map. In die map staat dan het bestand index-spaans.html (of hoe je het ook noemt natuurlijk). Overigens is bij talen als Spaans die utf-8 code bovenin je html-pagina's nog belangrijker dan bij Nederlands of zo, vanwege de accenten.

Als je nou vanuit /spaans/index-spaans.html een afbeelding wilt aanroepen, kun je gebruik maken van puntjes.
Je hebt 'n map /afbeeldingen/ en die staat op gelijk niveau als de map /spaans/
Je zit in /spaans/index-spaans.html
Als je nou 'n afbeelding wilt gebruiken uit de map 'afbeeldingen', hoef je niet het hele adres in te typen. Je kunt volstaan met:
<img src="../afbeedingen/plaatje.jpg">
De twee puntjes betekenen: ga één niveau omhoog, één map hoger. Ga vervolgens van daaruit naar de map /afbeeldingen/, en haal daar 'plaatje. jpg' op.

Als je naar de homepage wilt linken, dus zeg maar de 'hoofd'-index.html, kun je het beste linken naar:
http://m o v i m a g . c . o . m /
De index.html kun je beter weglaten, dat kan mogelijk Google en zo in verwarring brengen.
De / aan het eind voorkomt een extra serveraanroep: de server weet nu gelijk dat dit 'n map is, anders gaat hij eerst zoeken naar het bestand met de naam 'm o v i m a g . c o m . En omdat er verder niets staat, opent hij automatisch index.html

Je zou ook naar de homepage kunnen gaan met behulp van die twee puntjes. Maar dit is een simpele truc voor het geval je hele site wordt gekopieerd (komt met enige regelmaat voor). Dat soort geboefte neemt nooit de moeite de code echt te veranderen. Als mensen bij zo'n dief op de 'Home'-knop drukken, gaan ze nu terug naar jouw site. Bovendien is het voor Google e.d. een aanwijzing, dat jouw site de originele site is. Als er twee dezelfde sites zijn, wordt er vaak maar eentje geïndexeerd, dus dat is niet helemaal onbelangrijk.

Heel verhaal, maar het komt er dus in het kort op neer: met .. ga je één niveau omhoog in de mappenstructuur,

Nou GB, het ei is weer gelegd. De haan is tevreden. En de kippen gaan op stok.

En ja, we leven in een chaotische tijd. Voor een groot deel geloof ik in de markt (dit vereist natuurlijk een genuanceerde uitleg) maar voor algemene diensten zoals gezondheid, post, internet, electriciteit , etc niet. En doe daar de basis wzh van banken zeker maar bij. Gewoon een basispakket voor dat soort dingen en als iemand meer wil of beter of anders dan kan de markt inspringen. Zoiets.

Om te beginnen: ik zie alles in ie-8.

Er staat #godver .content
Dat moet natuurlijk zijn: #content .godver

Heb ik veranderd en dat scheelt een slok op een borrel. Maar ik krijg nu aan weerskanten vd afbeeldingen een blauwe "balk".
Dit heb "opgelost" (lach en huiver) door voor de "content" vd indexpagina een aparte div te maken:
<div id="content-index">
en hierin de background-color: #363636; gemaakt.

Vanwege het verschil van de verticale plaatsing van de afbeeldingen bij een scherm van bvb 1000px (in het midden) en bij 1920px (onderaan), heb ik de 47% verander in 40%.
Ik neem aan dat in de : wel opgelost kan worden maar mij lukte het niet.

<img src="../afbeedingen/plaatje.jpg">
De twee puntjes betekenen: ga één niveau omhoog, één map hoger. Ga vervolgens van daaruit naar de map /afbeeldingen/, en haal daar 'plaatje. jpg' op.

Begrijp ik het? Uitgaande van het door jou gemaakte vb van een mappenstructuur.
De index staat in de laagste map: "niveau_0".
De talen en afbeeldingen staan een map hoger: "niveau_1_spaans", "niveau_1_duits", "niveau_1_afbeeldingen"; etc. Dwz dat ze de submappen van "niveau_0" zijn.
De map "niveau_1_spaans" waar "index_spaans" instaat , staat dus op het zelfde niveau als de map "niveau_1_afbeeldingen" waar de plaatjes instaan.
Dus om bij "index_spaans" ook de plaatjes op te roepen gebruik je dan de ".." dus niet. Je codeert dan: /afbeeldingen/naam-plaatje.jpg (die code kan dan voor alle andere talen hetzelfde zijn behalve bij de index).
Zo heb ik het begrepen.

Ben benieuwd hoe de site nu op jouw scherm overkomt.
Ik heb ook nog een compilatie van 2 documentaires gemaakt, ruim 4 min. Het staat onder "composities".
Lage bitrate, klein formaat en toch nog 35MB. Dat was even schrikken.
Kun jij iets zeggen over de kwaliteit? Loopt het een beetje soepel of is ie toch nog een beetje schokkerig?

En, dit was mijn laatste dag in mijn "studio".
Dus ik kan nu eventjes (hoop ik) niets meer veranderen.
De volgende keer, ma, bericht ik je vanuit de plaatselijke bieb. Daar ga ik ook verder met de engelse vertaling.
Ik denk dat ik die taal maar als index gebruik.

Groeten Herman

Eh, ik wil je niet beledigen en zo, maar begrijp ik nu goed dat je denkt dat de haan het ei heeft gelegd? Als ze in Spaanse bibliotheken boeken over bloemetjes en bijtjes en zo hebben, misschien 'n idee...
(Inmiddels durf ik het lachebekje af en toe weg te laten.)

Zijn we het (alweer) eens. Belangrijke infrastructuur van de overheid, rest de markt. Anders krijg je de Sovjet-Unie, waar álles van de staat was, en dat werkt ook niet. Wij hebben hier inmiddels dus zelfs geen postkantoren meer. En KPN, nog steeds verreweg de belangrijkste provider, dreigt in handen te komen van 'n Mexicaans maffia-achtig concern. Echt 'n prettig idee.

Die 47% die je in 40 hebt veranderd is prima. Dat is altijd een compromis, tenzij je (naar mijn mening voor dit doel) veel te ingewikkelde constructies met JavaScript of zo wilt gaan toepassen. Je kunt ook 'n vaste afstand nemen in plaats van procenten, maar het probleem blijft dan toch bestaan. Je zult hier 'n compromis tussen hoge en lage schermen moeten sluiten. En dit was de goede plaats om dat op te lossen.

Die mappen werkt niet helemaal zo, maar je hebt het bijna goed. (Overigens heet dat in de regel 'n niveau lager, 'n submap.)
Als je niveau1_spaans op hetzelfde niveau als niveau_1afbeeldingen hebt staan, dus naast elkaar zeg maar, dan moet je toch puntjes gebruiken.
index-spaans staat in niveau1_spaans
Als ik nu niveau_1afbeeldingen/plaatje.jpg aanroep vanuit index-spaans, denkt de server dat niveau_1afbeeldingen binnen niveau1_spaans staat, daar een submap van is. Dat zou ook prima kunnen, en je moet 'n computer nou eenmaal heel letterlijk vertellen wat de bedoeling is.
In dit geval moet je hem eerst 1 niveau omhoog sturen, en van daaruit weer 1 niveau omlaag. Dan zit hij dus in het broertje/zusje op niveau1. Vanuit niveau1_spaans naar niveau1_afbeeldingen wordt dat:
../niveau1_afbeeldingen/plaatje.jpg
Door de .. gaat hij 1 niveau omhoog, en van daaruit weer terug naar /niveau1_afbeeldingen/
Twee niveaus omhoog is trouwens simpel ../../ enz.

Ik heb twee pagina's uitgebreid getest, inclusief zoomen en letters vergroten (voor zover browsers dat kunnen). Het lijkt overal in orde, op één klein dingetje na. Als je bij #title height: 90px; verandert in min-height: 90px; gaat het bij 'n grotere letter ook goed.
Nu wordt de titel vergroot, maar de div waar hij in staat niet. Hierdoor blijft het menu op dezelfde hoogte staan en verdwijnt de onderste (en bij sterk vergroot nog meer) titel ónder het menu. Als je nu min-height gebruikt, ziet het er precies hetzelfde uit, maar dan kan de div mee vergroten met de titels en duwt het menu omlaag, waardoor de titels niet meer onder het menu verdwijnen.

In IE 7 staat 'Contact' onder 'Home'. Niet perfect, maar ik zou het lekker zo laten. Titels staan ook niet netjes gecentreerd, maar te ver naar rechts. Diafragma staat te laag. Thumbs rechts staan hoger dan links. Thumbs staan niet gecentreerd.
Maar alles werkt, en het wordt 'n forse klus dit in orde te krijgen. Ik denk niet dat dit de moeite nog waard is voor de snel kleiner wordende groep gebruikers. Grotere sites als Youtube ondersteunen IE 7 ook al niet meer, en met 'n paar maande komt IE 10 uit en stoppen ongetwijfeld nog veel meer mensen de ondersteuning van dit technische hoogstandje van Microsoft, waaronder ik.
Die eerste wijziging was echt nodig, omdat het menu toen echt nauwelijks toegankelijk was. Nu zijn het schoonheidsfouten. (fouten, dat wel, geen foutjes.)

De video is nergens schokkerig, maar er zit wel wat verschil in. Omdat het nogal belangrijk is op jouw site, 'n iets uitgebreider verhaal daarover.
OS X (Apple): Safari, Opera en Google Chrome spelen het netjes op een klein scherm af (ongeveer de maat zoals die is bedoeld).
Firefox speelt het niet af, maar ik emuleer OS X en ik denk dat dat komt omdat ik er geen videoprogramma's in heb zitten. Als die andere drie het afspelen, zal Firefox het normaal genomen zeker ook doen.

Linux: Firefox en Opera spelen het schermvullend af, waardoor het wat blokkerig is. Google Chrome speelt het netjes klein af in een ingebouwde speler.
(Overigens heeft Linux maar 'n heel klein aandeel op de desktop).

Windows 7 met IE 9, Opera, Safari, Firefox en Google Chrome: in allemaal speelt het in een klein schermpje, dus duidelijk.

IE 7 op XP: speelt niet af, maar dat is omdat ik er geen player in heb zitten. (Wordt ook geëmuleerd)

IE 8 op XP. Dat wordt niet geëmuleerd, zit op 'n echte computer, maar er zit geen player in. Maar bij jou speelt dat wel, dus dat zit echt in die player. (Zelfde geldt voor Firefox, Safari en Opera op XP.) Google Chrome speelt het klein af in z'n ingebowde player.

Safari op de iPad speelt het scherp af, wel schermvullend. Opera Mini speelt het niet af, maar daar werkt de site hoe dan ook niet goed in. Maar Opera Mini is bedoeld voor de meer simpele sites.

Samsung smartphone met Android 2.0.3: Opera mini kan de site niet aan, dus daar werkt niets. Android browser werkt wel (ook het menu), maar kan de film niet afspelen. Ook daar heb ik geen player of zo geïnstalleerd.

Op Android 4.0.3 (ook 'n tablet) speelt hij af in Android Browser, Firefox en Opera Mobiel. Niet schokkend, wel schermvullend. Google Chrome speelt hem hier grappig genoeg niet af, maar dat is 'n net nieuwe bèta, dus dat zegt niet zoveel.

Met <video> kun je hem dus op 'n bepaald formaat afspelen binnen de pagina. Maar dat duurt nog even, voor ik daar meer over kan zeggen. Mogelijk kun je elders daarbij hulp krijgen. Daan kunnen ook meer formaten in, dus dan speelt elke machine het af, ongeacht welke player erin staat.

Alles bij elkaar vind ik het er best netjes uitzien. En het werkt vrijwel overal. Opera Mini, tja, Opera zelf is er wild enthousiast over, maar ik word er alleen wild zonder enthousiast van. Zal best leuk zijn voor echt héle simpele sites, maar voor alles wat iets ingewikkelder is bevordert het alleen maar de verkoop van kalmerende middelen.

Hoi,

Nog drie kleine dingetjes vergeten.
* Die afwijkingen in IE 7 zijn niet heel simpel te verhelpen door even iets te veranderen. IE 7 is 'n ramp met marges e.d., stikt van de bugs.

* Schermvullend lopen die video's prima, maar ze zijn wel wat onscherper dan wanneer ze kleiner worden afgespeeld.

* Die vreemde blauwe kleur: die zie ik niet. Maar ik heb ook nooit roze olifanten gezien, dus dat zegt niet alles. Ook niet op een breed scherm. Dus daar snap ik niets van. Maar die oplossing van jou met die extra div is prima. Het is de afdeling 'paperclips en plakband', maar als dat op één plaats is vanwege 'n duidelijke reden. tja. Het alternatief is dat je weet ik hoelang moet gaan zoeken, en kwaad kan dit verder niet. Het kan prima met iets vreemds in IE 8 te maken hebben, alleen is me dan niet helemaal duidelijk waarom ik het niet zie.
(Echte puristen gruwen van zo'n extra div, maar het is mij nooit helemaal duidelijke geworden waarom.)
Eén mogelijke reden: de browser slaat z'n bestanden op in een cache. Dan hoef je bestanden niet steeds van internet af te halen, maar alleen als er iets is gewijzigd. Dat is uiterst handig, maar bij het maken van 'n site komt het wel 'ns voor dat je door dat mechanisme 'n oude pagina ziet. In principe wordt gecontroleerd of de pagina is gewijzigd en moet dan de nieuwe worden getoond, maar dat gaat regelmatig mis. Dat mechanisme werkt ook binnen je eigen computer. Bij dit soort vreemde verschijnselen kun je de cache even legen.
In IE 8: Extra -> Browsergeschiedenis verwijderen. LET OP: zet de vinkjes uit bij wat je wilt bewaren. De cache heet bij IE 8 'Tijdelijke internetbestanden'.

O, en goeiemorgen.

Nou, ik mail je vanuiit de bieb en mijn beurt is nu al bijna voorbij: een half uur dat is de maximale tijd als er wachtenden zijn.
Heel snel je bericht gelezen, kom er morgen nog op terug.
Voor mij hoeft er ook niets meer te gebeuren met ie-7.

Ik kan nu even niets aan de site veranderen. Maar ben op zoek naar een oplossing.

Groetjes Herman