Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Gecentreerd menubalk

Anoniem
MichielPH
19 antwoorden
  • Hey,

    Ik heb een menubalk en deze wil ik gecentreerd in de site hebben. Ik heb er nu dit staan:
    120, // plaatsing menubalk vanaf links
    Hoe kan ik dit veranderen zodat het gecentreerd in de site staat???
  • <span align="center">tekst</span>
  • [quote:e1904e397f="Klaas Dons"]Hey,

    Ik heb een menubalk en deze wil ik gecentreerd in de site hebben. Ik heb er nu dit staan:
    120, // plaatsing menubalk vanaf links
    Hoe kan ik dit veranderen zodat het gecentreerd in de site staat???[/quote:e1904e397f]

    Dit moet dan toch wel XML zijn :wink:
  • [quote:4dfda2b5af="Klaas Dons"]Hey,

    Ik heb een menubalk en deze wil ik gecentreerd in de site hebben. Ik heb er nu dit staan:
    120, // plaatsing menubalk vanaf links
    Hoe kan ik dit veranderen zodat het gecentreerd in de site staat???[/quote:4dfda2b5af]

    Kun je iets duidelijker zijn (voorbeeld?)
    120 en 'menubalk' is nou niet echt denderend veel info.
  • #menuwrapper {
    text-align: center; // voor ie
    }

    #menu {
    margin: auto 0;
    text-align: left;
    }




    <div id="menuwrapper">
    <div id="menu">
    blabla
    </div>
    </div>
  • kZal het even wat duidelijker uit leggen.
    Ik heb van deze site: http://users.skynet.be/javascript/ onder navigatie scripts menubalk drie op mijn website geplaats. Nu heb ik de vraag hoe ik deze menu balk kan centreren op de website. Hier onder zie je het complete bestand van menu2items.js
    Vetgedrukt is wat volgens mij verandert moet worden.


    // Hier maak je de aanpassingen voor het menu-uitzicht:

    var prop = [
    95, // transparantie van de items (in procent)
    [b:1eed82a92f]120, // plaatsing menubalk vanaf links[/b:1eed82a92f]
    115, // plaatsing menubalk vanaf boven
    100, // breedte hoofditems
    20, // top menu hoofditems
    1, // afstand tussen hoofditems
    1, // randdikte hoofditems
    '#394930', // randkleur hoofditems
    1, // hoofditems tekst: 0=normaal, 1=vet
    12, // lettergrootte hoofditems
    'Tahoma', // lettertype hoofditems
    'solid', // randstijl hoofditems

    1, // afstand tussen hoofditems en subitems

    100, // breedte subitems
    17, // hoogte subitems
    1, // randdikte subitems
    '#394930', // randkleur subitems
    'solid', // randstijl subitems
    10, // lettergrootte subitems
    'Tahoma', // lettertype subitems

    1, // afstand tussen subitem blokken (multi-level)

    3, // padding links in hoofditem blok
    10, // padding boven in hoofditem blok

    'Menu blokje.jpg'
    ];

    //———————————————————————————————
    /* Hier maak je de aanpassingen voor de menu-inhoud:

    Opmaak van een link zonder subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur]

    //Opmaak van een link met subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur,[subitems]]

    Vergeet niet alle geopende rechte haakjes af te sluiten!
    Let bijzonder goed op het gebruik van de komma's na elke regel!
    Dit menu is zeer delicaat:
    een komma of haakje vergeten of verkeerd plaatsen en het werkt niet meer.
    */
    //———————————————————————————————

    var link =
    [//recht haakje om het volledige menu te openen

    // voorbeeld zonder subitems:
    ['Homepage','Homepage Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],

    // voorbeeld met 2 subitems
    ['Ons product','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Heide','Heide.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940',
    [
    ['Erica','Erica.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Calluna','Calluna.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]]]], //2 open rechte haakjes gesloten

    //voorbeeld met 3 subitems
    ['Voorraad','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Voorraadslijst','Voorraadslijst.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Foto','Foto.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Beladingen','Beladingen.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]], //2 open rechte haakjes gesloten

    //laatste voorbeeld: géén komma na het laatste haakje!
    ['Info','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Contact','Mailformulier/Contact boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Adres en Tel.','Adres en Tel.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]],

    ['Startpagina','index.htm','_top','#495940','#D3E4BC','#D3E4BC','#495940'] //4 open rechte haakjes gesloten

    //recht haakje om het volledige menu af te sluiten:
    ];
  • Ik bedoel dat ik menu 2 van die site heb gehaald i.p.v. menu 3
  • Weet hier echt niemand een antwoord op. Ik hoop het zo want anders staat het echt niet leuk op de site.

    PLEASE

    Klaas
  • <CENTER> </CENTER> Er omheen zetten misschien? Wel in je HTML pagina, niet in je .js bestand. dus zoiets:
    [code:1:72c7602a84]
    <CENTER>
    <script language="Javascript" src="menu2.js"></script>
    </CENTER>
    [/code:1:72c7602a84]
  • ik denk dat je niet bij de variabelen moet kijken, maar in de JS code een moet gaan vogelen.

    En probeer het anders eens met een waarde in %.

    t.
  • Gooi hem in een tabel
  • Bedankt voor de opmerkingen! De eerste opmerking lukt ook al niet. Enne ik heb hem al in een tabel geprobeerd maar dat lukt ook niet. Nu heb ik nog een vraagie misschien wel een beetie dom maar jah. Wat is de afkorting (htmlcode) van procenten. Pixels is toch px.

    Greetzz Klaas :(
  • [code:1:3b0a208235]%[/code:1:3b0a208235]
    ;)

    - Bas
  • Ik zal alles even geven wat ik van dit menu heb:

    Javascript luidt als volgt:
    [code:1:739eeda8c2]
    <script language="JavaScript" type="text/javascript" src="menu2items.js"></script>
    <script language="JavaScript" type="text/javascript" src="menu2progr.js"></script>
    <style type="text/css">
    .menu{position:absolute;overflow:visible;}
    .head_items{padding:3px 0px 0px 10px;}
    .item_class{padding:3px 0px 0px 5px;overflow :hidden;}
    </style><script language="JavaScript" type="text/javascript">
    maakMenu('menu2balk',link,prop);
    </script>
    [/code:1:739eeda8c2]

    Nu zit er bij dit menu ook nog twee bestanden. Namelijk: menu2program.js en menu2items.js

    Hieronder zie je menu2 program.js:
    [code:1:739eeda8c2]

    var delay = 300;
    var N = (document.all) ? 0 : 1;
    var count = 0;
    var count_open = 0;
    var open_items = new Array();
    var head = new Array();
    var item_arr = new Array();
    var T1 = null;
    var hcc = 0;
    var container = new Array();
    var ctc = 0;
    var screenw = screen.width;
    function maakMenu(mid,a_id,prop_id)
    {
    l_men = prop_id[1];
    for(i=0;i<a_id.length;i++)
    {
    if(a_id[i][7]) {id = count_open;count_open++;}
    else id = -1;
    height = prop_id[4];
    if(N) height -= 4;
    width = prop_id[3];
    if(N) width -= 12;
    if(a_id[i][1] != null)
    {document.write("<a href='"+a_id[i][1]+"' ");
    if(a_id[i][2] != null) document.write("target='"+a_id[i][2]+"' style='text-decoration:none'");
    document.write(">");
    }
    document.write("<div style=\"position:absolute;top:"+prop_id[2]+";left:"+l_men);
    document.write(";padding:"+prop_id[21]+"px 0px 0px "+prop_id[22]+"px;cursor:hand");
    document.write(";width:"+width);
    document.write(";height:"+height);
    document.write(";font-size:"+prop_id[9]+"px");
    document.write(";font-family:"+prop_id[10]);
    document.write(";background-color:"+a_id[i][4]);
    document.write(";color:"+a_id[i][3]);
    document.write(";border:"+prop_id[6]+"px "+prop_id[11]+" "+prop_id[7]);
    if(prop_id[8] == 1) document.write(";font-weight:bold;");
    document.write("\" onmouseout=\"head_out("+id+",-1,"+hcc+",-1,'','')\" onmouseover=\"head_over(this.id,'"+a_id[i][5]+"','"+a_id[i][6]+"',"+id+",-1,"+hcc+",-1,'','')\" id="+mid+"_"+hcc+">");
    document.write("&nbsp;"+link[i][0]+"</div>");
    if(a_id[i][1] != null) document.write ("</a>");
    head[hcc] = new Array(a_id[i][3],a_id[i][4],a_id[i][5],a_id[i][6],mid,"none");
    if(a_id[i][7])
    {
    topv = prop_id[2] + height + prop_id[12];
    if(N) topv += 2
    left = l_men;
    arr = a_id[i][7];
    if(N) topv += prop_id[6] + prop_id[15];
    iid = ""+id
    add_col(topv,left,arr,prop_id,mid,iid,hcc,"","","","r");
    }
    l_men += (prop_id[5] + prop_id[3]);
    //if(N) l_men += (2*(prop_id[6] + prop_id[21] +2));
    hcc++;
    }
    empty_container();
    }
    function head_out(open,confirm,header,way,lst_items,item)
    {
    if(T1 != null) clearTimeout(T1)
    if(item != "") item_arr[parseInt(item)][6] = "none";
    if(lst_items != "") {
    lb = lst_items.split("/");
    for (i=0;i<lb.length;i++)
    {
    item_arr[lb[i]][6] = "none";
    }
    }
    if(way != -1){
    la = way.split("/");
    for (i=0;i<la.length;i++) open_items[la[i]][0] = 'none';
    }
    if(confirm != -1) {open_items[confirm][0] = 'none'}
    if(open != -1) {open_items[open][0] = 'none';}
    head[header][5] = "none";
    T1 = setTimeout("close_items()",delay);
    }

    function head_over(id,text,bg,open,confirm,header,way,lst_items,item)
    {
    if(T1 != null) clearTimeout(T1)
    if(item != "") item_arr[item][6] = "";
    head[header][5] = "";
    if(lst_items != "") {
    lb = lst_items.split("/");
    for (i=0;i<lb.length;i++)
    {
    item_arr[lb[i]][6] = "";
    }
    }
    if(way != -1){
    la = way.split("/");
    for (i=0;i<la.length;i++) open_items[la[i]][0] = '';
    }
    if(open != -1)
    {
    len = open_items[open][4] - open_items[open][3];
    for(i=0;i<=len;i++)
    {
    name = open_items[open][2] +"_s"+(open_items[open][3]+i);
    document.getElementById(name).style.display = '';
    }
    open_items[open][0] = '';
    }
    if(confirm != -1) open_items[confirm][0] = '';
    document.getElementById(id).style.backgroundColor = bg;
    document.getElementById(id).style.color = text;
    T1 = setTimeout("close_items()",0);
    }
    function add_col(top,left,arr,prop_id,mid,iid,from,way,citems,lst_item,dir)
    {
    if(way == ""){vway = iid;}
    else vway = way + "/" + iid;
    if(citems != "") vcitems = citems +"/"+ lst_item;
    else vcitems = lst_item;
    t=top;
    ll = left;
    if(dir == "r")
    {
    if((ll+(prop_id[13]+prop_id[20]+50)) > screenw)
    {
    ll -= 2*(prop_id[13] + prop_id[20])
    dir = "l";
    }
    }
    else
    {
    if(ll < 0)
    {
    ll += 2*(prop_id[13] + prop_id[20])
    dir = "r";
    }
    }
    start = count
    for(j=0;j<arr.length;j++)
    {
    if(arr[j][7]){tid = count_open;count_open++;}
    else tid = -1;
    height = prop_id[14];
    if(N) {height -= 5;t+=4;}
    width = prop_id[13]
    if(N) {width -= 7;}
    if(arr[j][1] != null)
    {document.write("<a href='"+arr[j][1]+"' ");
    document.write("style='text-decoration:none;color:"+arr[j][3]+"'");
    if(arr[j][2] != null) document.write("target='"+arr[j][2]+"' style='text-decoration:none'");
    document.write(">");
    }
    document.write("<div class='item_class' style=\"display:none;position:absolute;left:"+ll+";top:"+t);
    document.write(";filter:alpha(opacity="+prop_id[0]+"); -moz-opacity:"+prop_id[0]+"%;");
    document.write(";width:"+width);
    document.write(";height:"+height);
    document.write(";font-size:"+prop_id[18]+"px");
    document.write(";font-family:"+prop_id[19]);
    document.write(";background-color:"+arr[j][4]);
    document.write(";color:"+arr[j][3]);
    document.write(";cursor:hand");
    document.write(";border:"+prop_id[15]+"px "+prop_id[16]+" "+prop_id[17]);
    document.write("\" onmouseover=\"head_over(this.id,'"+arr[j][5]+"','"+arr[j][6]+"',"+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" onmouseout=\"head_out("+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" id="+mid+"_s"+count+">&nbsp;"+arr[j][0]);
    if(arr[j][7]){
    ileft = prop_id[13] - 20;
    document.write("<img src='"+prop_id[23]+"' border=0 style='position:absolute;left:"+ileft+";top:3;'>");
    }
    document.write("</div>")
    if(arr[j][1] != null)document.write("</a>");
    item_arr[count] = new Array(arr[j][3],arr[j][4],arr[j][5],arr[j][6],mid,from,"none",count);
    if(arr[j][7]) {
    if(dir == "r") l = ll + prop_id[13] + prop_id[20];
    else l = ll - prop_id[13] - prop_id[20];
    if(N) t-=4;
    container[ctc] = new Array(0,t,l,arr[j][7],prop_id,mid,tid,from,vway,vcitems,count,dir);
    if(N) t+=4;
    ctc++;
    }
    count++;
    t += height -1;
    if(N) t+= 1*(prop_id[15]);
    }
    end = count-1;
    open_items[iid] = new Array("none",iid,mid,start,end,from,vway,vcitems,count);
    vway = "";
    way = "";
    vcitems= "";
    }

    function empty_container()
    {
    for(i=0;i<container.length;i++)
    {
    if (container[i][0] == 0)
    { add_col(container[i][1],container[i][2],container[i][3],container[i][4],container[i][5],container[i][6],container[i][7],container[i][8],container[i][9],container[i][10],container[i][11]);
    container[i][0] = 1;
    }
    }
    }
    function close_items()
    {
    T1 = null;
    for(i=0;i<open_items.length;i++)
    {
    id = open_items[i][2] +"_s"+open_items[i][3];
    if(document.getElementById(id).style.display != open_items[i][0])
    {
    len = open_items[i][4] - open_items[i][3];
    for(j=0;j<=len;j++)
    {
    name = open_items[i][2] +"_s"+(open_items[i][3]+j);
    document.getElementById(name).style.display = open_items[i][0];
    }
    }
    }
    for (j=0;j<item_arr.length;j++)
    {
    i = parseInt(item_arr[j][7]);
    name = item_arr[i][4] + "_s" + i;
    if(item_arr[i][6] == "")
    {
    document.getElementById(name).style.color = item_arr[i][2];
    document.getElementById(name).style.backgroundColor = item_arr[i][3];
    }
    else
    {
    document.getElementById(name).style.color = item_arr[i][0];
    document.getElementById(name).style.backgroundColor = item_arr[i][1];
    }
    }
    for(k=0;k<head.length;k++)
    {
    name = head[k][4]+"_"+k;
    if(head[k][5] == "")
    {
    document.getElementById(name).style.color = head[k][2];
    document.getElementById(name).style.backgroundColor = head[k][3];
    }
    else
    {
    document.getElementById(name).style.color = head[k][0];
    document.getElementById(name).style.backgroundColor = head[k][1];
    }
    }
    }
    [/code:1:739eeda8c2]

    Hieronder zie je menu2items.js:
    [code:1:739eeda8c2]

    // Hier maak je de aanpassingen voor het menu-uitzicht:

    var prop = [
    95, // transparantie van de items (in procent)
    140, // plaatsing menubalk vanaf links
    115, // plaatsing menubalk vanaf boven
    100, // breedte hoofditems
    20, // top menu hoofditems
    1, // afstand tussen hoofditems
    1, // randdikte hoofditems
    '#394930', // randkleur hoofditems
    1, // hoofditems tekst: 0=normaal, 1=vet
    12, // lettergrootte hoofditems
    'Tahoma', // lettertype hoofditems
    'solid', // randstijl hoofditems

    1, // afstand tussen hoofditems en subitems

    100, // breedte subitems
    17, // hoogte subitems
    1, // randdikte subitems
    '#394930', // randkleur subitems
    'solid', // randstijl subitems
    10, // lettergrootte subitems
    'Tahoma', // lettertype subitems

    1, // afstand tussen subitem blokken (multi-level)

    3, // padding links in hoofditem blok
    10, // padding boven in hoofditem blok

    'Menu blokje.jpg'
    ];

    //———————————————————————————————
    /* Hier maak je de aanpassingen voor de menu-inhoud:

    Opmaak van een link zonder subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur]

    //Opmaak van een link met subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur,[subitems]]

    Vergeet niet alle geopende rechte haakjes af te sluiten!
    Let bijzonder goed op het gebruik van de komma's na elke regel!
    Dit menu is zeer delicaat:
    een komma of haakje vergeten of verkeerd plaatsen en het werkt niet meer.
    */
    //———————————————————————————————

    var link =
    [//recht haakje om het volledige menu te openen

    // voorbeeld zonder subitems:
    ['Homepage','Homepage Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],

    // voorbeeld met 2 subitems
    ['Ons product','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Heide','Heide.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940',
    [
    ['Erica','Erica.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Calluna','Calluna.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]]]], //2 open rechte haakjes gesloten

    //voorbeeld met 3 subitems
    ['Voorraad','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Voorraadslijst','Voorraadslijst.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Foto','Foto.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Beladingen','Beladingen.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]], //2 open rechte haakjes gesloten

    //laatste voorbeeld: géén komma na het laatste haakje!
    ['Info','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje
    [ //2de open recht haakje
    ['Contact','Mailformulier/Contact Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'],
    ['Adres en Tel.','Adres en Tel.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940']
    ]],

    ['Startpagina','index.htm','_top','#495940','#D3E4BC','#D3E4BC','#495940'] //4 open rechte haakjes gesloten

    //recht haakje om het volledige menu af te sluiten:
    ];
    [/code:1:739eeda8c2]

    [b:739eeda8c2]Weet er misschien nu iemand wat je in één van deze bestanden of javascript moet veranderen zodat het menu gecentreerd op de site komt. P.S. ik heb de hele site gecentreerd behalve dit onderdeel lukt niet.[/b:739eeda8c2]
  • al je variabelen, die in menuitems2.js staan, worden in een array gestopt die prop_id heet. de afstand tot aan de linkerkant is prop_id[1]. (het tweede "ding" in de array).

    als je dit stukje leest: l_men = prop_id[1];
    dan heet de afstand vanaf links l_men.

    In de opbouw zie je dat ook:
    document.write("<div style="position:absolute;top:"+prop_id[2]+";left:"+l_men);

    Je kan nu twee dingen doen; óf in je variabelen een waarde in % opgeven, óf een waarde meegeven in de code hierboven -en op alle andere plekken van - van menu2 program.js .

    t.
  • Ik wil het allemaal in procenten veranderen wat moet ik dan veranderen dit: px in %

    Maar als ik nou de code l_men wil veranderen wat moet ik er dan neer zetten dat ie gecentreerd staat.

    Greetzz
  • l_men betekent dus dat hij vanaf de linkerkant meet kan ik dit niet veranderen in gecentreerd (center ofzo)
  • als je er echte niet meet uit kunt komen pak dan een ander script, een
    applet of een flash movie zijn eenvoudiger te manipuleren.
  • heb je misschien een url waar ik flash scripts van mooi aparte menubalken kan downloaden

    bijvoortbaat dank Klaas

Beantwoord deze vraag

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