dropdownmenu met ZIP

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Hoi GG,
Je hebt er nachtwerk van gemaakt zag ik. Hartstikke bedankt. Kom hier maar een keer uitrusten.
Als je graag rent kan dat. Wel een beetje heuvelachtig.
(dit is niet mijn 1e tekst, die ben ik kwijtgeraakt omdat ik plotseling uitgelogt was en bij terugkeer de tekst verdwenen was, dus snel een 2e versie. Gelukkig had ik wel iets gesaved)

Ik heb je opmerkingen etc doorgespit. Het meeste begrijp ik wel maar of ik het zelf goed kan hanteren is weer een ander verhaal.
Ja, ik gebruik HTML-KIT. En daarover heb ik direct een vraag.
Op mijn laptop gebruik ik firefox maar omdat de machine telkens afslaat (laptop schoon gemaakt, nieuwe koelpasta opgebracht, etc maar dat hielp niet geweldig, ga een dezer dagen met het programma "everest" (lavasoft) kijken hoe het met de temparatuur staat), werk ik nu even op een andere PC. Hierop staat (vanwege omstandigheden, ahum) een verouderde versie van IE8. Ik kan dus geen recente uploaden.

Daarna ben ik begonnen met de inhoud in de html en de opmaak in de css te zetten om te kijken wat er gebeurt.
Dan krijg ik op een gegeven moment toch rare resultaten.
Bvb:
- de rechterkolom staat nadat ik foto´s heb geplaatst over het rechtergedeelte van de content heen zodat daarvan slechts de linkerhelft te zien is.
- Ook kreeg ik nadat ik de afbeeldingen van de taalvlaggen had geplaatst onder de titel(s) en de content-tekst een streep zodat het als link gaat werken.
Enfin dat soort dingen dus.

Verdeling in 6 x 16,66%. Wellicht dat een mogelijkheid om het toch symetrisch te houden, vind ik ook mooier, is, om "home" en "contact" 11% (samen 22%) te geven en dan nog 4 x 19,5%. Dat wil ik graag uitproberen. Alleen, hoe doe je dat dan met de "id" s? Het zijn dan maar 2 "id" ´s maar je moet ´dus wel alle 6 menu´s van een id voorzien, lijkt me. Maar waar geef je in de html een "id"? En waar neem je die op in de css?

Hoe je dat nu gedaan hebt met de H-ruimte tussen de submenu-blokken ontgaat me nog even. En ja, dat sadistische vond ik wel leuk. Een moderne versie van de Tantallus kwelling. Bill kent zijn literatuur. Wie had dat ooit van hem gedacht.
Maar "contact" staat bij mij nu linksonder "home" dat een plaats naar rechts is opgeschoven en de vrijgekomen ruimte is nu "teal" de kleur van de content. Vergroten van het browserscherm helpt niet.

Ik heb 2 screenshots gemaakt van wat er gebeurt als ik jouw basis code gebruik. ("screenshot_code_GG" en "screenshot_code_GG_met-submenu"). En eentje na mijn geploeter. De background-color van rechts en rechtscontainer heb ik voor het overzicht even op "none" gezet. Lach of huiver.

Tot zover deze lezing (ahum). Ik moet snel terug naar mijn boomgaard. Morgen ploeter ik er mee verder. Daar bericht ik je over, tenminste als je het nog aan kunt zien.

Groet herman

PS: Ik heb het idee dat de KIT mijn code niet goed vertaald. Zou dat komen omdat IE8 er als browser op staat en dat de KIT zich daar aan aanpast? En ook krijg ik het idee dat als ik de KIT afsluit en later weer start, het resultaat anders is. Soms krijg ik het idee dat ik het allemaal niet zo best meer zie. En als ik hem via internet open, krijg ik toch net iets anders. En dat werkt natuurlijk niet. Zo kan ik niet controleren of ik het goed doe.
screenshot_code_GG.jpg
kijk:
(103.17 KiB) 1 keer gedownload
Bijlagen
frontpage voor xxx.jpg
(220.92 KiB) 1 keer gedownload
screenshot_code_GG_met-submenu.jpg
(88.83 KiB) 1 keer gedownload
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Hoi,
Ik heb even iets veranderd aan de instellingen van het forum, omdat je afbeeldingen de lay-out nogal sloopten. Nu moet je even op de link klikken voor je ze ziet. Ik ben absoluut niet thuis in het beheer van forums, dus ik heb dit nooit ingesteld, maar als ze nu breder zijn dan 1000 px, wordt een link weergegeven. Verder geen enkel probleem, heb ik weer wat geleerd.
Als je bent ingelogd en niets doet, word je inderdaad na 'n uur automatisch van het forum afgegooid. Tja, ik moet ook ergens m'n machtswellust kwijt. Nee, even serieus: dat heeft met beveiliging te maken. Dit werkt trouwens op heel veel forum zo. Je kunt je tekst opslaan door onder het tekstvak op Concept bewaren te klikken. Alleen bijlagen kun je zo niet opslaan, maar tekst en opmaak en zo wel.
Als je dan terugkomt en naar je gebruikersprofiel gaat (door op je naam te klikken), zie je daar Overzicht -> Conceptenbeheer. Daar is je tekst dan opgeslagen. Je kunt hem daar bewerken en/of plaatsen en zo. Heb ik trouwens ook pas vandaag ontdekt, nadat jij schreef dat je tekst weg was.
Als ooit iemand dat forumbeheer wil overnemen, zou ik dat helemaal niet erg vinden.
Ik werk trouwens altijd 's nachts. Als ik 's ochtends reageer, dan is het echt overwerk :D

Af en toe afslaan. Als dat maar geen geheugenprobleem is. De versie van IE maakt niets uit. Dat is juist de pest bij IE. Microsoft voegt nooit nieuwe dingen toe, repareert geen afwijkingen van de standaard, niets. Alleen beveiligingsproblemen worden geüpdatet. Dus de eerste versie van IE 8 geeft het exact hetzelfde weer als de laatste versie. Dit houdt tevens in dat inderdaad IE 6, 7, 8 en 9 het allemaal anders weergeven. Hartstikke fijn. Maar omdat ook Microsoft zich steeds beter aan de standaard gaat houden, worden die verschillen wel kleiner. IE 9 geeft eindelijk alles goed weer (op wat bugs na, maar dat hebben ze allemaal), maar is feitelijk alweer enorm verouderd, omdat er dus niets nieuws bij komt.

Ik heb geen ervaring met html-kit, maar het staat goed bekend. Ik zie ook geen rotzooi in je code, wat heel veel editors wel toevoegen. Voor zover ik weet maakt html-kit dingen alleen maar makkelijker, maar mishandelt het je code niet, zoals veel goed bekend staande (en peperdure) programma's wel doen.
Aanpassen aan een browser gebeurt niet. De browser krijgt, in een goed editor, gewoon de html/css/... en geeft dat weer. Het kan wel dat IE 8 op bepaalde punten foutief weergeeft, omdat IE 8 zich nog niet helemaal volledig aan de standaard houdt, En elke browser heeft bugs. Maar in principe is een foutieve weergave altijd hetzelfde in dezelfde browser, je zou altijd hetzelfde moeten zien, fout of niet. (Zolang je niet de lettergrootte verandert of zoomt of zo.)
Je schrijft dat het via internet er net iets anders uitziet. Maar ik begreep dat je code niet op internet staat? Als hij wel op internet staat, dan zou het met hoofd- en kleine letters te maken kunnen hebben in de tags. Windows behandelt hoofd- en kleine letters in code vaak anders dan andere systemen. (Ook in bestandsnamen trouwens, Plaatje.jpg is op Linux/Mac/Unix/enz. iets heel anders dan plaatje.jpg, maar op Windows hetzelfde.)
Als het op internet staat, zou 'n link naar de code trouwens heel makkelijk zijn, als je vragen hebt. Maar mogelijk bedoel je Internet in het menu of zo.

Wat verschil kan opleveren: je moet in de instellingen van html-kit (waar die ook zitten) opgeven dat bestanden worden opgeslagen als utf-8. Dat is ergens in te stellen. Als je dat niet doet, zou het kunnen dat 'n accent of zo er in html-kit goed uitziet, maar in IE 8 als Chinees. Ik zou even nakijken of dat wel goed staat ingesteld.
(Als je dat verandert en dan juist vreemde tekens gaat krijgen, moet je alle html en css-bestanden even openen en opnieuw opslaan als utf-8. Voor het opslaan moet je de vreemde tekens even handmatig opnieuw intypen. Nu worden ze volgens de utf-8-code opgeslagen. Als je dat interessant vindt: op mijn site staat er een lang artikel over, maar normale mensen vinden dat slaapverwekkend.)

* De H-ruimte tussen de submenu-blokken heb ik niet gedaan, dat had jij er al in gezet. Ik vind het trouwens wel grappig, het is heel apart.
In de submenu's staat elke ingang in een aparte <li>. Een <li> is normaal genomen een blok-element. Dat betekent dat ze op een nieuwe regel komen te staan. Dus alle ingangen staan onder elkaar.
In elke <li> staat een <a>, en daar staat de echte link in. Een <a> is normaal genomen een inline-element, het zusje van het blok-element. Een inline-element begint normaal genomen niet op een nieuwe regel. (Er zijn meer verschillen, maar dit is de meest herkenbare.) Dat de <a> niet op een nieuwe regel komt te staan, maakt niet uit, want hij staat in de <li>, en die komt wel op een nieuwe regel te staan. Dus ook de <a>'s staan onder elkaar.
Aan een inline-element kun je normaal genomen geen hoogte geven, dus ook niet aan de <a>. Maar in de css staat bij #nav a o.a. display: block; Maak van de <a> een blok-element. En nu kan ik er wel 'n hoogte aan geven: 16 px. Daar komen boven en onder nog 7 px padding bij, totaal 30 px hoog.
De achtergrondkleur wordt aan de <a> gegeven, die is dus ook 30 px hoog.

Nu geef je bij #nav li de <li>'s een hoogte van 40 px. Dat is 10 px meer dan de <a>. Daardoor krijg je 'n opening tussen de <a>'s, en dus ook tussen de achtergrondkleuren in de verschillende <a>'s. Dat is de opening die je ziet.
Als je die 40 px bij #nav li meer of minder maakt, wordt de opening hoger of lager. Als je de height bij #nav li helemaal weghaalt, sluiten de ingangen van de submenu's op elkaar aan.

* Zie ik gelijk ' n foutje (of niet, net wat mooi vindt). De cursor verandert boven 'n link in 'n handje, dat is standaard. Maar hier verandert de cursor boven 'n <li> in 'n handje, dus ook op die hierboven omschreven open plek van 10 px. Als je wilt dat de cursor alleen op de echte link in het submenu 'n handje is, moet je de css bij #nav li:hover weghalen. Eigenlijk hoort de cursor daar niet in 'n handje te veranderen, maar ik denk niet dat dat in dit geval tot misverstanden bij de bezoeker leidt, dus kan het ook gewoon zo blijven staan, lijkt mij.

* Oeioeioei. Ik dacht eigenlijk uit je code en vragen af te leiden dat je toch wist wat 'n id was en zo. Nou ja, proberen we 't zo wel. Je zoekt in ieder geval zelf dingen op en zo, dus dan vind ik 't niet zo'n punt verder. En je pikt volgens mij dingen vrij snel op.
Je zou alleen kunnen overwegen of 'n korte cursus je niet heel veel tijd uitspaart, omdat je dan de grotere lijnen wat beter ziet. 'n Goede cursus (gratis trouwens) is stapsgewijs opgebouwd, en dit is natuurlijk hap-snap. Maar tot nu toe lukt het zo goed, dus zie maar. Als het echt niet gaat, begin ik wel weer over 'n cursus. Mocht je gelijk roepen: "Ha, 'n cursus, met 'n bakje olijven, ja!" dan heb ik wel wat suggesties.
(Ik ken olijven alleen uit bakjes en zo. Heerlijk. Zijn verse olijven ook eetbaar?)

* Ik kwam hierop vanwege de vraag over de id. Een id geef je heel simpel op in de html (dit is écht simpel, oef, opluchting, zucht van verlichting :D )
<div id="naam-van-id"> of <a id="pietje">
Gaat altijd overal op dezelfde manier. Je mag 'n id maar één keer gebruiken op een pagina. De id van <div id="nav"> staat er ook maar één keer op.
In de css wordt een id voorafgegaan door #. Dat is alles.
In de html:
<div id="nav">
En in de css:
#nav {... css ...} of div#nav {... css ...}
Het deel voor de { heet de selector. Hoe lang je die moet maken, kun je zo niet zeggen. 'n Langere selector (meer specificiteit heet dat, vreselijk woord) overrulet vaak een kortere selector. Daar zijn ingewikkelde rekenregels voor, even uitproberen is vaak simpeler.

In de css staat bijvoorbeeld:
#nav li {width: 16.6%} Maak alle <li>'s die in het element (hier de div) met id="nav" staatn 16,6 % breed.
Verderop
#nav ul ul li {width: 100%;} Maak alle <li>'s die binnen een <ul> staan, die weer binnen een <ul> staan, die weer binnen #nav staat, 100% breed. Omdat in deze selector één id en drie element-namen (ul, ul, li) staan, 'wint' deze van #nav li met één id en slechts één element-naam.
(Ook de volgorde is van belang: bij gelijke specificiteit 'wint' de laatste regel.)

Deze lange inleiding vanwege de breedte van de <li>'s. Om Home en Contact smaller te maken, dat zou kunnen. (Dat bedoelde ik ook met dat je op 'n groter forum meer mensen hebt die ideeën hebben, want ik heb daar niet aan gedacht). Ik denk trouwens dat die woorden Arrangementen en Moving_images hoe dan ook te lang zijn, maar dat kun je proberen. Omdat de breedte in procenten is, verandert die mee met de breedte van de browser. Als je IE 8 smaller maakt, zie je zo of het op smallere schermen dan wel past.
Home en Contact smaller maken.
Je geeft eerst gewoon aan álle <li>'s een grotere breedte:19.5 % (ik neem jouw maat even over). In de css:
#nav li {width: 19.5%;}
Nu heb je van de 6 <li>'s al vier de uiteindelijke maat gegeven. Alleen de eerste en de laatste moeten een andere maat krijgen.
Het simpelste is hier om die eerste en laatste <li> 'n class te geven. Pardon? 'n Class? Zit-ie eerst te emmeren over 'n id en nou 'n class?
Eh ja, was ik even vergeten. 'n class is hetzelfde als 'n id, alleen mag je die vaker gebruiken op dezelfde pagina. En omdat de eerste en de laatste id even breed moeten worden, is nu 'n class handiger. Behalve dat je 'm vaker mag gebruiken, is het hetzelfde als 'n id. (O ja, en in de css begint het niet met 'n #, maar met 'n . (punt).
De eerste en de laatste <li> geef je in de html:

Code: Selecteer alles

<li class="smal"><a href="#">HOME</a></li>
<li class="smal"><a href="#">CONTACT</a></li>
De eerste en laatste <li> hebben nu een class="smal", en daarmee kan ik ze aanroepen. (Het is handig om 'n class-naam zo te kiezen, dat uit de naam al blijkt waar het om gaat. In dit geval gaat het specifiek om de lengte, vandaar. Weet je over drie maanden nog waar die class voor is bedoeld.)
In de css kan ik specifiek deze twee <li>'s nu aanspreken met
#nav li.smal {width: 11%;} De <li>'s met class="smal" binnen #nav. De #nav moet erbij, omdat de eerdere regel over de breedte #nav li is, en die zou anders 'winnen', meer specificiteit hebben, dan alleen li.smal. Als je #nav even weghaalt uit de css, zie je dat het niet meer werkt.

Zo, weer 'n heel verhaal, maar dit is basiskennis. Die werkt op heel veel plaatsen hetzelfde.

* De grootste fouten zijn vaak het simpelste. (Als je tenminste niet de resolutie verandert waardoor er dingen verdwijnen en dat vergeet, zoals ik deed, grinnik.)
Ik denk dat de rechter-afbeeldingen niet precies op de juiste plaats zijn gezet. Het moet er ongeveer zo uitzien:

Code: Selecteer alles

<div id="rechts_container">
	<div id="rechts">
		<img src="004-t.jpg" alt="">
		<img src="005-t.jpg" alt="">
		<img src="006-t.jpg" alt="">
	</div>
</div> <!-- sluit rechts_container -->
Ga even in 'n vervolg verder, want de letters worden kleiner.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

(Vervolg)
Bij mij staan ze dan goed. alt="": tussen de aanhalingstekens kun je 'n tekst zetten. Dat is van belang voor slechtzienden, maar ook voor zoekmachines, want die kunnen geen plaatjes 'lezen', maar wel die teksten.
Als dit niet helpt, is de code nog 'ns nodig.

* Die vlaggen linken naar een pagina in een bepaalde taal, neem ik aan. Tekst in een <a> krijgt standaard een onderstreping. Een afbeelding in binnen een <a> krijgt standaard een ongelooflijk foeilelijke door een sadistische kleurenblinde met gedragsproblemen bedachte border. Nog nooit van iemand gehoord dat-ie dat mooi vindt.
De onderstreping is van belang, omdat mensen anders niet zien dat het 'n link is.
In jouw geval is die onderstreping hier, denk ik, niet van belang, omdat klikken op 'n vlaggetje voor 'n taal algemeen gebruikelijk is.
De border haal je weg met

Code: Selecteer alles

img {border: 0;}
Als je ook afbeeldingen met 'n border hebt, wordt dat

Code: Selecteer alles

a img {border: 0;}
Nu krijgen alleen de <img>'s binnen een <a> geen border.

De onderstreping haal je weg met

Code: Selecteer alles

#taal_container a {text-decoration: none;}
Ik heb er #taal_container voor gezet, omdat anders álle links hun streep verliezen, op de hele site. En dat is in tekst echt ongelooflijk verwarrend.

Nou, dat is het weer, denk ik.
Ik vind het trouwens niet slecht gaan. Jouw code is echt heel overzichtelijk en de problemen vallen ook enorm mee, tot nu toe.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Zo, na een nacht tussen de olijfbomen en de blaffende honden (zie je de karavaan al voorbij trekken?) zit ik weer in mijn kleine maar confortabele werkkamer en lees net jouw reactie.
Je uitleg is weer behoorlijk verhelderend voor mij. Ik ben bang dat ik tijdens de voorbereiding van mijn site toch veel nonsens in mijn hoofd heb opgeslagen. En daarbij ben ik niet zo´n wizzkid op dit gebied.

Voordat ik verder ga met de site zal ik eerst reageren in volgorde.

* Misschien deed ik iets fout, maar als ik het als "concept" opsla en daarna verder wil moet ik het eerst weer met de door jou beschreven weg openen. Daarom heb ik regelmatig een copie gemaakt en in de teksteditor gezet, alleen het laatste gedeelte niet. Dat moest ik opnieuw schrijven.

* oke het ligt dus niet aan mijn IE8 versie. Goddank want ik had gisterenavond besloten om toch maar firefox op mijn werk-pc te installeren. Maar ik was een beetje bang dat het niet zou lukken vanwege eerder genoemde probleem.

* de code staat niet op internet -helaas, ik moet eerst een provider inschakelen- maar ik dacht dat als ik het index bestand niet via KIT open maar via IE, deze maakt dan een apart tabblad aan achter de sites die ik al open heb staan, dat ik de versie van IE8 zou zien (bedoel je dat met internet in menu?). Ik dacht dat er wel een verschil zou zijn zoals KIT het me laat zien en IE. Waarom ik dat dacht? Tja, geen idee. Waarschijnlijk mijn onervarenheid en andere soort logica.
Maar er gebeuren toch vreemde dingen en zoals vaak zal dat wel aan mijn onkundigheid liggen. En een tikfpoutje is ook snel gemaakt.

* utf-8: voor de liefhebber van KIT: In "edit" > "preferences" > tabblad "tiddy" > "character encoding": stond bij mij op default, omgezet in utf-8.
Ben benieuwd wat de KIT straks laat zien. Alle HTML en CSS bestanden opslaan als utf-8? In KIT neem ik aan. Als extensie? Ik ga je artikel maar even lezen.

* H-ruimte. Ja, dat vond ik wel ruimtelijk werken, maar ik dacht dat jij er iets aan veranderd had omdat IE 7 er niet mee overweg kon. Die van die Tantallus kwelling. Heb ik misschien verkeerd begrepen. Bovendien heb ik gemerkt dat als er achter die tussenruimte een link staat, het submenu dichtklapt.
Even voor de duidelijkheid. Een "ingang" is bvb: "composities" is de ingang naar het dropdown-submenu en elk submenu (bvb "documentair") is weer een ingang naar de info die het oproept (bij mij dus achter de afbeelding van het diafragma).

* Dat handje had ik nog niet opgemerkt. Dat komt waarschijnlijk omdat ik daar een ongewenst link heb. Kom ik bij een volgend punt nog op terug.

* Oei, nee hoor, ik weet wel wat een "id" en een "class" is. Ik weet alleen niet waar die dan in dit geval precies moeten staan. Maar klopt het dat ik dan als ik 2 maten gebruik: 2x11% en 4x19,5% ik aan 2 "id" s genoeg heb? Maar ik dacht anderzijds te weten dat je een "id" maar een keer kunt gebruiken: daarom dan toch 6 verschillende "id" s? En waarom kan het niet met "class"? Ik heb daar nog wel een beetje moeite mee, dat klopt.

- olijven zijn niet (amper) vers te eten, ze zijn erg hard. Je legt ze een paar dagen tot enkele weken in zout water waar je allerhande kruiden voor de smaak aan kunt toevoegen, bvb knoflook, tijm, marjolijn -alles wat je maar lekker vind- en dan worden ze zacht en kun je ze eten.-

* Oke, mijn vorige vraag over de 2 maten en "class" was overbodig. Bedankt voor de uitleg. Ik had er bij de 1e lezing overheen gelezen. De dochter van mijn "huisbaas" kwam net met een kopje koffie, ik was even afgeleid. Sorry. Dus eerst alle 6 eerst een breedte van 19,5% geven en dan met een "class" "home" en "contact" overrulen, dat is het idee. Wanhoop niet als ik het nog niet helemaal correct zie, ik ga het straks uitvoeriger bekijken.

* Resolutie. Je bedoelt de resolutie van de monitor? In KIT heb ik net gezien (utf-8) kun je ook resoluties instellen. Moet ik nog mee experimenteren.
En elke afbeelding kan ik dan weer een aparte "class" meegeven om ze te positioneren als ik ze bvb niet exact onder elkaar wil hebben.
De "alt" moet in de html (indien geen plaatje dan staat er de tekst van de "alt") en voor de zoekmachines en gesproken tekst voor blinden (moet ik allemaal nog eens goed doorkijken), maar de "title" voor de begeleidende tekst bij muisover, kan wel in de css, heb ik begrepen.

* Vlaggen: Ja, inderdaad erg lelijk die rand. Ik had border "ridge" in gedachte. Maar daar ben ik nog niet helemaal uit. Is misschien iets te.
Maar... bij mij gebeurde het volgende: Ik ben begonnen met de "content" boxen in te vullen. Eerst "logo" (een jpeg-foto) toen "titel" (3 regels tekst in H1, H2 en H3) en daarna "taal" (6 png-vlag-afbeeldingen). Dat ging goed tot ik de afbeeldingen van de vlaggen er in zette met een a-link. Toen verscheen bvb in de 3 titelteksten een onderstreping en een handje -dwz dat het plotseling een link werd. Als ik de vlaggen weer weghaal verdween ook weer de link bij de titels. Dus de a-link bij de vlaggetjes beinvloed ook andere content-dozen. Dan doe ik dus iets fout.
Maar oke, met jouw nieuwe info ga ik dat allemaal nog eens goed bekijken.
Ik hoop dat ik het zelf op kan lossen.

Oei, dit heeft me veel meer tijd gekost dan gedacht. Maar oke, behalve dat het nuttig was, vond ik het ook leuk om te doen. Ik ga nu wat eten en daarna aan de slag. Ik bericht je vanavond ("als god het wil", zeggen ze dan hier).

Mocht je wat meer willen weten over olijven en waar ik ergens vertoef, kun je me altijd mailen op movimag-at-gmail-punt-com

Groet herman
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Voor ik de deur uitga even snel:
* Opslaan als concept is in principe alleen nodig als je uitlogt (of wordt uitgelogd). Bij langere teksten maak ik trouwens zelf ook steeds even 'n kopie buiten het forum om, want het zou niet de eerste keer zijn dat ik verkeerd klik en annuleer of zo. Dan kan ik het gewoon terugzetten vanuit de kopie.

* Firefox is wel veel prettiger (na wennen) om in te werken, omdat het allerlei handige extensies heeft. Zo kun je bijvoorbeeld 'n waarde in de css veranderen en zie je gelijk het effect. Dus als het enigszins kan, zou ik Firefox proberen te installeren.

* Ik weet niet zeker of html-kit iets anders laat zien dan IE 8. Dan zou ik het programma moeten kennen. IE 8 gebruikt een zogenaamde rendering machine voor de weergave: Trident.
Firefox gebruikt een andere: gecko. Google Chrome en Safari gebruiken Webkit. Enz. Die rendering machines verschillen van elkaar. Gelukkig steeds minder, omdat ze zich steeds beter aan de standaard houden. Maar er zijn verschillen, en bugs.
Als je de site echt bekijkt door IE 8, wordt Trident (versie IE 8) gebruikt. Maar het zou kunnen dat er in html-kit iets als een voorvertoning of zo zit, en dan zou het kunnen zijn dat html-kit een andere rendering machine gebruikt. En dat zou (kleine) verschillen kunnen opleveren.
Niets aan te doen. Dat is ook de reden dat een site in veel verschillende browsers moet worden getest.

* Prima dat je default in utf-8 hebt veranderd. Nu weet je zeker dat het goed gaat. Dat artikel lezen heeft mogelijk niet zo heel veel zin, want ik weet zo uit m'n hoofd even niet of dit er in staat.
Je moet de css- en html-bestanden even openen en opnieuw opslaan. Gewoon met dezelfde extensie en zo, dus helemaal niets veranderen. Als (áls) er accenten en zo niet als utf-8 zijn opgeslagen, worden ze dat nu wel.
Het zou kunnen dat, nadat je dit hebt gedaan, juist nu opeens na openen of bekijken in IE 8 'vreemde' tekens verschijnen waar 'n accent of grafische kommaatje zat of zo. In dat geval moet je in je editor even dat accent op nieuw typen, dan wordt het nu als utf-8 opgeslagen. (De theorie staat, in ieder geval gedeeltelijk, in dat artikel, maar of je dat nou echt interessant vindt...)

* Met 'ingang' in het menu bedoelen we het zelfde.
Alleen in IE 7 is de tussenruimte weggehaald, omdat het alleen daar problemen gaf. Dat rare stukje bovenin dat begint met <!--[if IE 7]> zorgt ervoor, dat alleen IE 7 die css krijgt.
Ik zie wat je bedoelt in IE 8 met het sluiten op de open stukken in de submenu's. Dat zou niet moeten gebeuren, maar ja, het is IE...
Als je die openingen wilt houden, dan zal ik daar even naar kijken. Als je die openingen niet wilt houden, dan hoeft dat niet. Dat lukt nu niet meer, laat even weten of dat nodig is. Dit zijn trouwens de normale problemen bij het maken van zoiets, niets verontrustends.
Als het alleen in IE 8 speelt (grote kans) en niet op te lossen zou zijn, dan zou je ook voor dat onding wat aparte css kunnen maken, net als voor IE 7. Maar mogelijk is het simpel op te lossen. Hoveren in IE 8 geeft vaker problemen, maar is meestal te repareren.
Dit soort dingen heeft niet echt haast. Als de grote indeling en zo goed is, de kolommen e.d., kan het menu worden afgemaakt. Het menu staat helemaal los van de rest van de pagina in z'n eigen hok, dus je kunt daar later helemaal los van de rest kleurtjes, randjes, openingen, noem maar op aan toevoegen of weghalen. En ook dat hoveren (hopelijk) repareren.

* Ik begon met die breedte over id's, maar eindigde ook met 'n class. Omdat je eerst álle zes de id's een breedte van 19,5 % geeft, hoef je vervolgens alleen de eerste en de laatste nog maar 'n class te geven.
Je hebt dus helemaal gelijk met je verhaal over id' en zo. Ah, ik zie dat je daaronder dat zelf al had ontdekt. Nee, ik wanhoop niet, je begrijpt het helemaal goed.
Overigens moet je, was ik vergeten, 'n heel klein beetje ónder 100% blijven. Dus bijvoorbeeld 4 x 19,5 % en 2 keer 10,96%. Dit zie je niet en door afrondingsverschillen en zo kan het totaal anders boven de 100% uitkomen. Dan past de laatste ingang net niet meer en wordt op de volgende regel gezet.

* Met resolutie bedoel ik de resolutie van de monitor. Ik had die 'van buitenaf' veranderd en was dat vergeten. Maar je kunt dat zelf ook heel simpel doen vanuit de browser. De resolutie is gewoon de breedte/hoogte in px. Bijvoorbeeld 1280x1024. Als je nou de breedte van IE 8 smaller maakt, verandert de resolutie in bijvoorbeeld 1280x800. Breedte is het belangrijkste om te testen, want mensen zijn gewend om verticaal te scrollen. Horizontaal scrollen omdat de tekst te breed is, dat is 'n ramp.
Maar ik had dat dus op 'n andere manier veranderd, om te testen. Daardoor viel het me niet op en ben ik uren bezig geweest waarom die ellendige footer van jou alleen in IE 8 wegviel...

* De alt moet inderdaad in de html. Waar bij mij alt="" stond, vul je gewoon alt="Fantastisch mooie foto" in.
title moet ook in de html. (Wat jij muisover noemt, noem ik trouwens hoveren, weten we waar we het over hebben.)
<img src="plaatje.jpg" alt="Fantastische mooie foto" title="Wat vind je van deze fantastische foto?">
Zoekmachines en zo zien de alt-tekst. Als de afbeelding om een of andere reden niet wordt geladen, verschijnt ook die tekst op de plaats van de afbeelding.
Bij hoveren (ben nou eenmaal aan dat woord gewend, maar muisover is eigenlijk veel leuker) verschijnt de tekst die bij 'title' staat. Ook zoekmachine hechten enigszins belang aan deze tekst. Hoeveel is niet bekend, want dat is allemaal geheim.
Spraakbrowsers e.d. gebruiken, afhankelijk van de instellingen, de alt of title-tekst. Overigens is 'n title bij 'n afbeelding niet echt nodig. Maar er is ook niets op tegen.

Mooi dat je het leuk vindt, want anders wordt het masochisme... Ik vlieg de deur uit.

Edit: ik heb je e-mail even wat verstopt. Dit forum wordt geïndexeerd, dus voor je het weet staat je e-mail op tig spamlijsten.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Ik zag gelukkig nog net dat je gepost had.
Stond al bijna op het punt om naar mijn "landgoed" te vertrekken. Half uurtje fietsen. Berg op.
Morgen (zaterdag) kan ik alleen in de ochtend werken en zondag ook helaas niet.
Ik ga nu gewoon wat later, dat maakt de avond ook korter.

Heb je info over het smaller maken van "home" en "contact" gelezen en ben er direct aan begonnen, het was zo gepiept. Misschien kwam dat omdat ik niet al te veel heb nagedacht. Gewoon gedaan. En het werkt.
Of het genoeg ruimte geeft aan de langere menu-titels moet ik nog even bezien.

Het begint nu eindelijk een beetje leuk te worden. Er lukt steeds meer dankzij jouw hulp.
En ik wil de site zo snel mogelijk op internet want i´m running out of money.
En bovendien ik popel om weer eens een leuke "moving images" te maken.
Aan de andere kant krijg ik nu ook plezier in dit werk. Maar om dit enigzins te beheersen heb je denk ik behoorlijk veel ervaring nodig.
Je hebt het af en toe tussen de regels door over je leeftijd, ik ben ook niet meer de jongste. Ik ben papa geworden op een wat latere leeftijd. Daarom vind ik het zo belangrijk dicht bij mij kind te wonen.

Ik ben redelijk goed opgeschoten vandaag en er enkele grote blunders uitgehaald. Een heikele vraag, die van die plotselinge a-links, valt nu weg. Ik kreeg die a-link in bvb de titels omdat ik een ">" vergeten was. Tja, hoe blind kun je zijn. Ach, de leeftijd zullen we maar zeggen.

De rest laat ik nu maar even tot morgen liggen. Dan werk ik vanavond nog een beetje aan de content. Goede en heldere info geven is ook nog een heel werk. Maar ik denk dat dat (aiai) me wel lukt. Vele jaren geleden heb ik nog de kost verdient als scenario- en tekstschrijver. Schrappen in andermans werk. Over machtswellust gesproken...

En even een vraagje tussendoor dat me al langer op de lippen brand. Wat is jouw relatie met "warchild" en ook je aandacht voor de minderzienden onder ons?

O ja en nog even dit. Ik loop nu even voorruit.
Heb ook nog pdf 011 gedoawnload omdat ik op de voorpagina bij de 6 foto´s in de rechter- en linkerkolom muisovers wil maken.
Het past wel een beetje bij wat ik met "moving images" van de foto´s maak. Maar ik wil geen grote plaatjes. Gewoon op dezelfde plek een detail of juist net een ander perspectief van dezelfde afbeelding.
Ik neem aan dat je met muisover "slechts" een achterliggend plaatje kunt oproepen. Maar een "drieluik" zou erg mooi zijn, dat suggereert net wat meer beweging. Maar ik neem aan dat het dan klikken wordt.
En die muisover zou ik wat vertraging mee willen geven, ik weet het effect niet precies, maar het lijkt me dan een soort overvloeier te worden (past ook erg goed bij mijn werk).
In het menu zou dit ook wel mooi zijn.

En nu moet ik met rappe spoed naar mijn fiets.

groet herman

P.s. Goed dat je m´n mailadres hebt weggehaald.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Hoi,

Ik heb geen relatie met Warchild. Maar ik vind het 'n bijzonder goede club. En een van de zeer weinige grotere fondsen waar de directie geen krankzinnige salarissen/bonussen krijgt. Hun manier van werken zorgt dat ze ontzettend veel kinderen bereiken, zonder dat er heel veel geld aan de strijkstok blijft hangen.

011 is, denk ik, niet zo geschikt voor wat jij wilt. Is dit niet meer iets: http://css-voorbeelden.nl/afbeelding/im ... g-099.html
In principe kun je bij een muisover - stap misschien over op dat woord, toch veel duidelijker en beter dan hover - álles tevoorschijn laten komen. Andere afbeeldingen, details vergroten, noem maar op. In nieuwere browsers zijn ook dingen als draaien, perspectief vervormen, e.d. mogelijk. Dat kan trouwens ook met JavaScript, maar daar houd ik me niet zo mee bezig. En in nieuwere browsers kan dat ook met een vertraging. Bij het voorbeeld uit die link is ook een kleine vertraging ingebouwd.
Maar als je je site snel op internet wilt hebben, zou ik eerst die gewone afbeeldingen neerzetten. Zo'n muisover kun je dan later op je gemak inbouwen. Zelfde voor die vertraging in het menu.

Leuk dat je het 'n beetje leuk begint te vinden!

Oeps, kleine aanvulling: in IE 8 zie je die vertragingen in dat voorbeeld niet, daar openen ze in één keer. In Firefox zou je het wel zien.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Ja, die beroemde strijkstok, he.
Maar ik denk dat je het zo moet zien. Die jongens hebben nog niet genoeg pecunia gegenereerd om een klankkast aan te schaffen.
En tot zolang moeten ze het doen met de strijkstok, die kon er nog net van af. En daar wordt flink mee geoefend om later het "grote" werk aan te kunnen.
En dat kost veel energie al dat gestrijk in de lucht. Dat gaat je niet in de koude kleren zitten. En ondertussen moeten ze natuurlijk wel eten. Want als ze dood gaan kunnen ze natuurlijk niemand meer "helpen".
Het is be-helpen, dat geef ik toe. ;)

Ja, je hebt gelijk, dat was ook wel mijn plan. Eerst de basis en daarna uitbouwen. Zeker die vertraging (transition?). En ik had al wel het idee dat "IE" daar wat problemen mee zou hebben. Ik vertelde het je om nu alvast rekening te kunnen houden met later. Dat er dan geen problemen opkomen in de structuur die vooraf voorkomen hadden kunnen worden.
Maar een simpele muisover op de frontpagina - ik weet trouwens niet of het simpel is, ik had het bij mijn website over de olijfboomgaard wel ingebouwd met wat JavaScript door iemand anders geschreven-, zou nu wel een toegevoegde waarde zijn ivm de aard van mijn werk. En ik heb begrepen dat jij, zo niet alle maar dan toch wel wat mogelijk is, oplossingen in de combinatie van html en css zoekt. Prima idee.

Ik heb 099 even bekeken en dit gaat me toch wel een aantal bruggen te ver.
Dat sla ik nu toch maar even over.

Ik heb begrepen dat in tegenstelling met werken met tabellen, css veel minder data kost. Is het zo dat met css alleen de veranderingen worden gedownload en niet de hele pagina zoals bij tabellen? Dat vind ik wel belangrijk.
En om de HxB van de hele site in balans te houden, dwz mijn content-gedeelte, de rest verandert niet, wordt het tellen geblazen met pixels. HxB afbeelding, padding, border, margin bij elkaar optellen dus.

Ik ga nu verder met de basis te verbeteren. Als ik een resultaat heb zal ik een afbeelding op deze site zetten, dan kunnen anderen (?) daarop reageren.

Ik heb ondertussen nog wat ervaring opgedaan met je site. En ik vind die plotselinge pop-ups (zo heten ze toch?) als je muisovert :? toch een beetje te overdonderend. Het schrikt m.i. een beetje af.
Als je er prijs op stelt, wil ik graag helpen meedenken om je site publieksvriendelijker te maken. Lijkt me ook wel leuk.

Oke, mij tijd zit er weer zo´n beetje op. Back to paradise.
Maandag weer verder.

groet herman
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Ik vergat nog over die toegankelijkheid gisteren, wat ik daarmee heb. Ook eigenlijk niets specifieks. Alleen vind ik dat gebouwen toegankelijk moeten zijn voor invaliden (binnen redelijke grenzen, de Eifeltoren voor 'n rolstoel wordt toch wat lastig). En elke site die echt serieus met css en zo bezig is, propageert al jaren toegankelijkheid. Bij sites is het heel simpel: als je er vanaf het begin rekening mee houdt, is het eigenlijk geen extra werk, of nauwelijks. Bovendien is de spider van een zoekmachine (die indexeert de site) redelijk te vergelijken met een blinde. Dus het is ook eigenbelang om 'n site toegankelijk te maken.
Het is ook een van de speerpunten van w3c, die de standaarden coördineert.
Ik zit zelf trouwens tamelijk veel achter de computer (zal je niet verbazen, grinnik). Ik doe vrijwel alles met het toetsenbord en niet met de muis. Makkelijker en sneller. En voorkomt RSI. Toegankelijkheid via het toetsenbord en niet alleen via de muis is voor mijzelf dus ook 'n soort automatisme. Hopeloos als sites het toetsenbord blokkeren omdat het slecht in elkaar zit.

099 is inderdaad best wel ingewikkeld. Maar het is prima mogelijk om dat later nog in te voeren. Als je zo'n afbeelding als 'n zelfstandig element ziet, kun je later per element via css en zo die effecten gaan toevoegen.

css kost, mits goed toegepast, veel minder data dan tabellen. Maar dat maakt tegenwoordig eigenlijk niet zoveel meer uit. Het gaat om relatief kleine verschillen. Eén thumbnail kan al snel even groot zijn als 'n aantal tabellen.
Html is ontstaan als wetenschappelijke taal, voor wetenschappers onderling. Die hadden geen behoefte aan kleurtjes en mooie letters en noem maar op. Tabellen waren alleen voor echt tabulaire gegevens.
Toen werd het voor websites voor het grote publiek gebruikt. Browsermakers gingen kleurtjes en zo toevoegen. En ontwerpers ontdekten dat je tabellen kon gebruiken om elementen op een bepaalde plaats op de pagina neer te zetten. Daar waren ze helemaal niet voor bedoeld, maar er was geen andere methode.
Toen kreeg je css. Dat is speciaal bedoeld voor opmaak. Dus nu kun je tabellen weer gebruiken waar ze voor zijn bedoeld: kalenders, statistieken, dat soort dingen.
Tabellen hebben twee enorm grote nadelen:
* Ze zijn vaak volstrekt ontoegankelijk voor zoekmachines, spraakbrowsers, e.d. In principe wordt een tabel van links naar rechts gelezen. Bij 'n simpele tabel lukt dat nog wel. Maar vaak worden tabellen voor lay-out genest: een tabel in een tabel in een tabel in ... Op het scherm ziet dat er leuk uit. Maar een zoekmachine, spraakbrowser, enz. ziet alleen de tekst, niet de lay-out. En die leest dat soort tabellen van links naar rechts. Dat is dus ongeveer alsof je 'n krant niet per kolom, maar van links naar rechts, per regel, leest.
* Ze zijn waanzinnig moeilijk te wijzigen. Voor lay-out heb je al snel tabellen nodig, die vijf keer of vaker genest zijn. Als je linksboven iets verandert, stort het rechtsonder in elkaar. 'n Soort kaartenhuis. En als de gebruiker de lettergrootte verandert, zoomt, andere schermgroottes, enz., dat wil je niet zien, wat er dan vaak gebeurt.

Het downloaden staat hier los van. Meestal regelt de hoster dat, maar soms kun je dat zelf aanpassen, afhankelijk van wat je hoster toestaat. Normal genomen downloadt je browser de html. Ziet in de kop 'n verwijzing naar bijvoorbeeld 'n css-bestand. Downloadt dat. Tekst wordt eerst op het scherm gezet. Daarna de afbeeldingen. Dan kunnen mensen vast gaan lezen. Daarom is het ook van belang de maat bij 'n <img> aan te geven, als dat enigszins kan, dan wordt er ruimte gereserveerd. Anders moet de lay-out later weer worden aangepast aan de grootte van de afbeelding en verschiet de hele pagina.
Html en css die zijn gedownload, worden normaal genomen opgeslagen in de cache van de browser. Als je de pagina nog 'ns bezoekt, wordt alleen snel gekeken met 'n soort code of er iets is gewijzigd. Zoniet, dan wordt de opgeslagen html uit de cache gebruikt. Is sneller en spaart verkeer uit.
css net zo. (En JavaScript, en afbeeldingen, en ...).
Een extern css-bestand geldt meestal voor meerdere pagina's. Omdat het wordt opgeslagen in de cache, hoeft het maar één keer te worden gedownload. Je laadt dus per pagina alleen maar de html (en afbeeldingen en zo), maar niet de hele lay-out.
Tabellen staan op elke pagina, dus bij elke pagina wordt de lay-out ook weer gedownload. En dat is veel meer dan alleen html met één keer css.

Maar met de huidige verbindingen is dat steeds minder belangrijk, want het gaat om relatief kleine verschillen. Het gemak in onderhoud is veel belangrijker. Als je je logo heel precies neerzet met behulp van geneste tabellen en je wilt de plaats wijzigen, moet je op élke pagina gaan sleutelen. Met css doe je dat (meestal) in één centrale stylesheet.

Tabellen moeten ook worden geconstrueerd, en dat kost tijd. Vroeger zag je dat ook echt, maar computers zijn al jaren zo snel, dat je echt je best moet doen om tabellen te maken die zichtbaar moeten worden gebouwd.

Die pop-ups, o nee, die blijven :D
Ik heb wel toegevoegd dat je moet klikken. Deze site is juist bedoeld om te laten zien wat je alleen met css al kunt doen. Heel veel mensen denken dat dit soort dingen alleen met JavaScript kan. Het is 'n essentieel onderdeel van de demo, die pop-ups. Als dat je niet nieuwsgierig maakt, dan is deze site misschien niet zo geschikt voor die bezoeker.
Overigens denk ik dat allerlei dingen absoluut beter kunnen. En aangezien jij iets met grafisch ontwerpen en zo doet, neem ik wel serieus wat je zegt. Dus ik sta absoluut open (hoop ik) voor ideeën over verbeteringen. Of andere pop-ups. Maar dat ietwat overvallen worden, dat is dus 'n beetje opzettelijk. Maar misschien heb je suggesties voor 'n vriendelijker overval? "Meneer, zou u het heel erg vinden als ik u ga beroven?"
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Goedemoreg GG, daar gaat ie weer.
Je reactie gelezen en even een kort berichtje.
Ja, die toegangkelijkheid is belangrijk. Daar ga ik zeker nog aan werken. Al lijkt mijn site voor slechtzienden niet zo van belang. Maar het is wel toevallig; in het verre verleden heb ik eens een scenario geschreven voor een promo-video voor een blindenschool en in het kielzog daarvan ook nog eentje voor een blindenbibliotheek. Het schoot me dit weekend weer te binnen.

Wat betreft het gebruik van het toetsenbord ben ik nogal muizerig aangelegd. Maar je opmerking over RSI snijdt hout.

Wat ik bedoelde met de structuur was de html-structuur, ik was bang dat ik dat daarna op elke pagina iets voor de miusover opnieuw moest invoeren, maar ik denk dat je dat wel begrepen hebt.
Als ik het goed begrijp dan roep ik later bij het inbouwen van de muisover de betreffende "class" aan en voeg daar in de css met een verwijzing naar de betreffende foto de code van "hoover" etc. aan toe. Of moet ik in de html de "a href" ook nog een aparte "class" meegeven?
Dat was zo´n beetje mijn gedachtengang en tevens mijn twijfel daarover. En als dat zo is kan ik dat natuurlijk beter nu alvast inbouwen.
Ik heb ondertussen wel voor elk van de 6 foto´s in de L- en R-kolom (140x80; kun je hier spreken over thumbnails?) in de html een aparte "class" ingebouwd. Dan kan ik ze tov elkaar ook iets anders positioneren. Zo strak onder elkaar leek me een beetje te statisch.
Wat ik ook niet goed begrijp, ik heb althans het verschil nog niet kunnen zien, hoe je in de css het beste een class van een foto oproept. Soms zie ik alleen ". {etc}" en soms "img. {etc}".
Kent de ene oproep andere "declarations"¿

Je uitleg over downloaden, tabellen en browsers was weer verhelderend. Zoals met zo veel info die ik gelezen had alvorens met mijn site te beginnen, wist ik er wel iets van maar niet van de hoed en de rand. En het vervelende is dat ik dat nu weer allemaal moet "deleten" in mijn hoofd. Maar de "delete"-knop heb ik nog niet gevonden. Ik dacht dat het m´n puntje van mijn neus was maar dat werkt slechts zeer tijdelijk heb ik moeten constateren.

De slechte of onvolledige info op internet is een probleem -laat staan de valse-, en niet alleen bij dit onderwerp. Meestal zoek ik de bron wel op of check de betrouwbaarheid maar dat lukt niet altijd.

En tot slot: vreest niet. Het was allerminst mijn bedoeling de pop-ups te verwijderen :) .
Misschien zou je ze wel iets anders kunnen positioneren. Ze gaan nu bvb gedeeltelijk voor het venster van de tekst staan. Ik had in 1e instantie helemaal niet in de gaten dat ook dat venster veranderd was. Ik zal er later nog eens goed naar kijken en trachten mijn 1e ervaringen helder op te schrijven. Nu ben ik het wel gewend.

Ik begin nu ook wel een overzicht te krijgen wat ik allemaal fout heb gedaan. Alhoewel jij dat allemaal al wel hebt aangegeven kan ik er misschien hier als "ervaringsdeskundige" een stukje over schrijven "ter leering ende vermaeck" van anderen.
Kunnen ze zich ook weer een kaartje voor de dierentuin besparen ;) .

groet herman
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Hoi,
Ja, ik had wat betreft de toegankelijkheid voor blinden ook al wat vraagtekens bij 'n site met foto-montages. Maar 'n zoekmachine is eigenlijk ook 'n soort blinde...

Er is geen echte maat voor 'n thumbnail. Meestal is het 'n soort kleine voorvertoning van iets groters, maar het wordt ook wel zo gebruikt voor kleine afbeeldingen. Alvast 'n class meegeven aan de foto's kan geen kwaad.
Maar ik weet niet precies waar je de class aan hebt gegeven. Afhankelijk van wat je precies wilt, moet je die misschien aan de <a> of aan de <img> of aan ... geven. Jou images staan elk in 'n div, dacht ik. Als je nou aan die div die class geeft, dan kun je later de img of de a of wat dan ook binnen die specifieke div aanroepen met div.boven a {...} (de <a> binnen <div class="boven">, of div.boven img {...} (de <img> binnen <div class="boven">).

'n Class kun je onbeperkt gebruiken op een pagina. Als je in de css .boven gebruikt, worden álle elementen met die class, of het nou 'n div is of 'n img of wat dan ook, aangeroepen.
Als ik div.boven gebruikt, worden alleen de divs met de class 'boven' aangeroepen, geen <a>'s of wat dan ook met die class.

Die delete-knop op de punt van je neus werkt prima. Je moet hem alleen héél hard indrukken...

Bijdragen zijn in principe zeer welkom. Alleen wordt dit forum dus niet echt heel druk bezocht.

Die pop-ups op 'n (iets) andere plaats, dat is misschien 'n idee. Ga ik heel hard over nadenken. Ik wil toch al allerlei aanpassingen gaan maken voor mobiel. Maar dat moet heel voorzichtig, want het moet allemaal wel blijven werken. Op grotere schermen misschien op 'n iets andere plaats, en op kleinere die pop-ups gewoon weglaten. Mooie puzzel.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Ik heb indertijd begrepen dat de meeste blinden wel iets zien; lichtconcentraties of vage contouren. Dat de ogen van allerhande afwijkingen kunnen hebben, bvb kokervisie kan ik me nog herinneren. Dat is alsof je door een omgekeerde verrekijker kijkt.
En dat is natuurlijk weer heel iets anders dan tunnelvisie waar ook veel mensen last van hebben, vooral zij die nu het monetaire beleid van de EU bepalen.
Ik heb trouwens met genoegen je tekst over de holistobiel gelezen. Een van mijn redenen om iets met mijn olijfboomgaard te gaan doen was ook wel de steeds grimmiger wordende situatie in Nederland en dan vooral in de pers en de politiek na bvb de moord op Theo Van Gogh. Alsof er een ettergezwel losbarste. Alle redelijkheid werd verkracht. De "als je niet voor ons bent, ben te tegen ons" mentaliteit.
Enfin, ik kan er nog pissig van worden.

Wat betreft de site. Wat ik nog graag zou inbouwen is die muisover bij de 6 kolom-plaatjes.
Ze laten een historische foto zien, bvb een totaal van vrouwen op een hooischelf na het werk, en daarvan zou ik bij de muisover een detail, een close-up van de gezichten, uit willen lichten. Later kan ik dan nog eventueel wat verdergaande techniek inbouwen die ook terug te vinden is hoe ik mijn fotocomposities maak.

Ik voeg hierbij toe hoe ik de foto´s in de id=links van de links_container heb gebouwd. Zoals je kunt zien heb ik een a-link gebruikt. Daarmee zou ik natuurlijk een hele nieuwe pagina met de close-up van de foto kunnen oproepen maar dat lijkt me geen muisover.

En over jouw site. Ik weet niet wat je wilt, maar ik neem aan dat je wilt dat zoveel mogelijk mensen die bezig zijn met websites je site bezoeken. Dat lijkt me ook een goed idee, want ik heb hier goede en pure info gekregen. Je legt het in de posts naar mij ook erg goed uit. Ik kan het zelfs begrijpen. Maar wat mij natuurlijk ontbeert is een goede basis. En ik denk dat ik niet de enige ben. Webbouwers met veel ervaring kunnen een foutieve code altijd wel weer rechtbreien. Een pleisterje hier, een spalkje daar en hopsakee, het ziet er redelijk uit. Maar het is niet volgens de richtlijnen van de W3? . En dat is natuurlijk niet de bedoeling.

Voordat ik begon heb ik diverse websites bezocht, een beetje rondgekeken en notities gemaakt. Daarna heb ik bedacht wat ik zoal nodig had en dat van die sites "geplukt" die me aanspraken, oftewel die ik kon volgen. De basis ontbrak bij mij volledig. En omdat de info niet volledig was en gefragmenteerd en vaak niet correct, begreep ik er steeds minder van. Dus ik deed maar wat.
Die van jou ben ik toen ook tegengekomen maar die vond ik voor mij te ver gaan. En dat kwam ook wel door de presentatie. Dat schrok me wel een beetje af. Later ben ik er pas op terug gekomen. Dus - en dat is ook natuurlijk- de eerste indruk is cruciaal.
Maar wellicht pas ik helemaal niet in je doelgroep, mik je op een wat hoger niveau. En dat kan ik me goed indenken.

Enfin hier nog wat html en css.

Code: Selecteer alles

<div id="links_container">
                <div id="links"><!-- hier komen 3 jpeg foto's pm 160x90 -->
<a href="close-up_1"><img alt="smederij" src="amp-017_C10.jpg" class="LK_foto1" height="80" width="140"></a>
<a href="close-up_2"><img alt="vrouwen-hooischelf" src="vrouwen-hooischelf.jpg" class="LK_foto2" height="80" width="140"></a>
<a href="close-up_3"><img alt="opjagen stieren" src="amp-109_C30.jpg" class="LK_foto3" height="80" width="140"></a>
<H4 class="H4_L-onderschrift">Historische -archief- opnames</H4>
                </div>
        </div> <!-- sluit links_container -->


img.LK_foto2 {
padding: 10px;
border:#c0c0c0 15px ridge; 
margin: 40px 10px 30px 30px;
}


img.LK_foto3 {
padding: 10px;
border:#c0c0c0 15px ridge; 
margin: 40px 10px 30px 60px;
}

img.RK_foto1 {
padding: 10px;
border: #daa520 15px ridge; 
margin: 40px 20px 30px 100px;
}
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Nou, eigenlijk wil ik niet zoveel mogelijk bezoekers. Hoewel dat misschien wel vreemd klinkt. Meer bezoekers betekent meer vragen. Ik vind het hartstikke leuk om zo gericht met één site bezig te zijn, maar ik heb de tijd niet om dat voor meerdere sites tegelijk te doen.
Wat dat betreft wil ik m'n site dus ook niet ál te toegankelijk maken. Als de aparte navigatie (inclusief pop-ups) afschrikt in plaats van nieuwsgierig te maken, moet je misschien eerst nog even verder kijken. Wat niet wil zeggen dat dingen niet verbeterd kunnen worden. Zoals dat ik me nooit had gerealiseerd, dat het niet duidelijk is dat je moet klikken op zo'n thumb/pop-up.
Nu, met dat forum, is het rustig wat betreft vragen. Maar toen dat nog per mail ging, lag dat bepaald anders.
Leuk dat je de holistobiel met genoegen hebt bekeken. Ik drijf trouwens ook vrolijk de spot met sommige dingen die ik wel serieus neem. Was ook leuk om te maken, die teksten.

De code. Als de link niet echt naar 'n andere pagina leidt, kun je volstaan met
[codel]<a href="#"><img ...></a>[/code]

Je hebt er nu gewone afbeeldingen in staan. Je kunt er ook afbeeldingen via css in zetten: achtergrond-afbeeldingen. Maar dit is prima, want als mensen nu geen css hebben, of als dat niet goed werkt (mobiel) zien ze in ieder geval de gewone <img>
Via css kun je dan toevoegen, dat er een detail of wat dan ook verschijnt als je over de afbeelding hovert. Zonder css zie je gewoon de afbeelding, en als css (en hoveren) werken, zie je het detail. Je ziet dus altijd in ieder geval een <img>
Dit is niet zo heel ingewikkeld om te maken. Ik geef even het voorbeeld voor één foto, maar ze werken allemaal hetzelfde.
(Ik heb de hoofdletters in de class-namen veranderd in kleine letters, want dat gaat gegarandeerd vroeger of later problemen opleveren.)

Code: Selecteer alles

<div id="links">
<a href="#" title="Vergroting van detail van de foto" class="lk_foto1">
		<img src="eerste-foto.jpg" alt="Mooie foto" width="140" height="80">
	</a>
</div>
Ik heb de class van de img naar de a verplaatst. Dat is nodig om dat het in de css via de <a> wordt geregeld.

Code: Selecteer alles

div#links a {display: block; height: 80px; width: 140px;}
div#links a:hover img {display: none;}
a.lk_foto1:hover {background: url(detail-van-eerste-foto.jpg);}
De eerste regel:
div#links a Alle links binnen div#links. Die krijgen deels allemaal dezelfde css, zo roep je ze alle drie in een keer aan.
display: block; Je moet hoogt en breedte aan de link geven. Daarvoor moet het van een inline-element in een blok-element worden veranderd.
height: 80px; width: 140px; Even hoog en breed als de <img> maken.

De tweede regel:
div#links a:hover img als ik over een <a> in div#links hover. Doe dan iets met de <img> die daarbinnen ligt. Omdat ik verder geen class of zo gebruik, geldt dit voor alle drie de <a>'s binnen div#links.
display: none; Verberg die <img>. Nu komt er ruimte voor een andere afbeelding. Omdat dit stukje voor alle drie de afbeeldingen hetzelfde is, kun je met één regel volstaan. Bij alle drie moet de originele afbeelding worden verborgen, ongeacht welke dat is.

De derde regel:
a.lk_foto1:hover Als ik over de <a> met class="lk_foto1" hover. Nu is de class van belang, want dit moet alleen bij deze <a> gebeuren.
background: url(detail-van-eerste-foto.jpg) Zet als achtergrond de afbeelding detail-van-eerste-foto.jpg in de <a>. Deze jgp is een stukje uitvergroot detail (of wat dan ook) van de originele afbeelding.
Omdat de <a> in de eerste regel even breed en hoog is gemaakt als de originele afbeelding, is deze achtergrond-afbeelding ook even groot.
En omdat de originele afbeelding in de tweede regel bij hoveren wordt verborgen, zie je alleen de achtergrond-afbeelding. Technisch is het 'n heel ander soort afbeelding, voor het oog niet.

Voor de tweede afbeelding vervang je de derde regel gewoon door:

Code: Selecteer alles

a.lk_foto2:hover {background: url(detail-van-tweede-foto.jpg);}
Enz.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Ja, dat is waar, je moet even verder kijken dan je neus, je weet wel, van die delete-knop, lang is en er een beetje mee experimenteren, dan wordt het wel duidelijk.
Je uitleg bij alle codes is ook helder. Tenminste als je er de tijd voor neemt. Het zet alles in verband. En zoals je al eerder suggereerde een basis-cursus is wel zeer wenselijk. Die heb ik nog even gezocht op je site maar kon niets vinden. Of bedoelde je een basis-cursus in het algemeen?
Heb je de vormgeving van je site overigens nog geschreven voor een bepaalde resolutie? (ik heb nog naar de resolutie-instelling in KIT gezocht maar niet gevonden).
Als ik de "css-voorbeelden.nl" frontpagina open in de grote van de browser die ik dan toevallig heb openstaan dan krijg ik de grote rechthoek met de basistekst en daar omheen de kleinere voorbeeld-vierkantjes(?). En dan nog heel veel ruimte er om heen. Mijn monitor is 1920 dus heb ik meestal een tamelijk grote browser open staan.
Voor mij zou er dus genoeg ruimte zijn om de pop-up onder de rechthoek en voorbeeld-vierkantjes te plaatsen. Maar dat geldt natuurlijk niet voor iedereen.

De code.
Ik zal proberen niet meer te zondigen met kleine- en hoofdletters. Het geldt dus niet alleen voor de html-tags maar ook voor de benamingen van "classe" en "id" etc.

Ik heb de code met je uitleg doorgenomen en alles klinkt me logisch. Dus toch de "classe" in de a-link benoemen, waaraan ik wel gedacht maar uiteindelijk niet gedaan heb.
Maar op het ogenblik zou ik dus zoiets absoluut niet kunnen construeren. Daar heb ik toch wat meer ervaring voor nodig. Ik moet me eerst de logica eigen maken. Dat moet, lijkt me, bijna een automatisme worden.

Een code begreep ik niet zo best of ik had twijfels. Maar pas nadat mijn 1e versie niet werkte :oops: .
Bij de url-code in de css gebruik je &#40; en na "naam-nieuw-plaatje.jpg"&#40;;
Waar verwijst dat naar?
De # toch niet naar de a href"#" in de html? Want daar had ik automatisch (nou ja, bijna) de naam van de detail-foto ingevuld (ja, ja met jpg existentie) die na de muisover zou moeten verschijnen .

Ik heb eerst in de html en css de hoofd- door kleine letters vervangen natuurlijk- en de basis gecontroleerd. Dat werkte. Vervolgens # terug gezet, etc, etc. Van alles geprobeerd, maar het detail-plaatje na muisover werd bij mij maar niet zichtbaar. Wel verdween het bovenste plaatje en verscheen bij muisover de "title" tekst van het detailplaatje.
Zou het aan IE8 liggen of heb ik een verschrikkelijk stomme fout gemaakt?
Heb jij een suggestie waar ik zou moeten zoeken?

html
<div id="links_container">
<div id="links">
<a href="close-up_1.jpg" title="Vergroting van detail van de foto" class="lk_foto1">
<img src="amp-017_C10.jpg" alt="Mooie foto" width="140" height="80">
</a>

css
img.lk_foto1 {
padding: 10px;
border:#c0c0c0 15px ridge;
margin: 40px 10px 30px 50px;
}
div#links a {display: block; height: 80px; width: 140px;}
div#links a:hover img {display: none;}
a.lk_foto1:hover {background: url&#40;close-up_1.jpg&#41;;}


groet, herman
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

ik zie dat er wat is weggevallen in de vorige post.
De code die ik niet begreep was: &#40 en &#41 maar ik begrijp nu, het licht ging plotseling aan, dat het een code is voor een "vreemd" leesteken.
Jezus, ik geloof dat ik aan vakantie toe ben.
herman
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Opnieuw wggevallen. Ik ga het doorkrijgen :oops: .
Wellicht begrijp je het al.
Dat wordt een hele lange vakantie.
In gewone tekst dus: ampersand, hekje en het getal 40 en 41.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Wat ik eigenlijk doe (probeer te doen) is gelijk wat basis-info meegeven over dingen, waarvan ik in mijn jaren op forums en zo heb gemerkt dat de kennis daarvan heel slecht is. Zoals over toegankelijkheid. 'n Echte cursus staat niet op mijn site. Er staan wel links naar cursussen op de pagina met links onder http://www.css-voorbeelden.nl/links.htm ... -overzicht
Omdat dat niet te scheiden is, staan daar ook allerlei specificaties.
Met stip de beste Nederlandstalige handleiding is http://www.web-garden.be/cursus-html/cursus-html/
Die is al weer 'n paar jaar oud, maar de basisbegrippen zijn nog precies hetzelfde.
Een uitstekende Engelstalige handleiding staat op http://dev.opera.com/articles/view/1-in ... dards-cur/
Die laatste begint met dat het verouderd is, maar dat is onzin. Het hele artikel is verplaatst naar de site van w3c en veranderd in een wiki: iedereen kan bijdragen leveren. Daarmee is het helaas gelijk geen stap-voor-stap-cursus meer. Maar op deze site staat nog de oorspronkelijke cursus. En ook daar geldt dat de basis gewoon nog hetzelfde is.

Deze site stamt nog uit de tijd, dat er nauwelijks mobiele apparatuur was. En toen was hij héél modern. En dan treedt dus de wet van de remmende voorsprong op, zucht. De weergave is goed op een breedte van 800 t/m 1280. De breedte past zich automatisch aan. Bredere schermen waren er toen nog nauwelijks. Nu wel. Ik heb dus onlangs de breedte beperkt, omdat de inhoudsopgave ergens vér buiten de tekst kwam te staan.
Het is dus niet geschreven voor één breedte, maar flexibel.
Inmiddels zijn er tig mobiele apparaten in alle soorten en maten. Ik ben aan het voorbereiden dat de site daar ook op te zien is, maar dat is 'n enorme klus, omdat er op deze site in verhouding waanzinnig veel css is gebruikt. Alle voorbeelden zijn in feite 'n volledig andere pagina, terwijl op 'n normale site de meeste pagina's enigszins dezelfde lay-out hebben.
Als een browser breed genoeg is, is het inderdaad 'n goed idee om de pop-ups buiten de tekst te zetten. Inmiddels kun je de breedte van 'n browser ook met css opvragen, dus dat geeft mogelijkheden.
Ah, en op 'n 1280x1024-scherm kunnen de pop-ups ónder de tekst komen. Ik moet dat nog wel even heel goed bekijken natuurlijk.
Overigens komen op mobiele apparaten die pop-ups toch te vervallen, waarschijnlijk, omdat hoveren daar niet (goed) werkt. En ik wil geen JavaScript gebruiken, omdat de bedoeling van de site juist is te laten zien wat er alleen met css/html kan.

* Die hoofd- en kleine letters geldt voor álles in de code. Behalve letterlijke teksten zoals in de alt, in de title, gewone tekst, e.d. Windows maakt vaak geen verschil tussen hoofd- en kleine letters, andere systemen wel. Daardoor is de kans heel groot dat je 'n hoofd- in plaats van 'n kleine letter gebruikt, maar dat op Windows niet merkt. Maar, nog los van bezoekers, de meeste sites staan op Linux-servers, en die maken wel onderscheid.
In css kun je prima 'n koppelteken gebruiken: class="eerste-foto". Dat kan ook prima in bestandsnamen voor foto's en zo. Zoekmachines zien eerste_foto als één woord, maar eerste-foto als twee woorden. In ieder geval geldt dat voor Google.

* Dat stukje code wat jij niet begreep, begrijp ik ook niet. Ik heb syntax-highlighting op dit forum gezet, zodat je mooie kleurtjes en zo in de code krijgt. Voor css gaat dat dus eruit. Het blijkt dat een haakje ( wordt vervangen door een html-code. Dat is de &#40; die je ziet, dat is 'n bepaald soort code om 'n haakje weer te geven.
Ik heb het al aangepast. Waar &#40; stond moet je 'n ( lezen, en waar &#41; stondd met je ) lezen.
Wel 97 vloeken. In de gewone tekst worden die codes door haakjes vervangen. Dus de regel hierboven is onzin.
Waar

Code: Selecteer alles

& #40;    resp.    & #41;
stond moet je ( resp. ) lezen. Dus background: url(naam-van-foto.jpg);
Als je dus de naam van de jpg gewoon tussen haakjes zet, zou het moeten werken. Geen stomme fout van jou dus, een koe van een bug in die syntax-highlighting.
Die syntax voor css gaat eruit, want dat is geen werken zo.

En dan gaat die xhtml er ook uit, want die verkleint voortdurend de letters. Grrr.

* Nee, het is dus geen code voor een vreemd leesteken en ook geen reden voor vakantie. Het is dit stomme forum dat jouw codes, als je ze gewoon als tekst intypt, in haakjes verandert. En dat haakjes verandert in codes.
Dat is te zeggen: het is wel 'n code, maar 'n html-code. Die je nooit gebruikt, omdat je in html gewoon haakjes mag gebruiken. Maar het is 'n html-code, en die werkt niet in je css. Voor de zekerheid nog 'n keer jouw regel goed:

Code: Selecteer alles

a.lk_foto1:hover {background: url(close-up_1.jpg);}
Als ik gewoon

Code: Selecteer alles

 gebruik, en geen css, dan gaat het goed. [code] zit standaard in het forum, dat css en xhtml is 'n uitbreiding. Komt er nooit meer op. Ik zat dus ook naar jouw vraag te kijken: wat bedoelt-ie nou, daar staan toch gewoon haakjes? Hoe krijg je mensen gek, grinnik.

* Even terzijde: het is wel aan te bevelen je code nog even op zoveel mogelijk andere browsers te testen, voor het echt online gaat. IE 8 houdt zich wel aan de standaard, redelijk in ieder geval, maar er kunnen altijd afwijkingen optreden. Als dat lastig is, kan ik dat ook wel even voor je doen.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Poehhh, thanx man.
Ik dacht even dat mijn bovenkamer aan het doordraaien was.
Heb voor de zekerheid gisterenavond al wel even in de etalage van het reisburo gekeken.

Dat van Google wist ik niet. Handig om te weten bij een zoekopdracht.

Ja, dat flexibel snap ik wel. Maar als je dus een breed scherm hebt (bvb full HD) dan wordt het design waar je bewust voor gekozen hebt dus vervormd. Dwz de ruimtes worden veel groter en de verhoudingen dus anders. Of zie ik dat verkeerd?
Ik zelf wilde in 1e instantie een design maken in 16:9 met vaste verhoudingen. Dat is nu niet meer zo belangrijk maar ik vroeg me af hoe je dat dan voor elkaar krijgt.

Voor de volledigheid: Ik heb de code veranderd, wel jammer van de mooie kleurtjes, en de muisover werkt. :D

Op naar de volgende klus. Ik ga nu proberen video in te bouwen. Ik wil namelijk 3 korte voorbeelden van mijn composities (ik noem ze expres geen produkties) van pm 20 a 30 sec kunnen laten zien. Anders moet ik mijn bezoekers direct naar Vimeo of Xposure-room sturen, en de kwaliteit daar laat voor mijn werk te wensen over. Ze gebruiken daar een standaard compressie en ik wil liever de compressie aanpassen aan de aard van de door mij gemaakte video (lees "moving images").
Uiteraard in klein formaat maar wel met een redelijke bitratio, zodat het een beetje een vloeiende vertoning wordt.

Gisteren wat info opgezocht. En daar gaat ie weer. je moet me maar corrigeren als ik het mis heb.
De verschillende browsers en wat ze aan kunnen.
Daar hebben we het tot nu toe veel gebruikte "flash", nogal onveilig en de nieuwe mogelijkheden met "html-5".
Uiteraard kies ik liever de html-5 versie, maar IE8 ondersteund dat weer niet heb ik begrepen. En mischien is het een obsessie van mij maar ik wil graag dat mensen met IE8, nogal veel lijkt mij, mijn site redelijk goed kunnen zien (in de linker benedenhoek van mijn site heb ik al wel gezet: "With firefox you get the best" (meer bedoeld voor een latere versie met transition en omdat ik die browser wil aanbevelen). Niet dat ik een hekel heb aan Bill, aan zijn OS, aan het virusvergiet, aan de instabiliteit, etc. , helemaal niet hoor. Echt waar. Wat alleen echt vervelend is, is dat mijn editing programma (sony vegas) dus niet op linux werkt.
Elke dag weer kijk ik naar de linux versie uit. Maar het zal commercieel gezien nog wel niet interessant zijn.

Bedankt voor de correctie. Ik ga aan de slag.
Groet herman
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Sorry voor de vakantie die nu niet doorgaat. Ik heb me ook echt wezenloos lopen staren naar die verdwijnende en verschijnende haakjes. Tot ik het patroon van de bug had, toen was het snel opgelost.
Soms leg ik misschien iets te veel uit, maar ik weet niet wat jij wel of niet weet, vandaar. Zoals over flexibel.
Die vaste verhoudingen krijg je gewoon niet voor elkaar. Tot voor 'n paar jaar terug nog wel, min of meer. Dan kun je met px werken: een vaste breedte en een vaste hoogte. Maar dat leverde dus veel witruimte op, of je moest scrollen. Verder had je nog wat verschil in ppi (pixeldichtheid) tussen 'n Mac en 'n PC, maar dat maakte niet zo heel veel uit. Tegenwoordig heb je de wildste ppi's op mobiele apparaten. Dus dit is ook geen waterdichte methode meer.
Vaste verhoudingen bestaan eigenlijk niet. Als je naar mijn site kijkt, zie je dat de middenkolom smaller wordt op een smaller scherm. (Ik heb alleen nooit rekening gehouden met onwijs brede en smalle schermen, want die bestonden nog nauwelijks. Dat moet ik nu dus inhalen.)
Als je uit de grafische wereld komt, moet je daar gewoon enorm aan wennen. Vaste verhoudingen bestaan niet. Als je iets fantastisch passend hebt gekregen voor 'n bepaalde breedte, dan gaan mensen zoomen en de lettergrootte veranderen.
Maar als je er eenmaal aan gewend bent, is het hartstikke leuk en nuttig, dat alles zo flexibel is.

Je kunt in theorie nog wel een vaste verhouding maken met behulp van JavaScript of zo, maar verstandig is dat niet. Bezoekers winnen gewoon altijd van jouw vaste verhoudingen.

Video is wat lastig. Niet alleen dat IE 8 geen html5 ondersteunt, maar de verschillende browsers die dat wel doen hebben verschillende formaten nodig. Je moet dus je film in 'n aantal formaten hebben. En flash voor de browsers die dit niet kunnen ondersteunen.
Het is een van de dingen die ik over niet al te lange tijd weer ga bekijken, maar het voorbeeld op mijn site is er al weer 'n tijdje af, omdat het zo ongelooflijk snel veranderde. De rust begint nu 'n klein beetje terug te keren, lijkt het. Het beste kun je kijken op sites die meer gespecialiseerd z
zijn.

Op http://www.css-voorbeelden.nl/links.html#a-html-embed kun je links vinden naar sites waar je video gratis kunt converteren.
Betrouwbaar Nederlands artikel over <video>-tag: http://fronteers.nl/blog/2011/12/html5- ... -overzicht
Idem Engelstalig: http://diveintohtml5.info/video.html en http://camendesign.com/code/video_for_everybody
De laatste is echt 'n soort standaard.

Ik heb er het volste vertrouwen in dat jij ook dol bent Bill en zijn OS, anders zou ik niets met je te maken willen hebben :D
(Ik schrijf zelf ook nóóit onaardige dingen over IE :roll: )
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Nou GG, dat doet me deugd.
En de beste remedie om niet in negatieve kritiek te vervallen is afstand van de zaak in kwestie te houden.
Maar dat valt niet altijd mee. Zie ondergetekende.

Ik heb de door jou genoemde sites bekeken, heb een conclussie getrokken en ben gisteren de hele dag, jawel, met het inbouwen van een mediaplayer bezig geweest. Ik wil dus iets waar IE8, waarvan ik denk dat die nogal veel gebruikt wordt, mee uit de voeten kan. Dit vooral in Spanje omdat ze hier nou niet het nieuwste van het nieuwste hebben. Daar is geen geld voor en ik zou de illegale versies niet de kost willen geven, als ik zo vrij mag zijn me zo uit te drukken. 8-)
Daarna heb ik internet afgestruind om te zien wat er zo allemaal in de "aanbieding" is en met welke technieken dat gerealiseerd zou moeten worden.
Met nadruk op "zou moeten worden". Ik heb nogal wat gevonden maar zoals meestal is de info vaak gefragmenteerd, ieder heeft zo z´n eigen manier en die zijn er nogal wat. Met en zonder javascript. En tenslotte heb ik wel wat werkend gekregen. Een Q-versie zonder JS die hij ophaalde van Macromedia met een behoorlijk lange laadtijd en zonder startknop. Dat is me net iets te spontaan. En ook eentje die me wel beviel maar daar ging het de 2e keer, toen ik een video van mij wilde vertonen, iets mis want de KIT "ontplofte" ook spontaan. Na een heleboel "error" berichten te hebben weggeklikt die ik heb geprobeerd te ontcijferen, heb ik nog een paar pogingen gedaan, ook in de "orginele" versie, maar het werd niet meer wat het was. Tja, het leven van een "websitedeveloper" of hoe dat ook mag heten gaat niet over rozen. :(

Even resumerend:
Ik bied een video aan: een stapel data in een formaat, bvb mp4/aac (voor DVD gebruik ik meestal mpeg2 met een aparte render voor de audio). Dit kan de geinteresseerde bezoeker dan met zijn eigen media-player afdraaien. Of "ik" lever er een mediaplayer bij. Die moet dan ook gedownload worden. Dat heet dan embedded (toch?). Van welke site die media-player dan vandaan komt maakt qua snelheid lijkt mij niet zoveel uit. Alleen als je ´m op je eigen site (server) hebt staan kun je het beter controleren en evt aanpassen aan je eigen wensen. En ook reclameboodschappen kun je dan vermijden. Die van flash wordt breed gedragen maar je moet dan het flv formaat gebruiken.
Zie ik dit alles goed? Of steekt het iets anders in elkaar en moet ik ook nog op andere zaken letten?

(Over de render- en of de encoderingskwaliteit in flash moet ik me nog even buigen. Mijn SV editor, die toch veel in huis heeft met goede kwaliteit, heeft die optie niet. Wellicht een teken aan de wand. X-posure room bvb werkt ook met flash en die kwaliteit vind ik niet om over naar huis te schrijven. Maar dat kan ook aan hun automatische en zuinige de- en encodering liggen. )

Ik heb tenslotte een lichte voorkeur voor de FLV-player (Jeroen Wijering), welliswaar flash en enigzins gedateerd. Maar liever nog iets wat je kunt fixeren in een vaste HxB (ik dacht gezien de bestandsgroote aan pm 240x135, hooguit 400x225, is dus 16:9). Want als het effe kan trekken "ze" het beeld toch uit elkaar en liefst zo groot mogelijk en daar is mijn renderkwaliteit niet op berekend.
Dat leek me de beste oplossing voordat HTML5 wat breder gedragen wordt.

Ik hoop dat je hierover je licht nog even kunt laten schijnen. Dan ga ik nu verder met de foto´s in de kolommen, die moet ik allemaal opnieuw aanpassen, want ik heb een leuk visueel effect gevonden. Jammer dat ik je het nog niet kan laten zien.
Bij de zichtbare totaalfoto (142x80) gebruik ik een kleine padding (4px) en een wat bredere border (bvb "ridge"). Bij de muisover haal ik de padding weg en de iets grotere detailfoto (150x88) wordt dan zichtbaar. Dan lijkt het net alsof het detail naar voren komt (ik heb niet de ilussie orgineel te zijn, maar toch ...). Bij mij werkt het. En nu maar hopen dat W3C dat allemaal wel goed vindt.

Deze techniek met dank aan jou. Ik zal hem met jouw instemming het "Goeroegoeroe-effect" noemen.

Bovendien heb ik besloten de kolomfoto´s iets groter te maken (180px), want de "details" in de totaalfoto vallen te veel weg. Tenslotte moet er voor het oog een soort ankerpunt zijn dat duidelijk maakt dat het om dezelfde foto gaat. Maar dat heeft dan wel weer een effect op de lay-out voor monitoren met een mindere resolutie, de kolom is tenslotte maar 27%. En ik wil graag ruimte houden voor mijn bezoeker. Dat is goed voor de ruimtelijkheid in zijn cerebrum opdat een plotseling opstekende en verfrissende wind -sommige mensen spreken over tocht- enige speelruimte heeft. Zo is er altijd wel weer wat.
In afwachting etc. etc. ;)

herman
Plaats reactie