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

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Session Variable Af bsn i Andet programmering	1	I dag 09:44	I dag 11:05
Modifyed Field for all Records in Access Af ingeman i Andet programmering	2	29/04/202416:05	I går 07:19
Delphi - Parser JSON Fil Af juzas i Andet programmering	4	25/02/202407:13	28/02/202420:56
Bat fil Af sjass i Andet programmering	5	15/01/202417:45	15/01/202420:35
RegEx i Autohotkey Af Bak i Andet programmering	2	01/01/202414:30	18/01/202413:20

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