Avatar billede chrisrj Forsker
02. januar 2003 - 10:39 Der er 46 kommentarer og
1 løsning

Tilretning af menu

Jeg har en menu, hvor der er et billede ud for de menupunkter, hvor der er underpunkter.

Det billede vil jeg gerne have væk, men hvis jeg fjerner det, kan man ikke klikke på menupunktet.

Jeg er ikke så stærk i CSS, så jeg tænkte at der var en venlig sjæl her, der ville hjælpe mig. :)

Her er mit stylesheet:

.mnbutblank{
    margin-right: 6px;
}
.mndivhdr {
    margin-top: 6px;
    margin-bottom: 4px;
    margin-left: -26px;
    font-size: 12px;
    color: #003366;
    font-family: Verdana;
    font-weight: bold;
    cursor: pointer;
}

.sublinks {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 55px;
    font-size: 9px;
    font-family: Verdana;
    color: #003366;
    width: 145px;
}
.sublinks a:link {
    text-decoration: none;
    color: #003366;
}
.sublinks a:visited {
    text-decoration: none;
    color: #003366;
}

.sublinks a:hover {
    text-decoration: none;
    color: #003366;
}

.sublinksimg {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 44px;
    font-size: 9px;
    font-family: Verdana;
    color: #003366;
    width: 145px;
}
.sublinksimg a:link {
    text-decoration: none;
    color: #003366;
}
.sublinksimg a:visited {
    text-decoration: none;
    color: #003366;
}

.sublinksimg a:hover {
    text-decoration: none;
    color: #003366;
}

.showit {display: block;}
.hideit {display: none;}
.lineit {display: inline;}
img {border: 0px;}
.nn4imgbord {color: white;}
body {  background-color: #FFFFFF;}

.links {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 75px;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana;
    color: #003366;
    width: 142px;
}
.links a:link {
    text-decoration: none;
    color: #003366;
}
.links a:visited {
    text-decoration: none;
    color: #003366;
}
.links a:hover {
    text-decoration: none;
    color: #003366;
}

.linksimg {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 64px;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana;
    color: #003366;
    width: 142px;
}
.linksimg a:link {
    text-decoration: none;
    color: #003366;
}
.linksimg a:visited {
    text-decoration: none;
    color: #003366;
}
.linksimg a:hover {
    text-decoration: none;
    color: #003366;
}

.toplinks {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 49px;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana;
    color: #013D78;
    width: 132px;
}
.toplinks a:link {
    text-decoration: none;
    color: #003366;
}
.toplinks a:visited {
    text-decoration: none;
    color: #003366;
}
.toplinks a:hover {
    text-decoration: none;
    color: #003366;
}

----------------------------------

Her er min kode(asp):

<body onLoad="skiftKlasse(0,'none','showit','hideit','div');skiftKlasse(0,'none','mnbutblank','mnplus','img');skiftKlasse(0,'none','expblank','expandit','img');skiftKlasse(0,'none','expblank2','expandit2','img'); showHideLayers('HideOnloadDiv','','hide');">
        <div id="HideOnloadDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#ffffff; visibility:visible; z-index:2"></div>
        <div id="Layer1" style="position:absolute; left:25px; top:25px; width:160px; z-index:1">
            <p class="oclinks">
                <a href="java script:;" onClick="skiftKlasse(0,'none','hideit','showit','div');skiftKlasse(0,'none','mnplus','mnminus','img')">
                    <br>
                    <strong>&Aring;ben</strong></a> | <a href="java script:;" onClick="skiftKlasse(0,'none','showit','hideit','div');skiftKlasse(0,'none','mnminus','mnplus','img')">
                    <strong>Luk</strong></a>
            </p>
            <br>
            <br>
            <!-- #include file="databaseconn.asp" -->
            <%
                tal = 1
                under = 0
                SQL = "SELECT * FROM menu"
                Set rs = Conn.Execute(SQL)
               
                do while not rs.eof
                    response.Write "<p class=""mndivhdr"" onClick=""skiftKlasse(1,'mn" & tal & "','showit','hideit','div');skiftKlasse(1,'but" & tal & "','mnminus','mnplus','img')"">" & vbCrLf
               
               
                    SQL = "SELECT * FROM undermenu where menuid='" & rs("id") & "'"
                    Set res = Conn.Execute(SQL)
                    under = 0
                    if not res.eof then
                        under = 1
                        response.Write "<IMG class=billede alt='Åben undermenu' src='grafik/pil.gif'><div class=toplinks> " & rs("navn") & "</div>" & vbCrLf
                    else
                        insert_link "links",rs("link"), rs("navn")
                    end if
                    if not res.eof then
                        under = 1
                        response.Write "<div id=""mn" & tal & """ class=""hideit"">" & vbCrLf
                        do while not res.eof
                            insert_link "sublinks",res("link"), res("navn")
                            res.movenext
                        loop
                    end if

                    if under = 1 then
                        response.Write "</div>" & vbCrLf
                    end if
                    rs.movenext
                    tal = tal + 1
                loop
               
            %>
        </div>
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 10:48 #1
Avatar billede chrisrj Forsker
02. januar 2003 - 11:00 #2
Tak! Det virker! :)

Men nu står det bare helt af ht.

menupunkterne skal rykkes meget længere ind. Hvor gør jeg det?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 11:01 #3
Kig i css'en i mit eks.

Det er padding-left i sublinks der skal ændres.
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 11:02 #4
Sorry - margin-left :)

.sublinks {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
Avatar billede chrisrj Forsker
02. januar 2003 - 11:08 #5
Nix, det er ikke sublinks.

Det er ikke undermenupunkterne, der står forkert. Det er de menupunkter, hvor billedet var ved.

Hvis du kigger på mit stylesheet, kan du måske se at min side har en meget større margin end din. :)
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 11:14 #6
Well, hvis jeg var dig ville jeg sammenligne med mit sheet - det er trods alt herfra at du har fundet menuen i første omgang.

Jeg kan se på dit sheet at der er tilføjet nogle styles ift. til originale, og det gider jeg ikke sætte mig ind i.
Avatar billede chrisrj Forsker
02. januar 2003 - 11:33 #7
hmmm.

Jeg kan ikke appelere til din venlig sjæl?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 11:37 #8
Jo hvis du uploader et eks så jeg slipper for at glo på asp :)
Avatar billede chrisrj Forsker
02. januar 2003 - 11:38 #9
Jamen, det er da ikke noget problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <!--  -->
        <link rel="stylesheet" href="css/tmenu.css" type="text/css">
            <script type="text/javascript">
<!--

function InsertLink(css_class,link,name){
    var HostAddr = 'http://localhost/miljoselskab/www/';
    if (document.location.href == (HostAddr+link) )
        document.write('<img src="grafik/pil.gif">');
    document.write('<a class='+css_class+' href="'+link+'">'+name+'</a>');       
}



function findObj(theObj, theDoc) {
  var p, i, foundObj; 
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);}
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++)
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
  return foundObj;
}

function showHideLayers() {
  var i, visStr, obj, args = showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) {
    if ((obj = findObj(args[i])) != null) {
      visStr = args[i+2];
      if (obj.style) {
        obj = obj.style;
        if(visStr == 'show') visStr = 'visible';
        else if(visStr == 'hide') visStr = 'hidden';}
      obj.visibility = visStr;}
  }
}


function skiftKlasse(){
var i,x,tB,j=0,tA=new Array(),arg=skiftKlasse.arguments;
if(document.getElementsByTagName){for(i=4;i<arg.length;i++){tB=document.getElementsByTagName(arg[i]);
  for(x=0;x<tB.length;x++){tA[j]=tB[x];j++;}}for(i=0;i<tA.length;i++){
  if(tA[i].className){if(tA[i].id==arg[1]){if(arg[0]==1){
  tA[i].className=(tA[i].className==arg[3])?arg[2]:arg[3];}else{tA[i].className=arg[2];}
  }else if(arg[0]==1 && arg[1]=='none'){if(tA[i].className==arg[2] || tA[i].className==arg[3]){
  tA[i].className=(tA[i].className==arg[3])?arg[2]:arg[3];}
  }else if(tA[i].className==arg[2]){tA[i].className=arg[3];}}}}
}

//-->
            </script>

   
           
    </head>
    <body onLoad="skiftKlasse(0,'none','showit','hideit','div');skiftKlasse(0,'none','mnbutblank','mnplus','img');skiftKlasse(0,'none','expblank','expandit','img');skiftKlasse(0,'none','expblank2','expandit2','img'); showHideLayers('HideOnloadDiv','','hide');">
        <div id="HideOnloadDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; background-color:#ffffff; visibility:visible; z-index:2"></div>
        <div id="Layer1" style="position:absolute; left:25px; top:25px; width:160px; z-index:1">
            <p class="oclinks">
                <a href="java script:;" onClick="skiftKlasse(0,'none','hideit','showit','div');skiftKlasse(0,'none','mnplus','mnminus','img')">
                    <br>
                    <strong>&Aring;ben</strong></a> | <a href="java script:;" onClick="skiftKlasse(0,'none','showit','hideit','div');skiftKlasse(0,'none','mnminus','mnplus','img')">
                    <strong>Luk</strong></a>
            </p>
            <br>
            <br>
            <p class="mndivhdr" onClick="skiftKlasse(1,'mn1','showit','hideit','div');skiftKlasse(1,'but1','mnminus','mnplus','img')">
<a href="index.asp?page=formaal.asp" class="links">Formål</a>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn2','showit','hideit','div');skiftKlasse(1,'but2','mnminus','mnplus','img')">
Medlemskab
<div id="mn2" class="hideit">
<a href="index.asp?page=medlemskreds.asp" class="sublinks">Medlemskreds</a>
<a href="index.asp?page=indmeldelse.asp" class="sublinks">Indmeldelse</a>
</div>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn3','showit','hideit','div');skiftKlasse(1,'but3','mnminus','mnplus','img')">
<a href="index.asp?page=aktiviteter.asp" class="links">Aktiviteter</a>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn4','showit','hideit','div');skiftKlasse(1,'but4','mnminus','mnplus','img')">
Selskabet
<div id="mn4" class="hideit">
<a href="index.asp?page=okonomi.asp" class="sublinks">Økonomi</a>
<a href="index.asp?page=aarsregnskab.asp" class="sublinks">Årsregnskab</a>
<a href="index.asp?page=sekretariat.asp" class="sublinks">Sekretariat funktion</a>
<a href="index.asp?page=statements.asp" class="sublinks">Statements fra bestyrelsen</a>
<a href="index.asp?page=bestyrelsen.asp" class="sublinks">Bestyrelsen</a>
</div>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn5','showit','hideit','div');skiftKlasse(1,'but5','mnminus','mnplus','img')">
Domme og kendelser
<div id="mn5" class="hideit">
<a href="index.asp?page=domme.asp&art=dk" class="sublinks">Danske domme og kendelser</a>
<a href="index.asp?page=domme.asp&art=ef" class="sublinks">Udvalgte EF-domme</a>
</div>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn6','showit','hideit','div');skiftKlasse(1,'but6','mnminus','mnplus','img')">
<a href="index.asp?page=links.asp" class="links">Linksamling</a>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn7','showit','hideit','div');skiftKlasse(1,'but7','mnminus','mnplus','img')">
<a href="index.asp?page=nyhedsbrev.asp" class="links">Tilmedling til nyhedsbrev</a>
<p class="mndivhdr" onClick="skiftKlasse(1,'mn8','showit','hideit','div');skiftKlasse(1,'but8','mnminus','mnplus','img')">
<a href="index.asp?page=forum/index.asp" class="links">Forum</a>

        </div>


                                    <!-----menu SLUTTER------------>
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 11:52 #10
http://www.peterelkjaer.dk/exp/skiftklasse1.html - du må sige til hvis det ikke var sådan du havde tænkt det skulle se ud.
Avatar billede chrisrj Forsker
02. januar 2003 - 12:08 #11
det er lige precist sådan. :)

Men min menu står bare meget længere inde på siden.

Du kan se det her: http://80.160.119.108/miljoselskab/www/index.asp?page=forside.asp

log ind med exp og exp
Avatar billede chrisrj Forsker
02. januar 2003 - 12:10 #12
Den er ret langsom, så hav tolmodighed...
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 12:18 #13
Jamen jamen :)

1: Du lukker ikke dine p tags (som jeg ellers havde gjort for dig i seneste eks).

2: Dine menuer uden submenuer skal også angives med <p class="mndivhdr" ...</p>

3: Du kan ikke have flere classes på et element. Fjern derfor alle class="links" fra hovedmenuer  - dem alle :)

4: Hvis du kigger i min css i senste eks, vil du se at jeg har lavet en links definition af mndivhdr med .mndivhdr a {} - det skal du bruge.
Avatar billede chrisrj Forsker
02. januar 2003 - 12:19 #14
jeg kigger lige...
Avatar billede chrisrj Forsker
02. januar 2003 - 12:27 #15
Så istedet for:

<div id="mn4" class="hideit">
<a href="index.asp?page=okonomi.asp" class="sublinks">Økonomi</a>

skal jeg skrive:

<p class="mndivhdr" onClick="skiftKlasse(1,'mn4','showit','hideit','div');skiftKlasse(1,'but4','mnminus','mnplus','img')">
<a href="index.asp?page=okonomi.asp"Økonomi</a></P>

eller hva'?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 12:32 #16
Nej.

Hvis det bare er et link uden submenu skriver du:

<p class="mndivhdr"<a href="index.asp?page=formaal.asp">Formål</a></p>

Således at class="links" aldrig indgår.
Avatar billede chrisrj Forsker
02. januar 2003 - 12:34 #17
ok. jeg prøver...
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 12:35 #18
Hov

<p class="mndivhdr"><a href="index.asp?page=formaal.asp">Formål</a></p> :)
Avatar billede chrisrj Forsker
02. januar 2003 - 12:46 #19
Prøv at se nu....

Det ser ikke godt ud, vel?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 12:51 #20
Du misforstår mig også.

Du skal ikke give undermenuerne <p class="mndivhdr"></p> - de skal være helt som før med class="sublinks".

Det jeg mener er, at de *hoved* menupunkter hvori der ikke er submenuer, men blot et link, der skal du bruge

<p class="mndivhdr"><a href="index.asp?page=formaal.asp">Formål</a></p>
Avatar billede chrisrj Forsker
02. januar 2003 - 13:02 #21
Ok, men det bliver det ikke pænere af. Nu står undermenuerne med kæmpe store bogstaver og er sorte.
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:09 #22
Nej, men det ville sikkert hjælpe hvis du læste hvad jeg skriver :o)

Seneste kommentar:
<quote>
Du skal ikke give undermenuerne <p class="mndivhdr"></p> - de skal være helt som før med class="sublinks".
</quote>

Sublinks skal se sådan ud:

<div id="mn2" class="hideit">
<p class="sublinks"><a href="#">Her er et link</a></p>
</div>
Avatar billede chrisrj Forsker
02. januar 2003 - 13:15 #23
Stort!!

Så manger der bare en lille detajle...

Som du måske har lagt mærke til, er der en lille pil ud for det menupunkt man har trykket på.

Til det, har jeg dette lille script:

sub insert_link(link, name)
dim aQueryParams
dim aUrl

aUrl = Request.ServerVariables("url") ' get the url (index.asp)
aQueryParams = Request.QueryString ' get the querystring (page=*.asp)

Response.Write "<a href=""" & link
if ( (aUrl & "?" & aQueryParams) = ("/miljoselskab/www/" & link)) then
    Response.Write """><img src=""grafik/pil.gif""> "
else
    Response.Write """>"
end if
Response.Write name & "</a>"
end sub

Det virker fint. Men, men, det er meningen at pilen skal stå ud for menupunktet UDEN at rykke det ind.

Hvordan klarer man det?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:23 #24
Well, lægger menuen i et frameset :)

Man kan dog også lave det i asp, med noget ala

<%If Request.QueryString("page") = medlemsskab.asp Then Response.Write("") Else Response.Write("")

osv.
Avatar billede chrisrj Forsker
02. januar 2003 - 13:25 #25
Det virkede da fint, før de her ændringer.

Og hvad skulle tomme Response.Write'er gøre?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:28 #26
Well, hvis din QueryString er medlemsskab.asp kunne du i Response.Write("") angive menuen med netop det punkt åbent - men hvis du siger det virkede fint før, så ved jeg ikke hvad du mener.
Avatar billede chrisrj Forsker
02. januar 2003 - 13:31 #27
:)

Før dette spg.

"hvis din QueryString er medlemsskab.asp kunne du i Response.Write("") angive menuen "
ville det ikke give enormt meget redundant kode?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:34 #28
Jo det ville det i høj grad :)

Jeg som jeg forstår dig, så vil du nu have menuen åben med pil ud for den side der er valgt ved load.

Og det kan du jo ikke udmiddelbart, da du på hver side kører en onload der angiver menuen. Så er det jo klart at den lukker sammen igen.

Du har 2 løsninger der er ligetil:

1: kør menuen i en frame for sig.
2: Noget serverside.
Avatar billede chrisrj Forsker
02. januar 2003 - 13:38 #29
Ja, frames bliver det ikke, så serverside er fint for mig.

Menuen behøver ikke nødvendigvis at være åbnet når siden loades, bare pilen er ud for punktet UDEN at rykke det ind. :)
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:46 #30
Jamen så kan jeg ikke se hvad problemet er?
Det er jo klart at pilen er på linje med resten (dvs. rykker punktet efter lidt ind) da pilen ligger inde i classen sublinks:

<p class="sublinks"><a href="index.asp?page=domme.asp&art=ef"><img src="grafik/pil.gif"> Udvalgte EF-domme</a></p>

Du kan gøre sådan istedet:

<img src="grafik/pil.gif"><p class="sublinks"><a href="index.asp?page=domme.asp&art=ef">Udvalgte EF-domme</a></p>

-det vil jeg tro lægger pilen så den flugter med hovedpunkterne.
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:49 #31
Men det vil ikke hjælpe dig alligevel. Din pil er 7x7 px, og din margin-left på sublinks er kun 5px så vidt jeg husker.

jeg lægger et svar.
Avatar billede chrisrj Forsker
02. januar 2003 - 13:51 #32
Den er på 55. Så det er vel ikke noget problem?
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 13:55 #33
Prøv dog :)
Avatar billede chrisrj Forsker
02. januar 2003 - 13:57 #34
Det har jeg netop gjort. Den svæver 1 linie højere oppe og ca 2 cm ude til siden.
Avatar billede chrisrj Forsker
02. januar 2003 - 14:01 #35
Så! Nu sidder den nok så godt som den kan.

Med mindre man kan tjekke på hvilken type menupunkt det er.
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 14:03 #36
Du kan jo også bare rykke undermenuerne lidt ind, så er der jo bedre plads.
Avatar billede chrisrj Forsker
02. januar 2003 - 14:05 #37
Det er ikke det der er problemet, det er højden. Undermenupunkterne er jo mindre end de andre og derfor er pilen ikke centreret begge steder.
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 14:10 #38
prøv

align="absmiddle" på billedet
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 14:11 #39
Ellers må du jo bare angive hvor og hvornår i asp'en :)
Avatar billede chrisrj Forsker
02. januar 2003 - 14:19 #40
Ja, nu må vi se hvad kunden siger.

Tak for hjælpen!!!
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 14:25 #41
Kunden?? Så skulle du måske lige teste siden i NS/Mozilla som minumum :)
Avatar billede chrisrj Forsker
02. januar 2003 - 15:16 #42
Jeg ved den ser ud af ht på mac IE 5.22... :(
Avatar billede pelkjaer Nybegynder
02. januar 2003 - 15:41 #43
Er menuen sat korrekt op, virker det også på IE/Mac.
http://www.brovang.dk/ blev testet i en Mac - og det er samme menu.
Avatar billede chrisrj Forsker
02. januar 2003 - 15:45 #44
Ok, men jeg mente HELE siden. Den skulle se ud af ht. :)
Avatar billede chrisrj Forsker
02. januar 2003 - 15:48 #45
Den side er vist ikke helt gennemtjekket.

Der er et stort stykke med bart for neden...Har du lavet den? :)
Avatar billede chrisrj Forsker
02. januar 2003 - 15:58 #46
Ved du forøvrigt hvordan man laver en printfunktion, der kun udskriver noget af siden?

Jeg har hørt/læst lidt om at man kan lave en "<div>" et-eller-andet. Er det rigtigt?
Avatar billede chrisrj Forsker
03. januar 2003 - 11:19 #47
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