Søg
Avatar billede webcreator Nybegynder
27. september 2003 - 18:57 Der er 54 kommentarer og
1 løsning

Layers til menu

Hej.

Jeg har vist brug for lidt hjælp, til at få min menu færdig.

Jeg har flg. kode :

.lokalt {
position: absolute;
left: 160px;
bottom: 160px;
width: 100px;
height: 100px;
background-color: #000080;
z-index: 1;
}

Sjovt nok vælger den at smide layeret næsten i bunden af min skærm. Hvad kan der være galt ?

Jeg udskriver mit layer med :

<div class="lokalt">
o Link1<br>
o Link2<br>
o Link3</div>

Jeg vil også gerne vide, hvordan jeg får dette "udskrevet" hvis jeg har mouseover på et link. Dvs. at det indtil MouseOver skal være usynligt.
Avatar billede webcreator Nybegynder
27. september 2003 - 18:59 #1
Oh, har fundet ud af, at jeg brugte bottom. Men jeg vil stadig gerne have svar på mouse-over'eren :)
Avatar billede webcreator Nybegynder
27. september 2003 - 19:00 #2
- forresten. Hvordan får jeg layeret til at åbne i forhold til fx. en tekst ? Pt. er placeringen afhængig af opløsning
Avatar billede dawin_dk Nybegynder
27. september 2003 - 19:21 #3
du sætter den ind i koden der du gerne vil ha den til at være releativ overfor .. og forjer så positions-angivelserne... (efterlad kun position:absolute) .. så vil den lægge sig der hvor den er sat ind og stadig ligge ind over evt andre ting du smider efter ..
Avatar billede webcreator Nybegynder
27. september 2003 - 19:54 #4
Mit nuværende problem er også, at skidtet ikke placere sig oven på alt det andet. Det rykker fuldstændig på mit site.

Er der ikke en, der kan give et eksempel på ovenstående krav ?
Avatar billede dawin_dk Nybegynder
27. september 2003 - 20:00 #5
har du en url til sitet så man kan se ?
Avatar billede webcreator Nybegynder
27. september 2003 - 20:02 #6
Nope, desværre
Avatar billede dawin_dk Nybegynder
27. september 2003 - 20:50 #7
så er det lidt svært at se hvad den fucker op ..
Avatar billede roenving Novice
28. september 2003 - 08:55 #8
Få den skjult fra start og vist senere:

<div id="lokalDiv" class="lokalt" style="display:none">
...
</div>

<a href="#" onclick="document.getElementById('lokalDiv').style.display='block';">Vis Div</a>

At placere den et bestemt sted i forhold til et andet element:

<body onload="posDiv()">

<script type="text/javascript">
function posDiv(){
  elm = document.getElementById('refElement');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('lokalDiv').style
  divStyle.top = zy + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';
}
</script>
Avatar billede webcreator Nybegynder
28. september 2003 - 10:08 #9
Ah, endelig lidt kode :-)
Mange tak. Kigger på det.
Avatar billede webcreator Nybegynder
28. september 2003 - 10:27 #10
Jeg forstår ikke helt scriptet. Kan det få lidt forklaring ?
Yderligere ligger layeret ikke oven på det andet. Det rykker rundt på min tabelopsætning.

Sidst men ikke mindst, må menuen gerne gå væk, når jeg trykker på linket igen.
Avatar billede roenving Novice
28. september 2003 - 10:33 #11
Du skal bibeholde noget af dit style-sheet:

.lokalt {
position: absolute;
height: 100px;
background-color: #000080;
z-index: 1; /*Denne kan du sætte til et (meget) højere tal*/
}

Og så skal du indsætte et eller andet element, som du kan bruge som reference ...

F.eks. vil det ofte være en bestemt tabelcelle, som div'en skal ligge sammen med, så gør du:

<td id="refElement">
Avatar billede webcreator Nybegynder
28. september 2003 - 10:39 #12
Oh, ok. Tak

Har du mulighed for at hjælpe med problemet med, at den ikke ligger oven på det andet ?
Avatar billede roenving Novice
28. september 2003 - 10:39 #13
<a href="#" onclick="visSkjulDiv()">Vis Div</a>

function visSkjulDiv(){
st = document.getElementById('lokalDiv').style;
if(st.display=='block')st.display='none'
else st.display='block';
}
Avatar billede roenving Novice
28. september 2003 - 10:41 #14
position:absolute;
z-index:10;

skulle gerne lægge det ovenpå, så måske er der andre ting som driller ?-)
Avatar billede webcreator Nybegynder
28. september 2003 - 10:45 #15
Kan ikke helt se, hvad det skulle være ..

Men for lige at opsummere, så ser min kode sådan ud :

<head>
<script type="text/javascript">
function posDiv(){
  elm = document.getElementById('refElement');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('lokalDiv').style
  divStyle.top = zy + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';
}
</script>

<script type="text/javascript">
function visSkjulDiv(){
st = document.getElementById('lokalDiv').style;
if(st.display=='block')st.display='none'
else st.display='block';
}
</script>
</head>

Mit link :
<a href="#" href="#" onclick="visSkjulDiv()">Lokalt</a>

Linket ligger i en td, som har fået ref:
<td class="menutd" id="refElement">

Mit CSS:
.lokalt {
position:absolute;
z-index:10;
left: 160px;
top: 160px;
width: 100px;
height: 100px;
background-color: #000080;
}


Fejl :
Layeret smider sig helt oppe i venstre hjørne af browseren. Den skubber tilmed hele mit site nedad.
Avatar billede webcreator Nybegynder
28. september 2003 - 10:48 #16
Ups, sorry. Det virker fint. Men gider du alligevel lige tjekke, om min opsætning er korrekt ?
Avatar billede roenving Novice
28. september 2003 - 10:50 #17
- og du har givet div'en id'et ?-)

<div id="lokalDiv" class="lokalt" style="display:none">
...
</div>
Avatar billede webcreator Nybegynder
28. september 2003 - 10:50 #18
Ehh, jeg behøver slet ikke id="refElement"
Hvordan kan det være ?
Avatar billede webcreator Nybegynder
28. september 2003 - 10:51 #19
Yep. Mit eneste "problem" nu er, at det placere sig efter websitet hjørne (hvilket jeg godt kan lide. Men hvis det er en fejl, kan jeg ikke leve med det)
Avatar billede roenving Novice
28. september 2003 - 10:51 #20
Jeg kan ikke se nogen fejl, men det er unødvendigt at have to javascript-blokke, og heller ikke nødvendigt at have left og top i stylesheetet ...
Avatar billede roenving Novice
28. september 2003 - 10:54 #21
Den skulle gerne med den kode lægge sig præcis med hjørnet ovenpå cellens hjørne !-)

Hvis din opsætning kan ændre sig (efter browservinduets størrelse kan du udvide body-tagget:
<body onload="posDiv()" onresize="posDiv()">
Avatar billede webcreator Nybegynder
28. september 2003 - 10:56 #22
Nej, self. ikke 2 blokkere :) Tak.

Men hvis jeg ikke sætter left/top på i CSS'et, så placeres mit layer i øverste venstre hjørne af min første tabel.
Avatar billede webcreator Nybegynder
28. september 2003 - 10:56 #23
GRR. My bad..
Fundet problemet. Min editor havde ikke opdateret filen på serveren.
Avatar billede webcreator Nybegynder
28. september 2003 - 10:58 #24
Men det ændre ikke på, at ref'en ikke virker. Jeg skal placere mit div-tag dér, hvor jeg vil have menuen..
Avatar billede roenving Novice
28. september 2003 - 10:58 #25
Jamen så velbekomme '-)
Avatar billede roenving Novice
28. september 2003 - 10:59 #26
Prøv at lægge et link til din test-side !-)
Avatar billede webcreator Nybegynder
28. september 2003 - 11:00 #27
Ok, 2 sec.
Avatar billede webcreator Nybegynder
28. september 2003 - 11:18 #28
Hm, nu driller det igen. øjeblik..
Avatar billede webcreator Nybegynder
28. september 2003 - 11:24 #29
Nåå. Mozilla og IE håndtere tingene vidt forskelligt..
Avatar billede webcreator Nybegynder
28. september 2003 - 11:33 #30
www.powerzone.dk

I IE åbnes menuen lige til højre for "lokalt". I Mozilla åbnes det lige ved "Under Menu"
Avatar billede webcreator Nybegynder
28. september 2003 - 11:33 #31
Løsningen skal self. virke i begge browsere.
(afsætter lige lidt flere points til opgaven..)
Avatar billede roenving Novice
28. september 2003 - 11:42 #32
Hvor vil du have den henne ?-)

I menu-boxen eller som du får den i IE ?o]
Avatar billede roenving Novice
28. september 2003 - 11:47 #33
Eller hvis den skal fungere som en slags fold-ud-ting:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<script type="text/javascript">
function visSkjulDiv(){
st = document.getElementById('lokalDiv').style;
if(st.display=='block')st.display='none'
else st.display='block';
}
function posDiv(){
  elm = document.getElementById('refElement');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('lokalDiv').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';
}
</script>

<title>Anime.DK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://www.powerzone.dk/style/test.css">
</head>

<body onload="posDiv()" onresize="posDiv()">

<table class="maintable" cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
  <td class="logotd">&nbsp;</td>
</tr>
<tr>
    <td class="menutd">
  <a href="index.php">Nyheder</a>
  &nbsp; | &nbsp;
  <a href="#" onclick="visSkjulDiv()" id="refElement">Lokalt</a>
  <div id="lokalDiv" class="lokalt" style="display:none">MENU</div>
  </td>
</tr>
<tr>
  <td class="maintd">
  <table class="splittable" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td class="submenutd">
    <div class="a1">Under Menu</div>
    </td>
    <!-- Menu split -->
    <td class="maintd">
    <div class="a1">Content</div><br>
    <div class="a2">bla bla bla</div>
    </td>
    </tr>
  </table>
 
  </td>
</tr>
</table>

</body>
</html>
Avatar billede webcreator Nybegynder
28. september 2003 - 11:50 #34
Jeg leger lige med den nye kode :)

Menuen skal være lige under "lokalt". Men lige så snart jeg har fundet ud af, at placere den ordentligt, så burde det heller ikke være et problem at flytte den rundt.
Avatar billede webcreator Nybegynder
28. september 2003 - 11:52 #35
Hvad var det lige det nye script gjorde godt for ?
Avatar billede roenving Novice
28. september 2003 - 11:55 #36
posDiv() positionerer div'en, så den er lige under den position som linket lokalt har
Avatar billede webcreator Nybegynder
28. september 2003 - 11:59 #37
Prøv at kigge igen på powerzone.dk. Virker ikke rigtigt..
Avatar billede roenving Novice
28. september 2003 - 12:06 #38
Den kan kun virke, hvis du gør:
<body onload="posDiv()" onresize="posDiv()">
Avatar billede webcreator Nybegynder
28. september 2003 - 12:07 #39
Wee. Nu virker det :)
Mange tak
Avatar billede webcreator Nybegynder
28. september 2003 - 12:09 #40
Har du et bud på, hvordan jeg bedst muligt kan lave underniveauer i layeret ? Er det nemmeste ikke bare, at genbruge al den kode du har lavet, og lave nye layers?
Avatar billede roenving Novice
28. september 2003 - 12:18 #41
Jo, det er det nok:

function visSkjulDiv(d){
st = document.getElementById(d).style;
if(st.display=='block')st.display='none'
else st.display='block';
}

function posDiv(){
  elm = document.getElementById('refElement');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('lokalDiv').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

  elm = document.getElementById('underLink1');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('underMenu1').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

  elm = document.getElementById('underLink2');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  divStyle = document.getElementById('underMenu2').style
  divStyle.top = zy + 21 + 'px';//du kan så lægge lidt til eller trække fra til den præcise position
  divStyle.left = zx + 'px';

}
  <a href="index.php">Nyheder</a>
  &nbsp; | &nbsp;
  <a href="#" onclick="visSkjulDiv('lokalDiv')" id="refElement">Lokalt</a>
  <div id="lokalDiv" class="lokalt" style="display:none">MENU
    <a href="#" onclick="visSkjulDiv('underMenu1')" id="underLink1">Lokalt</a>
    <a href="#" onclick="visSkjulDiv('underMenu2')" id="underLink2">Lokalt</a>

  </div>
Avatar billede webcreator Nybegynder
28. september 2003 - 12:36 #42
Hm, jeg får flg. fejl :

Line : 21
Char: 3
Error: Object required
Code: 0
Avatar billede roenving Novice
28. september 2003 - 12:56 #43
Der skal sæ'fø'li' lige laves et par undermenuer:

<div id="underMenu1">
<a href="http://hans-side.html">Besøg Hans</a>
<a href="http://grete-side.html">Besøg Grete</a>
</div>
<div id="underMenu2">
<a href="http://soeren-side.html">Besøg S&oslash;ren</a>
<a href="http://merete-side.html">Besøg Merete</a>
</div>
Avatar billede webcreator Nybegynder
28. september 2003 - 13:04 #44
Oh yeah, self :)
Tak
Avatar billede webcreator Nybegynder
28. september 2003 - 13:18 #45
Eh, vi er enig om, at menuen skal se sådan ud, ik : (virker ikke)

<td class="menutd">
  <a href="index.php">Nyheder</a>
  &nbsp; | &nbsp;
  <a href="#" onclick="visSkjulDiv()" id="refElement">Lokalt</a>
 
  <div id="lokalDiv" class="lokalt" style="display:none">MENU
  <a href="#" onclick="visSkjulDiv('underMenu1')" id="underLink1">Lokalt</a>
  <a href="#" onclick="visSkjulDiv('underMenu2')" id="underLink2">Lokalt</a>
  </div>
 
  <div id="underMenu1">
  <a href="http://hans-side.html">Besøg Hans</a>
  <a href="http://grete-side.html">Besøg Grete</a>
  </div>

  <div id="underMenu2">
  <a href="http://soeren-side.html">Besøg S&oslash;ren</a>
  <a href="http://merete-side.html">Besøg Merete</a>
  </div>
  </td>
Avatar billede webcreator Nybegynder
28. september 2003 - 13:21 #46
Ups, fejl. Kom til at afvise dit svar. Gider du poste et svar igen ?
Avatar billede roenving Novice
28. september 2003 - 13:21 #47
<a href="#" onclick="visSkjulDiv('lokalDiv')" id="refElement">Lokalt</a>
Avatar billede roenving Novice
28. september 2003 - 13:22 #48
Jamen, gerne '-)
Avatar billede webcreator Nybegynder
28. september 2003 - 13:24 #49
Den viser stadig indholdet af <div id="underMenu´X">'erne. - Helt uden at jeg har klikket på menuen.
Avatar billede roenving Novice
28. september 2003 - 13:40 #50
Jamen de skal jo også lige have denne med ,-)

  <div id="underMenu2" style="display:none;">
Avatar billede webcreator Nybegynder
28. september 2003 - 13:45 #51
Mange tak.
Det ser stadig mærkeligt ud, men jeg har jo heller ingen class på undermenuerne endnu :)

Jeg vender lige tilbage, når jeg har det hele på plads. Tak
Avatar billede webcreator Nybegynder
28. september 2003 - 16:11 #52
Hm. Som udgangspunkt skulle jeg jo faktisk bruge en menu, der "reagerede" på mouseover, og som forsvandt igen hvis musen blev ført uden for linket eller layeret. Er det svært at rette til ?
Avatar billede webcreator Nybegynder
29. september 2003 - 21:05 #53
?
Avatar billede roenving Novice
01. oktober 2003 - 07:03 #54
-- jamen så nåede jeg jo frem til dette spørgsmål igen ...

-- og har lige reageret på dit nye spørgsmål !-)

Men tak for points ;~}
Avatar billede webcreator Nybegynder
01. oktober 2003 - 20:06 #55
Det kalder jeg god service :)
Kigger på det nu.
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
IT-JOB

Zealand Business College

Faglærer til Data/IT på ZBC i Ringsted

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Teknologirådgiver inden for AI-området til Teknologiafdelingen

Capgemini Danmark A/S

AI/Data Engineer

Capgemini Danmark A/S

Strategy & Transformation Consultant

Netcompany A/S

Data Management Consultant
Seneste spørgsmål Seneste aktivitet
1 min siden Libre Office Impress Af Frank i Andre styresystemer
I dag 11:47 VB script Af Jenshentze i Word
I dag 11:21 Popup ved opstart Af mort1 i Windows
04/0918:50 Slet lokal konto Af ErikHg i Windows
04/0916:05 Ændre tal i en celle Af xvid i Excel
White papers
Flere white papers »