CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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="" />

    <!-- START OPEN GRAPH TAGS-->
    <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="" />
    <!-- END OPEN GRAPH TAGS-->

    <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">
            <!--START JUICEBOX EMBED-->
            <script src="jbcore/juicebox.js"></script>
            <script>
            new juicebox({
                containerId: 'juicebox-container',
                galleryWidth: '70%',
                galleryHeight: '93%',
                backgroundColor: 'FFFFFF'
                });
            </script>
            <div id="juicebox-container"></div>
            <!--END JUICEBOX EMBED-->
        </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 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2013-04-2/2013-04-2.php">April 2013 &ndash; 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 &ndash; 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 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2014-07-2/2014-07-2.php">Juli 2014 &ndash; 2</a></li>
                  <li><a href="/banesiden/Billeder/2014-08-1/2014-08-1.php">August 2014 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2014-08-2/2014-08-2.php">August 2014 &ndash; 2</a></li>
                  <li><a href="/banesiden/Billeder/2014-09-1/2014-09-1.php">September 2014 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2014-09-2/2014-09-2.php">September 2014 &ndash; 2</a></li>
                  <li><a href="/banesiden/Billeder/2014-09-3/2014-09-3.php">September 2014 &ndash; 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 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2015-04-1/2015-04-1.php">April 2015 &ndash; 1</a></li>
                  <li><a href="/banesiden/Billeder/2015-04-2/2015-04-2.php">April 2015 &ndash; 2</a></li>
                  <li><a href="/banesiden/Billeder/2015-04-3/2015-04-3.php">April 2015 &ndash; 3</a></li>
                  <li><a href="/banesiden/Billeder/2015-04-4/2015-04-4.php">April 2015 &ndash; 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 &ndash; 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>
Avatar billede 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
Avatar billede 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;
}
Avatar billede 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.
Avatar billede 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
Avatar billede 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.
Avatar billede 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!
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:30 Hvordan ændres UniFi Dream Machine UDM til switch mode Af Kasper4450 i Internetforbindelser
I dag 13:01 Film går i stå midt i afspilningen Af ole falsted i Musik & videoafspillere
I dag 11:40 Fjerne mappe i stifinder Af Peter Olsen i Andet software
I dag 11:27 renteberegning Af Pil i Excel
I går 22:30 Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Er din cybersikkerhed klar til AI-revolutionen?
Læs mere »
Styrk compliance, sikkerhed og overblik med ét hug
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »