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...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Hoi,

Eh, tja, alleen is het goeroeboeroe. In heb de pest aan de meeste goeroes. De meeste, want er zijn ook enkele integere. Mooiste kop die ooit iemand boven 'n artikel van mij had gezet: 'Geen goeroe zonder giro'. Dat vat de meeste goeroes aardig samen. En in mijn jeugd had je 'n radio-uil: oeroeboeroe. 'n Hoorspel over Eucalypta de heks. Ik was helemaal wild van oeroeboeroe. Vandaar die naam. Alleen denkt vrijwel iedereen nou helaas dat ik goeroes fantastisch vind. Tja.

Video daar ga ik even helemaal niets over zeggen. Die site met Video for everybody heeft code, die algemeen als uitstekend wordt gezien. Ik ga me daar binnenkort weer in verdiepen, maar omdat het zo snel is veranderd in korte tijd, was het voor mij niet meer bij te benen. Op mijn site verwijst het voorbeeld ook alleen maar naar andere sites, op dit moment.
Die site Video for everybody http://camendesign.com/code/video_for_everybody heeft voorbeeldcode. In principe wordt voor de nieuwere browsers html5 gebruikt (video die de browser zelf afspeelt). En voor IE 8 en andere oude browsers wordt teruggevallen op flash.

Ben benieuwd hoe het totaal er nu uit ziet!

Edit: wat ik steeds vergeet: IE 8 is inderdaad nog steeds heel belangrijk. Op XP kan IE 9 niet worden geïnstalleerd, bijvoorbeeld. Die Video for Everybody gaat zelfs terug tot IE 6 en werkt ook voor iPad, Android, e.d.: http://camendesign.com/code/video_for_e ... /test.html
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Pardon Goeroeboeroe, had ik me even verslikt in een "beetje" en een "geetje" uitgeboerd.

Ja, Eucalypta kan ik me nog wel herinneren. Vaag welliswaar.
Dat waren nog tijden. Pipo de clown en Mamaloe die kan ik me beter herinneren en "Kabouter huppeldepup", de naam is mij even ontschoten. Ik ben ook niet meer een van de jongsten, maar jong genoeg om d´r nog wat van te maken.

En nee, ik dacht niet dat jij goeroe´s fantastisch vond, die conclussie had ik nog niet getrokken. Wel jammer dat de giro verdwenen is. Opgeslokt door een grote vis. Misschien daarom dat er zo weinig goeroe´s meer zijn. Tenminste ik kom ze niet tegen.

Oke, ik ga die site Video for everybody nogmaals goed bestuderen en dan maar kijken of ik er iets uit kan halen dat me bevalt en dat werkt (bij mij).

Dus je onderschrijft mijn idee dat IE8 nog erg veel wordt gebruikt en dat mijn (voorlopige) keuze voor flash niet onterecht is.
Ik vind het ook jammer maar het is niet anders.
Je hebt me niet gecoorigeerd wat betreft het "embedded" verhaal dus ga ik er van uit dat dit in grote lijnen wel klopt.
het is dus zaal een mediaplayer te gebruiken die "licht in data" is en betrouwbaar. Die kun je overal vandaan halen maar ik prefereer om eerder genoemde redenen deze min of meer zelf te beheren.

Hoe ziet het totaal eruit? Het gaat de goede kant uit. But work to do.
Gelukkig heb ik de manier ontdekt om in KIT het ontwerp in andere resoluties te previewen.
Voor de liefhebber: "Windows" > "resize". Daar staan een aantal voorkeur-resoluties met onderaan de link "add/modify resolutions". Die brengt je in het tabblad van "preferences" (ook te bereiken onder "edit) tabblad"preview" en in "preset window sizes" (waar er al een aantal staan) kun je dan zelf instellen in welke resolutie je het wilt zien.

Ik heb voor 1000x700 gekozen (misschien nog iets aan de ruime kant) om mijn verhoudingen te kunnen afstellen. Zoals je eerder al memoreerde komt de menubalk met de tekst in de hoofdmenuknoppen er krapje bij te zitten. De lettergrootte heb ik dan ook een piepje kleiner gemaakt.
Enfin, zo zijn er nog heel wat "afstellingsproblemen".
Ook de keuze van de maat van de afbeelding van het diafragma in de content bij het openen van de site valt me zwaar. Als het passend is voor de 1000 versie is het een draak voor bvb 1920 schermen. Of kun je dit ook nog flexibel instellen? Je moet tenslotte in de html de "hight" en de "width" instellen en een afbeelding met diezelfde afmetingen oproepen. Ik ga wat in de css proberen. Het is voor mij een kwestie van "try and error". Maar dat zul je ondertussen wel begrepen hebben.
En wat ook nog een probleem is, zijn de tussenruimtes van de submenu´s. Als er zich achter die ruimte tekst bevindt, klapt het menu dicht. Ik heb geprobeerd het op te lossen met ipv de tussenruimtes een transparante tussenruimte in de laatste li´s te bouwen (zodat de blokjes van het verticale submenu aan elkaar sluiten) met een apparte "class" in de betrefende "li" die die tussenblokjes transparant maakt, maar dat is me nog niet gelukt. Ik weet niet eens ´ns of het kan.

Ik ga nu verder met de content -tekst en plaatjes etc-, dan krijg ik een beter beeld en daarna de afstellingen (verhoudingen) nogmaals bekijken en aanpassen. Maar ik ben bang dat het nog even gaat duren. Ik hoop snel een provider te vinden waar ik hem alvast kan plaatsen (met ww) zodat wat mensen het kunnen zien en kunnen reageren/adviseren, dat scheelt ook.
Je hebt me geweldig geholpen. Nogmaals bedankt.

herman

Ps: En mocht je deze kant uitkomen dan ben je altijd welkom, ook om je "eigen olie te plukken". Dat is een project waar ik me hierna mee bezig hoop te gaan houden. En dat is tenslotte de reden dat ik hier vertoef. De "moving images", die ik overigens leuk vind om te maken, is om hier wat geld te kunnen verdienen voor mijn levensonderhoud.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Vroeger zworf ik nog wel 'ns, maar tegenwoordig vind ik Vlaanderen al vreselijk veel buitenland. Prima als buitenlanders hiernaartoe komen, maar ik hoef niet meer zo nodig naar hun toe :D Evengoed bedankt voor je uitnodiging!

IE 8 wordt gewoon nog heel veel gebruikt. Dus of je wilt of niet, daar moet je rekening mee houden. (En ik wil dat eigenlijk helemaal niet, want als het aan mij lag zou IE helemaal niet meer gebruikt worden, totdat Microsoft normaal gaat updaten, grrr)

Er is even 'n misverstandje over flash en zo.
'embed; wil gewoon zeggen dat je 'n filmpje of zo hebt geplaatst in je html, dus dat je niet naar 'n andere site gaat via 'n externe link om het af te spelen. Het wordt op jouw site afgespeeld, al dan niet vanaf 'n andere site. Je kunt ook 'n filmpje op youtube embedden in jouw pagina. Dat het dan in werkelijkheid op youtube staat, zal de bezoeker nauwelijks of niet merken. Formeel gezien is 'n <img> ook 'n embedded iets: een afbeelding die in de html is gezet.
html5 geeft de mogelijkheid om video in de browser af te spelen. Elke nieuwere browser kan dat. IE 9 en later kunnen het ook.
(Om je pagina html5 te maken hoef je, als je netjes css hebt gebruikt, alleen het doctype maar te veranderen in <!DOCTYPE html> )
Je gebruikt daarvoor de tag <video>
Helaas zijn de makers van browsers het om commerciële redenen niet eens geworden over één formaat. Vandaar dat je je film in 'n aantal formaten moet aanbieden. Daarnaast heb je dus nog IE8 en eerder, die alleen flash kunnen weergeven. Althans: vrijwel iedereen met IE8 en eerder heeft 'n plug-in voor flash geïnstalleerd, voor andere formaten ligt dat (veel) lager.
Video for Everybody heeft dat allemaal opgelost. Nieuwere browsers gebruiken <video> in het voor die browser juiste formaat. Als niets werkt, wordt als laatste flash aangeboden. En als ultieme redding kan de hele video gedownload worden.
Voor een desktop maakt het niet zoveel uit: vrijwel iedereen heeft flash geïnstalleerd. Maar voor mobiel maakt het wel uit. Flash werkt niet op 'n iPad of iPhone, en ook niet in veel andere mobiele browsers. <audio> werkt vaak wel.
Ik hoop niet dat je heel veel tijd bent bezig geweest met dat inbouwen van een video. Het idee was eigenlijk, misschien was ik daar niet duidelijk in, dat je gewoon de code van Video for Everybody zou kopiëren en aanpassen voor jou. Die code is vreselijk goed.
Nu de rust weer 'n beetje is weergekeerd, ga ik binnenkort daar ook weer 'n Nederlandse uitleg voor maken, maar dat zal toch nog wel even duren, gezien dat ik de onhebbelijke gewoonte heb ook nog te eten en slapen en zo.

Het is me niet helemaal duidelijk of die 1000 px breedte nou vast is of niet, want je schrijft ook dat het vreselijk is op een breed scherm.
Je zou kunnen overwegen om er dan een maximumbreedte aan te geven. Ergens moet je die 1000 px breedte hebben opgegeven aan een wrapper of zo. Of misschien aan de header, footer, enz, apart. Maakt niet zoveel uit. Als je op al die plaatsen toevoegt:

Code: Selecteer alles

max-width: 1000px;
zal het niet breder worden dan 1000 px en blijven de verhoudingen dus goed.
Eventueel kun je nog toevoegen:

Code: Selecteer alles

margin: 0 auto;
Voor onder en links niets opgegeven, dus er staat eigenlijk 0 auto 0 auto: boven en onder geen marge, links en rechts auto. Nu staat het altijd in het midden, ongeacht hoe breed het scherm is.

Dat het menu dichtklapt op de tussenruimten is waarschijnlijk 'n IE-probleem. IE 7 had dat heel veel, IE 8 minder en IE 9 nog sporadisch. Ik kan daar even naar kijken als de code online is (of het betreffende menu even hier wordt neergezet, html en css). Je kunt het ook zelf proberen. Mogelijk helpt het als je 'n achtergrondkleur aan de <li> waarover gehoverd wordt geeft. Dus het element waar :hover bij staat in de css. Als je dat even lichtblauw of zo maakt, en het werkt, weet je gelijk zeker dat het weer ongein van IE 8 is.
Dan kun je gewoon als background-color transparent opgeven. Mogelijk werkt het dan.
Als dat niet lukt, kun je 'n background-image proberen. Volledig doorzichtige gif maken van 1 x 1 px. Dus heel klein. Omdat de background-image wordt herhaald, vult die toch de hele <li>. Meestal werkt het dan wel goed in IE.

Ik zie trouwens bij overlezen dat je al op de goede weg zat hiermee. Alleen moet het bij het element waar de :hover staat. Dat is bij jou
#nav li
(Dat alle geneste <li>'s uit de submenu's het dan ook krijgen, is geen probleem.)
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Een vreemdeling in Vlaanderland?
Toen ik dat las, schoot me dat hitje van "Belgie" door het hoofd. Was het nu van "Doe-maar" of "Laat-maar"? :)
Maar ik ben blij dat je me even gecorrigeerd hebt.

Ik merk dat ik in het algemeen met de kennis die ik heb meestal wel weg kom maar als het zo specialistisch wordt zoals het bouwen van een website dan schiet het dus duidelijk te kort. Ik doel dan bvb op "embed".
En, html5 wordt dus <!DOCTYPE html> en niet <!DOCTYPE html5>.

Over jouw suggestie van max 1000px te definieren moet ik nog even nadenken. Wellicht een goed idee want ik probeer het basisdesign daarop af te stemmen. Ondertussen wel enkele compromissen gemaakt.

Ben nu nog even met de content -tekst, fotokeuze en positionering tekst en afbeeldingen- bezig geweest en dat valt nog niet mee.
En tot overmaat van ramp werkt opeens mijn "Goeroeboeroe" effect ;) niet meer goed. Bij de beginfoto en de muisover wordt het detailplaatje op de achtergrond niet meer "border"-vullend en krijgt een repetitie aan de rechter en beneden rand. Alsof de omlijsting van de "border" groter is geworden. Ik had het voorgrond-plaatje gedefinieerd met 180x101 en het detail-plaatje (bij muisover) als 190x109. (5px (dus 10px per zijde) is nl mijn padding die ik bij de muisover weg heb gehaald. Het zal wel niet W3C bestendig zijn).
Ik was namelijk zo geconcentreerd bezig met het positioneren van de afbeelding van het diafragma, die ik nu klein heb gemaakt (160x160), in het midden van de content-box (zo noem ik maar de "div id content" in de "div id content_container", ik weet niet of dat correct danwel begrijpelijk is). En opeens zag ik dat het mis ging. Ik weet niet wat ik stiekem/onbewust heb veranderd of waardoor het eens zo prachtige effect beinvloed kan zijn geworden. Dat hoop ik vandaag ook nog te corrigeren.
Enfin, zo gaat het bij mij vaak, het is drie stappen vooruit en dan weer 1 stap achteruit (en soms wel 2).

In bvb de content-box van "filosofie" probeer ik tekst en enkele afbeeldingen tov elkaar goed te positioneren, ik heb ergens gelezen hoe dat moet en dat ga ik nog maar eens herlezen.

Ik ga aan de slag.

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

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Het doctype wordt inderdaad gewoon <!DOCTYPE html>. Die versie is altijd al onzin geweest, maar moest worden gebruikt, omdat het anders geen geldig doctype was.
Mogelijk speelt bij die muisover de padding mee. Een achtergrond (kleur, afbeelding, ..., alles) wordt ook achter de padding weergegeven. Dus als je breedte 180 px is en de padding 30 px (ik roep maar even wat), moet de afbeelding 30 + 180 + 30 = 240 px breed zijn om herhaling te voorkomen. Achter een marge wordt de achtergrond niet weergegeven, alleen achter de padding.
Leuk trouwens dat je zoveel zelf uitprobeert. Leer je ook verreweg het meeste van.

Was die hit België niet van Het Goede Doel? De liedjes van Doe-maar ken ik beslist allemaal via de kinderen van m'n toenmalige vriendin, van hun is het niet.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Zo, ik heb het gehad. Morgen verder.
Het Goede Doel? Ik denk dat je gelijk hebt.

Het een en ander is gelukt. Hopen dat het er morgen nog net zo staat.
Ik heb in de html (bij de muisovers) het voorgrond-plaatje en het achtergrond-plaatje elk een "class" meegegeven om de borders beeldvullend te krijgen. Daarna moest ik om na de muisover het plaatje op dezelfde plaats te krijgen een van de classes wel corrigeren met H- en V-negatieve waarde. Bij elke aanslag van de toetsen voelde ik de hete adem van W3C in mijn nek.
Dat wordt smullen straks voor de puristen.

Ik heb wel de indruk dat ik van Rome naar Milaan ben gereisd over Moskou. :)

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

Re: dropdownmenu met ZIP

Bericht door herman »

Daar ben ik weer.
Het vordert. Al is het langzaam.
Ik heb toch nog grote problemen om de "class" op de juiste plek te krijgen.
Komt misschien ook wel omdat ik wellicht overbodige code gebruik.

Het probleem doet zich voor bij de "a "links. Ik heb een foto bijgesloten waarop ik het visueel heb gemaakt en ook een stukje code.

Het drama speelt zich af in de content-box. Had net zo goed ergens anders kunnen zijn, maar goed.
In deze content-box staat tekst en 2 foto´s.
De tekst heb ik met de class "tekstomloop" om de foto´s laten lopen. En de class "foto-berlijn" heb ik gegeven aan de "detail-foto" die te voorschijn komt als de muis over de "voorgrondfoto" beweegt. Dit om de "detail-foto"precies onder de voorgrondfoto te krijgen. Ik denk dat ik dus hier al iets fout doe, want dat zou automatisch moeten gebeuren lijkt mij. Maar het werkt.
Daarna heb ik onder aan de pagina een "a" link gemaakt met de class "content-link" om naar de volgende pagina te gaan.
Alle link´s dus in een aparte class.
Maar de "content-link" krijgt dus waarschijnlijk iets mee van de "foto-berlijn" link want zoals op de bijgevoegde foto te zien is, eist deze link de gestippelde ruimte op.
Ik denk toch dat ik de "class´s" niet goed definieer, dat ik niet de exacte code gebruik van "punt" en "dubbelpunt" en wanneer slechts een spatie.
Ik hoop dat je er even naar kunt kijken.


De html-code:

Code: Selecteer alles

 
<p class="contenttekst">

Een bewuste keuze van een kunstenaar of fotograaf om die werkelijkheid te tonen waaraan hij waarde hecht.
<br>
<a href="berlijnsemuur_detail.jpg" width="160" height="120" title="Berlijnse muur" class="foto-berlijn">
                <img src="berlijnsemuur.jpg" alt="Berlijnse muur" width="160" height="120" border="none" class="tekstomloop">
        </a> 


De css-code:
#content img.tekstomloop {
float: right;
padding: 0;
border: 5px grey solid;
margin: 0;
margin-top: -5px;
margin-right: -5px;
margin-bottom: 0;
margin-left: 0;
}

#content .foto-berlijn{
border: grey 6px solid;
float: left;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-berlijn:hover {background: url(detail_berlijnsemuur.jpg);
position: relative;
}

#content .content-link {font-family: helvetica, sans-serif; font-style: italic; font-size: 110%; font-weight: bold; color: #daa520; text-decoration: none; text-align: right;}

#content a:hover{
font-size: 130%;
}

#content a:active{
color: blue;
}

Zoiets dus.

Groet herman.

ps: Heb je de code-button uitgeschakeld?
Bijlagen
probleem a link in dezelfde container.jpg
probleem a link in dezelfde container.jpg (41.7 KiB) 35575 keer bekeken
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Pardon. Dat was dus de verkeerde foto.
Het had erger kunnen zijn. :D
Hier de goede.
Bijlagen
probleem a link in dezelfde container.jpg
probleem a link in dezelfde container.jpg (74.57 KiB) 35575 keer bekeken
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Hoi,

Nee hoor, de code-knop is er nog. Enigszins linksboven. Alleen de knoppen 'van buitenaf' (css, xhtml, e.d.) zijn weggehaald. Die knop Code werkt goed, dus die mag blijven.
Het is wat lastig te zien met zo'n klein stukje code, maar ik denk dat het met de beroemde specificiteit te maken heeft. De classes gebruik je goed, zo te zien.
In je css-bestand wordt de code van boven naar beneden uitgevoerd. Dat moet je héél letterlijk nemen, want 'n computer is nou eenmaal niet zo slim.
Bovenaan in je stukje css staat #content img.tekstomloop Dat kan dus per definitie alleen voor iets met class="tekstomloop" gelden.
Daaronder iets voor #content .foto-berlijn Zelfde verhaal voor iets met class="foto-berlijn"

Dan krijg je echter iets voor div#content a:

Code: Selecteer alles

div#content a {display: block; width: 160px; height: 120px;}
Dit geldt voor álle links binnen div#content, want er staat geen class of wat dan ook bij, tenzij het later in de css wordt overruled. Het geldt dus in principe ook voor a.content-link, want dat is ook 'n gewone link binnen div#content.
Bij #content .content-link geef je van alles op (font-family, font-style, enz.) Maar de display: block enz. van #content a blijven gelden, want die overrule je niet.
Je kunt het oplossen (denk ik) door bij de css voor div#content a 'n class toe te voegen. Dan geldt het alleen voor de link(s) met die class.

Of door bij #content .content-link de eerdere css te overrulen door toe te voegen:

Code: Selecteer alles

#content .content-link {display: inline;}
De display: block; bij div#content a wordt nu overruled door de display: inline; hier. Deze <a> is nu geen blok-element meer, maar weer gewoon 'n inline-element. En een inline-element kan geen hoogte en breedte krijgen, dus vermoedelijk ben je nu die hoogte en breedte bij de onderste link kwijt.

Hetzelfde probleem kan trouwens spelen bij div#content a:hover img Dit geldt voor álle <img>'s binnen elke link binnen div#content
a.foto-berlijn: hover geldt weer alleen voor de link(s) met de class foto-berlijn

#content a:hover {font-size: 130%;} geldt weer voor álle links. Idem #content a:active {color: blue;}
Mogelijk is dat wat je wilt, anders moet je ook hier met classes werken. (Het zou misschien ook zonder classes kunnen, maar dat is alleen te zeggen als ik de volledige code kan zien.)
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Bedankt GB, ga er maandag aan beginnen.

Ik weet niet of je daar ook ervaring mee hebt, maar ik zoek nog een redelijk betrouwbare en ook een goedkope, jaja, webhosting.
Ik heb al gelezen dat er flink wat addertjes onder het gras kunnen zitten, bvb bij de jaarlijkse terugkomende kosten van de domeinnaam en bij overschrijding dataverkeer.
Want ik heb geen idee van het dataverkeer dat zou kunnen gaan plaats vinden.
"mijn websitehosting" (alles in een pakket) 300 GB dataverkeer per maand, over de te gebruiken schijfruimte hoef ik het natuurlijk niet te hebben, leek me niet onaardig maar die gratis domeinnaam (registratie) vertrouw ik dan weer niet.
Ja, ik ben een absolute leek op dit gebied.

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

Re: dropdownmenu met ZIP

Bericht door herman »

Sorry, toch nog eventjes.
Ik heb het een en ander geprobeerd.
Ook de volgorde.
Met de toevoeging display: inline; (die ik in onderstaande code even in het rood en tussen /* heb gezet lukte het.
De link was zijn "rechthoekje" kwijt.
Maar ik wilde het ook proberen met een toevoeging van een extra "class".
En daar lukt het me dus niet.
Ik dacht dat dan de code moet zijn "a.class" in de bovenste regel of moet ik dan bij elke "a" de "class" toevoegen, dus ook bij bvb a:hover img {display: none;} ?

De code nu:

Code: Selecteer alles

/* CONTENT_LINK´s BIJ CONTENT-TEKSTEN zie orgineel_GG_H1_copie*/
#content .content-link {/*display: inline;*/
font-family: helvetica, sans-serif; font-style: italic; font-size: 110%; font-weight: bold; color: #daa520; text-decoration: none; text-align: right;}

#content a:hover{
font-size: 130%;
}

#content a:active{
color: blue;
} 
/* EINDE CONTENT_LINK´s BIJ CONTENT-TEKSTEN zie orgineel_GG_H1_copie*/

/*CONTENT TEKST-OMLOOP EN (DETAIL) FOTO´s*/
#content img.tekstomloop {
float: right;
padding: 0;
border: 5px grey solid;
margin: 0;
margin-top: -5px; 
margin-right: -5px;
margin-bottom: 0;
margin-left: 0;
}

#content .foto-niepce{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
#content a.foto-niepce {display: block; width: 160px; height: 120px;}
#content a:hover img {display: none;}
a.foto-niepce:hover {background: url(detail_Niepce.jpg);
position: relative;
}
#content .foto-berlijn{
border: grey 6px solid;
float: left;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-berlijn {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-berlijn:hover {background: url(detail_berlijnsemuur.jpg);
position: relative;
}
Heeft misschien toch met mijn gebruik van de punten, dubbelpunten en spaties te maken?
En als er ergens een foutje zit doet ie het niet, ook al ben je op de goede weg.
Maar dat weet je dan niet.

Ik geloof dat ik er een beetje dol van word en misschien jij ook wel, maar dan van mij.
Ik denk dat het het beste is dat ik het maar eens op het net ga zetten, anders ben ik er nog een maand mee bezig. :oops:

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

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Gratis registratie van je site is vrij normaal bij veel providers. Let er alleen even op dat de site op jouw naam komt te staan. Volgens mij is dat tegenwoordig eigenlijk altijd het geval, maar in het verleden kwam het wel 'ns voor dat je dan van naam moest veranderen als je van provider wilde veranderen, of 'n fors bedrag moest betalen om je eigen naam mee te kunnen nemen. (De naam van de site bedoel ik natuurlijk. Tenzij je provider toevallig ook hoofd van de burgerlijke stand is.)
Ik raad geen providers meer aan sinds m'n eigen provider is overgenomen en ik gillend van ellende ben gevlucht. Die had ik dus aangeraden aan tig mensen, die niet allemaal even blij en gelukkig meer waren.

Op deze sites vind je vergelijkingen tussen heel veel hosters en (belangrijker) ervaringen van klanten:
http://www.hostingbedrijven.nl/
http://www.internetten.nl/hosting/wizard.asp?m=4
http://www.ispgids.com/webhosting
http://www.webhosters.nl/

Ik heb die code voor rood even verwijderd uit je css, want kennelijk werkt die kleur niet binnen Code. Je kreeg de letterlijke code te zien. Misschien moet ik toch 'ns gaan zoeken naar software voor 'n forum dat meer geschikt is voor codes en zo. Maar ja, tijd...

Je moet inderdaad dan bij elke a de class toevoegen. Als je alleen a:hover img gebruikt, blijft dit gelden voor élke <img> binnen élke <a> waarover je hovert. Je kunt dus deze <a> een class geven (of 'n id), óf elke <a> waar dit niet moet gebeuren 'n class geven:

Code: Selecteer alles

a.blijf-van-me-af:hover img {display: block;}
(of display: inline;, afhankelijk van of het 'n inline of blok-element is.) Nu corrigeer je het voor de links met class="blijf-van-me-af".
Maar dit gaat 'n soort spaghetti worden. Je hebt de normale standaard situatie. Die schakel je uit bij hoveren (afbeelding verdwijnt). Vervolgens corrigeer je dat weer voor andere links. En met 'n beetje geluk zitten er binnen die andere links dan weer, waarbij de <img> toch moet verdwijnen. En daarbinnen zit dan weer 'n link... Enfin, je snapt het. Die code is later nauwelijks nog te begrijpen.

Meestal is dit makkelijker op te lossen door bijvoorbeeld de links waarbij de <img> moet verdwijnen bij hoveren, in een aparte div te zetten. Als je dan die div 'n id of class geeft, kun je css opgeven die alleen voor de links binnen die div geldt. Mogelijk kun je dat zelfs al, want misschien heb je al 'n situatie waarin de links waarbinnen de <img> moet verdwijnen in iets van 'n eigen div zitten.
Maar om dit precies te kunnen aangeven, zou ik de hele code moeten zien.

En ik moet je nogmaals teleurstellen: je gebruikt de punten, spaties, e.d. goed bij de classes :D

Dol word ik (nog) niet. Het enige waar ik wat slecht tegen kan is als mensen zelf helemaal niets doen, maar dat is bij jou niet het geval. Of als ze bij elk antwoord zonder enige onderbouwing zeggen: "Nee, dat is het niet, want m'n tante haar zus die d'r buurjongen deed dat ook in 1883, en toen werkte het." Dat gebeurde op algemene forums nogal 'ns. Trouwens ook geen probleem als iemand dat dan onderbouwt, maar alleen zeggen 'nee, dat is het niet', tja, waarom vraag je het dan? Hmmm, mopper, tijd voor koffie kennelijk!

Als het online staat wordt het veel makkelijker om dingen te bekijken. Er zijn allerlei hulpmiddelen om bij iets online even iets uit te proberen.
Overigens zou het heel goed kunnen dat je site niet goed werkt in andere browsers. IE 8 is wel enigszins fatsoenlijk, vergeleken met eerdere versies, maar er zitten toch nog wel wat afwijkingen van de standaard in. Maar waarschijnlijk zullen de meeste fouten vrij snel zijn op te lossen.
Normaal genomen maak je 'n site in Firefox (dat doen de meeste mensen, die heeft de meeste hulpmiddelen). Dan werkt het normaal genomen ook in Opera, Chrome en Safari. Het meeste werkt dan ook wel in IE 9. En voor IE 8 (en vooral eerder) ga je dan wat dingen aanpassen speciaal voor die browsers.

Dat uitklapmenu, werkt dat nu goed, of sluit het nog steeds als je naar beneden gaat met de muis?
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Wat de hosting betreft begrijp ik wat je bedoelt.
Ik heb zoiets eens meegemaakt toen KPN Telfort overnam. De prijzen werden gelijk verdubbeld en de service op z´n kape-ens.
Wat overigens niet mag, maar ze rekenen erop dat je het vanwege de moeite die je moet doen, het maar pikt

Wat betreft de hosting: Ik zie amper de bomen door het bos en ben er de hele ochtend mee bezig geweest omdat ik de site nu zo snel mogelijk on-line wil hebben. Nog niet publiekelijk welliswaar.
Ik heb wat mails gestuurd om onduidelijkheden helder te krijgen.
Morgen wil ik een beslissing maken. We zien wel of en waar het schip strandt.

Oke , ik ga nog eens iets proberen met de "classe´s".

Een aparte div? Dus die div in een andere div, hier de content-div, neem ik aan.
Tja, als ik wat meer tijd heb ga ik het eens rustig bestuderen.
Het lijkt me ook niet al te moeilijk maar ik ben nu te gehaast. Ik heb er nu wel erg veel tijd inzitten.
Als ik het van te voren geweten had ... maar gelukkig wist ik het niet.
An sich vind ik het werk wel leuk. Maar je hebt gewoon heel veel ervaring nodig.

Ik heb de laatste week veel aan de content gewerkt, ook niet geheel onbelangrijk en heb derhave het een en ander verandert in het menu en submenu. Dat komt wel goed.

Aan het probleem van de dichtklappende submenu´s heb ik niet meer gewerkt. Eerst nog een formulier maken en de video coderen. En nu zo snel mogelijk on-line.

Heeft de koffie gesmaakt, overigens?

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

Re: dropdownmenu met ZIP

Bericht door herman »

Zo, nu begint er schot in te komen.
Heb een hosting gevonden die me wel redelijk lijkt.
Als het goed is ben ik morgen on-line. Ik wacht nog een antwoord af, nl of het mogelijk is de site niet direct openbaar te maken maar wel zichtbaar voor derden met een WW.
Wellicht een volkomen overbodige vraag.

En... Ik wil graag een formulier maken die als pop-up werkt.
Dit omdat de bezoekers dan over de site kunnen surven - om info te bekijken- als ze het formulier invullen.
Dat lijkt mij de handigste methode.
Maar misschien heb ik het mis.

Ik heb op je site gezocht naar formulieren maar ik vond niets. Wel het een en ander over pop-up´s.
Het lijkt mij dat dit wel te coordineren is. Maar voordat ik daarmee aan de slag ga wil ik graag je mening horen.

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

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Gisteren een fantastische reactie geschreven, echt 'n literair meesterwerk. Helaas was het elektra-bedrijf daar ook zo van onder de indruk, dat bij het intoetsen van de laatste punt het hele huizenblok langdurig zonder stroom kwam te zitten. Dat nadat al gedurende zeven uur internet helemaal was uitgevallen. Er zijn van die dagen... Kortom: voor het eerst sinds m'n kindertijd met 'n zaklamp en 'n boek vroeg in bed gelegen.
Nu ga ik maar weer gewoon schrijven zonder literaire meesterwerken en zo.
In principe moet je zelf je site onzichtbaar maken. De hoster kán dat wel, maar die doen dat normaal genomen alleen na 'n opdracht van justitie of bij (ernstige) copyrightschending en zo. Ik neem aan dat het je eigenlijk alleen om zoekmachines gaat. Voor iedereen onzichtbaar maken kan ook, maar dan moet je met wachtwoorden gaan werken, of je .htaccess-bestand ('n soort configuratie voor de site) aanpassen.
Er zijn twee manieren. De eerste is voor de hele site of bepaalde directories, de tweede gaat per bestand.
* Maak een gewoon tekstbestand aan onder de naam robots.txt
Gewone tekst, dus zonder enige opmaakcode of zo van 'n tekstverwerker. In dat bestand zet je exact:

Code: Selecteer alles

User-Agent: *
Disallow: /
Op het moment dat er geïndexeerd mag worden, haal je de / achter Disallow weg. (Die / betekent de root, de hoofdingang van je site, en alles daaronder). User-Agent: * betekent álle spiders. Elke nette zoekmachine houdt zich hieraan. Deze methode is echter niet waterdicht, hij werkt alleen als bijvoorbeeld Googlebot 'uit zichzelf' bij je op bezoek komt. Dan kijkt hij (zij? het?) eerst naar robots.txt. Maar als er ergens 'n rechtstreekse link naar 'n pagina of zo staat, gaat de spider rechtstreeks naar die pagina zónder robots.txt te bekijken. Dat voorkom je met:
* De tweede methode, maar die is bij jou denk ik niet nodig, want de kans op rechtstreekse links is op dit moment klein (toch?), en het gaat ook niet om je pincode of zo die geheim moet blijven.
Zet in élke pagina die niet geïndexeerd mag worden in de <head>

Code: Selecteer alles

<meta name = "robots" content="noindex">
Even voor de zekerheid: dit is absoluut geen beveiliging. Het is gewoon 'n afspraak, waar fatsoenlijke zoekmachines zich aan houden, meer niet. Je wilt niet weten hoe vaak het voorkomt dat mensen min of meer geheime dingen op 'n site zetten en het dan hiermee 'beveiligen'.

Formulieren is niet echt mijn afdeling, want daar komt php bij kijken. Ik heb het wel 'ns gedaan en zo, maar je kunt beter elders 'n goede kant-en-klare oplossing zoeken. Er staat trouwens wel 'n formulier op de site, maar daar gaat het ook puur om de opmaak, de html en css, het werkt niet 'echt'.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Zo, het was weer een lange dag.
Er is van alles tussendoor gekomen en nu wordt het weer tijd om naar mijn stulpje te gaan.

Ben de resterende tijd op zoek gegaan naar formulieren die op te sturen zijn naar een mailadres. Dat is nu nog -en zal dat ten dele ook blijven- gmail. En u dus ook nog php erbij. Maar een goede vinden, die bij mijn site aansluit, valt nog niet mee. Ik neem aan dat ik de php ergens in de head kwijt kan of is het beter te linken naar een apart php bestandje? Nou ja, ik zie wel.

Maar op de "Handleiding HTML" vond ik het volgende berichtje:
Gezien alle problemen wordt het toepassen van een mailto-URI afgeraden en als alternatief het gebruik van een form-to-mail script geadviseerd (van de eigen provider, of van bijvoorbeeld Freedback.com).

Ik heb vervolgens het bestand van Freedback gedownload, er zat ook een manual bij, en ga er morgen aan werken. Maar ik vraag me af of ik niet beter kan wachten op het script van de hosting-provider voordat ik weer van alles ga uitproberen.
Via de hosting krijg ik natuurlijk mijn eigen mailadres en dat is nog even afwachten. Ik hoop het toch wel voor het weekend te regelen.
Ik heb wat betreft het onzichtbaar maken van de site hetzelfde antwoord gekregen (via een .htaccess-bestand) , maar dan veel korter, zoals jij voorstelde. Het lijkt me prima. Zo verschrikkelijk geheim is het nu ook weer niet.

Ben wel zeer benieuwd naar je literaire meesterwerkje dat alle stoppen in Vlaanderland heeft doen doorslaan.

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

Re: dropdownmenu met ZIP

Bericht door herman »

Hoi GB,
ben terug van weg geweest.
Het einde komt in zicht. Ben nu bezig met de menu-linken uit te proberen.
En nu stuit ik dus hinderlijk op het probleem van het dichtklappende menu.

In je commentaar van 28 april heb je daar al iets over gezegd.
Op mijn indexpagina waar niets staat, dwz geen tekst, en de achtergrondkleur donkergrijs is, werkt het menu prima. Als je op paginas die tekst hebben langs de tekst (letters) manoeuvreert, wat dus niet altijd mogelijk is, dan werkt het ook. Het menu klapt alleen dicht als je over tekst gaat die op de achtergrond staat.

Ik heb het met:

Code: Selecteer alles

#nav li:hover {
        cursor:pointer;
        background-color: transparent;
}
geprobeerd, maar dat werkt dus helaas ook niet.

Dus bleef de transparante gif op de background-image over.
Helaas snap ik dat niet helemaal.
Waar moet ik die neerzetten?
Ik neem aan in de html (als een "class" in de contenbox) met een verwijzing van die "class" in de css.
Ik wacht maar even op je antwoord.

Groetjes herman

Als onderdeel van #nav li:hover?
Heb het geprobeerd maar het kan ook zijn dat mijn transparante gif niet goed is.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

De laatste 2 regels van voorgaande tekst horen er dus niet bij.
Herman
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: dropdownmenu met ZIP

Bericht door herman »

Wat ik nog heb geprobeerd is het volgende:
html:
<div id="content_container">
<div id="content">
<img src="trans-gif-1x1.gif" width="1" height="1" alt="trans" class="trans-background"> en in de css:

Code: Selecteer alles

#trans-background {
height: 1px;
width: 1px;
}
Ook geprobeerd "img." ipv "#"
En, kunnen we nog lachen?
Ik ga even wat aan de content van de formulieren werken.

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

Re: dropdownmenu met ZIP

Bericht door Goeroeboeroe »

Welkom terug. Kan ik nog lachen?
Even geprobeerd, de laatste keer was alweer maanden geleden. Ja, ik kan nog lachen.
Serieus.
Dat menu-probleem dat dichtklapt is hoogstwaarschijnlijk heel simpel op te lossen. Alleen kan het even lastig zijn om te zien hoe, zonder code.
De truc is dat je voor IE 8 (en eerder) het element waarover wordt gemuis-overd (hmmm, hier staat gehoverd toch beter...) helemaal afdekt. Soms werkt daarbij 'n kleur (of transparent), anders een doorzichtige achtergrond-afbeelding. Andere browsers hebben dat niet nodig, maar hebben er ook geen last van.
Bij jou wordt gehoverd over de <li> (als ik me goed herinner). Je kunt dit gewoon aan álle <li>'s geven, want het geeft geen problemen, ook niet als het overbodig is.

Code: Selecteer alles

#nav li {background-image: url(space-1x1.gif);}
werkt waarschijnlijk. Ik heb het nog even opgezocht, en er wordt inderdaad over de <li> gehoverd. Als de code niet is veranderd, klapt het menu open bij hoveren over de <li>. Dan zou in principe daar de background-image moeten staan.
Als dat niet werkt, dan moet ik de code even zien. Kan ook als het online staat, want dit is vrijwel zeker heel simpel op te lossen.
Het moet in ieder geval een background-image zijn, geen gewone <img>. Een background-image wordt herhaald tot de achtergrond helemaal is gevuld, een gewone <img> niet. En het gaat juist om dat opvullen van de 'gaten' in de hovergevoeligheid. IE 6 herkende alleen hoveren over een <a>, en kennelijk heeft Microsoft in IE 7/8 'n regiment bugs ingebakken bij het uitbreiden van :hover.
Overigens zet je bij <img>'s die alleen voor de lay-out zijn geen alt="...". Als er geen alt bij een <img> staat, begrijpen spraakbrowsers (en zoekmachines) dat het een aanvullende afbeelding is, die geen informatieve waarde heeft. Omgekeerd: als er wel 'n alt bij staat, wordt die gelezen en meegewogen door zoekmachines. Een van de vele keren dat toegankelijkheid parallel loopt met goed voor de zoekmachine. Soms is het leven héél eerlijk...

Correctie: je moet de alt niet gewoon weghalen, maar bij zo'n niet-informatieve afbeelding zet je alt="". Dus leegmaken. Als je de alt helemaal weghaalt, zullen spraakbrowsers e.d. de naam van het bestand gaan voorlezen.
Plaats reactie