OK for the forum, but for the CSS, what you say is effectively good (many thanks), but could you explain me why "menu ul" and not simply "menu" and also why not "page div" ?
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by laurentsch
OK for the forum, but for the CSS, what you say is effectively good (many thanks), but could you explain me why "menu ul" and not simply "menu" and also why not "page div" ?
I believe that the preview is wrong (the title) but when published, it's correct !!
Anyway, about the hidden menu, I've done that in CSS :
nav,#page {
z-index:9999;
}but the pb is still there...(#page is the identifier of the div in which all the menu is)
Indepently of the browser (IE8, Firefox, Google Chrome or Safari), it searches the gallery but doesn't find it...
excuse-me but, as I am, since yesterday, unable to create a new discussion, could I squatte your topic to do a question ? (As I can't create a new subject, but am able to respond to an existing one ?) Or more simply, you create a new subject with the title : "menu hidden by a Juicebox gallery" (without text or very short if text required), and I answer...
I've had a look to your link and as an ID number received in a mail was necessary, I 've had a look to this mail and I've seen in this mail that there was a button "generate an invoice" ; so I've used it but the received invoice was in dollars ; so, I've answered and required a conversion into euros...I'm waiting for the answer and you can close the topic.
Effectively, now, there is no more back button, but yesterday evening, I believe to have cleared the cache memory (CTRL F5 with IE8) and I had this button with the 3 browsers I'd test (IE8, Firefox and Google Chrome). (You can close this topic).
On this page : http://vercorshandisport.org/html5/cano … rome.php#1, one sees a back button on the left, just below the title and even if I've suppressed it in "customize>back button" (back button position put to none and back button text put to spaces), this button isn't suppressed after publishing ; how to do ?
I've just bought Juicebox-pro with a credit card, but I would need an invoice to be repaid by the association for which I make the website : will I receive such an invoice ?
I'm surprised to not see my answer of yesterday, because I had seen what you say now, had corrected my CSS file, and as I was entirely satisfied of the result (http://vercorshandisport.org/html5/accueil/accueil.php), had shown it to my handisport club (I don't know if the term "handisport" is english...) and proposed them to buy Juicebox pro (decision in a few days). Of course, you can solve this discussion.
I've well believed to your explanation ; as I wanted to apply it only to the gallery but not to the remaining, I've put it only for the identifier of the gallery ("idsize"), but the pb is remaining...
#idsize {
height:90%;
font-size:80%;
overflow-y: scroll;
}Hello, on my website, when I switch from a standard page (for example, the homepage) to a page which includes a Juicebox gallery (under "photos" item), the transition is bad : the menu moves a little and a few seconds after, goes at its original location ; I think it comes from the CSS file :
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width:1200px;margin: 100px auto;color: #666;}
a {color: #333;}
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding: 8px 20px;margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
background: #ddd url(../images/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}
/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}
#idsize {
height:90%;
font-size:80%;
}
#credit {
background-color:black;
color:white;
width:111.1%;
}
nav {
z-index : 9999;
position:relative;
top:0;
left:0;
}
#aside_width {
float:right;
margin-right:200px;
width:50px;
text-align : center;
}
#section {
float:left;
}
#pres,article {
font-family : Arial;
}
#visite {
background-color: rgb(204, 255, 255);
width:20%;
}
#liens {
font-size : 5;
}
.white {
color:white;
text-decoration:underline;
}
#video {
z-index : 1;
border : none;
position:relative;
top:0;
left:0;
}
.decal {
padding : 0px;
}and to see the link with a standard page :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>titre du site</title>
<link href="../css/style-menu2.css" rel="stylesheet"/>
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<?php include("../entete.php"); ?>
</header>
<nav>
<?php include("../menu2.php"); ?>
</nav>
<section>
<article>
squelette
</article>
</section>
</body>
</html>and the code of the menu (menu2.php) :
<ul id="nav">
<li ><a href="../accueil/accueil.php">Accueil</a></li>
<li><a href="#">Le club</a>
<ul>
<li><a href="../pres/pres.php">Présentation</a></li>
<li><a href="../vie_du_club/vie_du_club.php">Vie du club</a></li>
<li><a href="../trombi2/trombi2.php">Trombinoscope</a></li>
</ul>
...
<li><a href="#">Photos</a>
<ul>
<li><a href="#">Saison 2013/2014</a>
<ul>
<li><a href="../lafeclaz/lafeclaz.php">Coupe de France La Feclaz</a></li>
<li><a href="../stage2014/stage.php">Stage 2014</a></li>
<li><a href="../fb/foulee_blanche.php">Foulée blanche</a></li>
<li><a href="../cpf_autrans/finale_cpf.php">Finale Coupe de France Autrans</a></li>
</ul>
</li>
<li><a href="#">Saison 2012/2013</a>
... </li>
</ul>
</li>
...
</ul>would you have an explanation ?
You can solve this discussion.
You can solve this discussion.
Hello,
would it be possible to add comments to photos, like I'd done with another software here : http://vercorshandisport.org/essai2/cha … page1.html ?
Thank you for your answer ; I take it into account.
to put z-index to 9999 wasn't sufficient ; the W3C validator didn't like the attribute "frameborder", but I haven't found anything to replace it ; the solution, finally, has been to put the videos to Dailymotion instead of Youtube...You can close my pb.
Hello, I have a pb of display with IE (not the other browsers) ; when the mouse moves over the submenus, with IE only, the submenus are under the gallery (only on this page) : http://www.hostingpics.net/viewer.php?i … age001.png. What could be done ?
CSS code :
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding: 8px 20px;margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
background: #ddd url(../images/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}
/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}
#idsize {
height:90%;
font-size:80%;
}
#credit {
background-color:black;
color:white;
width:111.1%;
}
/* CSS which should put the menu in front of the remaining elements, but which isn't sufficient with IE */
nav {
z-index : 10;
position:relative;
top:0;
left:0;
}
#aside_width {
float:right;
text-align : center;
}
#section {
float:left;
}
#pres,article {
font-family : Arial;
}
#visite {
background-color: rgb(204, 255, 255);
width:20%;
}
#liens {
font-size : 5;
}
.white {
color:white;
text-decoration:underline;
}Excuse-me to have not answered quickly : now, all the pages share the same CSS file :
<link href="../css/style-menu2.css" rel="stylesheet"/>and the strange behaviour (during a page switch, the menu moves a little) occurs only on an ordinator, but not on the other ones ; so closed pb...
Thank you for your explanation : that's clear but I have only a weak experience in CSS...and moreover, maybe is it easy to see...when I change of page (only toward a page which embed a Juicebox gallery), during the transition, the menu moves a little : how could it be suppressed ?
Thanks to your advise with the z-index (high), this pb is suppressed, but there is still one : the location of the menu ; depending of the pages, it isn't always the same ; example: http://vercorshandisport.org/html5/stage2014/stage.php and http://vercorshandisport.org/html5/lafe … feclaz.php. You can easily see the html source code and css is :
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}
#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding: 8px 20px;margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
background: #ddd url(../images/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}
/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/
/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}
#idsize {
height:90%;
font-size:80%;
}
#credit {
background-color:black;
color:white;
width:111.1%;
}
nav {
z-index : 5;
}(until #idsize, it's css of the menu)
(thank you for an answer so late...)
Good evening,
I would like to embed Juicebox galleries into html pages where there would be also a menu ; I've tried different menus (all with css and javascript), and systematically, there is a conflict (probably due to js). So, I would like to receive an advise to use a menu which would be compatible with Juicebox.
Juicebox Support Forum → Posts by laurentsch
Powered by PunBB, supported by Informer Technologies, Inc.