programmeren met DIV's

[KoenvanV]

Ik zoek hulp bij programmeren: de website www.buurtstation.nl heeft op bijna elke pagina rechts een deel dat moet worden bijgewerkt als daar iets verandert (onderwerpen, bestuursleden, topics). Nu is de situatie zo dat ik 20x dezelfde informatie moet veranderen op elke pagina. Kan dat niet handiger? Ik dacht die DIV apart te laten inladen, maar hoe doe ik dat? Alle boeken die ik heb spreken daar niet over.
Ik heb de HTML al gescheiden in twee proef bestanden maar ik heb geen idee hoe ik die rechter div kan vullen met een interne link.....
Wie weet dat of kent een club die mij kan helpen?

[nirwana]

Koen,

Bedoel je het element met <div class="right sidebar" id="sidebar"> met daarin de section's ?
Het lijkt me handig om die <ul class="nice-list"> elementen daarin van een id te voorzien.
Met een id kun je er namelijk straks bij via document.getElementById(). Ook weet je dan welk element je te pakken hebt en kun je die vullen met de nodige linkjes.

Hier staat een handleiding van hoe je met ul-elementen (en de onderliggende list-items) kunt programmeren in Javascript: http://java-programming.suite101.com/ar ... javascript

Mocht je er zo niet direct uit komen, dan zal ik me hier nog iets verder in moeten verdiepen.

[KoenvanV]

Koen,

Bedoel je het element met <div class="right sidebar" id="sidebar"> met daarin de section's ?
Het lijkt me handig om die <ul class="nice-list"> elementen daarin van een id te voorzien.
Met een id kun je er namelijk straks bij via document.getElementById(). Ook weet je dan welk element je te pakken hebt en kun je die vullen met de nodige linkjes.

Hier staat een handleiding van hoe je met ul-elementen (en de onderliggende list-items) kunt programmeren in Javascript: http://java-programming.suite101.com/ar ... javascript

Mocht je er zo niet direct uit komen, dan zal ik me hier nog iets verder in moeten verdiepen.

Dank Martijn!
Ik bedoel die inderdaad. Het geheel is een template dat ik van internet gehaald heb en het werkt goed. Alleen is het niet met HTML te doen? Die pagina is toch HTML? Ik weet er te weinig vanaf en van javascript weet ik vrijwel niets.

Waar het mij omgaat is dat elke gewone pagina die rightsidebar (met onderwerpen, bestuursleden en topics) heeft en die wil ik afzonderlijk van de gewone pagina's kunnen updaten zodat hij in een keer voor alle pagina's geupdate kan worden. Dat de rightsidebar bij elke pagina bij opstarten geladen wordt dus.

[knorretje]

Een DIV apart inladen uit een ander bestand is helaas niet toegestaan in HTML.
Het is op zich wel een slim idee.
Maar ik ben bang dat er geen simpele oplossing voor is.
Je kunt wel gaan werken met frames, maar dan moet je template compleet verbouwd worden, en aan frames zitten ook weer andere nadelen vast.
Dat is ook de reden dat grote bedrijven vaak een speciaal CMS-programma gebruiken voor hun website.
(CMS = programma dat automatisch webpagina's maakt).

[nirwana]

Ik heb wel eens begrepen dat er best wat webservers zijn die Server Side Includes (SSI) ondersteunen.
Dat zou in jouw geval het gemakkelijkste zijn. Hier staat hoe je kunt controleren of jouw server SSI ondersteund: www.mijnhomepage.nl/ssi/index.php
Is dat het geval dan kun je via de include-instructie andere bestanden insluiten. Dan kun je de gehele rechter-zijbalk in een apart bestand plaatsen en dat in elke pagina invoegen.

Mocht dat niet mogelijk zijn, dan moet ik maar eens een voorbeeld maken van hoe het met Javascript zou kunnen. Dat moet ik echter zelf ook even uitzoeken, maar moet op zich ook wel gaan lukken.

[KoenvanV]

even tussendoor: hoe kan ik mijn e-mailadres hier veranderen? Ik ben van provider veranderd.

[Frederik]

Klik bovenin de pagina op Gebruikerspaneel en vervolgens links in het venster op Profiel > Wijzig registratiedetails.

[KoenvanV]

Ik heb wel eens begrepen dat er best wat webservers zijn die Server Side Includes (SSI) ondersteunen.
Dat zou in jouw geval het gemakkelijkste zijn. Hier staat hoe je kunt controleren of jouw server SSI ondersteund: http://www.mijnhomepage.nl/ssi/index.php
Is dat het geval dan kun je via de include-instructie andere bestanden insluiten. Dan kun je de gehele rechter-zijbalk in een apart bestand plaatsen en dat in elke pagina invoegen.

Mocht dat niet mogelijk zijn, dan moet ik maar eens een voorbeeld maken van hoe het met Javascript zou kunnen. Dat moet ik echter zelf ook even uitzoeken, maar moet op zich ook wel gaan lukken.

Dank Nirwana!
Ik ga aan de slag met SSI; ik heb de test gedaan en het werkt!

Ik heb het geprobeerd maar het is erg ingewikkeld. Ik krijg de html code die in een bestand staat niet zichtbaar op de moeder pagina:
ik heb dus op www.buurtstation.nl op bijna elke pagina een right side bar die ik dus in wil voegen via SSI. Omdat de pagina nogal ingewikkeld is met vele DIV's, weet ik iet precies welk deel ik in de include moet stoppen en wat niet.
Verder vind ik het vreemd dat die include instructie tussen commentaar haken staat; hij blijft groen in mijn editor en wordt ook niet zichtbaar op de pagina......

[nirwana]

Dank Nirwana!
Ik ga aan de slag met SSI; ik heb de test gedaan en het werkt!

Mooi dat dat in elk geval werkt. Dat scheelt het nodige programmeren.

Het deel dat je op alle pagina's wilt laten herhalen, dat stop je in dat include-bestand. Let alleen goed op dat je complete div's in het include-bestand opneemt. Bijvoorbeeld:

Code: Selecteer alles

<div class="section">
				<div class="section-title">Onderwerpen:</div>
				<div class="section-content">
					<ul class="nice-list">
						<li><div><a href="dhsb.htm">de Haagse Stationsbuurt</a></div></li>
						<li><div><a href="stichting.htm">stichting</a></div></li>
						<li><div><a href="activiteiten.htm">activiteiten</a></div></li>
						<li><div><a href="werkgroep.htm">werkgroepen</a></div></li>
						<li><div><a href="buurtkrant.htm">buurtkranten</a></div></li>
						<li><div><a href="links.htm">links</a></div></li>
					</ul>
				</div>
    </div>

Hier zie je dat de <div class="section"> uiteindelijk ook weer netjes wordt afgesloten met een </div>.

Tip: waarom heb je om deze linkjes trouwens een div geplaatst ? Daar zie ik het voordeel niet echt van.

Jouw editor kleurt het groen omdat het een commentaar-gedeelte is. Mede daarom zie je dit gedeelte ook niet in de webpagina zelf.
Je ziet alleen de inhoud van het include-bestand als je het bestand op de webserver plaatst.

[KoenvanV]

ik heb een nog makkelijker manier gevonden: gewoon met php (include)! Ik heb de sites al omgezet en dat scheelt nog eens een hoop ruimte.

(ik vind MozBrowser nog steeds erg onnodig erg ingewikkeld(o.a. veel teveel informatie per pagina): ik had weer een verkeerde knop ingedrukt en gelijk komt mijn bericht op de verkeerde plaats. Is er geen eenvoudiger hulp mechanisme bij Mozilla met een overzicht van alle mogelijkheden?)

[nirwana]

(ik vind MozBrowser nog steeds erg onnodig erg ingewikkeld (o.a. veel teveel informatie per pagina): ik had weer een verkeerde knop ingedrukt en gelijk komt mijn bericht op de verkeerde plaats.

We gebruiken de forum-software die op de meeste andere websites ook in gebruik is. Als het hier fout gaat, dan zal dat op de andere websites vast ook fout gaan. Ik begrijp inmiddels dat je de knop Nieuw onderwerp hebt gebruikt in plaats van Nieuw antwoord. Tja, dat kan eens gebeuren. Ik heb het extra bericht dat hierdoor is geplaatst inmiddels verwijderd.

Is er geen eenvoudiger hulp mechanisme bij Mozilla met een overzicht van alle mogelijkheden?)

Sorry, ik begrijp jouw opmerking niet. Kun je iets uitgebreider uitleggen wat je bedoelt met "een overzicht van alle mogelijkheden" ?

[KoenvanV]

Beste Martijn,

Ik word onzeker van alle mogelijkheden en termen en weet op een gegeven moment niet meer waar ik ben. Nu schrijf ik dit aan jou maar ik zie jouw woorden niet meer! Pas ontdekte ik dat ik dan naar beneden moet scrollen. Wanneer ik een aantal maanden niet op dit forum heb gezeten (en inderdaad: alle fora zijn voor mij abracadabra) dan heb ik geen idee meer hoe het werkt, weet ik niet waar te beginnen, hoe iets terug te vinden: waar ik iets moet intypen.

Vergelijk het met een mobiele telefoon: ik heb er sinds kort een en het heeft mij een hoop tijd gekost om er mee leren om te gaan. Wanneer ik ergens was en ik moest bellen dan moest ik iemand vragen of hij wist hoe het werkt. Nu weet ik al meer, maar als ik een sms bericht zie staan op het scherm dan heb ik geen idee, dus ik negeer ze maar. Ik heb er een met extra grote letters en zonder toeters en bellen.

Hyves daar snap ik ook niks van. Ik moet teveel tegelijk onthouden en dat lukt me niet meer. Komt waarschijnlijk door zeer ernstig ongeval met hoofdletsel in het verleden. Facebook gaat nog wel omdat ik dat veel doe, maar sinds de laatste veranderingen daar weet ik niet meer hoe ik de conversaties die ik opgeslagen had terug kan vinden. Nooit meer teruggevonden.

Ander voorbeeld: het instellen van een nieuw e-mailadres op een account: lukt op cPanel van de betreffende provider, maar in Thunderbird lukt me dat heel moeilijk zonder hulp. Elke keer weer.

De computer is tegenwoordig niet meer gebruikers vriendelijk. Vroeger (eind jaren 70) toen ik programmeerde in BASIC, toen dacht men er wel aan om allerlei dingen in te passen zodat mensen niet de weg kwijtraakten.

[nirwana]

Koen,

Bedankt voor je uitleg. Dat verklaart een hoop.

Enkele tips voor handiger gebruik van het forum:
- als je op een bepaald bericht reageert dan kun je dat op 2 manier doen:
1) via de knop Nieuw antwoord
2) via de knop Quote-knop rechtsonder elk bericht

Deze 2e mogelijkheid biedt voordelen ten opzichte van de Nieuw antwoord-knop, want daarmee wordt de tekst waar je op reageert mee gekopieerd naar de volgende pagina waar je het antwoord kunt invullen. Vervolgens kun je op deze volgende pagina later deze geciteerde tekst te verwijderen. Echter heb je tot die tijd die tekst nog bij de hand en kun je daarop reageren.
Ook voorkom je daarmee dat je per ongeluk op de Nieuw onderwerp-knop klikt.

- iets anders wat ik nogal vaak doe is terug gaan naar de vorige pagina als ik een antwoord plaats.
Met Firefox als browser kun je namelijk eenvoudig teruggaan naar de vorige pagina en vervolgens weer naar je antwoord gaan.
De tekst die je hebt getikt in het antwoord-venster blijft daarbij bewaard, zodat je daar zo mee verder kunt gaan. Je kunt hiervoor eenvoudig de knoppen Terug en Vooruit in de werkbalk van de browser gebruiken. Probeer dit maar eens en zie of het daar makkelijker door wordt.

[KoenvanV]

ik heb besloten om waar het kan niet meer te werken met div's. Tabellen zijn veel handiger.

[nirwana]

ik heb besloten om waar het kan niet meer te werken met div's. Tabellen zijn veel handiger.

Dan zou ik ook de fax, diskette en zipdisk maar weer van zolder halen. En vergeet de telefoon met draaischijf niet, want die is ook heel erg 2011.
Op zich heb je wel gelijk: alles wat eens uit de mode is geraakt komt later wel weer in de mode. Alleen ben ik bang dat we dat met tabellen voor de layout van een webpagina beter niet meer kunnen doen.

Op zich begrijp ik wel hoe je je voelt, want ik heb zelf ook de overstap moeten maken van tabellen naar div's. Ik heb dus ook wel gedacht dat alles met tabellen eenvoudiger was. En me afgevraagd waarom het met div's dan zoveel lastiger op te zetten is.

Maar naar verloop van tijd loop ik aan tegen dingen die met tabellen dan niet goed werkend te krijgen zijn. Dus ben ik me toch maar weer wat meer met div's bezig gaan houden. En ik moet zeggen dat het werken met div's een stuk beter voelt dan met tabellen. Tabellen voelen namelijk alsof ze daar niet helemaal voor zijn gemaakt (en dat klopt op zich ook wel).

Daarom wil ik je vragen waar je bij het gebruik van div's tegenaan loopt, zodat we je ook kunnen helpen om div's beter te leren begrijpen. Het is tenminste mijn ervaring dat problemen met div's vooral te maken hebben met het nog niet in de vingers hebben van diverse wetenswaardigheden rondom div's. Zoals je hebt moeten leren hoe je met behulp van tabellen een beetje fatsoenlijk een website-layout kunt opzetten zo geldt datzelfde voor div's. Het gaat niet van vandaag op morgen (al kun je best snel ver komen als je je erin verdiept), maar naarmate je hier meer mee bezig gaat, gaat het wel beter.

Toevallig heb ik vandaag weer een nieuwe website op basis van div's gemaakt. Vanochtend was er een PDF-bestand met hoe het er ongeveer uit moest zien, vanmiddag was er een basis van een website en inmiddels begint het er behoorlijk op te lijken. Ik heb er nu ook direct een CSS-bestand naast gemaakt en zodra ik weer een nieuw element in de HTML-code toevoegde heb ik die ook aan het CSS-bestand toegevoegd. Voorheen plaatste ik de CSS-code eerst in het HTML-bestand zelf en zette het daarna over naar een CSS-bestand. Maar op zich werkt het ook wel prettig als je direct het CSS-bestand aanmaakt en aanvult terwijl je met de structuur van de HTML bezig bent.

Overigens moet ik erbij vermelden dat het maken van websites zeker niet mijn voornaamste professie is. Doorgaans laat ik dat aan anderen over en houd ik me bezig met de achterliggende techniek, want ook webdesign is een vak apart. Maar naarmate je meer in die wereld bezig bent bekwaam je jezelf er ook wel steeds meer in. Daardoor gaat het opzetten van een website met behulp van div's steeds beter en zou ik nu liever niet meer terug gaan naar tabellen voor de layout.