Avatar billede silverline Nybegynder
12. maj 2005 - 17:08 Der er 6 kommentarer og
1 løsning

Problem med "Drop-down menu"

Hey Forum...

Jeg vil gerne have sådan en "drop down menu" på min side. Det kan jeg også sagtens få, problemet er bare, at den tabel jeg sætter drop down menuen i, bliver lige så bred som menuen, når den er "kørt ud" eller hvad man skal side...

For at synligøre mit problem, klik her : http://www.coot.dk/beta/menu2.htm
Den øverste tabel, er som jeg gerne vil have det til at se ud. Den nederste, er som det kommer til at se ud når jeg sætter den drop down menu ind. Kan man ikke få menuen til at gå ud over tabellen, når den køre ned?
Avatar billede nielle Nybegynder
12. maj 2005 - 18:15 #1
Du skal altid huske at have enheder på når du bruger CSS:

<div id=div1 onmouseover="showObject()" onmouseout="hideObject()" class=popchr style="background-color:C9C01D; width:140">

- ændres til:

<div id=div1 onmouseover="showObject()" onmouseout="hideObject()" class=popchr style="background-color:C9C01D; width:140px">
Avatar billede silverline Nybegynder
14. maj 2005 - 11:15 #2
Det ændre ikke så meget ?? Jeg vil have menuen til at gå ud over den tabel den sidder i nu. Men som det er nu, er tabbelen lige så bred, som menuen er når den er kørt ud?
Avatar billede silverline Nybegynder
14. maj 2005 - 11:18 #3
Kan være jeg har formuleret mig dårligt ! Det er højden !
Avatar billede roenving Novice
14. maj 2005 - 11:51 #4
Den er godt nok skrevet i ufattelig gammel kode ...

-- og der er mange uhensigtsmæssigheder, browser-inkompatibiliteter m.m.

-- og grunden er, at du faktisk benytter den forkerte teknik, prøv f.eks.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

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

<style type="text/css">
html,body{font-family: verdana, arial, sans-serif; font-size: 12px;color:#fff;}
a,a:link,a:visited{color:#800000;text-decoration:none;}
a:hover{color:#fff,text-decoration:none;}
.menuTbl{width:100%;background:#000;border:0;border-collapse:collapse;}
.menuTbl td{margin:0;padding:0;border:0;}
.headerTd{text-align:center;color:#fff;font-family:verdana,sans-serif;font-size:x-small;font-weight:bold;}
.popchr { visibility:hidden; font-size: 12px }
.gochr { visibility:visible; font-size: 12px}
</style>
<script type="text/javascript">
function showDate(){
  var months = ["januar","februar","marts","april","maj","juni","juli","august","september","oktober","november","december"];
  var time=new Date();
  var lmonth=months[time.getMonth()];
  var date=time.getDate();
  var year=time.getFullYear();
  document.write("<p>" + date + ". " + lmonth + " " + year + "</p>");
}
function showObject(num){
  document.getElementById("div"+num).style.display = 'block';
}
function hideObject(num){
  document.getElementById("div"+num).style.display = 'none';
}
</script>

<title>Mazda Stuff</title>
</head>
<body>

<table class="menuTbl">
  <tr>
    <td width="13%">&nbsp;</td>
    <td width="13%"></td>
    <td width="12%">&nbsp;</td>
    <td width="13%" class="headerTd">
    <a href="java script:window.external.AddFavorite('http://www.jubee.dk/', 'Coot.dk')">Gør Coot.dk til foretrukne</a></td>
    <td width="12%" class="headerTd"><script type="text/javascript">showDate();</script></td>
  </tr>
</table>

<p>
</p>

<p>&nbsp;</p>
<p>&nbsp;</p>

<table class="menuTbl">
  <tr>
    <td width="13%">
<center>
<table>
<tr>
<td>

<div style="background-color:#C9C01D; width:140px; font-size: 12px; margin:0px;position:relative;" onmouseover="showObject(1)" onmouseout="hideObject(1)" >
<a href=http://hjem.get2net.dk/ahome/koder/javascript_rul_ned_liste_tekst.htm onmouseover="showObject(1)" onmouseout="hideObject(1)">Søg nu</a>


<div id=div1 onmouseover="showObject(1)" onmouseout="hideObject(1)" style="background-color:#C9C01D; width:140px;display:none;position:absolute;top:14px;left:0px;">
<a href=http://www.ditdanmark.dk onmouseover="showObject(1)" onmouseout="hideObject(1)">DitDanmark</a><br>
<a href=http://www.edderkoppen.dk onmouseover="showObject(1)" onmouseout="hideObject(1)">Edderkoppen</a><br>
<a href=http://www.sol.dk onmouseover="showObject(1)" onmouseout="hideObject(1)">SOL</a><br>
<!-- linie for at udligne niveau -->
<font color=#C9C01D>|</font>
</div>
</div>
</td><td>

<div style="background-color:#C9C01D; width:140px; font-size: 12px; margin:0px;position:relative;" onmouseover="showObject(2)" onmouseout="hideObject(2)" >
<a href=http://hjem.get2net.dk/ahome/koder/javascript_rul_ned_liste_tekst.htm onmouseover="showObject(2)" onmouseout="hideObject(2)">Sjov</a>


<div id=div2 onmouseover="showObject(2)" onmouseout="hideObject(2)" style="background-color:#C9C01D; width:140px;display:none;position:absolute;top:14px;left:0px;">
<a href=http://www.lego.com onmouseover="showObject(2)" onmouseout="hideObject(2)">Legoland</a><br>
<a href=http://www.andeby.dk onmouseover="showObject(2)" onmouseout="hideObject(2)">Andeby</a><br>
<!-- linie for at udligne niveau -->
<font color=#C9C01D>|<br>
|</font>
</div>
</div>
</td>
<td>

<div style="background-color:#C9C01D; width:140px; font-size: 12px; margin:0px;position:relative;" onmouseover="showObject(3)" onmouseout="hideObject(3)" >
<a href=http://hjem.get2net.dk/ahome/koder/javascript_rul_ned_liste_tekst.htm onmouseover="showObject(3)" onmouseout="hideObject(3)">Nyheder</a>


<div id=div3 onmouseover="showObject(3)" onmouseout="hideObject(3)" style="background-color:#C9C01D; width:140px;display:none;position:absolute;top:14px;left:0px;">
<a href=http://www.dr.dk/nyheder onmouseover="showObject(3)" onmouseout="hideObject(3)">DR Nyheder</a><br>
<a href=http://www.politiken.dk onmouseover="showObject(3)" onmouseout="hideObject(3)">Politiken</a><br>
<!-- linie for at udligne niveau -->
<font color=#C9C01D>|<br>
|</font>
</div>
</div>
</td>
</tr>
</table>
</center>
    </td>
    <td width="13%"  class="headerTd">
    <A href="java script:window.external.AddFavorite('http://www.jubee.dk/', 'Coot.dk')">Gør Coot.dk til foretrukne</a></td>
    <td width="12%" class="headerTd"><script type="text/javascript">showDate();</script></td>
  </tr>
</table>

<p>&nbsp;
</p>

</body>

</html>

-- og jeg har ikke ryddet fuldstændigt op, men kun en hel del ...
Avatar billede silverline Nybegynder
14. maj 2005 - 14:56 #5
Det var lige hvad der skulle til ! Mange tak..
Avatar billede roenving Novice
14. maj 2005 - 15:02 #6
Bemærk også hvordan jeg har stylet (mest med class !-) men ikke skifter klasse, fordi det performer helt ekstremt dårligt (men jeg har ikke forsøgt at gøre det præcis som du havde det, da formålet var anderledes, nemlig at vise dig, hvad man kan !-)

-- jeg flyttede også style-blokkene på plads, de må nemlig ikke findes andre steder end i head-sektionen, ligesom jeg samlede de egentlige scripts der !o]

Velbekomme '-)
Avatar billede roenving Novice
31. oktober 2005 - 01:24 #7
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester