websiteoverleg.nl voor overleg over uw website project

Beste klanten van dewebmeester.nl (Spiderman Webdesign Wageningen),

Deze email krijgt u omdat u de afgelopen twee jaar een bestelling heeft geplaatst bij dewebmeester.nl ; Om uw website project te laten slagen, is dewebmeester.nl begonnen met een apart forum waar klanten ook met elkaar kunnen overleggen: www.websiteoverleg.nl – Registeren is gratis, het plaatsen van een link of bedrijfsinformatie is ook gratis, het plaatsen van illustraties of linken naar video’s is ook gratis. Het is echter niet de bedoeling dat dit een marktplaats van aanbiedingen wordt, maar vooral forum (een soort Facebook) waar klanten als eerste in overleg kunnen met dewebmeester.nl en daarnaast ook met elkaar kunnen overleggen.

Teamoverleg
Het is aan te raden om vanuit elk bedrijf meerdere verantwoordelijken een eigen profiel te laten maken op www.websiteoverleg.nl zodat hier team overleg gaat plaatsvinden. Websiteoverleg.nl biedt dan ook de mogelijkheid om ook zelf een groep aan te maken of om Events te plaatsen en anderen daavoor uit te nodigen.

Planning
Er wordt gewerkt aan de verdere ontwikkeling van dit systeem waardoor het ook mogelijk zal zijn om te chatten onderling en om bijvoorbeeld een webcam overleg te voeren. Registratie en het aanmaken van een profiel is tot nu toe gratis maar dat kan ik niet garanderen voor de toekomst.

Hartelijke groeten,
Meindert A. Jorna

Dewebmeester NL Meindert A. jorna (Msc.) T./Fax 0031 317 795149 • M. 0031 6 412 86716 • info • Spiderman Webdesign Wageningen • Wageningen • http://www.dewebmeester.nl http://www.decmsmeester.nl http://www.cheap-web.nl

My latest post:Lightbox, onmogelijk in Chrome. Firefox en IE in orde. Read more | My blog

Get this email app!

Popup in Shopify

Dit heeft me veel tijd gekost. Ook Google leek het niet echt te weten. Maar zolang er anderen zijn die wat betreft een bepaald onderwerp op internet hun antwoorden zoeken, is het mogelijk om gebruik te maken van alle stukjes antwoorden om zo toch tot een oplossing te komen. Net een puzzel. Ik houd het even kort want het is te laat geworden.

Doel, probleem, wat er bereikt moet worden:
De klant heeft een Shopify website. Nu wil de klant dat als iemand een menu item aanklikt er een popup venster geopend wordt met een vraag en dat de bezoeker pas verder kan na beantwoorden van de vraag.

Oplossing
De oplossing heet Facebox. Te vinden via http://defunkt.io/facebox/ Ook is daar een summiere uitleg te vinden. Nu lijkt het makkelijk maar dat is het niet als dit in Shopify geintegreerd moet worden. Stappenplan:
– De javascript files en de css file (facebox.css) uploaden via de "add asset" optie in Shopify
– binnen theme.liquid de verwijzing naar deze files plaatsen waarbij als eerste jquery.js geladen moet worden en dan pas facebox.js; Ziet er zo uit:

{{ 'jquery.js' | asset_url | script_tag }} <script> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) </script> {{ 'facebox.js' | asset_url | script_tag }}

Het stukje script

jQuery(document).ready(function($) { $(‘a[rel*=facebox]’).facebox() })

is er tussengevoegd om het mogelijk te maken om via een makkelijke verwijzing: rel="facebox" elke link te laten openen in een lightbox popup.
– Ik maak een pagina binnen Shopify aan met daarin de informatie of html die ik wil tonen binnen de popup.
– Nu nog opzoeken in theme.liquid waar ik die rel="facebox" ga plaatsen. Ik vervang:

<a href="{{ link.url }}" >{{ link.title | escape }}</a>

door:

<a href="#info" rel="facebox">{{ link.title | escape }}</a>

en daaronder plaats ik:

<div style="display:none;" id="info">{{ pages.verification.content }}</div>

Kortom: er is nu geen menulink meer die linkt naar een andere pagina, maar wel een menu titel en bij klikken op dit titel, opent zich een facebox popup met daarin de html die ik heb geplaatst in de pagina Verification. Nu wil ik dat de bezoeker wel naar de pagina kan die eigenlijk achter de menulink schuil gaat en dat doe ik door:
– voordat ik de rel="facebox" plaats, laad ik de pagina in Firefox en kopieer ik de html van het menu en die html plaats ik binnen de html van de pagina Verification. Vervolgens activeer ik rel="facebox", bij klikken op een menuitem wordt standaard de pagina Verification geopend in een mooie popup en daar kan de bezoeker na het doorlopen van vragen en informatie nog een keer overwegen om op de menulink te klikken en wordt vervolgens netjes doorverwezen naar de gewenste inhoud.

Groeten!

Importeren, exporteren, vanuit phpmyadmin database naar Shopify

Dat is vandaag de opdracht: het overzetten van enkele honderden producten naar een nieuwe Shopify webwinkel. Dat wil ik niet handmatig doen. Shopify biedt een optie om producten te importeren vanuit een CSV (Comma Separated Value) en phpmyadmin biedt een mogelijkheid om de database te exporteren in CSV formaat. Dat lijkt dus makkelijk.

Exporteren

Dat betekent het uitzoeken van de juiste database, inloggen bij phpmyadmin, database selecteren, table selecteren (ik kies voor tabel "products"), CSV formaat kiezen en kiezen voor – opslaan op file – en GO. File wordt aangemaakt en ik sla die op op de computer. Makkelijk.

Openen in editor

Standaards doe je zo iets met Microsoft Excel. Ja, ziet er goed uit. Maar is goed ook goed genoeg? Nee. Eerst moet ik ontdekken hoe de te importeren CSV file er uit zou moeten zien. Shopify biedt een voorbeeld CSV. Downloaden en ook openen met Excel om de twee sheets te kunnen vergelijken. De structuur is anders en niet makkelijk handmatig aan te passen. Wat nu? Hier biedt Open Office de uitkomst. Ik open beide sheets in Open Office (Calculator) en voordat het bestand zich opent, krijg ik een extra popup venster waarin ik kan kiezen voor verschillende opties. Daaronder ook een preview van hoe de tabel er uit komt te zien bij de verschillende opties. Voorlopig ben ik gered. Ik kies er voor de beiden sheets op zo’n wijze te openen dat ze dezelfde structuur hebben en ook nog eens makkelijk bewerkbaar zijn. Dat betekent dat de verschillende waarden nu in verschillende kolommen worden weergegeven.

Aanpassen in de editor

Nu kopieer ik eerst de Headers van de originele Shopify sheet naar een lege Open Office database sheet (de eerste rij). Vervolgens kopieer ik handmatig de inhoud van de kolommen uit de phpnmyadmin database onder de bijpassende heads / titels. Zo vul ik mijn lege sheet. Vervolgens importeer ik via Shopify. Ja, dat doe ik vrij snel omdat Shopify niets anders doet dan controleren (mijn website wordt niet aangepast). Shopify geeft aan wat er fout is met mijn csv file en dat pas ik aan in mijn nieuwe csv file. Dit blijf ik herhalen totdat Shopify geen foutmeldingen meer geeft. Vervolgens toont Shopify hoe een product wordt weergegeven als ik doorga met het import proces. Als dat goed lijkt, ga ik importeren en geeft Shopify aan of dit gelukt is.

Importeren van afbeeldingen

Helaas dat is me niet gelulkt (tot nu toe). Want daartoe moet ik de link naar de originele image folder weten (en die heeft de klant niet gegeven en de website draait een php script die de afbeeldingsfolder verstopt). Dat was overigens ook een foutmeldingtijdens het import proces: ik had de image namen weergegeven maar Shopify wil de complete URL hebben van elke image om vervolgens de images te kunnen downloaden. Oplossing: gewoon alle verwijzingen naar images uit de database sheet halen en daarna importeren.104 producten geimporteerd. Nog even zonder afbeelding.

Adsense deel 2: van wordpress naar Blogspot? (blogger.com)

Gisteren heb ik aangegeven om Adsense te willen gaan uitproberen. Ja, reclames kunnen heel vervelend zijn en dat wil ik mijn bezoekers niet aandoen. Dus: mocht u als lezer vervelende reclame tegenkomen op een website van mij, dan zou ik het op prijs stellen als u dat zoudt willen doorgeven.

Stap 1: integreren Adsense in website

Om se Adsense advertenties te laten verschijnen binnen mijn websites, moest ik wat code plaatsen. Niet alleen html maar ook eens script (logisch). In joomla betekent dat ik gebruik maak van een aparte module die dit mogelijk maakt en die voorkomt dat het script geschrapt wordt. Direct plaatsen binnen een artikel  is niet mogelijk. Via een aparte module wel (insert module). Voorbeeld: zie www.dewebmeester.nl onderaan of www.projektduga.nl aan de rechterkant. Vervolgens heb ik advertentie code geplaatst binnen een startpagina van me op intrastart.nl (webdesign.intrastart.nl). Dat is me gelukt via de categorie beschrijving waar ik de script code direct heb kunnen plaatsen. Wat betreft een zelfgehoste WordPress website zie ik veel verschillende opties. Ik kan bijvoorbeeld een html widget plaatsen met de code (eventueel tussen <div></div> tags maar ik kies er voor om functions.php aan te passen en zo een shortcode te creeren waardoor ik via [adsense] op elke willekeurige plaats op een pagina of blogpost Adsense advertenties kan weergeven.

Ik schrok wel even: op mijn nogal serieuze website http://www.dewebmeester.nl verschijnen reclames van dating website of een oproep om een gratis spelletje te doen. Dat wil ik niet. En die optie zet ik makkelijk UIT in de Adsense settings binnen mijn account.

Stap 2: Bekijken en evalueren van statistieken

Via mijn Adsense account kan ik direct zien welke website welke inkomsten genereert. Dat viel me niet tegen. Aan het einde van de dag lijk ik 1,43 Euro verdient te hebben. Natuurlijk zijn er op de Android market leuke applicaties te verkrijgen om dit allemaal live op de telefoon te volgen en de snelste lijkt mij: Adsense360. Vervolgens is het de vraag welke website het beste presteert en hoe de statistieken te verbeteren. Mijn probleem: dit blog is een WordPress.com blog en daarin in Adsense reclame niet toegestaan (en ook technisch onmogelijk). Maar dit blog is mijn meest bezochte website. Hoe los ik dit op?

Stap 3: exporteren van blogposts van WordPress naar Blogger

Ja, het gevaar van “duplicate content” bestaat maar zover ik begrepen heb straft Google dit niet meer af. Google geeft gewoon in de zoekresultaten de oorspronkelijke website weer met de oorspronkelijk inhoud. Kortom: mijn dewebmeester.blogspot.nl (dewebmeester.blogspot.com) zal in de zoekresultaten van Google mogelijk wat minder voorkomen dan dewebmeester.wordpress.com maar dat kan ik mogelijk op een andere manier oplossen. Eerst even proberen te exporteren en importeren. Dat gaat snel en is eenvoudig. Eerst exporteer ik de complete inhoud van mijn WordPress blog, sla op op computer, zet dit bestand om naar een Blogger bestand via: http://wordpress2blogger.appspot.com/ en importeer dit complete bestand via mijn blogger.com account settings. En zo heb ik binnen tien minuten een compleet extra blog, inclusief inhoud waarbinnen Adsense advertenties weergegeven kunnen worden. Zie voorbeeld: dewebmeester.blogspot.nl

Geld verdienen met adverteren (AdSense van Google)

Vanaf vandaag ga ik geld verdienen. Nu deed ik dat natuurlijk al maar gek genoeg heb ik als webbeheerder nog nooit gebruik gemaakt van AdSense. AdSense is de tegenhanger van AdWords waar ik wel al gebruik van maakte: ik betaal voor de aantal keren dat er op een advertentie van mij geklikt wordt. Maar ik wil ook wel verdienen doordat anderen klikken op advertenties die binnen mijn website getoond worden. Dat is AdSense.

Interessant voor u?
Nu bedacht ik me vandaag: dit kan wel eens interessant zijn voor mijn klant. Ik maak websites. Die maak ik op zon manier dat ze zeker aan de vereisten van Google voldoen. Vervolgens plaats ik binnen die website advertenties waar de klant achter kan staan en ook zelf interessant vind. Ik koppel die advertenties aan een AdSense account van Google van de klant en het resultaat: de klant koopt via info Hartelijke groeten!

Meerdere gebruikers, 1 website, verschillende opties (WordPress)

Dit is een belangrijk concept en iets dat een webdeveloper in veel situaties nodig heeft: een website die de mogelijkheid biedt aan andere gebruikers (klanten) om zelf een website te onderhouden of te bouwen. Nu lijkt dat makkelijk te realiseren met een (open source) CMS maar algemene probleem lijkt mij dat medegebruikers standaard dezelfde mogelijkheden hebben als de administrator en de andere gebruikers. Bijvoorbeeld: zowel bij Joomla als WordPress hebben mede gebruikers beschikking over dezelfde templates en thema’s als de andere gebruikers. Het is nog niet zo makkelijk om verschillende gebruikers binnen 1 website, verschillende websites te laten bouwen en te onderhouden. Dewebmeester.nl onderzoekt de mogelijkheden en de beste worden op de markt gebracht. Deze week is dat het concept van http://www.mobilewebbuilder.nl : een website waar verschillende gebruikers allemaal verschillende mobiele websites kunnen maken en onderhouden.

In mijn vorige blogpost heb ik aandacht gegeven aan een mogelijkheid om een WordPress plugin beschikbaar te stellen aan andere gebruikers zonder hen toegang tot thema’s of posts van anderen te geven. Dat kan werken voor bepaalde plugins maar zal niet voor alle plugins even makkelijk werken. En in het geval van http://www.mobilewebbuilder.nl (www.mobielesitebuilder.nl) leidde dit niet tot een afdoende oplossing. Want de bedoeling is dat een gebruiker een unieke mobiele website maakt en onderhoudt, via de CMS publiceert en dat die website door een andere gebruiker uiteindelijk niet te bewerken is. En indien elke gebruiker toegang krijgt tot dezelfde plugin (een Mobiele Site Builder plugin), dan zijn die websites door alle andere gebruikers binnen de dashboard via de plugin te benaderen en aan te passen. Dat moet niet.

De oplossing (en ook voor veel andere gelijkende problemen)

De oplossing heeft “Multisite”. Deze optie kan tijdens de installatie van een WordPress geactiveerd worden of eventueel later (zie bijvoorbeeld deze blogpost). De Mulisite optie lost eigenlijk al onze problemen op zoals hierboven uitgelegd. Deze optie maakt ook de “Hack” zoals genoemd in de vorige blogpost onnodig. Dat is mooi omdat we nu geen files hoeven aan te passen (en opnieuw moeten aanpassen na elke update van de plugin). Maar we hebben nu wat andere problemen.

Wat is opgelost:

1. elke gebruiker heeft een eigen dashboard en geen toegang tot dashboard van andere gebruikers
2. dus elke gebruiker heeft alleen toegang tot posts van zichzelf en niet van anderen
3. elke gebruiker heeft toegang tot plugins.

Nieuwe problemen:

1. elke gebruiker heeft toegang tot alle templates en thema’s en dat lijkt me wat teveel luxe.
2. elke gebruiker heeft toegang tot alle geactiveerd plugins en ook dat is wat teveel luxe.

Vandaag los ik alleen dit eerste probleem op: ik wil binnen de hoofdwebsite (http://www.mobilewebbuilder.nl) een mooi premium design installeren en kies hiervoor WowWay. Maar vervolgens kan elke medegebruiker (elke klant) ook gebruik maken van dit thema zonder deze template te hoeven kopen en dus zonder een gebruikers licentie te hebben. Nee, dat wil ik niet. De oplossing is de volgende code in wp-config.php:

define(‘WP_DEFAULT_THEME’, ‘wowway’);

Vervolgens activeer ik de template voor het hele netwerk, ga naar dashboard van eigen website en activeer dit thema. Daarna ga ik teru gnaar Network dashboard en deactiveer ik het thema voor het netwerk. Probleem opgelost: mijn eigen site heeft een mooi design, de andere gebruikers hebben niet de beschikking gekregen over dit thema maar kunnen wel aan het werk met de Mobiele Sitebuilder.

Gecontroleerde en beperkte toegang voor gebruik plugin in WordPress

Dit was een nieuwe avontuur voor me. Ik ben bezig met een nieuw concept voor dewebmeester.nl: een online website builder tool waarmee klanten zelf een mobiele website kunnen maken of onderhouden. Dat concept is al aardig uitgewerkt maar hoe geef ik klanten nu beperkte toegang tot het gebruik van deze WordPress plugin?

Situatie:

• Ik heb een WordPress website met verschillende thema’s, plugins, pagina’s enzovoorts.
• Nu wil ik 1 plugin beschikbaar stellen voor gebruik aan klanten van dewebmeester.nl
• WordPress biedt standaard eigenlijk maar twee mogelijkheden wat betreft gebruikers: 1) Een gebruiker is een administrator en heeft toegang tot alles of 2) een gebruiker is geen administrator en heeft al dan niet toegang tot de content (blog posts) van de website.
• Kortom: WordPress biedt standaard niet de mogelijkheid om een gebruiker beperkte toegang te geven tot back -end (dashboard). Je hebt of helemaal toegang, of helemaal niet.

Het heeft me wel enige uren geduurd voor ik de oplossing gevonden heb en hem verschillende plugins geprobeerd zoals: – s2members -, – members – en – user role editor – maar die bieden allemaal niet de mogelijkheid om administrators (degenen die toegang tot dashboard hebben) verschillende permissies te geven. De scheiding blijft: of wel, of geen toegang tot dashboard. Maar ik wil een gedeeltelijke toegang tot dashboard.

De oplossing:

Elke plugin definieerd voor zichzelf de toegangs permissies. En WordPress plugins maken allemaal standaard gebruik van de WordPress settings: alle administratoren hebben toegang tot alle plugins. Hier stappenplan om tot andere situatie te komen:

1. Download de complete plugin folder naar de harde schijf
2. Open deze plugin folder met het programma EditPadPro en zorg dat het programma alle files uit de subfolders opent (geweldig dat EditPadPro dit kan!)
3. Zoek vervolgens naar alle verwijzingen naar – manage_options – binnen deze files en:
4. Om Editors toegang tot de plugin te verlenen, verander  ‘manage_options’ in ‘edit_pages’.
   Om Authors toegang tot de plugin te verlenen, verander  ‘manage_options’ in ‘publish_posts’.
   Om Contributors toegang tot de plugin te verlenen, verander  ‘manage_options’ in ‘edit_posts’.
   Om Subscribers toegang tot de plugin te verlenen, verander  ‘manage_options’ in ‘read’.

Ik heb in de options.php file van de plugin – manage-options – verandert in – edit_pages – en elke gebruiker die Editor is krijgt vervolgens onderstaand dashboard te zien na inloggen:

Netjes toch? De Editor heeft toegang gekregen tot de Mobile Site Builder van http://www.mobilesitebuilder.nl maar kan geen enkele post aanpassen die hijzelf niet eerst gemaakt heeft. Zelfs tools zijn niet beschikbaar (behalve Press This). De Editor kan de Mobiele Site Builder gebruiken, zijn eigen posts aanpassen en eventueel wat gegevens in zijn profiel aanpassen. Ik ben blij.

Stijgende populariteit van Spiderman Webdesign Wageningen

Bezoekers aantallen van blog van Spiderman Webdesign Wageningen: http://www.dewebhulp.nl

Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook…..

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren:

Opdracht: klant heeft WordPress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook.

Spioneren van de code binnen Facebook
Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik:

<div id=”u_0_3b” class=”_30l”><span id=”u_0_2f” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);”></i></span><span id=”u_0_2g” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-d.ak.fbcdn.net/hphotos-ak-snc6/p206x206/603007_10151320424504284_10063898_n.jpg);”></i></span><span id=”u_0_2h” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/p206x206/318068_10151320424509284_1098475204_n.jpg);”></i></span><span id=”u_0_2i” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 0;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/p206x206/582526_10151320424494284_1473985989_n.jpg);”></i></span><span id=”u_0_2j” aria-label=”Photo” class=”uiMediaThumb _30m uiMediaThumbMedium” style=”opacity: 1;”><i class=”uiMediaThumbImg” style=”background-image: url(http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/p206x206/47666_10151320427084284_424829715_n.jpg);”></i></span></div>

Mooie code maar de vraag is nu waar die naartoe verwijzen. Oftewel: in welke file of binnen welk script staat bijvoorbeeld het volgende gedefinieerd?:

class=”uiMediaThumb _30m uiMediaThumbMedium”

Nee, lijkt me op zich niet erg relevant. Dit is tenslotte verwijzing naar css code en betreft niet een script. Code geeft alleen de output weer van het script. Maar welk script genereert deze output? Maar even googlen op: “load preview images mouse on hover”. Geen succes. Of: “how to have images load on mouse over in wordpress plugin”. Veel informatie, nog geen antwoorden.

Mijn test op jsfiddle.com

Positioneren van elementen binnen webpagina

Dit is kort en basic: het positioneren van elementen binnen een webpagina is een steeds terugkerende bezigheid en iedereen met een website heeft hier mee te maken. Binnen dit blog is informatie te vinden over positioneren binnen Joomla via het plaatsen van een extra module positie of via het gebruik van een module suffix. Maar meest belangrijk is om eerst de basis wat betreft html op een rij te hebben.

Gisteren moest ik vanwege een opdracht via tweaky.com een bug oplossen binnen een menu. Een scrollend menu. Na klikken scrollt te pagina naar beneden. Maar dit werkte niet. Na herstel van de .js file was dit opgelost. Behalve voor 1 menu item. Want dit was gelinkt aan een externe url. Na klikken zou de bezoeker moeten worden doorverwezen naar een andere webpagina. Maar nee, dat bleek ineens niet meer te werken. Dat had ik nog niet eerder meegemaakt: bij "hover-over" met de muis werd de url zichtbaar (linksonder binnen de browser) maar als ik dan klikte, gebeurde er niets. Een conclict tussen het javascript en de css file. De oplossing leek om dit menu item uit het menu te tillen, en apart te plaatsen. Ja, nu werkte het. Het enige wat nu nog nodig was, was het postioneren van dit menu item zodat het opnieuw op exact dezelfde plaats zou verschijnen als eerder. En eerder maakte het deel uit van een lijst (<ul><li></li></ul>) en nu niet meer……

Oplossing
Volgens mij is stap 1 bij positionering eigenlijk altijd het plaatsen binnen een <div></div>. Een div met een identiteit: <div id="identiteit"> zodat het layout gedrag binnen deze div gedefinieerd kan worden binnen de css file.
Stap 2 zou volgens mij ook bijna altijd hier op moeten lijken: kijken via Firebug welke css stijlen er al gebruikt worden en kopieren. Maar dan wel als zijnde een eigen identiteit. Oftewel: in mijn geval werd <div id="navtop"> gebruikt voor het menu en de nieuwe div werd dus <div id="navtop2"> en vervolgens kopieer ik alle bijbehorende verwijzingen naar navtop binnen de css file en noem die navtop2. Er onstaat zo een blokje met een layout identiek aan de gebruikte die apart te postioneren is binnen de html.
Stap 3: trial and error. Gewoon de <div>menu item</div> verplaatsen binnen de html en kijken waar ik deze het beste kwijt kan. Dit is de groffe positionering. Nu ben ik in de buurt.
Stap 4: fijnstemmen. En dat kan bijvoorbeeld via:

position:"relative"; right="300px";

Vervolgens wordt het menu item 300 px ten opzichte van rechter grens van website getoond. Firebug helpt hier natuurlijk om live te kunnen zien welke getallen hier precies gebruikt moeten worden.