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

Webprogrammeren & scripting

Meescrollend vakje

None
6 antwoorden
  • ik wil in HTML of Javascript een meescrollend vakje maken met "Terug naar Boven" en daarachter een name="top" zetten.

    Gewoon een meescrollend vakje met linkje..

    www.hotscripts.com heb ik gekeken en niks gevonden.. dit zou moeten kunnen met HTML en CSS.

    Als ik nou eens een div maakte die meescrolde?

    moet ik hiervoor position:relative gebruiken?

    mvg,
    A
  • Wat wil je precies? Een pijltje wat constant rechtsonderin staat en een link naar top vertegenwoordigt? Vrij simpel:
    [code:1:a47b0cb99f]<div style="position: fixed; bottom: 5px; right: 5px"><a href="#top">jouwpijltje</a></div>[/code:1:a47b0cb99f]
    Waarbij je dan natuurlijk het beste de stijl in je CSS kunt zetten en kunt spelen met de exacte plaatsing.
  • kan je een div in een div plaatsen?
    en zal ik mijn code plaatsen?
  • Geen probleem om een div in een div te plaatsen.
  • toch even de code want het werkt niet :(

    [code:1:b55e21c01e]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function fix(){
    var a=document.body.scrollTop+200
    bar.style.top = a
    }
    function counter()
    {
    var a = 1;
    b = ++a;
    alert('De pagina is '+b+' keer bekeken');
    }
    </script>
    <style type="text/css">
    input {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: #f1f1f1;
    border: #FFFFFF;
    }
    a:hover {
    color: #FF3300;
    }
    body {
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    }
    div#header {
    position: absolute;
    width: 100%;
    height: 200px;
    background-color: #CCCCCC;
    border: 1px;
    border-color: #333333;
    border-style: solid;
    }
    div#main1 {
    position: absolute;
    width: 80%;
    height: 500px;
    margin-top: 236px;
    background-color: #CCCCCC;
    border: 1px;
    border-color: #333333;
    border-style: solid;
    overflow: auto;
    }
    div#main2 {
    position: absolute;
    width: 20%;
    height: 500px;
    margin-left: 80%;
    margin-top: 236px;
    background-color: #CCCCCC;
    border: 1px;
    border-color: #333333;
    border-style: solid;
    font-size: 9px;
    padding: 3px;
    }
    div#navbar {
    position: absolute;
    width: 100%;
    height: 50px;
    margin-top: 200px;
    background-color: #EEE;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Menukaart &bull; Restaurant Il Gallo d'Oro</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>

    <body onLoad="fix(); counter()" onScroll='fix()'>
    <!– De Header –>
    <div id="header">
    <center>
    <h1>Header</h1>
    </center>
    </div>
    <!– Navigatiebalk –>
    <div id="navbar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Home</a> </li>
    <li><a href="#" class="MenuBarItemSubmenu">Menu</a>
    <ul>
    <li><a href="http://www.restaurantilgallodoro.nl/menukaart/">Menukaart &quot;standard&quot;</a></li>
    <li><a href="http://www.restaurantilgallodoro.nl/speciale_menus/">Menukaart &quot;speciale&quot;</a></li>
    </ul>
    </li>
    <li><a href="http://www.restaurantilgallodoro.nl/fotoboek/">Fotoalbum</a> </li>
    <li><a href="http://www.restaurantilgallodoro.nl
    oute/">Route</a></li>
    <li><a href="http://www.restaurantilgallodoro.nl/contact/">Contact</a></li>
    </ul>
    </div>
    <!– Links, Grote tekstvak –>
    <div id="main1" align="center">
    <a name="top"></a>
    <h1>Menukaart</h1>
    <a href="#warme_voorgerechten">Warme Voorgerechten</a><br>
    <a href="#koude_voorgerechten">Koude Voorgerechten</a><br>
    <a href="#salades">Salades</a><br>
    <a href="#soepen">Soepen</a><br>
    <a href="#pizza_">Pizza's</a><br>
    <a href="#pizza_vlees">Vlees Pizza's</a><br>
    <a href="#pizza_vis">Vis Pizza's</a><br>
    <a href="#pizza_vegetarisch">Vegetarische Pizza's</a><br>
    <a href="#pizza_speciaal">Speciale Pizza's</a><br>
    <a href="#pasta_oven">Ovenpasta's</a><br>
    <a href="#pasta_lint">Lintpasta's</a><br>
    <a href="#spaghetti">Spaghetti's</a><br>
    <a href="#tortellini">Tortellini's</a><br>
    <a href="#rijstgerechten">Rijstgerechten</a><br>
    <a href="#visgerechten">Visgerechten</a><br>
    <a href="#kinder">Kindermenu's</a><br>
    <a href="#vlees_specialiteiten">Vleesspecialiteiten</a><br>
    <a href="#lam_en_kip">Lamskoteletten en Kipfilet</a><br>
    <a href="#biefstuk_haas">Biefstuk van de Haas</a><br>
    <a href="#entrecote">Entrecote</a><br>
    <a href="#varkenshaas">Varkenshaas</a><br>
    <hr>
    [… Onbelangerijke code, zgn menukaart ..]
    <div style="position: fixed; bottom: 5px; right: 5px"><a href="#top">Terug naar de Top</a></div>
    </div>
    <!– Rechterkant, Kleine Letters –>
    <div id="main2">
    <b>De website is geupdate op: 8/11/08</b>
    <hr>
    <b>Kijk ook eens naar onze Speciale Menu&acute;s</b>
    <hr>
    <p style="margin-left: 20%;">
    <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-html401"
    alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a>
    </p>
    <hr>
    Deze pagina is <script> var a = 1 + ; var b = 1 + a; var c = a + b; document.write(c);</script> keer bekeken.
    </div>
    <script type="text/javascript">
    <!–
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //–>
    </script>
    </body>
    </html>
    [/code:1:b55e21c01e]
  • Je css is nogal…. crappy. Daardoor valt het weg achter de rechter kolom. Geef maar eens 200px voor right in, dan zie je 'm wel verschijnen.

    PS: haal dat W3C logo ook maar weg…

Beantwoord deze vraag

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