Er kørt fast....
HejsaJeg har et problem, som jeg selv har bragt mig i, og kan nu ikke finde ud af det... ØV ØV :(
JEg har lavet denne menu, som jeg gerne vil bruge, mine hovde menu, som er foroven, aktiver nogle drop Down menuer.
Det er alt sammen fint. MEN. Nu kan jeg ikke få disse drop down menuer til at såt lige under mine hovde menuer.
Mine hoved menuer skal stå der hvor de er nu.
Det jeg vil er at flytte mine Drop Down menuer lidt til højre.
Hvordan gør jeg dette ??
Jeg har lavet det i HTML, Script og CSS.....
__________________________________________________________________________________________________________________
HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>TEST</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<LINK href="css/menu.css" type=text/css rel=stylesheet>
<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY text=#000000 vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0 bgcolor="#E1E1E1">
<SCRIPT language=Javascript src="script/menu.js"></SCRIPT>
<SCRIPT>
addMenu('100','Om test123','')
addMenuItem('100','106','Velkommen','velkommen.html?ID=','velkommen')
addMenuItem('100','102','Idegrundlag','idegrundlag.html?ID=Idegrundlag','Idégrundlag')
addMenuItem('100','104','Virksomheden','virksomheden.html?ID=Virksomheden','Virksomheden')
addMenu('300','Produkter','')
addMenuItem('300','301','velkimmen','type1.html?ID=1','Web-løsninger')
addMenuItem('300','302','Type 2','type2.html?ID=2','Intranet')
addMenuItem('300','303','Type 3','plam.html?ID=CM-3','Content Management Systemer')
addMenuItem('300','304','Type 4','skaerm.html?ID=4','E-handel')
addMenu('348','Kontakt os','')
addMenuItem('348','352','Kontakt os','kontakt.html?ID=kontakt','kontakt')
addMenu('400','Matriale','')
addMenuItem('400','401','Bestil','besti.html?ID=Produkter','Produkter')
</SCRIPT>
<SCRIPT>
function open_editwin ( my_url, name, WinWidth, WinHeight )
{
if (WinWidth == null) WinWidth = '250';
if (WinHeight == null) WinHeight = '250';
var editwin = "";
editwin = editwin + "width=" + WinWidth;
editwin = editwin + ",height=" + WinHeight;
editwin = editwin + ",resizable=yes";
editwin = editwin + ",scrollbars=yes";
editwin = editwin + ",menubar=no";
editwin = editwin + ",toolbar=no";
editwin = editwin + ",directories=no";
editwin = editwin + ",location=no";
editwin = editwin + ",status=no";
editwin = editwin + ",top=20";
editwin = editwin + ",left=550";
editwin_win = window.open(my_url,name,editwin);
editwin_win.focus();
editwin_win.opener = self;
}
</SCRIPT>
<DIV align=center>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 height="100%"
cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD vAlign=top>
<DIV align=center>
<CENTER>
<TABLE
style="BORDER-TOP-WIDTH: 1px; BORDER-RIGHT: 1px solid; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT: 1px solid; BORDER-COLLAPSE: collapse"
borderColor=#111111 height=685 cellSpacing=0 cellPadding=0 width=669
bgColor=white border=0>
<TBODY>
<TR>
<TD width=689 bgColor=#FFFFFF height=17>
<p align="center"><img border="0" src="images/test3.jpg" width="650" height="60"></TD></TR>
</CENTER>
<TR>
<TD width=689 height=1>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="100%">
<p align="right">
<SCRIPT language=Javascript>drawToolbar()</SCRIPT>
</TD>
<CENTER>
<TD vAlign=bottom noWrap></TD></TR></TBODY></TABLE></center></TD></TR>
<TR>
<TD vAlign=top width=689 height=599> <BR>
<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse"
borderColor=#111111 height="100%" cellSpacing=0 cellPadding=0
width="104%" border=0>
<TBODY>
<TR>
<TD width="15%"> </TD>
<TD vAlign=top width="56%"><FONT
style="FONT-SIZE: 11px"> </FONT><img border="0" src="images/2.jpg" width="489" height="451"></TD>
<TD vAlign=top
width="25%"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></BODY></HTML>
________________________________________________________________________________________________________________
SCRIPT :
/*====================================
DyNAMiC-cOre.Net
Toolbar
====================================*/
var Toolbar='<DIV ID="Toolbar" class="tbToolbar" NOWRAP><table border="0" cellspacing="0" cellpadding="0"><tr><!-- TB_ITEMS --></tr></table></DIV><!-- TB_SUBITEMS -->'
var currentMenu=null
var currentItem=null
var focusTimer=null
var root=''
function drawToolbar() { document.write(Toolbar) }
function addMenu2(id,caption,turl) {
var tmpTag='<!-- TB_ITEMS -->'
Toolbar=Toolbar.replace(tmpTag,'<TD id="IT_'+id+'" class="tbItem" NOWRAP ><p onclick="window.location=\'' + turl + '\'" class="tbItemLink" > '+caption+'</p></td>'+tmpTag)
var tmpTag='<!-- TB_SUBITEMS -->'
//Toolbar=Toolbar.replace(tmpTag,'<DIV id="TBS_'+id+'" class="tbSubMenu" onmousemove="setFocus(\''+id+'\')" NOWRAP><!-- TBS_'+id+' --></div>'+tmpTag)
}
function addMenu(id,caption,turl) {
var tmpTag='<!-- TB_ITEMS -->'
Toolbar=Toolbar.replace(tmpTag,'<TD id="IT_'+id+'" class="tbItem" NOWRAP onmouseover="doAction(\''+id+'\')" onmousemove="setFocus(\''+id+'\')"><p class="tbItemLink" onmouseover="doAction(\''+id+'\')" onmousemove="setFocus(\''+id+'\')"> '+caption+'</p></td>'+tmpTag)
var tmpTag='<!-- TB_SUBITEMS -->'
Toolbar=Toolbar.replace(tmpTag,'<DIV id="TBS_'+id+'" class="tbSubMenu" onmousemove="setFocus(\''+id+'\')" NOWRAP><!-- TBS_'+id+' --></div>'+tmpTag)
}
function addMenuItem(p,id,caption,turl,hint) {
var tmpTag='<!-- TBS_'+p+' -->'
Toolbar=Toolbar.replace(tmpTag,'<DIV id="TBSI_'+id+'" class="tbSubItemLink" onmouseover="showSelect(\''+id+'\',\''+hint+'\')" onmouseup="location=root+\''+turl+'\'" NOWRAP>'+caption+'</div>'+tmpTag)
}
function xaddSubMenu(p,id,caption,url) {
var tmpTag='<!-- TB_SUBITEMS -->'
Toolbar=Toolbar.replace(tmpTag,'<DIV id="TBSUB_'+p+'" class="tbSubMenu" onmousemove="setFocus(\''+id+'\')" NOWRAP><!-- TBS_'+id+' --></div>'+tmpTag)
}
function setFocus(id) {
if (focusTimer) clearTimeout(focusTimer)
focusTimer=setTimeout('doHide("'+id+'")',1000)
}
function doHide(id) {
var o=document.getElementById('TBS_'+id)
if (!o) var o=document.getElementById('TBSUB_'+id)
o.style.display="none"
var o=document.getElementById('IT_'+id)
o.className='tbItem'
if (currentItem) document.getElementById('TBSI_'+currentItem).className="tbSubItemLink"
}
function showSelect(id,hint) {
if (currentItem) document.getElementById('TBSI_'+currentItem).className="tbSubItemLink"
document.getElementById('TBSI_'+id).className="tbSubItemLinkSelected"
currentItem=id
if (hint!='undefined') status=hint
else status=''
var o=document.getElementById('Toolbar')
y=o.offsetTop+o.offsetHeight
// check for SubMenu and display it
var o=document.getElementById('TBSUB_'+id)
if (o) {
y+=document.getElementById('TBSI_'+id).offsetTop+document.getElementById('TBSI_'+id).offsetHeight-4
x=document.getElementById('TBSI_'+id).offsetLeft+document.getElementById('TBSI_'+id).offsetParent.offsetLeft+document.getElementById('TBSI_'+id).offsetParent.offsetWidth-15
//o.className='tbItemSelected'
//o=document.getElementById('TBS_'+id)
o.style.display='block'
o.style.left=x
o.style.top=y
currentMenu=o.id
}
}
function doAction(id) {
var o=document.getElementById('Toolbar')
y=o.offsetTop+o.offsetHeight+1
myx=o.offsetLeft
if (currentMenu) {
document.getElementById('IT_'+currentMenu).className='tbItem'
document.getElementById('TBS_'+currentMenu).style.display='none'
}
var o=document.getElementById('IT_'+id)
if (ie) {
x=o.offsetLeft+o.offsetParent.offsetLeft+myx
} else {
x=o.offsetLeft+o.offsetParent.offsetLeft
}
o.className='tbItemSelected'
o=document.getElementById('TBS_'+id)
o.style.display='block'
o.style.left=x
o.style.top=y
currentMenu=id
}
if (!document.getElementById) window.location="http://www.webstandards.org/upgrade/"
ie=(document.all)?true:false; mac=(navigator.platform.indexOf("Mac") != -1)? true:false;
opera=(navigator.userAgent.indexOf("Opera")>0)
________________________________________________________________________________________________________________
CSS :
.tbToolbar
{
BORDER-TOP: black 1px solid; /*Top-stregen af menuen*/
FONT-SIZE: 12px; /*?*/
Z-INDEX: 999;
PADDING-BOTTOM: 0px; /*Dybden på menuen*/
MARGIN: 0px; /*Placeringen af menuen*/
WIDTH: 100%; /*Længden på menuen*/
CURSOR: hand;
COLOR: #000000; /*?*/
PADDING-TOP: 1px; /*Højden og dubden på menuen*/
BORDER-BOTTOM: black 1px solid; /*Fave og tykkelse på bund-stregen i menuen*/
POSITION: relative; /*placering af drop down menu*/
HEIGHT: 10px; /*Højde på menuen*/
BACKGROUND-COLOR: #FFFFFF /*farve på menuen*/
}
.tbSubMenu
{
BORDER-RIGHT: black 1px solid; /*Tykkelsen højre side af drop down menu*/
PADDING-right: 0px; /*Rykkes til Venstre Drop Down menu når musen køre hen over*/
BORDER-TOP: black 1px solid; /*Tykkelsen på drop down menu i toppen*/
DISPLAY: none; /*Drop Down menu er gemt til munes køre hen over*/
PADDING-LEFT: 0px; /*Rykkes til højre Drop Down menu når musen køre hen over*/
FONT-SIZE: 12px; /*?*/
Z-INDEX: 998; /*?*/
PADDING-BOTTOM: 0px; /*Space i dunden af drop down menuen*/
BORDER-LEFT: black 1px solid; /*TYkkelse i højre side i drop down menu*/
WIDTH: 83px; /*Tykkelse på drop down menu*/
CURSOR: hand; /**/
COLOR: Black; /*Fave på links i drop down menu*/
PADDING-TOP: 0px; /*Space over links i drop down menu*/
BORDER-BOTTOM: black 1px solid; /*Bund streg i drop down menu*/
POSITION: absolute; /*Placering af DDM*/
BACKGROUND-COLOR: #FFFFFF; /*Baggrunds fave i DDM*/
}
.tbItemSelected /* Menuen */
{
BORDER-RIGHT: medium none;
PADDING-right: 0px;
BORDER-TOP: medium none;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
Z-INDEX: 1001;
PADDING-BOTTOM: 0px; /*Bund-streg i menuen*/
MARGIN: 0px;
BORDER-LEFT: medium none;
WIDTH: auto; /*Automatesering af menuen*/
CURSOR: hand;
COLOR: Black; /*Når musen køre hen over menuen skifter den fave*/
PADDING-TOP: 0px;
BORDER-BOTTOM: medium none;
TEXT-DECORATION: none;
}
.tbItemLink /* Skrifttype på Menuen */
{
PADDING-RIGHT: 20px; /*Placering af tekst i menuen*/
PADDING-LEFT: 2px; /*Placering af tekst i menuen*/
FONT-SIZE: 12px; /*Skriftstørrelse i Menuen*/
Z-INDEX: 1003;
PADDING-BOTTOM: 0px; /*Trækker bund-stregen ned af*/
MARGIN: 0px; /*Centret menue*/
CURSOR: hand;
PADDING-TOP: 0px; /*Trækker top-stregen op af*/
}
.tbSubItemLink /* DropDown Menu */
{
BORDER-RIGHT: medium none;
PADDING-RIGHT: 2px;
BORDER-TOP: medium none;
PADDING-LEFT: 2px;
FONT-SIZE: 12px; /*Skrifstørrelse på DDM før muusen*/
Z-INDEX: 1004;
PADDING-BOTTOM: 2px; /*Mellemrum mellem links i DDM*/
MARGIN: 0px;
BORDER-LEFT: medium none;
WIDTH: 100%;
CURSOR: hand;
PADDING-TOP: 2px;
BORDER-BOTTOM: medium none;
WHITE-SPACE: nowrap;
}
.tbSubItemLinkSelected /* Fraven på dropDown menu */
{
BORDER-RIGHT: medium none; /*?*/
PADDING-RIGHT: 2px; /*?*/
BORDER-TOP: medium none; /*?*/
PADDING-LEFT: 2px; /*Links i Deop Down menu rykkes til hørje*/
FONT-SIZE: 12px; /*Støresle på links når mun køre hen over*/
Z-INDEX: 1005; /*?*/
PADDING-BOTTOM: 2px; /*Tykkelsen på luften under bjælkne i drop down menuen*/
MARGIN: 0px auto 0px 0px; /*Mennemrum mellem links i drop down menu når hndå køres hen over*/
BORDER-LEFT: medium none; /*?*/
WIDTH: 100%; /*Tykkelsen på bjælken og skriften i drop down menu*/
CURSOR: hand; /*Hånd på menuen*/
PADDING-TOP: 2px; /*Tykkelsen på luften over bjælkne i drop down menuen*/
BORDER-BOTTOM: medium none; /*?*/
WHITE-SPACE: nowrap; /*?*/
BACKGROUND-COLOR: #E1E1E1; /*Fave på bjælken i drop down menuen*/
font-color: white; /*?*/
}
________________________________________________________________________________________________________________
