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

jnrmgs Juniormester

06. februar 2017 - 11:37 Der er 6 kommentarer

Menu forsvinder bag script

Hej!

Jeg har en side med en menu, hvor man bl.a. kan se billeder. Problemer er at undermenuerne forsvinder bag billederne. Billedgallerierne er lavet ved hjælp af programmet Juicebox.

Hvordan får man menuen til altid at lægge øverst?

Kode for billedgalleriet:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="description" content="" />


<meta property="og:title" content="Juicebox Gallery" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />


<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h2 class="h2center">Juni 2015</h2></td>
</tr>
<tr>
<td align="center">

<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '70%',
galleryHeight: '93%',
backgroundColor: 'FFFFFF'
});
</script>
<div id="juicebox-container"></div>

</td>
</tr>
</table>
</body>
</html>

Kode for menuen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="/banesiden/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="/banesiden/Css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="/banesiden/Css/menu.css" rel="stylesheet" type="text/css">
<script src="/banesiden/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
#apDiv2 {
position:absolute;
width:206px;
height:200px;
z-index:1;
overflow: auto;
border: 1px solid #7D0000;
top: 30%;
}
</style>
</head>

<body>
<div id="menu">
<table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="82" valign="top"><a href="/banesiden/index.php"><img src="/banesiden/Gif/banesiden_lille.gif" width="220" height="66" border="0" /></a></td>
</tr>
<tr>
<td valign="top">
<div id="cssmenu">
<ul>
<li class="has-sub"><a href="#">Billeder</a>
<ul>
<li class="has-sub"><a href="#">2012</a>
<ul>
<li><a href="/banesiden/Billeder/12-2012/12-2012.php">December 2012</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">2013</a>
<ul>
<li><a href="/banesiden/Billeder/2013-03-04/2013-03-04.php">Marts-April 2013</a></li>
<li><a href="/banesiden/Billeder/2013-04-1/2013-04-1.php">April 2013 – 1</a></li>
<li><a href="/banesiden/Billeder/2013-04-2/2013-04-2.php">April 2013 – 2</a></li>
<li><a href="/banesiden/Billeder/2013-05/2013-05.php">Maj 2013</a></li>
<li><a href="/banesiden/Billeder/2013-07-1/2013-07-1.php">Juli 2013 – 1</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">2014</a>
<ul>
<li><a href="/banesiden/Billeder/2014-07-1/2014-07-1.php">Juli 2014 – 1</a></li>
<li><a href="/banesiden/Billeder/2014-07-2/2014-07-2.php">Juli 2014 – 2</a></li>
<li><a href="/banesiden/Billeder/2014-08-1/2014-08-1.php">August 2014 – 1</a></li>
<li><a href="/banesiden/Billeder/2014-08-2/2014-08-2.php">August 2014 – 2</a></li>
<li><a href="/banesiden/Billeder/2014-09-1/2014-09-1.php">September 2014 – 1</a></li>
<li><a href="/banesiden/Billeder/2014-09-2/2014-09-2.php">September 2014 – 2</a></li>
<li><a href="/banesiden/Billeder/2014-09-3/2014-09-3.php">September 2014 – 3</a></li>
<li><a href="/banesiden/Billeder/2014-12-1/2014-12-1.php">December 2014</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">2015</a>
<ul>
<li><a href="/banesiden/Billeder/2015-01-1/2015-01-1.php">Januar 2015</a></li>
<li><a href="#">April 2015 – 1</a></li>
<li><a href="/banesiden/Billeder/2015-04-1/2015-04-1.php">April 2015 – 1</a></li>
<li><a href="/banesiden/Billeder/2015-04-2/2015-04-2.php">April 2015 – 2</a></li>
<li><a href="/banesiden/Billeder/2015-04-3/2015-04-3.php">April 2015 – 3</a></li>
<li><a href="/banesiden/Billeder/2015-04-4/2015-04-4.php">April 2015 – 4</a></li>
<li><a href="/banesiden/Billeder/2015-05-1/2015-05-1.php">Maj 2015</a></li>
<li><a href="/banesiden/Billeder/2015-06-1/2015-06-1.php">Juni 2015</a></li>
<li><a href="/banesiden/Billeder/2015-07-1/2015-07-1.php">Juli 2015 – 1</a></li>
</ul>
</li>
<li><a href="#">2016</a></li>
</ul>
</li>
<li><a href="/banesiden/Nyheder/nyheder.php">Nyheder</a></li>
<li><a href="/banesiden/Forkortelser/station.php">Forkortelser</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td valign="middle"><table width="220" cellpadding="2" cellspacing="2" bgcolor="#7D0000"">
<tr>
<td align="center"><strong><font color="#FFFFFF" class="ellevept">Opdateringer</font></strong></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><div class="scroll">
</td>
</tr>
<tr>
<td valign="bottom"><table width="220" cellpadding="2" cellspacing="2" bgcolor="#7D0000" class="nyhedsbrev">
<tr>
<td align="center" class="ellevept"><strong><font color="#FFFFFF">Modtag nyhedsbrev</font></strong></td>
</tr>
<tr>
<td height="50%" align="center" bgcolor="#FFFFFF"><form target="_blank" style="display:inline;" method="post" action="http://www.yourmailinglistprovider.com/subscribe.php?JohnsJernbaneside">
<table border="0">
<tr>
<td align="center"><b class="ellevept"> Fulde navn:</b><font size="1"><b><br />
<input type="text" name="YMP[0]" size="18" maxlength="50" class="border" />
<br />
<br />
</b></font></td>
</tr>
<tr>
<td align="center"><span class="ellevept"><b>E-mail:</b></span><b><br />
<input type="text" name="YMP[1]" size="18" maxlength="50" class="border" />
<br />
</b></td>
</tr>
<tr>
<td align="center"><font size="2"><b>
<input name="submit" type="submit" class="send" value="Send" />
</b></font></td>
</tr>
<tr>
<td height="20" align="center"><a href="http://www.yourmailinglistprovider.com/unsubscribe.php?JohnsJernbaneside" target="_blank" class="ellevept">Afmeld dig her</a></td>
</tr>
<tr>
<td height="20" align="center"><a href="http://www.yourmailinglistprovider.com/" target="_blank" class="ellevept">En Service fra YMLP</a></td>
</tr>
</table>
</form></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>

Synes godt om

bpb Seniormester

06. februar 2017 - 21:26 #1

Det mest påfaldende ved din menu er brugen af z-index: 1.
Måske skal værdien være højere. Faktisk siges det, at Juicebox bruger forholdsvis høje værdier af z-index.

Måske kan detteher give lidt inspiration:
https://www.drupal.org/node/2221831

Synes godt om

jnrmgs Juniormester

06. februar 2017 - 21:38 #2

Har ikke meget forstand på det, og ved ikke rigtig hvor jeg skal sættes z-index ind:

Her er min CSS-kode for menuen:

@charset "UTF-8";
/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 220px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #d9d9d9;
padding: 8px 12px;
/* Typography */
font-family: Arial;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: Bold;
/* Background & effects */
background: #7d0000;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
color: #ffffff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
background: #7d0000;
background: -webkit-linear-gradient(#7d0000, #4a0000);
background: -moz-linear-gradient(#7d0000, #4a0000);
background: linear-gradient(#7d0000, #4a0000);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
content: "";
position: absolute;
top: 12px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #ffffff;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
content: "";
position: absolute;
top: 12px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #fff;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
width: 155px;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
font-size: 14px;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: 0px;
opacity: 1;
}

Synes godt om

bpb Seniormester

06. februar 2017 - 23:18 #3

Din CSS-kode tyder på, at du har mere CSS-erfaring end jeg har. (Bruger selv JavaScript + DOM.) Men
z-index: 10000;
(eller hvilken værdi du nu vælger) kan passende tilføjes i CSS for containeren, hvert liste-element, og muligvis pilene.

Det vil stort set være de steder, hvor du i forvejen bruger
display: block;
og/eller angiver position eller størrelse (left, top, width, height, etc.). En seks-syv steder alt i alt.

Den bedste måde at få lidt erfaring på er nok at prøve sig frem. Det kan godt være tidskrævende.

Synes godt om

jnrmgs Juniormester

07. februar 2017 - 17:27 #4

Jeg har ikke selv lavet CSS-koden til menuen. Den er lavet med CSS Menu Maker: http://cssmenumaker.com/.

Jeg har nu rodet med det i adskillige timer. Desværre uden resultat :-(

Jeg har indsat z-index alle mulige og umulige steder. Intet synes at virke.

Jeg er ikke særlig god til kodning af det ene eller andet, så håber på at nogen har en løsning.

I kan se hvordan menuen forsvinder her: http://www.john-nissen.dk/banesiden/Billeder/2015-07-1/2015-07-1.php

Synes godt om

bpb Seniormester

07. februar 2017 - 19:11 #5

Flotte billeder! Men det er nærmest et mirakel, at de overhovedet kan vises.

I kildetekstens linie 11 har du et iøjnefaldende <tr>, som ikke er afsluttet.

Det fik mig til at besøge https://validator.w3.org/.

HTML-validatoren fandt 17 fejl på din side.

Herunder flere alvorlige, såsom !DOCTYPE deklarationer på uventede steder.

Fejl i HTML koden kan føre til mange problemer. Jeg vil foreslå, at du retter dem, som noget af det første.

Synes godt om

jnrmgs Juniormester

12. februar 2017 - 20:14 #6

Så lykkedes det langt om længe! Efter at have brugt en dags penge på at gå kode for både CSS og HTML igennem, prøvede jeg at sætte z-index på <DIV>-mærket for menuen. Det virkede!

#menu {
position: fixed;
left: 8px;
top: 8px;
height: 98%;
bottom: 8px;
z-index: 1000;
}

Tak for de gode råd!

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 Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Kodning af element i custom css Af Jacob Hedelund i Andet programmering	3	14/10/202410:35	14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering	5	12/10/202413:28	14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering	5	05/09/202411:08	10/09/202415:29
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00
Session Variable Af bsn i Andet programmering	3	01/05/202409:44	02/05/202409:29

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

23/12

Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer

23/12

Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder

23/12

En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed

23/12

Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter

23/12

Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret

23/12

Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR

23/12

Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed

23/12

Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge

23/12

Banebrydende ChatGPT-opdatering er lige på trapperne: “Denne model vil være helt fantastisk til programmering”

23/12

Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten

23/12

Vi ender med at bo i en taber-region, hvis ikke vi gør noget drastisk - her er digitaliseringsministerens plan

Vis flere artikler

IT-JOB

Quadsat ApS

Robotics Engineer

Banedanmark

It-koordinator til SAP-projekter

Netcompany A/S

Test Specialist

Metroselskabet og Hovedstadens Letbane

Applikationsansvarlig medarbejder med udvikler-kompetencer

Sparekassen Sjælland-Fyn A/S

IT-sourcing specialist med fokus på IT-kontraktstyring

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 09:44	Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
I går 16:03	Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43	html <Input.. Danske bogstaver Af pjotre i Andet software
23/1214:35	Brænde musik fra usb drev til cd Af Caso i Andet hardware
21/1222:16	Er "OneDrive" et "Must" ? Koster det penge ? Af Ikke-ekspert i Windows