Søg
Avatar billede web-girl Nybegynder
11. september 2005 - 20:18 Der er 26 kommentarer og
1 løsning

Dropdown til eksisterende menu - hvordan?

Jeg har efterhånden brug for mere plads i min menu og vil gerne lave den som dropdown der udfolder sig automatisk når man holder musen hen over.Samtidig vil jeg høre om det ikke kan lade sig gøre at lave noget smart så man ikke skal ind på hver eneste side for at lave ændringer i menuen (bortset fra en frame, som jeg ikke er så vild med). Min nuværende menu ser sådan ud:

<tr>
<td onmouseover="this.bgColor='#0D8AA6';"onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="108"bgcolor="#13C8F1" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle"><b><font face="Verdana, Arial" style="font-size: 11px"><a style="color: #000000; text-decoration: none" href="nyhedsarkiv.htm">Nyhedsarkiv</a></font></b>
</td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="108" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial" style="font-size: 11px">
<a style="text-decoration: none; color: #000000" href="galleri.htm">Galleri</a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="108" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial">
<a style="text-decoration: none; color: #000000" href="gaestebog.htm">
<span style="text-decoration: none; color: #000000; font-size: 11px">Gæstebog</span></a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="96" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial" style="font-size: 11px">
<a style="text-decoration: none; color: #000000" href="tabs.htm">Tabs</a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="108" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial" style="font-size: 11px">
<a style="text-decoration: none; color: #000000" href="artikler_og_andet.htm">Artikler</a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="113" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial" style="font-size: 11px">
<a style="color: #000000; text-decoration: none" href="hvorfor_nu_dette.htm">Baggrund</a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="102" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial">
<a style="text-decoration: none; color: #000000" href="links.htm"><span style="color: #000000; text-decoration: none; font-size: 11px">Links</span></a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="102" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial" style="font-size: 11px">
<a style="color: #000000; text-decoration: none" href="kontakt.htm">Kontakt</a></font></b></td>
       
<td onmouseover="this.bgColor='#0D8AA6';" onmouseout="this.bgColor='#13C8F1';" style="cursor:hand" height="18" width="102" bgcolor="#13C8F1" style="border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" align="center" valign="middle">
<b><font face="Verdana, Arial">
<a style="color: #000000; text-decoration: none" href="index.html"><span style="color: #000000; text-decoration: none; font-size: 11px">Hjem</span></a></font></b></td>
</tr>
Avatar billede roenving Novice
11. september 2005 - 20:38 #1
Hvad med at gøre det omvendte med menuen: Læg den i en iframe og sæt base target til _top !-)

-- og så kan din nuværende html-kode optimeres ret voldsomt:

<style type="text/css">
#menu{border:1px solid black;border-collapse:collapse;}
#menu td{background:#13c8f1;cursor:pointer;height:18px;width:108px;border:1px solid black;text-align:center;font-weight:bold;font-family:verdana,arial,sans-serif;font-size:11px;}
#menu a,#menu a:link,#menu a:visited,#menu a:hover,#menu a:active{color:#000;text-decoration:none;display:block;}
</style>

<table id="menu">
  <tr>
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="nyhedsarkiv.htm">Nyhedsarkiv</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="galleri.htm">Galleri</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="gaestebog.htm">Gæstebog</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="tabs.htm">Tabs</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="artikler_og_andet.htm">Artikler</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="hvorfor_nu_dette.htm">Baggrund</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="links.htm">Links</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="kontakt.htm">Kontakt</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="index.html">Hjem</a></td>
</tr>
</table>
Avatar billede roenving Novice
11. september 2005 - 20:45 #2
-- og så kan du også nemt få den til at spille fornuftigt, f.eks. ved at sætte

padding:0 5px;width:82px;

-- på cellerne i stedet for de 102/108 !-)
Avatar billede web-girl Nybegynder
11. september 2005 - 20:56 #3
Uha, hvordan laver man en iframe og hvad er forskellen på frame og iframe?
Avatar billede roenving Novice
11. september 2005 - 21:01 #4
Forskellen er at frames kun kan implementeres via frameset-dokumenter, mens iframes 'bare' sættes ind som ethvert andet html-element i dit html-dokument ...

F.eks.

<iframe src="menu.htm" style="height:18px;width:100%;border:0;" frameborder="0"></iframe>

-- og så kan du nøjes med at have eet dokument med menuen !-)
Avatar billede miss-g Seniormester
11. september 2005 - 22:19 #5
Sagt på en anden måde.

Frames er ligesom en opdeling af siden i rammer som f.eks. her:
http://www.echoecho.com/dk/htmlframes.htm

En iframe er ligesom en vindue du kan lave i f.eks. en celle - se eksempler her:
http://www.nicolin.dk/multimedia/dream-iframes.htm

(Og undskyld jeg blandede mig) *G*
Avatar billede web-girl Nybegynder
11. september 2005 - 23:03 #6
Det er en fin forklaring I begge er kommet med, du skal være velkommen til at blande dig ;-)

Skal dokumentet med menuen indeholde alt, lige fra doc type til meta tags?
Avatar billede roenving Novice
11. september 2005 - 23:07 #7
Det skal være et rigtigt html-dokument, dvs. det skal indeholde mindst ca.

<!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">
<style type="text/css">
html,body{margin:0;padding:0;}
#menu{border:1px solid black;border-collapse:collapse;}
#menu td{background:#13c8f1;cursor:pointer;height:18px;padding:0 10px;width:80px;border:1px solid black;text-align:center;font-weight:bold;font-family:verdana,arial,sans-serif;font-size:11px;}
#menu a,#menu a:link,#menu a:visited,#menu a:hover,#menu a:active{color:#000;text-decoration:none;display:block;}
</style>
<title>Menu</title>
</html>
<body>
<table id="menu">
  <tr>
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="nyhedsarkiv.htm">Nyhedsarkiv</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="galleri.htm">Galleri</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="gaestebog.htm">Gæstebog</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="tabs.htm">Tabs</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="artikler_og_andet.htm">Artikler</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="hvorfor_nu_dette.htm">Baggrund</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="links.htm">Links</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="kontakt.htm">Kontakt</a></td>
       
    <td onmouseover="this.style.backgroundColor='#0D8AA6';" onmouseout="this.style.backgroundColor='';"><a href="index.html">Hjem</a></td>
</tr>
</table>
</body>
</html>
Avatar billede roenving Novice
11. september 2005 - 23:09 #8
-- og så glemte jeg:

<base target="_top">

-- som skal sættes i head-sektionen !-)

-- se f.eks. http://blooberry.com/indexdot/html/tagpages/b/base.htm ...
Avatar billede web-girl Nybegynder
12. september 2005 - 15:56 #9
Tak for det, jeg vil se om jeg kan få det til at virke i dag. Det er jo smart at man kun skal opdatere ét sted og jeg har en enkelt ting mere hvor jeg kunne bruge det. Men hvordan med iframes og søgemaskiner? Jeg har forsøgt at finde noget her på eksperten om det, men spørgsmålet er af ældre dato: http://eksperten.dk/spm/263090. Hvordan ser det ud med det i dag?
Avatar billede roenving Novice
12. september 2005 - 16:05 #10
Søgemaskiner har generelt ikke noget imod (i)frames, og idag burde de undersøge de links, der står i et (i)frame-tag på linje med alle andre URLer ...

-- og de fleste problemer plejer at opstå ved at de deeplinker, således at menuen og/eller den omkring-liggende side ikke kommer frem, men det vil jo ikke kunne opstå her, fordi indholds-siderne jo er udenom menu-framen, og hvis der linkes direkte til menuen, vil sammenhængen jo automatisk komme frem, hvis der klikkes !-)
Avatar billede web-girl Nybegynder
12. september 2005 - 16:09 #11
Okay, det var dejligt at høre, så vil jeg helt sikkert bruge det. Men men men: jeg er håbløs til at gennemskue problemer ENDNU, så jeg sidder fast her. Jeg har gjort som du foreslog i www.nephewsupport.dk/menu.htm og som et forsøg inkluderet den i www.nephewsupport.dk/kasper.htm. Suk! Det giver vist sig selv når du ser det ...
Avatar billede roenving Novice
12. september 2005 - 16:21 #12
Prøv at tilføje overflow:hidden;

html,body{margin:0;padding:0;overflow:hidden;}
Avatar billede web-girl Nybegynder
12. september 2005 - 16:46 #13
er nu tilføjet, det hjalp ikke :-( Problemet med det hvide "udenfor" menuen er åbenbart kun i IE6 og Opera 8.01. Ovenikøbet kan hele teksten på ét a menupunkterne heller ikke være der i Opera.... Men det ser fint ud i Firefox 1.0.4 og Netscape 0.9.6

jeg vil også gerne have den centreret, har prøvet med

html,body{margin:0;padding:0;overflow:hidden;align:center;}

det hjalp så heller ikke.

Jeg skal vist snart have 10 doblet points til dig når dette kommer til at virke :-)
Avatar billede roenving Novice
12. september 2005 - 16:56 #14
I din css sætter du:

html,body{margin:0;padding:0;overflow:hidden;background:transparent;}
#menu{border:1px solid black;border-collapse:collapse;width:920px;margin:0 auto;padding:0;}
#menu td{background:#13c8f1;cursor:pointer;height:18px;padding:0 10px;width:80px;border:1px solid black;text-align:center;font-weight:bold;font-family:verdana,arial,sans-serif;font-size:11px;margin:0;}

-- du skal selvfølgelig tilpasse bredden af tabellen, og der kan være nogle flere special-tilpasninger til at få Opera helt med !-)

-- desuden sætter du allowtransparency på iframe-tagget:

<iframe src="menu.htm" style="height:18px;width:100%;border:0;" allowtransparency="allowtransparency" frameborder="0"></iframe>

-- og med hensyn til pointene skal du nu ikke bekymre dig, for det bekymrer ikke mig om jeg får 5 eller 50 point, selvom jeg oftest bliver bekymret, hvis det er voldsomt meget mere for denne slags relativt enkle opgaver !o]
Avatar billede web-girl Nybegynder
12. september 2005 - 18:55 #15
Jeg bliver simpelthen snart #$£akf£#¤ endnu mere gråhåret... suk for f.....

Jeg har gjort som du foreslår ovenfor og det virker også som sådan. Jeg har sat min <iframe> i en div men forsøger at få noget luft under menuen og ned til tabellen med indhold. En margin skulle da være afstanden til nabo elementet? For søren hvor jeg glæder mig til at kunne grund elementerne i html og css!! (Har læst mig frem til den smule jeg kan og startede desværre med Frontpage, bad choise!)

www.nephewsupport.dk/test.htm
www.nephewsupport.dk/menu.htm

typografiark:

body,html { background-color: #0D8AA6; margin: 0; }
a { text-decoration: none; font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; font-weight: bold; }
a:active { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; font-weight: bold; }
a:link { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000 }
a:hover { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000033; font-weight: bold; }
a:visited { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000 }
p { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; padding: 0px; text-align: left; }
.centreret { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; padding: 0px; text-align: center; }
h1 { font-family: verdana, arial, sans-serif; color: #000000; font-size: 10pt; font-weight: bold }
h2 { font-family: verdana, arial, sans-serif; color: #000000; font-size: 12pt; font-weight: bold }
h3 { font-family: verdana, arial, sans-serif; color: #000000; font-size: 14pt; font-weight: bold }
.overskrifttop    { font-family: verdana, arial, sans-serif; font-size: 28pt; color: #FFFFFF; text-align: center; font-weight: bold; }
.overskrifttop2 { font-family: verdana, arial, sans-serif; font-size: 14pt; color: #FFFFFF; text-align: center; font-weight: bold; }
.andonandon { font-family: verdana, arial, sans-serif; color: #000000; font-size: 7pt; font-style: italic }
hr { color: #000000; height: 1px; }
dd { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000 }
dt { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; margin: 0px; }
dl { font-family: verdana, arial, sans-serif; font-size: 8pt; color: #000000; margin: 0px; }
div { font-family: verdana, arial, sans-serif; color: #000000; }
table {border:0; cellpadding:5px; border-collapse: collapse; width:750px; background-color:#0D8AA6; text-align:center;}
Avatar billede web-girl Nybegynder
12. september 2005 - 18:57 #16
Desuden er nederste border væk, men det har måske noget med samme årsag at gøre? Det skulle gerne være som på forsiden www.nephewsupport.dk
Avatar billede roenving Novice
12. september 2005 - 19:01 #17
Den sorte streg ser ud til at mangle, fordi der ikke er plads til at vise den, så giv f.eks. iframen en anelse mere i højden ...

-- og du kan f.eks. sætte en margin-bottom på diven !-)
Avatar billede web-girl Nybegynder
12. september 2005 - 19:06 #18
Nu begynder det skisme at ligne noget! Jeg vil ikke belaste dig mere, tusind tak for hjælpen. Kan godt være at du syntes at det er en af de mindre opgaver.... ;-) Smid et svar.
Avatar billede web-girl Nybegynder
12. september 2005 - 19:15 #19
Hmm den øverste border vises stadig ikke i Firefox. Har lavet iframen 6px. højere end fra starten...
Avatar billede roenving Novice
12. september 2005 - 23:04 #20
-- og i Opera er der også problemer, men det handler vist om iframens størrelse, som du må vurdere, om du vil fastsætte til en bestemt bredde og højde ...

-- omkring den manglende top-border i FF ville jeg prøve at kigge på en top-margin på 1px umiddelbart, men jeg ved ikke hvad der sker ...

-- els velbekomme '-)
Avatar billede web-girl Nybegynder
12. september 2005 - 23:10 #21
Jeg siger endnu en gang tusind tak for hjælpen, jeg har lært en masse og var aldrig kommet videre uden. Jeg vil prøve mig lidt frem med dine sidste par forslag. Vedr. dropdown menu vil jeg oprette et nyt spørgsmål - det vil jeg ikke være bekendt at spørge om i dette spørgsmål. Det må vel også være ret og rimeligt at man kun spørger om 1 ting ad gangen :-)
Avatar billede roenving Novice
12. september 2005 - 23:58 #22
Tjah, det er du selvfølgelig velkommen til, men der har vi så lige skabt komplikationer for os selv, da eventuelle dropdown-ting så skal forekomme i en anden frame, men f.eks. har Thomas Brattli lavet en udgave af den menu, som bruges på dette site, som virker fint i frames: http://www.dhtmlcentral.com/projects/coolmenus/ !-)

-- og tak for point ;~}
Avatar billede web-girl Nybegynder
13. september 2005 - 07:48 #23
Hmmmm, DET var da godt nok en skam da det var meningen fra starten. Nu har jeg så lært hvad <iframe> er - er det meget svært at lave det om til dropdown? Jeg opretter naturligvis et nyt spørgsmål til det...
Avatar billede web-girl Nybegynder
14. september 2005 - 21:33 #24
roenving> Jeg er lige lidt forvirret. Du skriver 11/09-2005 23:07:28 hvad jeg skal inkludere på min menu.htm, som er inkluderet på hver af mine sider nu. Men her http://www.uniteit.dk/spm/12 skriver du: "Husk at html du inkluderer inde i et andet html-dokument kun skal indeholde lige præcis den html-kode, der ellers ville have været der, altså intet af html-dokumentets grundstruktur med head- og body-tags m.m.m. (medmindre du præcis kun har det der !-)" Er det mig der ikke helt har forstået dit budskab (jeg læser det som 2 forskellige svar på den samme ting)?
Avatar billede roenving Novice
14. september 2005 - 22:42 #25
Kommentaren i http://www.uniteit.dk/spm/12 går på hvad man skal gøre, hvis man server-side laver en include, det vi her har haft fat i er så at sige en 'client-side-include', nemlig at der laves et nyt vindue inde i browser-vinduet (iframen !-), og det skal være et fuldt html-dokument !o]

-- når man inkluderer server-side, vil det ramme browseren som et stort html-dokument, hvor der selvfølgelig kun må være eet doctype-tag, een head-sektion og een body-sektion ...
Avatar billede web-girl Nybegynder
15. september 2005 - 09:57 #26
Ahhh, I see said the blind man. Tak for forklaringen :-)
Avatar billede roenving Novice
15. september 2005 - 11:38 #27
U'r welcome ,-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 22:13 Gemme største værdi Af Lemming@privat.dk i Excel
I går 21:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
05/0810:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
White papers
Flere white papers »