Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Navigatiemenu mee laten scrollen

None
38 antwoorden
  • Ik wil graag de linkerzijde van mijn site mee laten zakken bij het scrollen van de pagina. Hoe moet ik de onderstaande code dan aanvullen?


    [code:1:e9a50e7930]<div id="left">

    <h4><span class="menu_first_letter"><font face="Verdana">Navigatie</font></span></h4>


    <div id="navcontainer">
    <ul id="navlist">

    <li id="active"><a href="/test" id="current"><font face="Verdana">Beginpagina</font></a></li>


    <li><a href="…"><font face="Verdana">…</font></a></li>
    <li><a href="…"><font face="Verdana">…</font></a></li>
    <li><a href="…"><font face="Verdana">…</font></a></li>

    </ul>

    </div>


    <h4>Contact</h4>


    <form id="form2" method="post" class="contact_us" action="" style="font-family: Verdana;">

    <p><label>Naam
    <input class="fields_contact_us" name="textfield" type="text" />
    </label>
    <label>E-mail
    <input class="fields_contact_us" name="textfield2" type="text" />
    </label>
    <label>
    Bericht:
    <textarea name="textarea" cols="" rows=""></textarea>
    </label>
    <label>
    <input class="submit_button_contact" name="Submit3" value="Ok" type="submit" />
    </label></p>

    </form>


    <h4><font face="Verdana">Links</font></h4>




    <a href="…"><font face="Verdana">…</font></a></div>
    [/code:1:e9a50e7930]
  • tot nu toe heb je alleen nog maar wat HTML.
    je hebt natuurlijk nog wel een script nodig om het geheel te besturen,
    en de lay-out te maken.

    kijk maar eens naar deze voorbeelden:

    CSS: fixed menus
    Static Menu Script
    Floating Menu Script
    Dynamic-FX Slide-In Menu (v 6.5)

    wel allemaal in het engels, maar wel duidelijke voorbeelden van wat er mogelijk is


    ps.
    dit topic zou verplaatst moeten worden
    naar Webprogrammeren & scripting
  • Ik heb de sites bekeken, en ook nog een andere geprobeerd, maar waar het mis gaat is dat het menu te ver boven aan de site tot rust komt.

    Ik heb tijdelijk even een /test directory gemaakt, alleen op de indexpagina zie je het floating menu:

    Mijn site: http://www.eddymaatkamp.nl/test

    Het menu moet zweeft te hoog. Als je op ene menu-link klikt, zie je hoe hoog hij 'tot rust moet komen'.

    En het probleem is, ik heb de scripts op verschillende plaatsen gezet om dat voor elkaar te krijgen, maar het lukt me niet.

    Ik gebruikt er dit script voor:

    http://www.javascript-fx.com/submitscripts/float/float.html
  • Ik heb het door wat zoeken bijna opgelost, de positie heb ik van 'absolute' naar 'relative' gewijzigd.

    Maar hoe krijg ik het menu in rust toestand nu nog ongeveer 1 cm naar boven?

    Moet ik dan met 'top' en px punten werken?

    En moet dat dan in de style.css of in het html doc zelf?

    http://www.eddymaatkamp.nl/
  • je hebt de instructies van de website niet helemaal opgevolgd:
    de code die je moet copy-pasten, moet direct na de <body>
    komen, nog voor je <div id="container"> dus.

    het menu moet natuurlijk ook niet in de div, maar er naast.
    nu schuift het menu over je content heen, en dat wordt een rommeltje.

    verder gebruik je erg veel div-jes, in elkaar genesteld.
    ik zeg niet dat het fout is, maar dat moet simpeler kunnen.
    je kunt namelijk bij iedere div zeggen position: absolute en dan kun je exact, tot op de pixel nauwkeurig iedere dive een plakje geven.

    de div waar de content van je site in komt, geef je dan in je css
    left: 200px; zodat het menu genoeg ruimte heeft.

    de laatste regel van het float-script:
    [code:1:e0b39c2558]
    JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
    [/code:1:e0b39c2558]
    geeft aan hoeveel pixels het menu vanaf de linker bovenhoek blijft zweven. in dit geval dus 10px van de linker zijkant en 30 vanaf boven.
    door met die getallen te spelen, kun je het menu op zijn plek krijgen.

    de regel <div id="divTopLeft" style="position:absolute">
    is goed zo, daar hoef je niks aan te veranderen.
  • Pepijn, gebruik je dan soms Opera? Want in FF en IE ziet het er prima uit. In Opera zie ik inderdaad alleen witte background en een menutje dat door de tekst loopt. In FF en IE is het juist perfect.

    Hier een link naar een knipsel van hoe ik de site zie als ik nu scroll:

    http://www.eddymaatkamp.nl/site.jpg (werkt perfect nu in ff en ie)

    Als ik de code onder de <body> zet, schiet het menu ineens weer naar boven. Juist doordat ik 'absolute' in 'relative' veranderde, ging het menu goed staan.

    Ik begreep het overigens zo, dat je eigen 'content' die in het javascript geplakt moet worden, het navigatiemenu is, dus de hele code van het navigatie-menu. Zo heb ik het gedaan; niet de content van de hele site.
  • O wacht even, ik zie er wat er mis was. Ik had in de html code deze regel staan:

    <link rel="stylesheet" type="text/css" href="[b:31dd7c9baf]file:///A:/Eddy/[/b:31dd7c9baf]style.css" />

    Daardoor werd de style.css niet geladen.

    Nu moet hij het goed doen.
  • ik vond het al vreemd dat je naar een css-bestand op A: verwees,
    maar ik dacht dat het een test-pagina was met een stukje van je tekst, alleen maar om te kijken of het script werkt.

    nu ziet alles er direct een stuk beter uit, en het menu werkt goed.

    enige minpunt, (persoonlijke smaak), is dat de tekst en het menu
    nogal laag op de pagina beginnen. Ik zou zelf de woorden navigatie en welkom even hoog uitlijnen en beide wat hoger op de pagina zetten.

    Ik heb gewoon FireFox 3.6.10.
  • Ja ik wil dus het navigatiemenu ook nog wat hoger hebben, maar hoe ik dat doen moet weet ik niet.
  • omdat je er nogal een rommel van had gemaakt met veel te veel
    divjes, heb ik er wat orde in geschept. (ik had toch niks beters te doen :P )

    op deze manier kan het script wel direct onder de <body> komen en kun je in de css de plek aangeven waar de losse divs moeten komen.

    dit is dan de nieuwe startpagina (index.html ?):
    [code:1:e1f0a8686a]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Mijmeringen</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
    <!– *********************************************************
    * You may use this code for free on any web page provided that
    * these comment lines and the following credit remain in the code.
    * Floating Div from http://www.javascript-fx.com
    ******************************************************** –>
    <div id="TopLeft">
    <!– Start - put your content here —>
    <h4><span class="menu_first_letter"><font face="Verdana">Navigatie</font></span></h4>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="/" id="current"><font face="Verdana">Beginpagina</font></a></li>
    <li class="green"><a href="wetenschap.html"><font face="Verdana">Wetenschap</font></a></li>
    <li><a href="boeken.html"><font face="Verdana">Boeken</font></a></li>
    <li><a href="bijbel.html"><font face="Verdana">Bijbel</font></a></li>
    <li><a href="links.html"><font face="Verdana">Links</font></a></li>
    <li><script type='text/javascript'><!–
    function ask62uf(){var win=window.open('txt-62uf.htm','askwin62uf',',height=280,width=280,resizable=yes');
    if(!win.opener)win.opener=self}document.write('<a class="menutoplinkmenu" href="javascript:void(0)" onclick="ask62uf()">Contact<\/a>');
    //–></script><noscript><a class='menutoplinkmenu' href='http://w2.syronex.com/jmr/safemailto/#noscript'>e-mail</font></a></noscript>
    </li>
    </ul>
    </div>
    <!– End - put your content here —>
    </div>
    <script type="text/javascript">
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function JSFX_FloatDiv(id, sx, sy)
    {
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    var px = document.layers ? "" : "px";
    window[id + "_obj"] = el;
    if(d.layers)el.style=el;
    el.cx = el.sx = sx;el.cy = el.sy = sy;
    el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

    el.floatIt=function()
    {
    var pX, pY;
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
    document.documentElement && document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth;
    pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop;
    if(this.sy<0)
    pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
    document.documentElement.clientHeight : document.body.clientHeight;
    this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
    this.sP(this.cx, this.cy);
    setTimeout(this.id + "_obj.floatIt()", 40);
    }
    return el;
    }
    JSFX_FloatDiv("TopLeft", 10,250).floatIt(); // pas hier de locatie van je menu aan
    </script>
    <!– ********************************************************* –>

    <div id="header_left">
    <h1>Mij<span class="blue">mer</span><span class="blue">ingen</span></h1>
    <h2>over geloof en wetenschap</h2>
    </div>

    <div id="header_right">
    <p class="welcome" align="justify"><font face="Verdana">Welkom op mijn website.
    Misschien vindt u hier iets van uw gading. Lees over de Bijbel, en over mijn
    christelijke visie op de weten-schap.</font>
    </div>

    <div id="right">
    <h3><font face="Times New Roman">Welkom</font></h3>
    <p align="justify"><font face="Verdana" size="2">Ik heb deze site in
    het leven geroepen om mijn gedachten over geloof, wetenschap en cultuur
    een plaats in de openbaarheid te geven. De website is nog in
    ontwikkeling en dus nog niet zo uitgebreid.<br /><br /><br />
    <b>Wie ben ik?<br /></b><br />
    Geboren op 8 oktober 1967 in Zelhem. Na de lagere school ben ik naar de
    Lagere Agrarische School in Doetinchem gegaan. Ik heb in die tijd het
    meest genoten van het stagelopen op boerderijen. Ik herinner me nog de
    lol die we hadden bij het kalveren vangen, en natuurlijk het scheuren
    met de trekker. Knollen plukken in de ijzige kou, en er niet bij
    nadenken dat je meteen ook in de brandnetels greep. Ik wilde daarna
    eigenlijk naar de Tuinbouwschool in Velp, maar het werd de Middelbare
    School voor Levensmiddelentechnologie in Ede, waar ik een 3-jarige
    praktijkopleiding heb gevolgd, en een 2-jarige vervolgopleiding. Vooral
    microbiologie vond ik een interessant vak.<br /><br /><br />
    <b>Geloof</b><br /><br />
    Ik ben vanuit het occultisme tot bekering gekomen. Tijdens een stage op
    een kaasfabriek in Borculo leerde ik iemand kennen die
    voorganger van een evangeliegemeente was. Deze man stelde
    mij vragen over mijn geloof en of ik naar een kerk ging. Door dat
    contact kwam ik uiteindelijk tot levend geloof en had ik geen last meer
    van paranormale 'verschijnselen'. Bij mijn eerste bezoek aan deze
    evangeliegemeente had ik het gevoel eindelijk 'thuis' te zijn. Ik was
    eens verloren, maar God vond mij en bracht mij in Zijn huis. Hoewel ik
    nu geen lid meer ben van een evangeliegemeente, sta ik nog wel in de
    evangelische traditie.<br /><br />
    Al vroeg raakte ik ge&iuml;nteresseerd in de werken van een Chinees
    kerkleider: Watchman Nee (N&iacute; Tu&ograve;shēng). Zijn boeken
    hebben mijn visie op het christelijk leven en de eschatologie sterk
    be&iuml;nvloed. Daarom begon ik de boeken van Watchman Nee in het
    Nederlands te vertalen. Op dit moment heb ik er zo'n zestien vertaald.
    Over hem en zijn invloed in China en de rest van de wereld kunt u via
    'links' naar mijn andere site gaan.<br /><br />
    Op deze site wil ik mij bezighouden met de rol van het geloof in deze
    geseculariseerde samenleving en de 'problemen' die zich daarbij kunnen
    voordoen. Veel christenen laten zich bijvoorbeeld van de wijs brengen
    door de wetenschap, als deze dingen beweert die direct tegen de Bijbel
    ingaan.<br /><br /><br />
    <b>Andere interesses<br /></b><br />
    Door mijn vertaalwerk blijft er maar weinig tijd over voor andere
    dingen, maar om te ontspannen ga ik af en toe hardlopen, en dan altijd
    in de vrije natuur (geen asfalt dus), waar ik echt van genieten kan.<br /><br />
    Als ik al TV kijk, speel ik meestal oude familie-series af, maar geen
    Nederlandse: daar zit weinig 'verheffends' bij. Of naar Duitse
    cultuurprogramma's over oude ambachten en dergelijke. Er zijn ooit twee
    familie-series gemaakt die zowel voor jong als oud leuk en leerzaam
    zijn: All Creatures Great &amp; Small (in Nederland beter bekend als de
    serie over vee-arts James Herriot), en Road to Avonlea (een Canadese
    familie-serie over de bewoners van het dorpje Avonlea op Prince Edward
    Island, rond het einde van de negentiende en het begin van de
    twintigste eeuw). De eerste waardeer ik vanwege de setting, het werken
    met dieren, het platteland, het Yorkshire dialect, en vanwege de vaak
    humoristische scenes met de Yorkshire boeren. Road to Avonlea spreekt
    mij aan vanwege de setting (de Canadese boerengemeenschap), en vanwege
    de nostalgie en de nadruk die er op het gemeenschapsgevoel wordt
    gelegd. De serie, die veel prijzen won, is gebaseerd op de werken van
    de Canadese schrijfster Lucy Maud Montgomery. </font></p>
    <p align="justify">&nbsp;</p>
    <p align="center"><font face="Verdana" size="2" color="#808080">
    <b>Aantal bezoekers sinds 6 oktober 2010</b></font></p>
    <p align="center">
    <a href="http://s46.sitemeter.com/stats.asp?site=s4682781207" target="_blank">
    <img src="meter.asp.gif" alt="Site Meter" border="0"/></a></p>
    <p class="read_more">&nbsp; </p>
    </div>

    <p class="read_more">&nbsp;</p>
    <p class="read_more" align="center">&nbsp;</p>
    <p class="read_more">&nbsp;</p>
    <p class="read_more">&nbsp;</p>

    </body>
    </html>
    [/code:1:e1f0a8686a]

    en dit wordt je nieuwe style.css:
    [code:1:e1f0a8686a]
    /* CSS Document av Dieter Schneider 2007 */

    * {margin: 0; padding: 0;}

    /************************************* Main structure *************************/
    body {
    background-image: url('images/container_bg.jpg');
    background-repeat: no-repeat;
    height: 465px; width: 931px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 62.5%;}

    .pictureheader {
    margin: 30px;
    padding: 30px;
    float: left;
    clear: left;
    position: relative;
    left: -300px;
    top: 30px;
    text-align: left;
    display: inline;}

    #picture_left {
    height: 206px;
    width: 300px;
    float: left;
    clear: left;
    background-image: url('images/church.jpg');
    background-repeat: no-repeat;
    background-position: center;}

    /* titel van de pagina */
    #header_left {
    position: absolute; /* zorgt dat je de positie op het scherm kunt bepalen */
    top: 20px; /* de positie vanaf de bovenkant van het scherm */
    left: 380px; /* de positie vanaf de linker kant van het scherm */
    width: 326px; /* breedte van de div */
    height: 206px;} /* hoogte van de div */

    /* welkomsttekst - direct onder het groene plantje */
    #header_right {
    position: absolute;
    top: 20px;
    left: 710px;
    height: 206px;
    width: 200px;
    font-size: 1.2em;
    margin: 4px;}

    /* #right is het venter met de hoofdtekst */
    #right {
    position: absolute;
    top: 250px;
    left: 340px;
    width: 540px;
    margin-right: 50px;}

    /* div waar het menu in zit */
    #TopLeft {position: relative;}

    #footer {
    clear: both;
    margin-left: 340px;
    margin-right: 50px;
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    border-top: 1px dotted #CCCCCC;
    background-color: #F9F7EA;
    }

    .date_box { background-color: #FFFFFF; background-image:
    url('images/date.jpg'); height: 51px; width:
    52px; float: left }
    .date_box_month {
    padding-top: 6px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 3px;
    text-align: center;
    color: #75a006;
    }

    .date_box_day {
    font-size: 22px;
    font-weight: bold;
    padding-left: 3px;
    text-align: center;
    font-style: italic;
    color: #654040;
    }

    /******************************* Text and image formatting *******************************/

    p {margin-bottom: 15px;
    margin-top: 15px;
    }

    p.quote:first-letter
    {
    color: #6F9800;
    font-size:xx-large;
    margin-top: 20px;
    font-size: 2.5em;
    padding-right: 2px;

    }

    h1 {
    color: #006699;
    margin-top: 85px;
    margin-left: 40px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 2.6em;
    }

    .red {color: #614240;}

    h2 {
    color: #bf8a44;
    margin-left: 120px;
    font-size: 1.6em;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    }

    h3 {
    height: 31px;
    background-color: #FFFFFF;
    padding-top: 20px;
    padding-left: 75px;
    font-size: 1.6em;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: bold;
    color: #84A54A;
    border-bottom: 1px dotted #CCCCCC;
    }

    h4 {
    width: 210px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #F5F9EB;
    padding: 5px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: dotted;
    border-bottom-style: dotted;
    border-top-color: #CEAC86;
    border-bottom-color: #CEAC86;
    font-size: 1.2em;
    color: #A6BB7A;
    }

    blockquote { background-color: #F4F7F0; background-image:
    url('images/blockquote.png');
    background-repeat: no-repeat; font-style: italic;
    border: 1px dotted #EBE2B7; margin-top: 15px; margin-bottom:
    15px; padding-left: 60px; padding-right: 60px; padding-top:
    30px; padding-bottom: 30px }
    .read_more {
    background-color: #FFFFFF;
    padding: 3px;
    text-align: right;
    font-weight: bold;
    font-style: italic;
    }

    img {border: none;}

    .float_left {float: left;
    margin-right: 10px;}

    .float_right {float: right;
    margin-left: 10px;}

    a { font-family: Verdana }
    a:link {color: #557C2B; text-decoration: none;} /* unvisited link */
    a:visited {color: #83A956; text-decoration: none;} /* visited link */
    a:hover {color: #821115; text-decoration: none;} /* mouse over link */
    a:active {color: #577E2D; text-decoration: none;} /* selected link */

    /********************************* Navigation **********************************/

    #navcontainer { }

    #navcontainer ul
    {
    list-style-type: none;
    font-weight: bold;
    color: #990000;
    }

    #navcontainer a { display: block; width: 182px; background-color: #DCE3ED; background-image:
    url('images/menu.png'); background-repeat:
    repeat-x; height: 27px; border-bottom: 1px solid #eee;
    padding-left: 37px; padding-top: 17px }
    #navcontainer a:link, #navlist a:visited
    {
    color: #93B26E;
    text-decoration: none;
    }

    #navcontainer a:hover { background-image: url('images/menu.png'); background-repeat:
    repeat; background-attachment: scroll; color: #562930;
    background-position: 0 -45px }
    /**************************************** Form elements member login ****************************/


    p.welcome {
    font-size: 0.8em;
    text-align: left;
    margin-right: 30px;
    margin-left: 35px;
    margin-bottom: 0px;
    margin-top: 25px;
    color: #6B383D;
    padding-left: 20px;
    }

    form {
    margin-top: 15px;
    margin-left: 35px;
    }

    input.fields { display: block; width: 140px; background-image:
    url('images/input_bg.png'); background-repeat:
    repeat; background-attachment: scroll;
    border-left: 1px solid #E3E4E9; border-right: 1px solid white;
    border-top: 1px solid #E3E4E9; border-bottom: 1px solid white;
    margin-top: 3px; margin-bottom: 3px; background-position: 0% }
    label {
    color: #A5BB73;
    font-style: italic;
    }

    .submit_button {
    margin-top: 15px;
    padding: 2px;
    background-color: #EAF4D9;
    float: right;
    margin-right: 40px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid #E3E4E9;
    border-right: 2px solid #E3E4E9;
    }
    [/code:1:e1f0a8686a]

    Ik heb er wat opmerkingen bijgezet om het uit te leggen.

    succes ermee.
  • Ik heb beide even geprobeerd, maar dan is de hele site door elkaar gehakt.

    Dit zijn nu mijn codes die werken:

    index.html:

    [code:1:c008683162]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


    <title>Mijmeringen</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <style>
    <!–
    a { font-family: Verdana }
    –>
    </style>
    </head>


    <body>


    <div id="container">

    <div id="header">
    <div id="header_left">
    <h1>Mij<span class="blue">mer</span><span class="blue">ingen</span></h1>

    <h2>over geloof en wetenschap</h2>

    </div>


    <div id="header_right">
    <p class="welcome" align="justify"><font face="Verdana">Welkom op mijn website.
    Misschien vindt u hier iets van uw gading. Lees over de Bijbel, en over mijn
    christelijke visie op de weten-schap.</font>

    </div>


    </div>



    <!– *********************************************************
    * You may use this code for free on any web page provided that
    * these comment lines and the following credit remain in the code.
    * Floating Div from http://www.javascript-fx.com
    ******************************************************** –>
    <div id="divTopLeft" style="position:relative">
    <!– Start - put your content here —>
    <div id="left">
    <h4><span class="menu_first_letter"><font face="Verdana">Navigatie</font></span></h4>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="/" id="current"><font face="Verdana">Beginpagina</font></a></li>
    <li class="green"><a href="wetenschap.html"><font face="Verdana">Wetenschap</font></a></li>
    <li><a href="boeken.html"><font face="Verdana">Boeken</font></a></li>
    <li><a href="bijbel.html"><font face="Verdana">Bijbel</font></a></li>
    <li><a href="links.html"><font face="Verdana">Links</font></a></li>
    <li><script type='text/javascript'><!–
    function ask62uf(){var win=window.open('txt-62uf.htm','askwin62uf',',height=280,width=280,resizable=yes');if(!win.opener)win.opener=self}document.write('<a class="menutoplinkmenu" href="javascript:void(0)" onclick="ask62uf()">Contact<\/a>');
    //–></script><noscript><a class='menutoplinkmenu' href='http://w2.syronex.com/jmr/safemailto/#noscript'>e-mail</font></a></noscript></li>

    </ul>

    </div>


    &nbsp;</div>

    <!– End - put your content here —>
    </div>

    <script type="text/javascript">
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function JSFX_FloatDiv(id, sx, sy)
    {
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    var px = document.layers ? "" : "px";
    window[id + "_obj"] = el;
    if(d.layers)el.style=el;
    el.cx = el.sx = sx;el.cy = el.sy = sy;
    el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

    el.floatIt=function()
    {
    var pX, pY;
    pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
    document.documentElement && document.documentElement.clientWidth ?
    document.documentElement.clientWidth : document.body.clientWidth;
    pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop;
    if(this.sy<0)
    pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
    document.documentElement.clientHeight : document.body.clientHeight;
    this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
    this.sP(this.cx, this.cy);
    setTimeout(this.id + "_obj.floatIt()", 40);
    }
    return el;
    }
    JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
    </script>
    <!– ********************************************************* –>


    <div id="right">

    <h3><font face="Times New Roman">Welkom</font></h3>





    <p align="justify"><font face="Verdana" size="2">Ik heb deze site in
    het leven geroepen om mijn gedachten over geloof, wetenschap en cultuur
    een plaats in de openbaarheid te geven. De website is nog in
    ontwikkeling en dus nog niet zo uitgebreid.&nbsp;<br />

    <br />

    <br />

    <b>Wie ben ik?<br />

    </b><br />
    Geboren op 8 oktober 1967 in Zelhem. Na de lagere school ben ik naar de
    Lagere Agrarische School in Doetinchem gegaan. Ik heb in die tijd het
    meest genoten van het stagelopen op boerderijen. Ik herinner me nog de
    lol die we hadden bij het kalveren vangen, en natuurlijk het scheuren
    met de trekker. Knollen plukken in de ijzige kou, en er niet bij
    nadenken dat je meteen ook in de brandnetels greep. Ik wilde daarna
    eigenlijk naar de Tuinbouwschool in Velp, maar het werd de Middelbare
    School voor Levensmiddelentechnologie in Ede, waar ik een 3-jarige
    praktijkopleiding heb gevolgd, en een 2-jarige vervolgopleiding. Vooral
    microbiologie vond ik een interessant vak.&nbsp;<br />

    <br />

    <br />

    <b>Geloof</b><br />

    <br />
    Ik ben vanuit het occultisme tot bekering gekomen. Tijdens een stage op
    een kaasfabriek in Borculo leerde ik iemand kennen die
    voorganger van een evangeliegemeente was. Deze man stelde
    mij vragen over mijn geloof en of ik naar een kerk ging. Door dat
    contact kwam ik na enkele jaren tot levend geloof en had ik geen last meer
    van paranormale ‘verschijnselen’. Bij mijn eerste bezoek aan deze
    evangeliegemeente had ik het gevoel eindelijk ‘thuis’ te zijn: het was het
    einde van een zoektocht. Ik was
    eens een verloren mens; nu vervult de Here Jezus mijn hart en leven en mag ik
    voor altijd bij Hem zijn.<br />

    <br />
    Al vroeg raakte ik ge&iuml;nteresseerd in de werken van een Chinees
    kerkleider: <a href="http://nl.wikipedia.org/wiki/Watchman_Nee" target="_blank"> Watchman Nee</a> (N&iacute; Tu&ograve;shēng). Zijn boeken
    hebben mijn visie op het christelijk leven en de eschatologie sterk
    be&iuml;nvloed. Daarom begon ik de boeken van Watchman Nee in het
    Nederlands te vertalen. Op dit moment heb ik er zo’n zestien vertaald.
    Over hem en zijn invloed in China en de rest van de wereld kunt u via ‘links’ naar mijn andere site gaan.<br />

    <br />
    Op deze site wil ik mij bezighouden met de vermeende tegenstellingen tussen
    geloof en wetenschap, en rol van het geloof in de geseculariseerde samenleving.
    Sommige christenen laten zich bijvoorbeeld van de wijs brengen
    door de - verheerlijkte - wetenschap, als deze dingen beweert die direct tegen de Bijbel
    ingaan.&nbsp;Wat de geest van de tijd betreft - de geseculariseerde cultuur - en
    hoe christenen daarin hun eigen identiteit kunnen bewaren, geloof ik dat veel
    geleerd kan worden van de geschiedenis van het christendom in het communistische
    China. Zie hiervoor bijvoorbeeld de boeken <font color="#93B26E"><b><i>Christianity
    in Communist China</i></b></font> van journalist George Patterson en <font color="#93B26E"><i><b>De
    Anders Denken Boerderij</b></i></font> van drs. Rob Matzken.<br />

    <br />

    <br />

    <b>Andere interesses<br />

    </b><br />
    Door mijn vertaalwerk blijft er maar weinig tijd over voor andere
    dingen, maar om te ontspannen ga ik af en toe hardlopen, en dan altijd
    in de vrije natuur (geen asfalt dus), waar ik echt van genieten kan.<br />

    <br />
    Als ik al TV kijk, speel ik meestal oude familie-series af, maar geen
    Nederlandse: daar zit weinig ‘verheffends’ bij. Of naar Duitse
    cultuurprogramma’s over oude ambachten en dergelijke. Er zijn ooit twee
    familie-series gemaakt die zowel voor jong als oud leuk en leerzaam
    zijn: All Creatures Great &amp; Small (in Nederland beter bekend als de
    serie over vee-arts James Herriot), en Road to Avonlea (een Canadese
    familie-serie over de bewoners van het dorpje Avonlea op Prince Edward
    Island, rond het einde van de negentiende en het begin van de
    twintigste eeuw). De eerste waardeer ik vanwege de setting, het werken
    met dieren, het platteland, het Yorkshire dialect, en vanwege de vaak
    humoristische scenes met de Yorkshire boeren. Road to Avonlea spreekt
    mij aan vanwege de setting (de Canadese boerengemeenschap), en vanwege
    de nostalgie en de nadruk die er op het gemeenschapsgevoel wordt
    gelegd. De serie, die veel prijzen won, is gebaseerd op de werken van
    de Canadese schrijfster Lucy Maud Montgomery. </font></p>





    <p align="justify">&nbsp;</p>





    <p align="center"><font face="Verdana" size="2" color="#808080"><b>Aantal
    bezoekers sinds 6 oktober 2010</b></font></p>





    <p align="center">
    <a href="http://s46.sitemeter.com/stats.asp?site=s4682781207" target="_blank">
    <img src="http://s46.sitemeter.com/meter.asp?site=s4682781207" alt="Site Meter" border="0"/></a>
    </p>



    <p class="read_more">&nbsp; </p>


    </div>




    <p class="read_more">&nbsp;</p>

    <p class="read_more" align="center">&nbsp;</p>

    <p class="read_more">&nbsp;</p>

    <p class="read_more">&nbsp;</p>




    </div>
    </body>
    </html>[/code:1:c008683162]

    style.css:

    [code:1:c008683162]/* CSS Document av Dieter Schneider 2007 */

    * {margin: 0; padding: 0;}

    /************************************* Main structure *************************/

    body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 62.5%;
    }

    #container { background-image: url('images/container_bg.jpg');
    background-repeat: no-repeat; height: 465px; width: 931px;
    font-size: 1.2em; border-top: 1px solid white; margin: 4px }
    #header {
    height: 205px;
    padding-top: 20px;
    margin-left: 380px;
    }
    .pictureheader {
    margin: 30px;
    padding: 30px;
    float: left;
    clear: left;
    position: relative;
    left: -300px;
    top: 30px;
    text-align: left;
    display: inline;
    }
    #picture_left { height: 206px; width: 300px; float: left; clear: left; background-image:
    url('images/church.jpg'); background-repeat:
    no-repeat; background-position: center }
    #header_left {
    float: left;
    width: 326px;
    height: 206px;
    }

    #header_right {
    height: 206px;
    margin-left: 330px;
    margin-right: 20px;
    }

    #left {
    float:left;
    width: 225px;
    margin-left: 30px;
    margin-top: 120px;
    }

    #right {
    margin-left: 340px;
    margin-top: 70px;
    margin-right: 50px;
    }

    #footer {
    clear: both;
    margin-left: 340px;
    margin-right: 50px;
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    border-top: 1px dotted #CCCCCC;
    background-color: #F9F7EA;
    }

    .date_box { background-color: #FFFFFF; background-image:
    url('images/date.jpg'); height: 51px; width:
    52px; float: left }
    .date_box_month {
    padding-top: 6px;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 3px;
    text-align: center;
    color: #75a006;
    }

    .date_box_day {
    font-size: 22px;
    font-weight: bold;
    padding-left: 3px;
    text-align: center;
    font-style: italic;
    color: #654040;
    }

    /******************************* Text and image formatting *******************************/

    p {margin-bottom: 15px;
    margin-top: 15px;
    }

    p.quote:first-letter
    {
    color: #6F9800;
    font-size:xx-large;
    margin-top: 20px;
    font-size: 2.5em;
    padding-right: 2px;

    }

    h1 {
    color: #006699;
    margin-top: 85px;
    margin-left: 40px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 2.6em;
    }

    .red {color: #614240;}

    h2 {
    color: #bf8a44;
    margin-left: 120px;
    font-size: 1.6em;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    }

    h3 {
    height: 31px;
    background-color: #FFFFFF;
    padding-top: 20px;
    padding-left: 75px;
    font-size: 1.6em;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: bold;
    color: #84A54A;
    border-bottom: 1px dotted #CCCCCC;
    }

    h4 {
    width: 210px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #F5F9EB;
    padding: 5px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: dotted;
    border-bottom-style: dotted;
    border-top-color: #CEAC86;
    border-bottom-color: #CEAC86;
    font-size: 1.2em;
    color: #A6BB7A;
    }

    blockquote { background-color: #F4F7F0; background-image:
    url('images/blockquote.png');
    background-repeat: no-repeat; font-style: italic;
    border: 1px dotted #EBE2B7; margin-top: 15px; margin-bottom:
    15px; padding-left: 60px; padding-right: 60px; padding-top:
    30px; padding-bottom: 30px }
    .read_more {
    background-color: #FFFFFF;
    padding: 3px;
    text-align: right;
    font-weight: bold;
    font-style: italic;
    }

    img {border: none;}

    .float_left {float: left;
    margin-right: 10px;}

    .float_right {float: right;
    margin-left: 10px;}

    a:link {color: #557C2B; text-decoration: none;} /* unvisited link */
    a:visited {color: #83A956; text-decoration: none;} /* visited link */
    a:hover {color: #821115; text-decoration: none;} /* mouse over link */
    a:active {color: #577E2D; text-decoration: none;} /* selected link */

    /********************************* Navigation **********************************/

    #navcontainer { }

    #navcontainer ul
    {
    list-style-type: none;
    font-weight: bold;
    color: #990000;
    }

    #navcontainer a { display: block; width: 182px; background-color: #DCE3ED; background-image:
    url('images/menu.png'); background-repeat:
    repeat-x; height: 27px; border-bottom: 1px solid #eee;
    padding-left: 37px; padding-top: 17px }
    #navcontainer a:link, #navlist a:visited
    {
    color: #93B26E;
    text-decoration: none;
    }

    #navcontainer a:hover { background-image: url('images/menu.png'); background-repeat:
    repeat; background-attachment: scroll; color: #562930;
    background-position: 0 -45px }
    /**************************************** Form elements member login ****************************/


    p.welcome {
    font-size: 0.8em;
    text-align: left;
    margin-right: 30px;
    margin-left: 35px;
    margin-bottom: 0px;
    margin-top: 25px;
    color: #6B383D;
    padding-left: 20px;
    }

    form {
    margin-top: 15px;
    margin-left: 35px;
    }

    input.fields { display: block; width: 140px; background-image:
    url('images/input_bg.png'); background-repeat:
    repeat; background-attachment: scroll;
    border-left: 1px solid #E3E4E9; border-right: 1px solid white;
    border-top: 1px solid #E3E4E9; border-bottom: 1px solid white;
    margin-top: 3px; margin-bottom: 3px; background-position: 0% }
    label {
    color: #A5BB73;
    font-style: italic;
    }

    .submit_button {
    margin-top: 15px;
    padding: 2px;
    background-color: #EAF4D9;
    float: right;
    margin-right: 40px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid #E3E4E9;
    border-right: 2px solid #E3E4E9;
    }[/code:1:c008683162]
  • Hoe bedoel je door elkaar gehakt?
    Bij mij ziet het er allemaal prima uit in FireFox 3.6.10 en IE8.

    in jou laatste versie, staat het menu nog steeds niet uitgelijnd met de groenen tekst Welkom, plus dat de broncode nog steeds rommelig en onoverzichtelijk is.
  • Iets wat je niet moet doen en ook niet hoeft te doen is het element "font" in je code te gebruiken. Je kunt veel makkelijker je font eigenschappen in je CSS opleggen aan de paragrafen, dan heb je heel dat lelijke font element niet nodig. Naast het feit dat je het font element helemaal niet mag gebruiken icm de DOCTYPE die je gebruikt.

    Ook het attribuut "align", dat je in je paragraaf element gebruikt, mag je niet in je markup zetten (als je XHTML strickt wilt gebruiken). Dit regel je ook in je CSS ("p {text-align: justify;}" ).

    Daarnaast zet je een hele zooi paragrafen in 1 paragraaf. En om onderscheid te maken tussen paragrafen binnen het paragraaf element zet je er een zooi <br /> elementen tussen. Dat is natuurlijk een beetje een lelijke oplossing. Als je nou iedere paragraaf in een eigen paragraaf element zet dan kan je de ruimte tussen de paragrafen in je CSS regelen. De tussen kopjes zet je dan bijvoorbeeld in een h3 element dat je ook met CSS naar je hand kan zetten. (het <b></b> element is ook niet meer in gebruik in XHTML, in plaats daarvan word het element <strong></strong> gebruikt)

    Als je die dingetjes uit je code haalt, los je al heel wat van deze problemen op.

    [i:29d8b3af27]PS: een absoluut gepositioneerde layout is niet echt te prefereren, het is heel inflexibel en totaal niet nodig voor deze relatief eenvoudige layout.[/i:29d8b3af27]

    [i:29d8b3af27]PPS: Je zou een comment mogelijkheid moeten toevoegen, mijn vingers jeuken om in discussie te gaan :P.[/i:29d8b3af27]
  • natuurlijk had ik ook gezien dat de broncode niet aan het doctype voldoet, maar ik heb me daar nog niet mee bezig gehouden. ik heb eerst het aantal divjes omlaag gebracht en deze met position: absolute op hun plek gezet.
    Dat was nodig omdat ik anders het menu ook niet goed kon uitlijnen doordat het te onoverzichtelijk was.

    Ik krijg de indruk dat de TS niet veel kennis heeft van css en doctypes.
    Ik ben ook benieuwd welk programma hij gebruikt voor de website, want volgens mij schrijft hij de broncode niet zelf.
  • Pepijn, als ik jouw code gebruik, krijg ik dit:

    http://www.eddymaatkamp.nl/test/

    Punt is dat ik eigenlijk niet zoveel tijd heb me in html code te verdiepen (kom nu net van m'n werk), en het is voor mij ook echt abracadabra :roll: vandaar dat ik het even hier post.

    Drewster, een commentaarbox laat ik achterwege, daar heb ik de mail-optie voor :wink:
  • Ik zie het al. Je hebt wel mijn index.html gebruikt, maar niet niet mijn style.css.

    de css zorgt er juist voor dat alles op zijn plek gezet wordt.
    dus om mijn nieuwe code goed te kunnen testen, heb je beide nodig.
  • Ik heb je style.css wel gebruikt hoor (met je Nederlandse verklarende tekst erin. Opgeslagen als style.css en geupload; map images ook erin gezet.
  • Als ik de broncode bekijk van je inde.html (in de Test map)
    zie ik staan:[code:1:50bc066254]
    <link rel="stylesheet" type="text/css" href="../style.css" />
    [/code:1:50bc066254]
    als ik de link volg, kom ik uit bij jou css-bestand.
    Omdat ik de HTML-validator plugin heb voor Firefox, kan ik simpel
    op ../style.css klikken, en wordt ik doorgestuurd naar de css.

    dus als mijn index.html en style.css in één map staan, moet je er href="style.css" van maken.
  • Oke, nu werkt het. Ik zie nu alleen wel wat verschuivingen en gebroken lijnen in de witte blokken. Het witte blok met 'welkom' overlapt de bovenliggende witte balk, en links is het blok ook wat verschoven. Het menu mag nog wel iets zakken en iets meer naar rechts.
  • de positie van het menu kun je in het script zelf aanpassen.
    [code:1:83cdacd2de]
    JSFX_FloatDiv("TopLeft", 10,250).floatIt(); // pas hier de locatie van je menu aan[/code:1:83cdacd2de]
    dit betekend dus 10 pixels vanaf de linker zijkant en
    250 pixels vanaf de top van de pagina.

    in de css kun je ieder divje appart op z'n plek zetten op de zelfde manier.
    het kan best zijn dat ik net niet dezelfde getallen heb genomen waardoor het net ietsje anders is. dat is een kwestie van een beetje uitproberen met de getallen en kijken wat er gebeurd.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.