login  Naam:   Wachtwoord: 
Registreer je!
 Forum

probleem met uitlijning

Offline bwfighter - 16/10/2004 15:34 (laatste wijziging 16/10/2004 15:40)
Avatar van bwfighterHTML interesse yo

ik heb ne menu helemaal naar men hand aangepast. maar wil die nu ook centreren op 30px 0 0 300px. maar het gaat niet want je moet elke div apart gaan centreren en dan krijg ik ne fout. weet iemand hier ne oplossing voor hoe ik alles kan centreren.

dit is het script van he menu.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. <style type="text/css">
  8. BODY{
  9. background-color:#000066}
  10. /* Deze stylesheet bepaalt het uitzicht van de menubalk */
  11. /* Dit kun je evt.wijzigen : andere kleuren, ander lettertype, ... */
  12.  
  13. /* Het uitzicht van het gebruikte lettertype op de menubalk */
  14. div.WinBalk,
  15. div.WinBalk a.WinKnop,
  16. div.menu,
  17. div.menu a.WinItem { 
  18.   font-family: "TAHOMA", Arial, sans-serif;
  19.   font-size: 8pt;
  20.   font-style: normal;
  21.   font-weight: normal;
  22.   color: yellow; }
  23. /* De achtergrondkleur van de bovenste menubalk */
  24. div.WinBalk { 
  25.  
  26.   padding: 4px 2px 4px 2px;
  27.   text-align: left;}
  28. /* De 'normale' kleur van de tekst op de bovenste menubalk */
  29. div.WinBalk a.WinKnop {
  30.   background-color: transparent;
  31.   color: #FFFFFF;
  32.   cursor: default;
  33.   left: 0px;
  34.   margin: 1px;
  35.   padding: 2px 6px 2px 6px;
  36.   position: relative;
  37.   text-decoration: none;
  38.   top: 0px;
  39.   z-index: 100;}
  40. /* De kleur bij muisover van de tekst op de bovenste menubalk */
  41. div.WinBalk a.WinKnop:hover {
  42.   background-color: #000099;
  43.   color: #FFFFFF;}
  44. /* De kleur van de actieve (= aangeklikte) tekst op de bovenste menubalk */
  45. div.WinBalk a.WinKnopActive,
  46. div.WinBalk a.WinKnopActive:hover {
  47.   background-color: #000099;
  48.   color: #ff0000;
  49.   left: 1px;
  50.   top: 1px;}
  51. /* De achtergrondkleur van de submenu's */
  52. div.menu {
  53.   background-color: #000066;
  54.   left: 0px;
  55.   padding: 0px 1px 1px 0px;
  56.   position: absolute;
  57.   top: 0px;
  58.   visibility: hidden;
  59.   z-index: 101;}
  60. /* De 'normale' tekstkleur van de submenu's */
  61. div.menu a.WinItem {
  62.   color: #ffffff;
  63.   cursor: default;
  64.   display: block;
  65.   padding: 3px 1em;
  66.   text-decoration: none;
  67.   white-space: nowrap;}
  68. /* Achtergrondkleur en tekstkleur submenu's bij mouseover */
  69. div.menu a.WinItem:hover, div.menu a.WinItemOplichten {
  70.   background-color: #000099;
  71.   color: #ff0000;}
  72. div.menu a.WinItem span.WinItemText {}
  73. div.menu a.WinItem span.WinItempijltje {
  74.   margin-right: -.75em;}
  75. div.menu div.WinItemlijntje {
  76.   border-top: 1px solid #000099;
  77.   margin: 4px 2px;}
  78. </style>
  79.  
  80. <!-- Het script : niets aan wijzigen ! -->
  81. <script language= "JavaScript" type="text/javascript">
  82. function Browser() {var ua,s,i;this.isIE=false;this.isNS=false;this.version=null;
  83. ua = navigator.userAgent;s="MSIE";if((i=ua.indexOf(s))>=0){this.isIE=true;
  84. this.version=parseFloat(ua.substr(i + s.length));return;}s="Netscape6/";
  85. if((i=ua.indexOf(s))>=0){this.isNS=true;this.version=parseFloat(ua.substr(i+s.length));
  86. return;}s="Gecko";if((i=ua.indexOf(s))>=0){this.isNS=true;this.version=6.1;
  87. return;}}var browser=new Browser();var activeButton=null;
  88. if(browser.isIE)document.onmousedown=pageMousedown;
  89. else document.addEventListener("mousedown",pageMousedown,true);
  90. function pageMousedown(event){var el;if(activeButton==null)return;
  91. if(browser.isIE)el=window.event.srcElement;
  92. else el=(event.target.tagName?event.target:event.target.parentNode);
  93. if(el== activeButton)return;
  94. if(getContainerWith(el,"DIV","menu")==null){resetButton(activeButton);activeButton = null;
  95. }}
  96. function buttonClick(event,menuId){var button;
  97. if(browser.isIE)button=window.event.srcElement;
  98. else button=event.currentTarget;button.blur();
  99. if(button.menu==null){button.menu = document.getElementById(menuId);
  100. if(button.menu.isInitialized==null)menuInit(button.menu);}
  101. if(activeButton!=null)resetButton(activeButton);
  102. if(button!=activeButton){depressButton(button);activeButton = button;}
  103. elseactiveButton=null;return false;}
  104. function buttonMouseover(event, menuId){var button;
  105. if(browser.isIE)button=window.event.srcElement;else button=event.currentTarget;
  106. if(activeButton!=null&&activeButton!=button)buttonClick(event, menuId);}
  107. function depressButton(button){var x,y;button.className+=" WinKnopActive";
  108. x=getPageOffsetLeft(button);y=getPageOffsetTop(button)+ button.offsetHeight;
  109. if (browser.isIE){x+=button.offsetParent.clientLeft;
  110. y+=button.offsetParent.clientTop;}
  111. button.menu.style.left=x+"px";button.menu.style.top=y+"px";
  112. button.menu.style.visibility="visible";}
  113. function resetButton(button){removeClassName(button,"WinKnopActive");
  114. if(button.menu!=null){closeSubMenu(button.menu);button.menu.style.visibility="hidden";}}
  115. function menuMouseover(event){var menu;
  116. if(browser.isIE)menu=getContainerWith(window.event.srcElement,"DIV","menu");
  117. else menu=event.currentTarget;if(menu.activeItem!=null)closeSubMenu(menu);}
  118. function WinItemMouseover(event,menuId){var item,menu,x,y;
  119. if(browser.isIE)item=getContainerWith(window.event.srcElement,"A","WinItem");
  120. else item=event.currentTarget;menu=getContainerWith(item,"DIV","menu");
  121. if(menu.activeItem!=null)closeSubMenu(menu);menu.activeItem=item;
  122. item.className+=" WinItemOplichten";
  123. if(item.subMenu==null){item.subMenu=document.getElementById(menuId);
  124. if(item.subMenu.initialized==null)menuInit(item.subMenu);}
  125. x=getPageOffsetLeft(item)+item.offsetWidth;y=getPageOffsetTop(item);var maxX,maxY;
  126. if(browser.isNS){maxX=window.scrollX+window.innerWidth;
  127. maxY=window.scrollY+window.innerHeight;}
  128. if(browser.isIE){maxX=(document.documentElement.scrollLeft!=0? 
  129. document.documentElement.scrollLeft:document.body.scrollLeft)
  130. +(document.documentElement.clientWidth!=0? 
  131. document.documentElement.clientWidth:document.body.clientWidth);
  132. maxY=(document.documentElement.scrollTop!=0? 
  133. document.documentElement.scrollTop:document.body.scrollTop)
  134. +(document.documentElement.clientHeight!=0? 
  135. document.documentElement.clientHeight:document.body.clientHeight);}
  136. maxX-=item.subMenu.offsetWidth;maxY-=item.subMenu.offsetHeight;
  137. if(x>maxX)x=Math.max(0,x-item.offsetWidth-item.subMenu.offsetWidth
  138. +(menu.offsetWidth-item.offsetWidth));y=Math.max(0,Math.min(y, maxY));
  139. item.subMenu.style.left=x+"px";item.subMenu.style.top=y+"px";
  140. item.subMenu.style.visibility="visible";
  141. if(browser.isIE)window.event.cancelBubble=true;else event.stopPropagation();}
  142. function closeSubMenu(menu){if(menu==null||menu.activeItem==null)return;
  143. if(menu.activeItem.subMenu!=null){closeSubMenu(menu.activeItem.subMenu);
  144. menu.activeItem.subMenu.style.visibility="hidden";menu.activeItem.subMenu=null;}
  145. removeClassName(menu.activeItem,"WinItemOplichten");menu.activeItem=null;}
  146. function menuInit(menu){
  147. var itemList,spanList;var textEl,pijltjeEl;var itemWidth;var w,dw;var i,j;
  148. if(browser.isIE){menu.style.lineHeight="2.5ex";
  149. spanList=menu.getElementsByTagName("SPAN");
  150. for(i=0;i< spanList.length; i++)
  151. if(hasClassName(spanList[i],"WinItempijltje")){
  152. spanList[i].style.fontFamily="Webdings";spanList[i].firstChild.nodeValue="4";}}
  153. itemList=menu.getElementsByTagName("A");
  154. if(itemList.length>0)itemWidth=itemList[0].offsetWidth;else return;
  155. for(i=0; i < itemList.length; i++) {
  156. spanList=itemList[i].getElementsByTagName("SPAN")
  157. textEl=null
  158. pijltjeEl = null;
  159. for(j=0; j < spanList.length; j++) {
  160. if(hasClassName(spanList[j],"WinItemText"))textEl=spanList[j];
  161. if(hasClassName(spanList[j],"WinItempijltje"))pijltjeEl=spanList[j];}
  162. if(textEl!=null&&pijltjeEl!=null)
  163. textEl.style.paddingRight=(itemWidth-(textEl.offsetWidth+pijltjeEl.offsetWidth))+"px";}
  164. if (browser.isIE){w=itemList[0].offsetWidth;
  165. itemList[0].style.width=w+"px";dw=itemList[0].offsetWidth-w;w-=dw;
  166. itemList[0].style.width=w+"px";}
  167. menu.initialized=true;}
  168. function getContainerWith(node,tagName,className){
  169. while(node!=null){
  170. if(node.tagName!=null&&node.tagName==tagName&&hasClassName(node,className))
  171. return node;node=node.parentNode;}return node;}
  172. function hasClassName(el,name){
  173. var i,list;list=el.className.split(" ");
  174. for(i=0;i<list.length;i++)if(list[i]==name)return true;return false;}
  175. function removeClassName(el,name){
  176. var i,curList,newList;if(el.className==null)return;
  177. newList=new Array();curList=el.className.split(" ");
  178. for(i=0;i<curList.length;i++)
  179. if(curList[i]!=name)newList.push(curList[i]);el.className=newList.join(" ");}
  180. function getPageOffsetLeft(el){var x;x=el.offsetLeft;
  181. if(el.offsetParent!=null)x+=getPageOffsetLeft(el.offsetParent);return x;}
  182. function getPageOffsetTop(el){var y;y=el.offsetTop;
  183. if(el.offsetParent!=null)y+=getPageOffsetTop(el.offsetParent);return y;}
  184. </script>
  185. </head>
  186.  
  187. <body>
  188. <div class="WinBalk" style="position:relative;width=100%;">
  189.  
  190. <!-- Tekst op de menubalk -->
  191.  
  192. <a class="WinKnop"
  193.     href="#"
  194.     onclick="return buttonClick(event, 'BestandMenu');"
  195.     onmouseover="buttonMouseover(event, 'BestandMenu');">
  196. Bestand
  197. </a>
  198.  
  199. <a class="WinKnop"
  200.     href="#"
  201.     onclick="return buttonClick(event, 'BewerkenMenu');"
  202.     onmouseover="buttonMouseover(event, 'BewerkenMenu');">
  203. Bewerken
  204. </a>
  205.  
  206. <a class="WinKnop"
  207.     href="#"
  208.     onclick="return buttonClick(event, 'BeeldMenu');"
  209.     onmouseover="buttonMouseover(event, 'BeeldMenu');">
  210. Beeld
  211. </a>
  212.  
  213. <a class="WinKnop"
  214.     href="#"
  215.     onclick="return buttonClick(event, 'ExtraMenu');"
  216.     onmouseover="buttonMouseover(event, 'ExtraMenu');">
  217. Extra
  218. </a>
  219.  
  220. <a class="WinKnop"
  221.     href="#"
  222.     onclick="return buttonClick(event, 'OptiesMenu');"
  223.     onmouseover="buttonMouseover(event, 'OptiesMenu');">
  224. Opties
  225. </a>
  226.  
  227. <a class="WinKnop"
  228.     href=""
  229.     onclick="return buttonClick(event, 'HelpMenu');"
  230.     onmouseover="buttonMouseover(event, 'HelpMenu');"
  231. >Help
  232. </a>
  233. </div>
  234.  
  235. <!-- Maken van de hoofdmenu's. -->
  236.  
  237. <!-- Menu Bestand -->
  238.  
  239. <div id="BestandMenu" class="menu"
  240.      onmouseover="menuMouseover(event)">
  241. <a class="WinItem" href="#">Bestand 1</a>
  242. <!-- Hier komt een pijltje dat verwijst naar een submenu -->
  243. <a class="WinItem" href="#"
  244.    onclick="return false;"
  245.    onmouseover="WinItemMouseover(event, 'BestandMenu2');">
  246.    <span class="WinItemText">Bestand 2</span>
  247.    <span class="WinItempijltje">&#9654;</span></a>
  248. <!-- Einde verwijzing naar submenu --> 
  249. <a class="WinItem" href="#">Bestand 3</a>
  250. <a class="WinItem" href="#">Bestand 4</a>
  251. <a class="WinItem" href="#">Bestand 5</a>
  252. <!-- Hier komt een scheidingslijn -->
  253. <div class="WinItemlijntje"></div> 
  254. <!-- Einde scheidingslijn -->
  255. <a class="WinItem" href="#">Bestand 6</a>
  256. </div>
  257.  
  258. <!-- Menu Bewerken -->
  259.  
  260. <div id="BewerkenMenu" class="menu"
  261.      onmouseover="menuMouseover(event)">
  262. <a class="WinItem" href="#">Bewerken 1</a>
  263. <div class="WinItemlijntje"></div> 
  264. <a class="WinItem" href="#">Bewerken 2</a>
  265. <a class="WinItem" href=""
  266.    onclick="return false;"
  267.    onmouseover="WinItemMouseover(event, 'BewerkenMenu3');">
  268.    <span class="WinItemText">Bewerken 3</span>
  269.    <span class="WinItempijltje">&#9654;</span></a> 
  270. <a class="WinItem" href="#">Bewerken 4</a>
  271. <div class="WinItemlijntje"></div> 
  272. <a class="WinItem" href="#">Bewerken 5</a>
  273. </div>
  274.  
  275. <!-- Menu Beeld -->
  276.  
  277. <div id="BeeldMenu" class="menu">
  278. <a class="WinItem" href="#">Beeld 1</a>
  279. <a class="WinItem" href="#">Beeld 2</a>
  280. <a class="WinItem" href="#">Beeld 3</a>
  281. </div>
  282.  
  283. <!-- Menu Extra -->
  284.  
  285. <div id="ExtraMenu" class="menu"
  286.      onmouseover="menuMouseover(event)">
  287. <a class="WinItem" href="#"
  288.    onclick="return false;"
  289.    onmouseover="WinItemMouseover(event, 'ExtraMenu1');">
  290.    <span class="WinItemText">Extra 1</span>
  291.    <span class="WinItempijltje">&#9654;</span></a> 
  292. <a class="WinItem" href="#">Extra 2</a>
  293. <a class="WinItem" href="#">Extra 3</a>
  294. <div class="WinItemlijntje"></div> 
  295. <a class="WinItem" href="#"
  296.    onclick="return false;"
  297.    onmouseover="WinItemMouseover(event, 'ExtraMenu4');">
  298.    <span class="WinItemText">Extra 4</span>
  299.    <span class="WinItempijltje">&#9654;</span></a> 
  300. <a class="WinItem" href="#">Extra 5</a>
  301. </div>
  302.  
  303. <!-- Menu Opties -->
  304.  
  305. <div id="OptiesMenu" class="menu">
  306. <a class="WinItem" href="#">Opties 1</a>
  307. <a class="WinItem" href="#">Opties 2</a>
  308. <a class="WinItem" href="#">Opties 3</a>
  309. </div>
  310.  
  311. <!-- Menu Help -->
  312.  
  313. <div id="HelpMenu" class="menu">
  314. <a class="WinItem" href="#">Help 1</a>
  315. <a class="WinItem" href="#">Help 2</a>
  316. <div class="WinItemlijntje"></div> 
  317. <a class="WinItem" href="#">Help 3</a>
  318. </div>
  319.  
  320. <!-- Bestand submenu's. -->
  321.  
  322. <div id="BestandMenu2" class="menu">
  323. <a class="WinItem" href="#">Bestand 2.1</a>
  324. <a class="WinItem" href="#">Bestand 2.2</a>
  325. </div>
  326.  
  327. <!-- Bewerken submenu's. -->
  328.  
  329. <div id="BewerkenMenu3" class="menu"
  330.      onmouseover="menuMouseover(event)">
  331. <a class="WinItem" href="#">Bewerken 3.1</a>
  332. <a class="WinItem" href="#">Bewerken 3.2</a>
  333. <div class="WinItemlijntje"></div>
  334. <a class="WinItem" href="#"
  335.    onclick="return false;"
  336.    onmouseover="WinItemMouseover(event, 'BewerkenMenu3_3');">
  337.    <span class="WinItemText">Bewerken 3.3</span>
  338.    <span class="WinItempijltje">&#9654;</span></a>
  339. <a class="WinItem" href="#">Bewerken 3.4</a>
  340. </div>
  341.  
  342. <div id="BewerkenMenu3_3" class="menu">
  343. <a class="WinItem" href="#">Bewerken 3.3.1</a>
  344. <a class="WinItem" href="#">Bewerken 3.3.2</a>
  345. <a class="WinItem" href="#">Bewerken 3.3.3</a>
  346. <div class="WinItemlijntje"></div>
  347. <a class="WinItem" href="#">Bewerken 3.3.4</a>
  348. </div>
  349.  
  350. <!-- Extra submenu's. -->
  351.  
  352. <div id="ExtraMenu1" class="menu">
  353. <a class="WinItem" href="#">Extra 1.1</a>
  354. <a class="WinItem" href="#">Extra 1.2</a>
  355. <div class="WinItemlijntje"></div>
  356. <a class="WinItem" href="#">Extra 1.3</a>
  357. <a class="WinItem" href="#">Extra 1.4</a>
  358. <div class="WinItemlijntje"></div>
  359. <a class="WinItem" href="#">Extra 1.5</a>
  360. </div>
  361.  
  362. <div id="ExtraMenu4" class="menu"
  363.      onmouseover="menuMouseover(event)">
  364. <a class="WinItem" href="#">Extra 4.1</a>
  365. <a class="WinItem" href="#">Extra 4.2</a>
  366. <a class="WinItem" href="#"
  367.    onclick="return false;"
  368.    onmouseover="WinItemMouseover(event, 'ExtraMenu4_3');">
  369.    <span class="WinItemText">Extra 4.3</span>
  370.    <span class="WinItempijltje">&#9654;</span></a>
  371. </div>
  372.  
  373. <div id="ExtraMenu4_3" class="menu">
  374. <a class="WinItem" href="#">Extra 4.3.1</a>
  375. <a class="WinItem" href="#">Extra 4.3.2</a>
  376. <a class="WinItem" href="#">Extra 4.3.3</a>
  377. <a class="WinItem" href="#"
  378.    onclick="return false;"
  379.    onmouseover="WinItemMouseover(event, 'ExtraMenu4_3_4');">
  380.    <span class="WinItemText">Extra 4.3.4</span>
  381.    <span class="WinItempijltje">&#9654;</span></a>
  382. </div>
  383.  
  384. <div id="ExtraMenu4_3_4" class="menu">
  385. <a class="WinItem" href="#">Extra 4.3.4.1</a>
  386. <a class="WinItem" href="#">Extra 4.3.4.2</a>
  387. <a class="WinItem" href="#">Extra 4.3.4.3</a>
  388. <a class="WinItem" href="#">Extra 4.3.4.4</a>
  389. </div>
  390.  
  391. </body>
  392. </html>

2 antwoorden

Gesponsorde links
Offline Maarten - 05/11/2004 13:44 (laatste wijziging 05/11/2004 13:45)
Avatar van Maarten Erelid met text-align: center zou ik zeggen, en anders begrijp ik je verkeerd. En post in het vervolg gewoon ff je CSS en één DIV en niet heel je script 
Offline Hans - 05/11/2004 14:43 (laatste wijziging 05/11/2004 14:44)
Avatar van Hans HTML beginner Quote regels 6.1
Citaat:
* voorzie het bericht eventueel van codefragmenten (géén lappen text)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.236s