Geneste frames en tabellen

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...
Plaats reactie
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Geneste frames en tabellen

Bericht door barondesalis »

Volgend jaar is Het virtuele Schaatsenmuseum tien jaar online. In die tien jaar is de lay-out voor de pagina's driemaal veranderd en eigenlijk steeds complexer geworden door het gebruik van geneste frames en tabellen. Geen programmeur zijnde, heb ik daarbij gebruik gemaakt van Frontpage. Intussen kan ik een klein beetje HTML lezen en de rommel die Frontpage aan opmaakcodes achterlaat opschonen, maar dat is het dan ook.

Ik erger mij er echter aan dat wat er in IE goed uitziet in FF zijn glans verliest. Daarom oriënteer ik mij al enige tijd op HTML in combinatie met CSS. Mijn streven is om in februari 2012 bij het tienjarig bestaan de site in een bijdetijdse opzet te presenteren.

Ik heb geprobeerd mij wat in te lezen met behulp van Kompozer en verscheidene sites met voorbeelden van lay-outs. Maar ik kom er niet uit en zoek hulp. Alle voorbeelden die ik heb gezien zijn 'plat', waardoor de navigatiekolom altijd meescrollt met de paginatekst. Ik vind dat niet mooi en niet handig en zou daarom een lay-out willen waarin header en navigatiekolom vaststaan als een soort masker waarin tweekoloms-pagina's als wisselende scrollbare content worden geladen.

Mijn eerste vraag is: kan dat of moet ik dit hele idee uit mijn hoofd zetten?
Mijn tweede vraag is: is er iemand in een cirkel van 50 km rond Rotterdam die bereid is mij op niet-commerciële basis enige assistentie te verlenen om bruikbare templates te ontwerpen waarmee ik op eigen kracht verder kan?

De website in kwestie kan bekeken worden door te surfen naar http://www.schaatsenmuseum.nl.

Naast antwoorden op de concrete vragen hierboven ontvang ik graag opbouwend deskundig commentaar dat kan bijdragen aan de verbetering van de site.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo,

Dat is 'n interessante site, waar veel werk in is gaan zitten. Leuk om te zien!
Voor 'n site die in FrontPage is gemaakt, valt de weergave nog mee. Ik moet wel zeggen dat ik niet elke pagina uitgebreid heb bekeken.
Overigens gaat het ook in Internet Explorer 7 en 8 mis: als ik de pagina ververs, verdwijnt het hele menu.
In Opera, Safari en Google Chrome verdwijnt wel sommige tekst (Baanschaatsen -> Zweedse baanschaatsen), dus dat zal op meer pagina's zo zijn.
Maar goed, je wilde al 'n nieuw site gaan maken dus laat ik nou niet gaan griepen over wat er misgaat op deze site :D

Frames zijn een ramp wat betreft toegankelijkheid voor programma's voor mensen met een handicap, zoals spraakbrowsers. En omdat de spider (die indexeert je site) van een zoekmachine redelijk te vergelijken is met een blinde, zijn frames ook ronduit slecht voor je plaats in de zoekmachine. (Hoewel er geen enkele garantie is op een bepaalde plaats in de zoekindex, maar frames zijn zeker niet bevorderlijk.)
In mindere mate geldt hetzelfde voor tabellen als je die gebruikt voor lay-out, zoals FrontPage doet.
Als je dus geen frames meer gebruikt en tabellen alleen maar voor tabulaire data (zoals die tabellen met wereldrecords), doet dat je site zeker goed. Bovendien zijn frames en tabellen uitermate lastig te onderhouden.
Maar op jouw site zijn tabellen dus wel heel goed te gebruiken voor die lijsten. Dat ZIJN echte tabellen, en daar is table voor bedoeld.

Als de site in februari 2012 klaar zou moeten zijn, heb je in ieder geval 'n redelijk lange tijd. Mocht de nieuwe site dan nog niet helemaal af zijn, dan zou je altijd nog een deel van de oude site binnen de nieuwe site kunnen laten draaien, tot je alles hebt omgebouwd.

Een vaste header en navigatiekolom is uitstekend mogelijk zonder frames. Niet om reclame te maken of zo, maar op deze site staan twee van dat soort lay-outs: http://css-voorbeelden.nl/lay-out/twee- ... t-004.html en http://css-voorbeelden.nl/lay-out/twee- ... t-001.html
Rechts staat maar één kolom, maar dat maakt niets uit, je kunt er even makkelijk twee kolommen zetten. Of zelfs rechts ook nog 'n kolom die niet meescrollt. Die voorbeelden zien er natuurlijk niet uit, maar dat is alleen maar de vulling. Maar goed, ze zijn alleen maar om even te laten zien dat dat prima kan.
Overigens heeft Internet Explorer 6 wel problemen met 'n vaste header en vaste kolom en zo. Daarvoor moet je allerlei kunstgrepen toepassen, die ook nog 'ns forse bijwerkingen hebben. Persoonlijk ondersteun ik Internet Explorer 6 niet meer, en ik ben bepaald niet de enige. (Overigens zie je alles wel in Internet Explorer 6, maar de header scrollt bijvoorbeeld gewoon mee.)

Dat was dus de eerste vraag: het kan prima met een vaste header en/of navigatiekolom.

De tweede vraag: iemand in een cirkel van 50 km rond Rotterdam die wil helpen. Die 50 km is mij niet helemaal duidelijk, eerlijk gezegd. Als je 'n template hebt, kun je prima vanuit Australië of Oeganda worden geholpen. Op zich kun je ook hier terecht met je vragen, maar dit is een superklein forum en mijn tijd is beperkt. Ik ben dit forum feitelijk begonnen omdat ik per mail meer vragen kreeg dan ik kon beantwoorden. Nu moeten mensen zich eerst registreren en zo, en dat filtert vragen als 'Waar zit de A op het toetsenbord?' eruit.
Op zich zou je dus ook hier terecht kunnen met vragen, maar op een groter forum heb je wel kans dat je sneller wordt geholpen. Op de pagina met links http://www.css-voorbeelden.nl/links.html vind je forums over o.a. het maken van sites. Maar je bent hier dus ook welkom, als je geen haast hebt.
Als je echt om een of andere reden iemand in de buurt van Rotterdam wilt hebben, dan zou ik het op die grotere forums vragen.
Op die grotere forums is er trouwens ook meer kans dat er mensen zitten die goed met Kompozer overweg kunnen, want ik doe zelf alles met de hand.
Maar nogmaals: ik wil je hier niet wegjagen, alleen zitten er op die grotere forums gewoon veel meer mensen.

Wat betreft de opbouw van de site. Ik vind die er eigenlijk in grote lijnen heel goed en overzichtelijk uitzien. Uiterlijk is natuurlijk ook 'n kwestie van smaak, maar zelfs ik kan gelijk alles vinden. Terwijl ik nog niet eens kan schaatsen.
Ik zie wel wat kleinere dingen waar je op zou kunnen letten, maar dat gaat waarschijnlijk al gedeeltelijk min of meer automatisch als je geen tabellen (behalve voor tabulaire data) en frames meer gebruikt.

Als je gaat bouwen, zou ik dat in Firefox doen. Die heeft 'n hele serie hulpmiddelen die echt heel handig zijn (zie http://css-voorbeelden.nl/links.html#a-ger-debug-ff )
Google Chrome schijnt ook heel goed te zijn, maar ik ben nou eenmaal aan Firefox gewend. En ik vind het ook leuk dat Firefox in principe niet-commercieel is, en dat kun je van Google toch niet echt zeggen. Als je site in Firefox goed werkt, werkt hij vrijwel zeker goed in álle browsers. Als je in Internet Explorer bouwt, is de kans veel groter dat er problemen in andere browsers optreden. (Hoewel dat met de komende Internet Explorer 9 mogelijk ook eindelijk verleden tijd is.)
Firefox/Google Chrome/Safari/Opera houden zich allemaal prima aan standaarden. IE 6 totaal niet, IE 7 beter, IE 8 haast goed, en IE 9 schijnt het eindelijk ook te doen. Als 'n site werkt in Firefox enz., kun je heel simpel eventueel benodigde aanpassingen voor IE 6/7/8 apart opgeven voor alleen die browsers, zelfs verschillend voor elke versie van IE. Daar wordt in die voorbeelden op de site ook gebruik van gemaakt, het zijn die stukjes zoals tussen
<!--[if IE 7]> en <![endif]-->.

Er zitten nogal wat kleine verschillen in marges, kadertjes, padding, enz. tussen de verschillende browsers. Maar dat verdwijnt waarschijnlijk voor het grootste deel spontaan als je geen frames en tabellen voor lay-out meer gebruikt. Ook binnen dezelfde browser verspringen kaders en zo soms, maar ook dat heeft waarschijnlijk vrijwel altijd te maken met kaders/tabellen. Wat in IE strak is, is springerig Firefox.

Pagina's met weinig tekst en zo vullen het venster niet volledig. Persoonlijk vind ik het mooier als een pagina wel het venster vult. Dat zou met niet al te veel moeite met wat kleurtjes en zo prima te doen moeten zijn. Nu staat bij een pagina met weinig inhoud de footer wel heel erg hoog. Dat wordt voor het oog nog versterkt, omdat de rechterkolom op een iets breder scherm niet helemaal rechts staat.
Het is trouwens vrij simpel om de pagina even breed te maken als het venster van de browser, met eventueel een maximum-breedte om te lange tekst te voorkomen. Of om een vaste breedte te gebruiken, maar de pagina dan netjes in het midden van het venster te zetten. Allemaal veel makkelijker als je geen frames en zo meer gebruikt.

Als je geen frames meer gebruikt, moet je elke pagina volledig zelfstandig maken. Dus 'n menu wat je één keer maakt en dan via 'n frame laadt, dat gaat niet meer. Gelukkig is er wel 'n andere oplossing. Zo'n menu kun je via PHP of SSI gewoon invoegen. Je maakt het dan, net als bij frames, maar één keer. Als je iets moet veranderen, hoeft dat maar op één plaats. Het grote verschil is echter, dat PHP of SSI op de server al in de pagina wordt gestopt. De browser ziet dus, anders dan bij frames, gewoon één pagina. En screenreaders, zoekmachines, enz. ook. Frames worden in de browser aan elkaar geplakt, en dat is 'n heel krakkemikkige constructie.
Je maakt gewoon je eerste pagina, en als die goed werkt, haal je het menu eruit, zet het in een apart bestand en voegt het weer in via PHP of SSI. Kun je het op elke pagina weer gebruiken, net als frames, maar zonder de nadelen van frames. Zelfde geldt voor bijvoorbeeld de header, als die overal hetzelfde is.

Je hebt je georiënteerd op html en css en zo. Heb je ook 'n volledige cursus gevolgd? Er is 'n klein aantal heel goede, gratis cursussen over html/css op internet. De beste vind ik http://www.web-garden.be/cursus-html/cursus-html/. Ook de cursus van Opera is prima, maar die is Engelstalig: http://dev.opera.com/articles/view/1-in ... dards-cur/
Mijn ervaring is dat het volgen van zo'n korte cursus de investering in tijd dik terugverdient, omdat er 'n enigszins logische opbouw in zit. En wie weet geeft 't je net dat zetje om Kompozer ook te laten schieten en 't gewoon met de hand te doen. Kompozer is veel beter dan FrontPage, maar zelfs het beste programma verliest het op dit moment nog fors van met de hand schrijven.
Op die pagina met links van mij staan trouwens ook templates, alleen noem ik ze lay-outs. Als je zo'n lay-out als uitgangspunt neemt, zou je die gewoon met de hand kunnen gaan aanpassen.
Maar goed, dat moet je natuurlijk zelf weten en misschien vind je schaatsen wel leuk, maar het maken van sites niet. Onbegrijpelijk, maar dat schijnt soms zo te zijn :D

Nou, da's 'n heel verhaal geworden. Ik hoor 't wel als je nog vragen hebt. En op zich is het 'n leuke site, dus als je zou kiezen voor handmatig en 't niet erg vindt als je af en toe even moet wachten op 'n antwoord, ben je hier van harte welkom. Of wie weet verschijnen hier plotsklaps nog anderen die antwoord gaan geven...
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Beste Goeroeboeroe,
Zeeeer bedankt voor je uitvoerige reactie. Ik ben er heel blij mee en meteen aan de slag gegaan met de Belgische cursus. Die maakt alles heel toegankelijk, mede doordat ik toch niet helemaal onbekend ben met HTML, denk ik. Ik ben intussen op de helft en hoop met een tot twee dagen een eerste opzetje voor mijn eigen site te kunnen maken. Daarbij zal ik zeker ook gebruik maken van het door jou aangereikte voorbeeld voor een vaste paginabreedte. Of ik wel of niet van Kompozer gebruik ga maken, weet ik nog niet. Dank zij het CCS-systeem denk ik dat het programmeren uiteindelijk een stuk eenvoudiger gaat worden met een aantal modelelementen.

Ik zag pas later dat het aantal bezoekers van dit forum gering is en voornamelijk uit vragers zoals ik bestaat. Maar kwaliteit is belangrijker dan kwantiteit en als je het geen bezwaar vindt dat ik een beetje (veel?) op je leun, vind ik het prima zo. Het is bepaald niet mijn bedoeling het werk door anderen te laten doen, maar het lijkt me heerlijk een soort counter part te hebben waarbij ik terecht kan met probleempjes of vragen waar ik na een uurtje of zo zoeken maar niet uit kan komen. En zoals je zelf schreef is afstand dan in het digitale tijdperk geen enkel bezwaar. En als je het teveel gaat vinden, aarzel dan niet het me te laten weten.

Ik wil trouwens aan de huidige opzet niets meer indringend veranderen. Ik kies voor een vaste navigatiekolom omdat ik dat zelf altijd heel prettig vind op sites waar je zo'n beetje doorheen laveert als je niet gericht zoekt. En dan hoort een vaste header daar eigenlijk onlosmakelijk bij, vind ik. Ik probeer wel de header zo smal mogelijk te houden om in het openingsbeeld een zo goed mogelijk beeld te geven van wat verder verwacht mag worden. Om overeenkomstige redenen wil ik de opzet van de contentpagina's handhaven. Daarbij gaat het in feite om een flexibel gebruikte driekolomsindeling. In de voorbije jaren is die het meest praktisch gebleken om veel plaatjes en begeleidende informatie te etaleren. Maar ik besef dat ik het verleden soms te krampachtig aan deze indeling heb vastgehouden, dus bij het herschrijven stel ik mij open voor vernieuwing. Ik hoop met CCS daarin meer flexibiliteit te bereiken.
Iets dergelijks geldt voor de gebruikte kleuren. Voor museale doeleinden vind ik donkere kleuren wel prettig, maar anderzijds zou ik wel iets meer transparantie willen. Daar ga ik dus nog eens mee experimenteren. Maar ik zou niet verbaasd zijn als ik uiteindelijk nauwelijks verandering aanbreng. De huidige kleuren zijn immers het resultaat van eindeloos zoeken en drie eerdere presentaties.
Hoe het met de menu's moet weet ik nog niet. Van PHP heb ik helemáál geen sjoege. Misschien moet ik naar uitrolmenu's, hoewel de huidige relatief simpele menupagina's wel rust bieden aan de zich oriënterende bezoeker.

Vooralsnog ben ik nog wel even bezig. Mocht je constructieve ideeën hebben, laat het dan vooral weten.
Nogmaals tot zover bedankt en tot schrijfs.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Ah, dat is nou leuk. In het verleden was ik actief op veel grotere forums (en nog wel, voor sommige dingen). Maar jij bent zo'n beetje de eerste die echt even zo'n cursus gaat volgen. Meestal gaan mensen gewoon door met in het wilde weg. Niets op tegen trouwens, maar zo'n korte cursus geeft gewoon 'n beetje 'n theoretische basis. Daarna kun je dan weer gewoon gaan experimenteren.
Ja, ik vind die site er in grote lijnen dus ook echt heel duidelijk en overzichtelijk uitzien. 't Is ook 'n soort museum, geen hiphop of zo, dus iets rustiger kleuren past daar wel bij.
Persoonlijk vind ik zo'n menu dat niet uitklapt met stip het beste. Dus zoals het nu is. Je kunt in één oogopslag zien waar alles staat, of in ieder geval de hoofd-indeling. Ook heel makkelijk voor mensen die moeite hebben met de muis en zo.
't Zou mij dus ook niet echt verbazen als je niet zo veel gaat veranderen.
PHP is echt heel simpel. Je zet gewoon <?php include("naam-van-bestand"); ?>
Dat bestand is dan gewone html met bijvoorbeeld een menu. Je kunt ook programmeren met PHP, dat is veel ingewikkelder, maar 'n steeds terugkomend menu of header invoegen is echt heel simpel. Het beste is wel om eerst even 'n pagina goed werkend te krijgen, en dan pas het menu of zo eruit te lichten.
'n Korte superduidelijke handleiding over invoegen met php staat hier: http://developerscorner.nl/csshunter/ph ... torial.htm

De indeling in drie kolommen vind ik ook heel prettig. Met divs en zo kun je relatief vrij makkelijk de breedte aanpassen, dus ermee experimenteren. Bij geneste frames en/of geneste tabellen valt de hele constructie dan al snel als een kaartenhuis in elkaar. Maar dat komt vanzelf wel.
Je zult ook merken dat het, als je dat wilt, relatief heel makkelijk is om elke pagina venstervullend te maken.
Nou, voorlopig veel plezier met die cursus.
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Beste Goeroeboeroe,
Sinds mijn vorige post heb ik de Belgische CSS-cursus geheel doorgewerkt en ook nog de Kompozer-cursus op www.kompozer.nl. Beide cursussen zijn leerzaam en hebben mij in staat gesteld een opzet te maken voor een nieuwe website. Eerst ben ik begonnen in kladbloc en na een tijdje ben ik geswitched naar Kompozer. Het voordeel van Kompozer is dat je meteen ziet wat het gevolg is van veranderingen in het programma.

Het resultaat van de vele uren prutsen, kun je bewonderen op nieuw.schaatsenmuseum.nl/stylesheet.html.

Je zult zien dat ik volledig 'van mijn geloof ben gevallen', d.w.z. dat ik met behoud van de opzet van de oude website zowel de lay-out als de kleurstelling indringend heb gewijzigd. Graag verneem ik wat je ervan vindt, maar zelf heb ik er een heel prettig gevoel bij.

Maar hoe nu verder? Daar geven de cursussen geen informatie ver. Ze stoppen na het maken van één pagina. In de oude website zitten er circa 300 en een veelvoud aan interne hyperlinks. Die moeten allemaal worden omgezet (en nog eens kritisch worden bekeken).

Ik heb de nu gemaakte pagina aanvankelijk stylesheet.html genoemd en op zeker moment vernoemd tot hvs.css. Daarna heb ik geprobeerd een eerste volgpagina te maken. Maar om de een of andere reden wordt die vervolgens eveneens als hvs.css opgeslagen. Kortom het lijkt erop dat de stylesheet niet als zodanig wordt behandeld.

Misschien kun je een redelijk toegankelijk boek over CSS adviseren, maar een adviesje over hoe ik nu snel een stapje voorwaarts kan zetten wordt bijzonder op prijs gesteld.

Alvast bedankt voor je reactie, Bert
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo Bert,

Voor ik het vergeet even over indexeren: zoekmachines indexeren alles wat ze tegenkomen. Je hebt hier 'n pagina neergezet, mogelijk wordt die bezocht door zoekmachines. Zolang je aan het experimenteren bent, wil je waarschijnlijk niet dat Google e.d. je pagina indexeren en vindbaar maken. Als je in de <head> het volgende zet:
<meta name = "robots" content="noindex">
zullen Google, Bing, enz. hem niet indexeren. Niet vergeten weg te halen natuurlijk als het af is.

Ik vind de lay-out 'n stuk beter. Alleen vind ik de roodbruine achtergrondkleur niet prettig. Ik vraag me ook af of 'n oranje letter op roodbruin wel echt prettig leest. Maar dit zijn van die dingen, waarvoor een groter forum eigenlijk beter is. Blauw is mijn lievelingskleur, en rood absoluut niet. Dus het kan ook zijn dat er persoonlijke voorkeur meespeelt. Bij meer meningen filter je dat er min of meer uit.
Ik heb even gekeken hoe 'n kleurenblinde het ziet, en wat dat betreft is er geen bezwaar.
De lay-out vind ik dus persoonlijk een stuk beter, bij de kleuren heb ik wel vragen.

Ik las je stukje over tabellen. Ooit kon je alleen met tabellen een lay-out maken. En allerlei programma's zoals FrontPage gebruikten dat ook. Dan komt er een nieuwe systeem, en dan kost het tijd voordat iedereen daar de voordelen van ziet.
Inmiddels is het zo dat 99,9% van de 'deskundigen' tabellen voor lay-out echt in de ban heeft gedaan. Je hoeft mij niet te geloven, maar kijk maar in een goede boekhandel in boeken over het maken van sites: al jarenlang worden in élk boek tabellen afgeraden, zonder enige uitzondering. Alleen op internet vind je (helaas) nog steeds heel veel cursussen waarin tabellen worden aangeraden. Zelfs nog recente cursussen. Maar in dat soort cursussen stikt het meestal ook van de andere fouten.
Je moet het natuurlijk helemaal zelf weten, maar divs e.d. in plaats van tabellen is écht veel makkelijker, als je het eenmaal onder de knie hebt.
Op het ogenblik werk je met frames. Als je één grote pagina maakt, komen die tabellen van de diverse frames ook nog 'ns bij elkaar te staan. Dus nog dieper genest. Als je dan 'n probleem hebt, wordt het echt 'n ongelooflijk gedoe dat te corrigeren.
Een tabel wordt regel voor regel gelezen. Ook door zoekmachines. Dus eerst de bovenste row, met alle cellen daarin. Dan de volgende, enz. Dat kan dus een totaal andere volgorde en samenhang zijn dan wat een mens op het scherm ziet. Daardoor is een tabel vaak volstrekt onsamenhangende wartaal, ook voor zoekmachines. En ook volstrekt ontoegankelijk voor screenreaders e.d.
Maar het is jouw site, dus de keuze is aan jou. Alleen heeft het echt niets met fundamentalisme te maken: css is gewoon echt een nieuwere en betere techniek dan tabellen voor lay-out.

Boeken over (x)html en css (die gaan altijd samen, als het 'n goed boek is) adviseren kan ik eigenlijk niet. Dat heeft 'n luxe reden: de laatste jaren zijn er eigenlijk geen slechte boeken meer verschenen. Het beste kun je naar 'n goede boekhandel gaan en gewoon kijken wat jou het beste ligt: een opbouw in lessen, lezen van a tot z, voorbeelden uit de praktijk.
Maar eigenlijk heb je volgens mij aan die cursussen voldoende, tenzij je echt sitebouwer wilt worden. Ervaring doe je alleen op door ermee te gaan werken.

Dan de vraag over hoe nu verder. Als het om kompozer gaat, kan ik daar niet echt bij helpen.
De pagina met html moet altijd eindigen op .html. De pagina met css (de stylesheet) moet altijd eindigen op .css.
De css zit bij jou in de pagina zelf. In kompozer kun je die exporten naar een extern bestand. Als je de pagina 'normaal' bekijkt (ik heb de Engelse versie, weet niet wat er precies in de Nederlandse staat, maar het is 'n tab linksonderaan), dan kun je via Tools (Extra?) een css-editor openen. Daarmee kun je een apart stylesheet maken.
Dat stylesheet komt dan in een eigen bestand te staan en is voor élke pagina opnieuw te gebruiken.
Nu komt het probleem: hoe dat moet, weet ik niet. Ik werk zelf nooit met Kompozer, dus vragen daarover kan ik ook niet beantwoorden. Daarvoor kun je beter 'n groter forum proberen of het (Nederlandstalige) forum over Composer/nvu/Kompozer op http://www.mozbrowser.nl/forum/viewforum.php?f=26

Toch nog even over zonder Kompozer of zoiets werken. Er zijn ook mogelijkheden om veranderingen gelijk te zien, terwijl je toch alles zelf doet.
Kladblok is volstrekt ongeschikt om html/css in te schrijven. Leuk programma, maar niet hiervoor.
Als je notepad++ (let op de ++) installeert, is dat veel geschikter. Dat is Kladblok met twee plussen. Eén van de voordelen is dat je code kleurtjes krijgt, waardoor hij veel leesbaarder wordt. Je kunt ook vanuit notepad++ de code gelijk openen in Firefox/IE/Safari of noem maar op, zodat je ook gelijk veranderingen ziet.
Als je in Firefox zou ontwikkelen (Google Chrome schijnt onderhand evenveel mogelijkheden te hebben, maar dat ken ik nou eenmaal niet zo goed), heb je uitstekende hulpmiddelen die ook gelijk laten zien wat er gebeurt als je iets verandert. Mocht je het willen proberen, dan vind je hier wat extensies (uitbreidingen) bij Firefox die echt heel goed zijn:
http://css-voorbeelden.nl/links.html#a-ger-debug-ff

Ik heb die pagina van jou even 'omgebouwd' naar een aparte html- en een apart css-bestand. Deze pagina zou je als basis voor andere pagina's kunnen gebruiken: gewoon veranderen wat er anders in moet worden. Omdat de opmaak nu helemaal in de css staat, is die geldig voor élke pagina waar je hem aan koppelt.
Dit geeft misschien even 'n beter beeld van hoe html/css er uit komt te zien.

* De css is aan de html gekoppeld via <link rel="stylesheet" enz.
* Tussen <title> en </title> zet je de titel van de pagina. Dat is wat je bovenin de browser ziet.
* Bij het menu miste de <ul> en </ul>. Die heb ik toegevoegd. Bij de css voor <ul> heb ik list-style-type, margin en padding toegevoegd. Margin en padding is verschillend in diverse browsers, dus die moet je altijd even zelf opgeven. Lijst-style-type: none verwijdert de balletjes e.d. bij een lijst.
* Binnen een lijst mag er niets buiten de <li> staat. Bij jou stonden er <br>'s. Die heb ik weggehaald. Waar de scheiding moest komen, heb ik de <li> onder de scheiding een class="scheiding" gegeven. In de css heb ik die <li>'s een marge aan de bovenkant gegeven.
Zou je nu besluiten de scheiding groter/kleiner te maken, weg te halen, noem maar op, hoef je maar op 1 plaats voor de hele site een wijziging aan te brengen, en niet in elk bestand een <br> toe te voegen of zo.
* In div#content heb ik de <br>'s weggehaald. Als je de tekst in <p>'s zet, krijgen die automatisch een marge boven en onder (die je aan kunt passen met css).
Voor de bovenste <p> heb ik in de css toegevoegd:
#content p:first-child: margin-top: 0;
In normale taal; een <p> binnen #content. Maar alleen als die het EERSTE kind is, dus alleen de eerste <p>. Nu wordt alleen bij de bovenste <p> de marge bovenaan verwijderd.
(:first-child is iets waar veel mensen moeite mee hebben, maar dat soort dingen leer je vanzelf wel)
* De charset heb ik veranderd in utf-8. utf-8 is met stip de beste. Je mag dat gewoon geloven of, als je daar lol in hebt, hier het uitgebreide waarom en zo lezen:
http://css-voorbeelden.nl/artikelen/htm ... n-064.html
Jouw copyright-teken verscheen bij mij als een vraagteken. Dat kun je op twee manieren voorkomen: utf-8 gebruiken (en je tekst ook opslaan als utf-8, elke goede editor kan dat. Kun je meestal instellen bij voorkeuren of zoiets). Of een 'entiteit' gebruiken. Voor het copyright-teken is dat &copy;
* In het menu heb ik bij schaatsenmakers een link toegevoegd. Dat moet je dus voor elke link doen. De <title> is van belang voor zoekmachines, spraakbrowsers, e.d.
De text-decoration en color heb ik weggehaald bij #navigation. Die hebben namelijk alleen maar invloed op een link <a> als je ze rechtstreeks bij die link opgeeft. Dus in de css is ook verschenen #navigation li a (links die binnen een lijst-ingang liggen, die weer binnen #navigation ligt).

Nou, dat is nogal wat informatie. Vermoedelijk ben je inmiddels wat groen en blauw uitgeslagen :D
Maar op dit moment hoef je eigenlijk niet veel meer dan dit te weten om verder te gaan. De meeste pagina's zullen in principe vrijwel hetzelfde worden, met alleen andere inhoud. Voordeel van externe css is ook bijvoorbeeld, dat je bij meer pagina's kunt uitproberen of de kleuren bevallen. Wil je ze wijzigen, dan hoeft dat alleen maar in dat ene externe stylesheet.
Het is natuurlijk jouw site en ik kan me goed voorstellen dat je voor Kompozer kiest, omdat dat makkelijker lijkt. Ik schrijf lijkt, omdat ik het persoonlijk veel makkelijker vind om dingen met de hand te doen dan zo'n programma te leren kennen, met alle vreemdigheden die elk programma heeft. (Ben trouwens bepaald niet de enige die dat makkelijker vindt.) Alleen: als je voor kompzer kiest, dan kan ik je niet helpen met vragen over dat programma. Dat kost me te veel tijd, want dan moet ik daar eerst zelf mee leren werken. Ik kan wel altijd vragen over html/css beantwoorden, maar hoe je dat dan in Kompozer moet aanbrengen, daar haak ik dan af.

O ja. Dat menu, dat komt natuurlijk op (vrijwel) elke pagina terug. Net zoals mogelijk de header en de footer. Als je enkele pagina's hebt die helemaal goed zijn, zou je dat kunnen vervangen door aparte bestandjes. Je voegt dan dat bestand in, zodat je niet op elke pagina opnieuw dat menu neer hoeft te zetten. Empirisch is namelijk aangetoond dat het tot neerslachtigheid lijdt als je later een pagina wilt toevoegen of verwijderen :D
Als je php of ssi gebruikt om menu e.d. in te voegen, hoef je maar op één plaats 'n wijziging aan te brengen. Maar beter is om wel eerst even 'n paar pagina's te maken, zodat je zeker weet dat alles goed werkt.

P.S.: waar ik niet naar heb gekeken: waarschijnlijk kan er nog heel wat css uit, zoals font-style: normale. Programma's als Kompozer zetten er meestal heel wat overbodige css in. En er kan waarschijnlijk ook wel wat gecombineerd worden.
En ps 2: font-family klopt niet helemaal. Namen met spaties moeten tussen aanhalingstekens. En ik zou er sans-serif aan toevoegen. Als iemand dan geen Trebuchet MS heeft, wordt in ieder geval een font zonder schreef (dwarsstreepjes) gebruikt:
font-family: "Trebuchet MS", sans-serif;

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="stijl.css">
	<title>Het virtuele schaatsenmuseum</title>
</head>
<body>
	<div id="container">
	<div id="banner">
		<img width="980" height="180" alt="fragment from painting Cable" src="images/alg-banner-n.jpg">
	</div>
	<div id="titelbalk">titel en paginanummers</div>
	<div id="navigation">
		<ul>
			<li><img width="43" height="21" alt="engelse vlag" src="images/alg-vlg.gif"><br><br>baanschaatsen</li>
			<li>kunstschaatsen</li>
			<li>ijshockeyschaatsen</li>
			<li>zwierschaatsen</li>
			<li>bijzondere schaatsen</li>
			<li>krulschaatsen</li>
			<li>kinderschaatsen</li>
			<li class="scheiding"><a href="schaatsenmakers.html" title="schaatsenmakers">schaatsenmakers</a>schaatsenmakers</li>
			<li>merktekens en etiketten</li>
			<li class="scheiding">schaatsen-abc</li>
			<li>schaatsdisciplines</li>
			<li>historische ontwikkeling</li>
			<li class="scheiding">kampioenen</li>
			<li>wereldrecords</li>
			<li class="scheiding">bibliotheek</li>
			<li>galerie</li>
			<li>museumwinkel</li>
			<li>spreekbeurt</li>
		</ul>
	</div>
	<div id="content">
		<p>Hier komt de content. Het uitgangspunt is&nbsp;dat er twee kolommen &nbsp;zijn, horizontaal verdeeld in verschillende 'compartimenten' van 300px breed en een padding van 1px. In het midden wordt een margin van 2px aangehouden. Doorgaans zal in het ene compartiment een foto worden getoond en in het naastliggende de begeleidende tekst. Alle foto's zijn 300px breed.&nbsp;</p>
		<p>Soms zullen de horizontale compartimenten worden gefuseerd tot een groot veld van 606px met een padding van 1px. Dit om zo nu en dan een grote foto te kunnen plaatsen.<br><br>Deze opzet is gekozen om het geheel 'rustig' te houden.</p>
		<p>Ik vraag mij af of ik hiervoor toch maar niet weer gebruik moet gaan maken van tabellen. Dat lijkt mij het gemakkelijkst te werken. En verschillende deskundigen hebben daar praktisch gezien geen enkel bezwaar tegen. Het zou bij voor- en tegenstanders meer om 'fundamentalisme' gaan.<br><br><br><br><br><br><br><br><br><br><br><br></p>
	</div>
	<div id="right">Dit wordt de rechterkolom. Hier is plaats voor detailfoto's en toelichtende teksten.</div>
	<div id="footer">
		<div>home | sitemap | auteursrechten | contact</div>
	</div>
	<div id="copyright"><br>Copyright &copy; 2002-11 Het virtuele Schaatsenmuseum. Alle rechten voorbehouden.</div>
</div>
</body>
</html>

Code: Selecteer alles

#banner {
  padding: 0px;
  margin-bottom: 15px;
  width: 980px;
  height: 180px;
}

#container {
  border: 1px solid #930000;
  margin: 0px;
  background-color: #660000;
  width: 980px;
  font-family: Trebuchet MS;
  color: #ffff99;
}

#navigation {
  margin: 0px 4px 0px 0px;
  padding: 3px 3px 3px 0px;
  float: left;
  font-family: Trebuchet MS;
  list-style-type: none;
  text-align: right;
  width: 177px;
  font-size: 9pt;
}

#navigation ul {
  text-decoration: none;
  text-align: right;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation li a {
	text-decoration: none;
	color: #fc3;
}

#navigation ul li.scheiding {
	margin-top: 16px;
}

#right {
  padding: 3px 0px 3px 3px;
  float: left;
  width: 183px;
  text-align: left;
  font-size: 9pt;
  color: #ffcc33;
}

#content {
  padding: 3px 0px;
  float: left;
  margin-right: 4px;
  background-color: #930000;
  width: 606px;
  font-size: 11pt;
}

#content p:first-child {
	margin-top: 0;
}

#titelbalk {
  margin-top: 15px;
  margin-bottom: 10px;
  height: 25px;
  padding-top: 6px;
  padding-bottom: 3px;
  width: 980px;
  font-size: 14pt;
  text-align: center;
  background-color: #930000;
  font-weight: normal;
}

#footer {
  position: relative;
  text-align: center;
  clear: both;
  max-width: 980px;
  background-color: #930000;
  top: 10px;
  max-height: 30px;
}

#copyright {
  width: 980px;
  color: #ffcc33;
  font-size: 8pt;
  top: 30px;
  clear: both;
  text-align: center;
  height: 40px;
}
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Dag Goeroeboeroe,
Even een eerste reactie. Opnieuw heel erg bedankt voor alle geduld en tijd. Als er iets is dat mij duidelijk is geworden, is het dat ik een geheel verkeerd beeld had van CSS. Vandaar dat CSS en HTML in mijn vingeroefening dwars door elkaar lopen. Dat heeft tenminste twee oorzaken. Ten eerste mijn eigen wens om alles wat op alle pagina's min of meer wordt herhaald in een soort sjabloon te stoppen. En ten tweede de Belgische cursus die bij het maken van 'Mijn eerste webpagina' ook CSS- en HTML-elementen door elkaar gebruikt. Helemaal achterin het cursusmateriaal staat iets over een externe stylesheet, maar dat heb ik met mijn vooringenomenheid onder 'ten eerste' volledig misgeïnterpreteerd. Kortom, ik voel mij nu volledig gedesoriënteerd en misschien wel gedesillusioneerd. Nu moet ik mij dus ook nog gaan verdiepen in PHP. Of zal ik maar weer teruggaan naar de idee van langs een coulisse van header, menucolumn en footer glijdende contentpagina's? Het voelt alsof ik een pak slaag heb gehad en Ik laat het dus maar even tot rust komen. Morgen ziet het er vast alweer wat anders uit en ga ik weer aan de slag met de stukjes programma die je hebt aangeleverd.
Nogmaals bedankt en een goed weekend gewenst, Bert
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo,

Nee, nee, dat valt heel erg mee. Met die PHP. Dat was als geruststelling bedoeld, maar is kennelijk averechts overgekomen. Ik bedoelde dat dat net zo werkt als 'n frame, dat je niet steeds het menu op elke pagina moet gaan invoeren.
Als je php alleen gebruikt voor invoegen, stelt het echt helemaal niets voor en is - volgens mij - zelfs makkelijker in te voegen dan 'n frame. Maar dat komt wel, als je 'n paar pagina's af hebt.

Wat betreft die css/html: het is net als met optellen leren. Als je het eenmaal weet, is het niet zo ingewikkeld. Het kost alleen even wat moeite om het in de vingers te krijgen. Maar ik geef direct toe: als je al kunt optellen, heb je makkelijk praten.
Het is al 'n tijd geleden dat ik die Belgische cursus heb bekeken, het kan best zijn dat daar wat dingen wat onduidelijk in staan. Maar in feite is er weinig verschil tussen een aparte stylesheet met css en css bovenin een pagina. De css zelf is exact hetzelfde, geen enkel verschil. Het enige verschil is, dat je de css niet in de pagina zet, maar 'koppelt' via een link in de <head> van de pagina.
Die html/css die ik hier heb neergezet als twee aparte bestanden, doet precies hetzelfde als jouw pagina waar de css binnen de pagina staat. Misschien morgen 'ns rustig bekijken, en als je dan nog vragen hebt, hoor ik het wel.
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Daar ben ik weer. Het houdt niet op en ik kan slechts hopen dat je me niet al te stom vindt. De oorzaak van alle ellende lijkt mij nu toch te liggen bij de cursus van web-design.be die je leert een webpagina te maken waarbij html en css door elkaar staan. Jij hebt me dat nu helemaal duidelijk gemaakt en ik beschouw jouw css-document nu als een basis waarmee ik verder kan om al gaande meer opmaakdata vast te leggen. Je vele opmerkingen over (in)consistenties wil ik graag ter harte nemen in het vervolg. Want ik geef niet op! grgrgr
Maar... ik durf het bijna niet te zeggen... nadat ik beide door jou aangereikte documenten samen in een map heb gezet en het ene stijl.css en het andere sjabloon.html heb genoemd, schuiven ze in Firefox niet in elkaar als ik sjabloon.html laad... Wat doe ik nu weer niet goed?

Ik laat het hier even bij, omdat ik als het wel werkt eerst een paar echte contentpagina's wil overzetten van oud naar nieuw. Als ik dat onder de knie heb, wil ik nog een keer naar het menu en de footer kijken. Want eigenlijk is het hele project begonnen met dat ik vond dat het veranderen van 2010 in 2011 in copyrightregel toch anders zou moeten kunnen dan dat 300 keer met de hand te doen. hahaha
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo,

Stom? Nee, natuurlijk niet. Websites zijn gewoon niet jouw terrein. Ik weet niets van schaatsen af.
Ik heb die cursus nog 'ns even bekeken. Persoonlijk vind ik het nog steeds duidelijk, maar dat is voor mij wat moeilijk te beoordelen, omdat ik de inhoud natuurlijk al kende toen ik hem bekeek.
Als je css/html leert, is het heel handig om de css en de html in één pagina te zetten. Ook als je dingen uitprobeert. Dus tijdens die cursus: prima. Maar misschien hadden ze inderdaad iets beter moeten uitwerken dat je het dan uiteindelijk apart moet zetten. Maar op zich is dat dus niet ingewikkelder dan alle css letterlijk kopiëren naar een apart bestand, met één link daarnaartoe.

Ik heb trouwens misschien ook wel veel te veel dingen in één keer verbeterd. Dat maakt mogelijk ook wat moedeloos.

In principe moeten die css en die html gewoon in elkaar schuiven. Als je de html en de css van dit forum precies zo hebt gekopieerd, zou het moeten werken. Ik begrijp dat er helemaal niets werkt. Dan kan het haast niet anders dan dat er iets mis is in de naam, de koppeling of helemaal bovenin het css-bestand.
Mogelijke oorzaken:
* het bestand met de css moet 'stijl.css' heten. Het moet in dezelfde map staan als de html, dus niet in een sub-map of zo.
* er mag NIETS voor #banner staan. (Je kunt wel commentaar en uitleg en zo toevoegen aan zo'n bestand, maar dat moet volgens specifieke regels, want zo slim is 'n browser niet.)
* De koppeling vanuit het html-bestand naar de css moet tussen <head> en </head> staan en precies zo zijn:
<link rel="stylesheet" type="text/css" href="stijl.css">
Als dat allemaal in orde is, zou je het dan even online kunnen zetten? Dan kan ik ernaar kijken. De css én de html.

Ik ga je mogelijk weer wat ontmoedigen, maar het eindigt goed, hoop ik.
Wat ontwerp betreft kun je die pagina als basis gebruiken. Maar hij is daar nu eigenlijk nog niet helemaal geschikt voor. Als je dat wilt, kan ik (over)morgen of zo wel even een ontwerp maken, dat technisch helemaal in orde is. (Dat wil zeggen dat het goed werkt en er (vrijwel) hetzelfde uitziet in Firefox, Opera, Google Chrome, Safari en Internet Explorer 7 en nieuwer). Ik durf het haast niet te zeggen, maar wat jij wilt is technisch niet echt heel ingewikkeld.
Omdat je site best nogal wat pagina's heeft, is het denk ik handig als de basis-html en -css echt goed in elkaar zitten.
Ik heb het dan op geen enkele manier over het uiterlijk, alleen over de technische kant. Kleuren, breedte van de linkerkolom, enz., enz., dat is jouw afdeling. Dat kan trouwens (vrijwel) allemaal ook achteraf heel simpel worden aangepast.
Het is alleen wat vervelend als je 400 pagina's af hebt, en er moet dan overal alsnog 'n regeltje bij...

De pagina die je nu hebt, werkt al. Maar je schreef 'n paar dingen, die nu nog niet kunnen.
Je wilde de header en de linkerkolom niet mee laten scrollen bij een langere pagina. Dat gebeurt nu wel. Verder kun je bijvoorbeeld de footer heel simpel door 'n apart bestandje vervangen, zodat je dat jaartal maar één keer hoeft te schrijven. En in 2013 ook op maar één centrale plaats hoeft te veranderen.

Als je wilt dat ik even wat in elkaar zet, moet je het maar laten weten. De rest kun je dan zelf doen, met nog wat hulp als dat nodig is.
Mijn idee is om die pagina van jou te gebruiken, zoals je die aan mij hebt gestuurd, met de volgende wijzigingen:
* De header blijft stilstaan, scrollt niet mee als de pagina langer is dan het scherm.
* De linkerkolom scrollt niet mee, blijf stilstaan als de pagina langer is dan het scherm.
* De hele pagina horizontaal in het midden van het scherm zetten, als het scherm breder is dan de pagina.
* Wat je nog meer kunt bedenken.
* Als de header, de footer en het menu overal (of op heel veel pagina's) hetzelfde zijn, dan zijn dat drie dingen die prima in een apart bestandje kunnen. Dan hoef je het maar één keer te schrijven. (Dat kan met PHP of SSI, maar dat is dus écht heel simpel. Voor SSI is dat gewoon:
<!--#include file="naam-van-bestand" -->
Voor PHP is het iets soortgelijks simpels. Meer hoef je er niet van te weten dan die ene regel.
Laat maar even weten of je wilt dat ik wat in elkaar bak op basis van jouw pagina. En of wat hierboven staat is wat je bedoelt, met die vaste header en zo.

Als je dan zo'n pagina hebt, is het gewoon 'n kwestie van dezelfde basis opvullen met andere gegevens. En als je 'n paar pagina's af hebt, kun je heel simpel de marges, kadertjes, enz. alsnog aanpassen, als je dat zou willen.

De copyright-regel zit in de huidige site, als ik het goed zie, in elke pagina. Zoals je site nu is, kun je dat niet automatisch veranderen. Althans: er zijn wel methoden om automatisch overal '2010' te vervangen door '2011', maar dat heeft dan niets meer met html of zo te maken. Dan gebruik je gewoon 'n programmaatje om automatisch in een aantal bestanden tekst te veranderen. Zoals Zoek en vervang in een tekstverwerker. Maar dat is wel wat listig, want als je het niet heel goed opgeeft, wordt ook op de verkeerde plek '2010' vervangen.
Als die copyright-regel apart had gestaan, in een eigen bestandje, had dat wel gekund, want dan had je maar één regel gehad, die op elke pagina terugkwam.

De site die jij nu hebt is onmogelijk automatisch te veranderen. FrontPage maakt code die totaal niet volgens de standaard is. (Dat deden er trouwens meer toen FrontPage verscheen, onderdeel van de zogenaamde 'browserwar'.)
Geneste tabellen e.d. zijn onmogelijk automatisch om te zetten naar betere lay-out, dat kan alleen met de hand. Daarnaast heeft FrontPage een foutief 'boxmodel'. Ik zal je niet vervelen met wat dat is, maar het betekent per definitie dat heel veel maten in andere browsers dan Internet Explorer helemaal verkeerd zijn. (En ook in Internet Explorer 8 zijn er soms problemen, en dat zal in IE 9 zeker niet minder zijn.)
Wat dan wel weer meevalt: als je 'n basis-pagina hebt en de bijbehorende css, dan kun je die pagina eindeloos kopiëren. Alleen de inhoud, de tekst en de foto's veranderen, met allerlei tags als <table> en <font> heb je niets meer te maken.
Als jouw site helemaal goed zou werken, kun je je zelfs afvragen of het de moeite wel waard is. Maar jou site heeft al (grote) problemen in diverse browsers, dus je zult wel moeten.
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Laat er geen misverstand over bestaan: ik heb er nog steeds zin in en ben ervan overtuigd dat ik kom waar ik wil zijn, maar ik besef dat ik erg afhankelijk ben van jou. Dat frustreert mij nu en dan. Ik kan daarom slechts hopen dat je de rit ook verder mee wilt maken. En hoop dat ik aan het eind weer op eigen benen kan staan.

Ik ga ervan uit dat het probleempje met in elkaar schuiven van het html- en css-bestand dat jij hebt aangereikt eenvoudig is op te lossen. Je kunt ze openen via http://schaatsenmuseum.nl/nieuw/sjabloon.html.

Wat je hebt gedaan door het uit elkaar halen van html en css kan ik volledig volgen en ik denk dat ik er straks wel zelf mee uit de voeten kan. Dat alle pagina's van de oude site handmatig moeten worden overgezet in de nieuwe is geen nieuws. Dat heb ik vanaf dag één beseft. Misschien dat ik onderweg nog wel eens tegen je aan zal willen praten, maar ik denk dat dit deel van het project zijn einde nadert.

De vraag wat nu de constructie voor de website als zodanig is, vraagt echter nog aandacht. Zoals eerder betoogd, zoek ik ook hier naar mogelijkheden om 'vaste' elementen als menu en copyright bij aanpassingen (een menu-item erbij of het jaartal veranderen) slechts één keer te hoeven veranderen.
In de oude site gold dit al voor de navigatiekolom: die zat in de 'coulisse' samen met de kop. De content schoof daar als het ware langs en onderdoor.
Voor de nieuwe site had ik gehoopt dat css voor dit vraagstuk de oplossing zou zijn. Daar blijk ik mij behoorlijk in te hebben vergist. Maar het zou toch wel handig zijn die twee elementen in twee afzonderlijke bestandjes te zetten die telkens vanuit de bestandenmap worden ingelezen. Kan php of ssi dat inderdaad? Of bestaat er zoiets als automatisch activerende hyperlinks?
Als het allemaal teveel gevraagd is wat dan? Terug naar het oude coulisse-model? En daar de copyrightregel als vaste footer aan toevoegen? Of alleen de navigatiekolom als coulisse aanbrengen en de footer (weer) opnemen in alle (ruim 300) contentpagina's?
Als jij technisch geen betere oplossing ziet, denk ik dat ik maar voor het laatste model kies.

Zoals iedere keer opnieuw ben benieuwd naar je (zeer gewaardeerde) reactie.


PS: ik heb Notepad++ geïnstalleerd (zier er gelikt uit, lijkt wel Word). Jouw twee bestandjes verschijnen daarin met dubbele regelafstand. Is dat de bedoeling? Of moet ik iets aan de instellingen veranderen?
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo,

Die grote problemen zijn meestal het makkelijkste. Als iets het helemaal niet doet, zoals bij jou. Er is kennelijk iets fors misgegaan bij het downloaden van die bestandjes vanaf hier. In je html-pagina staan de regelnummers. Die moeten eruit. Dus 1. 2. 3. enz. moet er gewoon tussenuit, net zoals de lege regels.
Bij de css is om een of andere vreemde reden overal een # voor gezet. Die # moet alleen voor een element staan, zoals bij #banner. Op alle lege regels moet hij weg, en de lege regels zelf kunnen ook weg.

Ik werk zelf op Linux en had downloaden van code op Windows nog nooit geprobeerd. Dat blijkt wat problematisch. Voor een deel door het verschil in nieuwe regels tussen Linux, Windows (en Apple, en ...). De server waar mijn site op staat draait ook op Linux, en dat werkt bij mij dus perfect, maar niet in Windows.
Het beste werkt het als je in Internet Explorer gewoon de code kopieert. Dan krijg je hem zonder regelnummers. Kopiëren naar Notepad++ werkt prima. Alleen moet je even opletten dat je niet onderaan per ongelijk een stuk extra tekst mee kopieert, zoals ik deed. :lol:
Die dubbele regelafstand in Notepad++ heeft ongetwijfeld ook te maken met het verschil in codes voor een nieuwe regel tussen de diverse systemen.
(Je kunt dat wel automatisch gaan corrigeren, maar bij zo'n klein stukje code gaat het veel sneller met de hand).
Je kunt natuurlijk ook met de hand die regelnummers en overbodige lege regels weghalen in je html, en de overbodige lege regels en overbodige #'s in je css.

Het vastzetten van van kop en linkermenu kan prima met css. En het eenmalig invoegen van de copyrightregel ook. Maar dat zijn, anders dan met frames, twee losstaande zaken.

Zoals je het nu hebt ontworpen, schuiven kop en menu links mee als je gaat scrollen. Maar je kunt dat vastzetten, wat jij het coulisse-model noemt. Dat vastzetten doe je met behulp van css. Alleen moet dan de css worden aangepast, en dat zie ik je niet 1-2-3 doen als je net begint. Maar dat kan dus uitstekend. Dat was eigenlijk ook mijn aanbod: als je dat wilt, dat ik dat even voor je bak, en dan kun jij verder gaan. Het kan dus wel met css. Heel goed zelfs, en zonder de nadelen die frames hebben.
(Je gebruikt daar position: fixed; voor. Dan blijven delen stilstaan bij scrollen. Maar fixed kan nogal wat bijwerkingen hebben en is in het begin even lastig in de vingers te krijgen. Maar natuurlijk kun je het gewoon proberen.)

Helemaal los daarvan kun je de footer in een apart bestandje zetten. Net zoals het menu. Of de kop. Of wat je ook maar wilt. Dat losse bestandje, dat je dus maar 1 keer hoeft te maken, voeg je dan gewoon op elke pagina in. En dat doe je met php of ssi. Maar dat staat dus helemaal los van de css.
Dit invoegen is echt heel simpel. Het heeft dezelfde voordelen als frames (je hoeft maar één keer een menu, footer, ... te maken), maar het heeft niet de nadelen die frames hebben.
Maar over die php of ssi hoef je je nog niet druk te maken. Eerst maak je 'n paar pagina's om te kijken of alles goed werkt en het uiterlijk bevalt. Als dat zo is, dán pas ga je het menu of de footer eruit lichten, in een apart bestandje zetten en dat op elke pagina invoegen.
Ik zou hier dus gewoon even niet meer over denken. Dat komt wel als je 'n paar pagina's af hebt. Dan houd je het ook wat overzichtelijker voor jezelf.
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Intussen was ik er ook achter gekomen dat het probleem wordt veroorzaakt bij het kopiëren naar Notepad++. Het merkwaardige is dat de dubbele (lege) regels door Notepad++ van een nummer werden voorzien. Maar enfin, de nummers en de lege regels heb ik verwijderd et voilà, fantastisch. Ben ik toch weer een groot deel van de dag mee zoet geweest. Want het is nu ook weer niet zo dat ik alleen nog maar reageer op wat jij voor mij doet. Bepaald niet, want mijn streven is toch spoedig alleen verder te kunnen. Maar een hoog rendement heeft mijn gepruts tot nog toe niet gehaald...

Goed, ik doe nu net of het probleem met de navigatiekolom is opgelost (ik heb uiteraard alle vertrouwen in het vervolg van jouw medewerking) en begin morgen met het maken van een aantal contentpagina's. Ik ga dat doen met behulp van Kompozer, waarmee ik nu al met al een flink aantal uren geëxperimenteerd heb en waarvan ik hoop dat ik er nu iets moois mee kan maken. Enfin, we zullen zien... Ik hoop je in positieve zin te verbazen.

Tot de volgende keer.
barondesalis
Berichten: 8
Lid geworden op: di 08 feb 2011, 20:47

Re: Geneste frames en tabellen

Bericht door barondesalis »

Beste Goeroeboeroe, daar ben ik weer. Na je laatste reactie heb ik het project min of meer gedesillusioneerd eerst een par dagen laten liggen, wat gelukkig geleid heeft tot nieuwe zin. Intussen heb ik mij KompoZer eigen gemaakt (ik ben nu eigenlijk ook zover dat ik KompoZer niet meer nodig heb) en ben ik weer een week met vallen en opstaan aan de slag geweest. Ik hoop dat ook jij tevreden bent over wat ik heb bereikt. (klinkt zwaarder dan ik bedoel, maar ik waardeer je deskundigheid en betrokkenheid zeer!).
Het resultaat heb ik opgeladen en kun je 'bewonderen' via de volgende url's:
http://schaatsenmuseum.nl/nieuw/model-masker.html
http://schaatsenmuseum.nl/nieuw/model-submenu.html
http://schaatsenmuseum.nl/nieuw/ind-nav-baan.html
http://schaatsenmuseum.nl/nieuw/bn-frs.1.html
Het model-submenu heb ik eigenlijk slechts volledigheidshalve opgeladen. Het bestand ind-nav-baan.html is er mee gemaakt. In dit bestand heb ik een link gemaakt naar Friese schaatsen pag.1 (met oplichten en andere kleur voor bezochte link). Dit werkt zoals het moet.
Het model-masker geeft nog wat problemen, die mede te maken hebben met waar we eerder over spraken. Ik heb de problemen in het contentdeel van het masker beschreven. et voornaamste probleem zit 'm toch in de wat ik maar voor het gemak de 'framefunctie' noem. Ik hoop dat je het na lezing begrijpt en hoop vurig dat je daarvoor een oplossing kunt aanreiken.
Het zou mij niet verbazen als ik het daarna verder op eigen kracht zou kunnen.
En dat zou toch een prachtig resultaat zijn!
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Geneste frames en tabellen

Bericht door Goeroeboeroe »

Hallo,

Dat het niet lukte met die template, verbaast me niets. Dat ding is uit de prehistorie. (Acht jaar oud en niet bijgewerkt is in computertermen de prehistorie). Overigens best 'n leuke template, voor die tijd. Maar wat jij wilt, kan die template niet. Wat ze daar met 'fixed' bedoelen, is de breedte van de linkerkolom. De linkerkolom blijft even breed, ongeacht de breedte van de browser. Maar hij scrollt gewoon mee. Het staat wat onduidelijk omschreven op die site, maar in die tijd had je nog nauwelijks of geen browsers die een fixed positie met behulp van css aan konden.
Wat jij wilt is denk ik dit: http://css-voorbeelden.nl/lay-out/twee- ... t-002.html
Er zijn eigenlijk vrij weinig templates waarbij de header en/of de linkerkolom blijft staan. Deze heeft dat wel (en deze ken ik goed, want ik heb 'm zelf gemaakt.)
Bij die template staan de linkerkolom en de header stil. De footer staat altijd onderaan het venster, ook bij weinig inhoud, en staat ook stil. Alleen het middelste deel scrollt, als er genoeg inhoud is.

Eigenlijk weet ik niet helemaal goed hoe ik moet antwoorden. Ik zie aan de ene kant veel betere code, maar aan de andere kant is de volgorde van het schrijven volgens mij nog niet helemaal goed.
Als de linkerkolom, header en footer moeten blijven staan, is het eigenlijk beter daarmee te beginnen. En dan pas de invulling te maken. Voor de linkerkolom bijvoorbeeld maakt het nauwelijks iets uit wat erin staat. Of dat nou 'n afbeelding is of 'n menu: het vastzetten gebeurt op dezelfde manier. Maar het is veel lastiger om dat achteraf aan te brengen.
Het hele idee van frames moet je eigenlijk helemaal vergeten. Zoals je bij die template op de site kunt zien, zijn die niet nodig om bepaalde delen niet mee te laten scrollen.
Die menu's en zo die steeds hetzelfde zijn op elke pagina, dat komt pas later. Bij frames moet je daar gelijk in het ontwerp rekening mee houden, bij andere (betere) methodes niet. (Of nauwelijks...)
Op jouw site komen denk ik 'n paar soorten pagina's steeds terug, met alleen andere inhoud. Als je van één soort pagina er twee of drie maakt, dan weet je redelijk zeker dat er geen al te grote veranderingen meer in gaan komen. Op die pagina's zet je gewoon elke keer de header, de footer, het menu, alles.
En pas dan, als dat goed werkt, ga je die code eruit lichten en apart zetten.

Pas als je enkele pagina's van één model hebt, weet je welke code er 100 procent zeker hetzelfde is.

Mijn werkwijze zou zijn om een template te nemen (zoals die op mijn site, maar 'n andere kan natuurlijk ook), en die dan aan te gaan passen. Dus de breedte en hoogte en zo aanpassen aan wat jij wilt. (Die templates op mijn site zijn trouwens te downloaden.)
Vervolgens de inhoud kopiëren: linkerkolom naar linkerkolom, header naar header, enz.
En zo dus twee of drie pagina's maken, zodat je zeker weet wat hetzelfde is.
Als je een goede template neemt, weet je zeker dat de basis werkt in elke browser. (Wel heel regelmatig blijven controleren of 't ook goed blijft werken natuurlijk.)
In model-masker zitten nog wat technische foutjes. Als je de pagina valideert, worden veel van dat soort fouten gevonden. Fouten tegen de regels van de taal kunnen de meest vreemde gevolgen hebben, en dat kan ook nog 'ns per browser en per versie verschillen.
html kun je valideren op http://validator.w3.org/
en css op http://jigsaw.w3.org/css-validator/
In dit geval staat de linkerkolom in een <ul>, maar niet alle ingangen staan in een <li></li>
Plaats reactie