• Registered: 2014-04-19
  • Posts: 48

Topic: pb with style [SOLVED]

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 ?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: pb with style [SOLVED]

The problem you describe (a horizontal shift in content when loading your gallery web pages) is caused by the browser initially rendering your gallery web pages without a vertical scroll bar but then displaying one when it discovers that a scroll bar is required.
As your gallery web pages will require a vertical scrollbar anyway (in all but very tall browser windows), you could add the following CSS to your 'style-menu2.css' page in order to instruct the browser to always display a vertical scroll bar (so that it is present when loading the page content, preventing the horizontal shift that you describe).

body {
    overflow-y: scroll;
}

Incidentally, I notice that your galleries currently have widths of 111% (larger than the width of the parent containers).
If you need to increase the widths of your galleries, then I would recommend setting your gallery widths to 100% (so that they fill the parent containers) and then increase the widths of the parent containers. Otherwise, give your galleries fixed pixel value widths (and ensure that they are not larger than the widths of the parent containers).

  • Registered: 2014-04-19
  • Posts: 48

Re: pb with style [SOLVED]

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;
}
  • Registered: 2012-04-24
  • Posts: 5,924

Re: pb with style [SOLVED]

The problem is with the vertical scroll bar on the entire page (not an element on the page).
The only way to prevent the problem is to apply the CSS rule to the 'body' tag as in my post above.

  • Registered: 2014-04-19
  • Posts: 48

Re: pb with style [SOLVED]

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.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: pb with style [SOLVED]

I'm surprised to not see my answer of yesterday

I'm not sure what might have happened. (I did not delete any of your posts.) Perhaps there was a timeout which resulted in your post not being entered.

because I had seen what you say now, had corrected my CSS file, and as I was entirely satisfied of the result

That is great to hear. I have now marked this query as SOLVED.