CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

1005 Nybegynder

27. februar 2004 - 11:34 Der er 19 kommentarer og
1 løsning

drop down menu hvordan tilføjes en sådan

jeg har her, fra en css pagedesign tutorial, en menu hvortil jeg gerne vil kunne lave en dropdown menu til et af linkene, kan det gøres i noget cssdesign, eller hvilke muligheder er der ?

vh 1005

<div id="navBar">
<div id="sectionLinks">
<ul>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
</ul>
</div>
</div>

Synes godt om

1005 Nybegynder

27. februar 2004 - 13:50 #1

det var mere en flyout jeg søgte, tror jeg det hedder

Synes godt om

bojohansen Nybegynder

27. februar 2004 - 14:51 #2

Du kan evt. bruge DW's indbygget "Pop Up Menu", det er ihvertfald let men er baseret på java script.

Marker dit link, i behaviors vinduet klikker du på + og vælger "Show Pop Up Menu"

En mulighed ihvertfald.

Ps. Er hvis kun med fra MX versionen og frem, ikke tidligere............mener jeg!

Synes godt om

1005 Nybegynder

28. februar 2004 - 10:24 #3

tak for dit svar - jeg har kigget på det, men.. jeg har en trial af den nye dmx2004, her i er der en pagecss med nedenstående div/menu...

når jeg forsøger at indsætte den behavior får jeg forskellige fejlmeddelelser - hvis jeg laver behavioren i et nyt selvstændigt fil og past/copy kan den god blive synlig, men placerer sig helt forskudt og jeg kan ikke komme til behavioret for at rette placeringen - hvad kan jeg gøre? det er et javascript der skal benyttes? jeg ønsker bare at der ved et af nedenstående links kommer en menu til syne med undermenuer.

<div id="sectionLinks">
<ul>
<li><a href="#">sectionLink</a></li>
<li><a href="#">undermenuer_ønskes_her</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
</ul>
</div>

vh 1005

Synes godt om

bojohansen Nybegynder

28. februar 2004 - 11:02 #4

http://www.bojohansen.dk/eksperten/470557/

Gør du sådant?

Synes godt om

1005 Nybegynder

28. februar 2004 - 11:19 #5

ja det vil jeg mene

Synes godt om

bojohansen Nybegynder

28. februar 2004 - 11:25 #6

Prøv lige at poste hele din kode her, for jeg har aldrig haft problemer med at lave en pop up menu i DW eller FW

Synes godt om

bojohansen Nybegynder

28. februar 2004 - 11:25 #7

Og som du ser på den side jeg har lavet, er der ingen problemer

Synes godt om

1005 Nybegynder

28. februar 2004 - 11:27 #8

jeg får en fejlmelding der lyder:
At line 247 of file:"....
TypeError:theHead.innerHTML has no properties

Synes godt om

1005 Nybegynder

28. februar 2004 - 11:30 #9

nedenstående er den skalbelon jeg gerne vil benytte, det er en pagetemplateCSS fra min trial DMX2004 - og ved et af linkene under secionlink skal der være denne undermenu??

<!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">
<title>Untitled Document</title>
<link rel="stylesheet" href="2col_leftNav.css" type="text/css">
</head>

<body>
<div id="masthead">
<h1 id="siteName">Site Name</h1>
<div id="globalNav">
<a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global
link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global
link</a> | <a href="#">global link</a>
</div>
</div>

<div id="content">
<div id="breadCrumb">
<a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> /
</div>
<h2 id="pageName">Page Name</h2>
<div class="feature">
<img src="" alt="" width="280" height="200">
<h3>Feature Title </h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
<div class="story">
<h3>Story Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis
nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.
Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.
Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a
mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.
Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</p>
</div>
</div>

<div id="navBar">
<div id="search">
<form action="#">
<label>search</label>
<input name="searchFor" type="text" size="10">
<input name="goButton" type="submit" value="go">
</form>
</div>
<div id="sectionLinks">
<ul>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
<li><a href="#">sectionLink</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div id="advert">
<img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad
copy ad copy.
</div>
<div id="headlines">
<h3>Headlines</h3>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
<p>
Headline <a href="#">full story...</a>
</p>
</div>
</div>

<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003
Company Name
</div>
<br>
</body>
</html>

Synes godt om

1005 Nybegynder

28. februar 2004 - 11:31 #10

her er lige css'en

/***********************************************/
/* 2col_leftNav.css */
/* Use with template 2col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}

h2{
font-size: 114%;
color: #006699;
}

h3{
font-size: 100%;
color: #334d55;
}

h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}

h5{
font-size: 100%;
color: #334d55;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

#content{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}

/***********************************************/
/*Component Divs */
/***********************************************/

#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}

/*************** #pageName styles **************/

#pageName{
padding: 0px 0px 10px 10px;
}

/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
this will force a horizontal scrollbar if there isn't enough room for all links
remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 5px 0px 5px 10px;
}

/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */

/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}

#sectionLinks a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

/************** #advert styles **************/

#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

Synes godt om

bojohansen Nybegynder

28. februar 2004 - 11:53 #11

Hmmmmmm me to.

Hvilket OS bruger du?
Skriver en bug report til MM

Synes godt om

1005 Nybegynder

28. februar 2004 - 12:12 #12

98se

Synes godt om

bojohansen Nybegynder

28. februar 2004 - 12:17 #13

Når jeg tænker mig om har jeg fået den fejl meddellelse før, men da POP UP fra Fireworks istedet for.
Bug report er sendt til Macromedia.
Læg selv et svar og godkend dig selv, skal nok skrive her hvis der kommer en løsning.

Synes godt om

1005 Nybegynder

29. februar 2004 - 08:23 #14

nej nej du får for din hjælpsomhed
vh1005

Synes godt om

bojohansen Nybegynder

29. februar 2004 - 11:45 #15

Det var nu lidt meget med 45 for ingenting, men tak for det.

Synes godt om

bojohansen Nybegynder

01. marts 2004 - 21:17 #16

Svar fra MM på Bug Report :

Hi Bo,

This bug has been fixed in the dot-release which will be coming out very
soon.

In the meantime, you can work around the problem. The bug is that because
you have a comment between the <html> tag and the <head> tag, Dreamweaver
gets confused. The workaround is to remove that comment (or move it to some
other location). (It looks like that comment was actually added as part of
the original page design that gets auto-created by Dreamweaver. I'm pretty
sure there is no harm in removing it.)

Thank you for reporting the problem. I would post a follow-up message to
the forum to which you gave us a link; however, since I don't speak Danish,
I'm not sure how to find the appropriate thread. You are welcome to post
this information to that forum if you wish.

Mike Morearty
Dreamweaver development

Synes godt om

1005 Nybegynder

02. marts 2004 - 08:43 #17

thanks - det virker nu, dvs. en enklet ting jeg ikke helt kan få rettet til.. angående popupmenuens placering i forhold til linket - sætter jeg linkene ind i to af selectionlinkene - i den ovenstående csstemplate - viser de sig meget forskudt - den sidste især langt fra mit link - hvorfor? og hvordan/hvor kan det rettes?
vh 1005

Synes godt om

bojohansen Nybegynder

02. marts 2004 - 18:32 #18

I Popup menu dialogboxen, fanebladet Position kan du ændre position for popuppen

Synes godt om

1005 Nybegynder

02. marts 2004 - 22:11 #19

det har jeg prøvet

Synes godt om

bojohansen Nybegynder

04. marts 2004 - 20:42 #20

Jeg ved det ikke, men der er meget stor sandsynlighed for at problemet ligger i at sidens inhold og diverse placeringer af elementer og tekst er defineret i css.
Dette kan evt. konflikte med den placering som javascriptet i pop up menuen definere.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Programmeringsværktøjer kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
senior Af Uroda i Programmeringsværktøjer	1	22/06/202418:29	23/06/202413:17
Sort Skærm Af Kaj Sondrup i Programmeringsværktøjer	5	25/02/202421:45	27/02/202420:17
DATA (D) Af rene1111 i Programmeringsværktøjer	3	21/02/202415:03	22/02/202409:08
Power Automate, åben en fil der er delt med mig Af KATM i Programmeringsværktøjer	1	16/02/202409:07	19/02/202409:10
Prisberegner til hjemmeside Af Michael Vahl i Programmeringsværktøjer	4	14/01/202417:30	21/01/202409:21

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS