drcolt45
11-24-2013, 12:21 AM
Hi everyone !
First of all here is 2 things:
1- English is not my native language :P
2- Im a beginner on building sites.
Here is the problem:
I have a dropdown menu on the very top of the page.
Everything appears right when viewing in IE, Firefox and Opera but Only Google Chrome doesn't show it right ! The menu goes underneath a DIV !
Here is the site : http://pages.videotron.com/drcolt45/
Here is the codings ( CODE and CSS ) --- Don't forget, Im a newbie ! :)
***** CODE *****
<body>
<img src="Images/Fond_Site1.jpg" class="superbg" />
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
<div id='cssmenu'>
<ul>
<li class="active"><a href="index.html"><span>Présentation</span></a></li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Services</span></a>
<ul>
<li><a href="index.html"><span>Terrassement</span></a></li>
<li><a href="index.html"><span>Excavation</span></a></li>
<li><a href="index.html"><span>Déneigement</span></a></li>
<li class="last"><a href="index.html"><span>Démolition</span></a></li>
</ul>
</li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Nos Équipements</span></a>
<ul>
<li><a href="index.html"><span>Machinerie lourdes</span></a></li>
<li><a href="index.html"><span>Machinerie légères</span></a></li>
<li class="last"><a href="index.html"><span>Autres équipement</span></a></li>
</ul>
</li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Location</span></a>
<ul>
<li><a href="index.html"><span>Machinerie</span></a></li>
<li class="last"><a href="index.html"><span>Autres</span></a></li>
</ul>
</li>
<li class="last"><a href="index.html"><span>Coordonnées</span></a></li>
</ul>
</div>
<div id="wrapper">
<div id="nav">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor leo ut mauris posuere, quis laoreet velit scelerisque. Quisque dolor risus, aliquet ac est commodo, vestibulum feugiat massa. Pellentesque sem ante, auctor quis nibh eget, faucibus venenatis augue. Pellentesque nisl massa, blandit sed pharetra nec, laoreet eget velit. Nunc molestie venenatis augue in adipiscing. Quisque consequat eros id quam rutrum, nec imperdiet sem convallis. Quisque nec venenatis eros. Pellentesque id iaculis magna. Maecenas vehicula ultrices massa non convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam dui. Donec in scelerisque nulla. Proin ullamcorper at felis ut scelerisque.</p>
<p>Quisque laoreet urna id nulla vestibulum, dapibus elementum tortor interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis leo enim. Phasellus porttitor, enim vitae adipiscing consequat, ligula nunc porta mauris, vitae malesuada tortor diam a nulla. Integer nisl lectus, aliquet a leo vel, molestie consequat diam. Nam non ultricies augue. Fusce id sapien mi. Praesent tempor purus turpis, quis mattis orci condimentum in. Suspendisse at magna ac purus dignissim suscipit nec nec neque. Donec turpis arcu, ultrices ac mollis quis, molestie eu ligula. Suspendisse potenti. Morbi eleifend eros id ipsum venenatis consequat. Vestibulum laoreet vitae erat non tristique. Proin a libero eros. Duis eu sagittis quam, vitae sollicitudin dolor.</p>
<p>Pellentesque id faucibus velit. Duis aliquet interdum imperdiet. Sed placerat nibh non purus posuere, ac euismod lectus aliquet. Curabitur auctor,lorem non blandit molestie, massa mauris ultricies lorem, in ultricies eros enim vitae libero. Phasellus egestas nec metus quis sodales. Nullam cursus augue at nunc blandit pulvinar. Mauris ultrices urna lacus, sit amet aliquet justo pellentesque ut. Aliquam dapibus nisl id nunc rhoncus cursus. Vestibulum consectetur neque nec dolor faucibus fringilla. Fusce feugiat felis a elit scelerisque venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec leo sed odio euismod faucibus. Nulla mattis tempus nisl ut fermentum.</p>
</div>
<div id="footer" align="center">
<p>Vestibulum consectetur neque nec dolor faucibus fringilla.</p>
</div>
</div>
</body>
</html>
**** CSS ****
img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1;
}
function redimensionnement(){
var $image = $('img.superbg');
var image_width = $image.width();
var image_height = $image.height();
var over = image_width / image_height;
var under = image_height / image_width;
var body_width = $(window).width();
var body_height = $(window).height();
if (body_width / body_height >= over) {
$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}
else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
});
}
}
$(document).ready(function(){
// Au chargement initial
redimensionnement();
// En cas de redimensionnement de la fenêtre
$(window).resize(function(){
redimensionnement();
});
});
html {
margin:0;
padding:0;
background: url(Images/Fond_Site1.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
#content1 {
float:left;
width:770px;
/* Pas de hauteur pour qu'il s'ajuste automatiquement */
background-color:#565656;
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
border-radius: 15px;
}
#nav {
float:left;
width:800px;
height:450px;
background-color:#565656;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
border-radius: 15px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
color: #FFF;
padding-top:5px;
padding-left:10px;
padding-right:10px;
text-align: justify;
margin-top:70px;
margin-left: 130px;
}
#header {
float: left;
width: 770px;
height:55px;
margin-top:0px;
border-radius: 15px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.7em;
color: #FFF;
text-transform: capitalize;
}
#wrapper {
elevation:below;
width:960px;
margin-top:5px;
margin-right:auto;
margin-left:auto;
position:relative;
}
#footer {
float:left;
margin-top:5px;
width:800px;
height:60px;
border-radius: 15px;
filter: alpha(opacity=80); /* internet explorer */
-khtml-opacity: 0.8; /* khtml, old safari */
-moz-opacity: 0.8; /* mozilla, netscape */
opacity: 0.8; /* fx, safari, opera */
border-radius: 15px;
margin-left:130px;
padding-left:10px;
padding-right:10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
background-color: #565656;
}
#cssmenu {
margin-left:380px;
position: fixed;
First of all here is 2 things:
1- English is not my native language :P
2- Im a beginner on building sites.
Here is the problem:
I have a dropdown menu on the very top of the page.
Everything appears right when viewing in IE, Firefox and Opera but Only Google Chrome doesn't show it right ! The menu goes underneath a DIV !
Here is the site : http://pages.videotron.com/drcolt45/
Here is the codings ( CODE and CSS ) --- Don't forget, Im a newbie ! :)
***** CODE *****
<body>
<img src="Images/Fond_Site1.jpg" class="superbg" />
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>
<div id='cssmenu'>
<ul>
<li class="active"><a href="index.html"><span>Présentation</span></a></li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Services</span></a>
<ul>
<li><a href="index.html"><span>Terrassement</span></a></li>
<li><a href="index.html"><span>Excavation</span></a></li>
<li><a href="index.html"><span>Déneigement</span></a></li>
<li class="last"><a href="index.html"><span>Démolition</span></a></li>
</ul>
</li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Nos Équipements</span></a>
<ul>
<li><a href="index.html"><span>Machinerie lourdes</span></a></li>
<li><a href="index.html"><span>Machinerie légères</span></a></li>
<li class="last"><a href="index.html"><span>Autres équipement</span></a></li>
</ul>
</li>
<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Location</span></a>
<ul>
<li><a href="index.html"><span>Machinerie</span></a></li>
<li class="last"><a href="index.html"><span>Autres</span></a></li>
</ul>
</li>
<li class="last"><a href="index.html"><span>Coordonnées</span></a></li>
</ul>
</div>
<div id="wrapper">
<div id="nav">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor leo ut mauris posuere, quis laoreet velit scelerisque. Quisque dolor risus, aliquet ac est commodo, vestibulum feugiat massa. Pellentesque sem ante, auctor quis nibh eget, faucibus venenatis augue. Pellentesque nisl massa, blandit sed pharetra nec, laoreet eget velit. Nunc molestie venenatis augue in adipiscing. Quisque consequat eros id quam rutrum, nec imperdiet sem convallis. Quisque nec venenatis eros. Pellentesque id iaculis magna. Maecenas vehicula ultrices massa non convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam dui. Donec in scelerisque nulla. Proin ullamcorper at felis ut scelerisque.</p>
<p>Quisque laoreet urna id nulla vestibulum, dapibus elementum tortor interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis leo enim. Phasellus porttitor, enim vitae adipiscing consequat, ligula nunc porta mauris, vitae malesuada tortor diam a nulla. Integer nisl lectus, aliquet a leo vel, molestie consequat diam. Nam non ultricies augue. Fusce id sapien mi. Praesent tempor purus turpis, quis mattis orci condimentum in. Suspendisse at magna ac purus dignissim suscipit nec nec neque. Donec turpis arcu, ultrices ac mollis quis, molestie eu ligula. Suspendisse potenti. Morbi eleifend eros id ipsum venenatis consequat. Vestibulum laoreet vitae erat non tristique. Proin a libero eros. Duis eu sagittis quam, vitae sollicitudin dolor.</p>
<p>Pellentesque id faucibus velit. Duis aliquet interdum imperdiet. Sed placerat nibh non purus posuere, ac euismod lectus aliquet. Curabitur auctor,lorem non blandit molestie, massa mauris ultricies lorem, in ultricies eros enim vitae libero. Phasellus egestas nec metus quis sodales. Nullam cursus augue at nunc blandit pulvinar. Mauris ultrices urna lacus, sit amet aliquet justo pellentesque ut. Aliquam dapibus nisl id nunc rhoncus cursus. Vestibulum consectetur neque nec dolor faucibus fringilla. Fusce feugiat felis a elit scelerisque venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec leo sed odio euismod faucibus. Nulla mattis tempus nisl ut fermentum.</p>
</div>
<div id="footer" align="center">
<p>Vestibulum consectetur neque nec dolor faucibus fringilla.</p>
</div>
</div>
</body>
</html>
**** CSS ****
img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1;
}
function redimensionnement(){
var $image = $('img.superbg');
var image_width = $image.width();
var image_height = $image.height();
var over = image_width / image_height;
var under = image_height / image_width;
var body_width = $(window).width();
var body_height = $(window).height();
if (body_width / body_height >= over) {
$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}
else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
});
}
}
$(document).ready(function(){
// Au chargement initial
redimensionnement();
// En cas de redimensionnement de la fenêtre
$(window).resize(function(){
redimensionnement();
});
});
html {
margin:0;
padding:0;
background: url(Images/Fond_Site1.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
#content1 {
float:left;
width:770px;
/* Pas de hauteur pour qu'il s'ajuste automatiquement */
background-color:#565656;
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
border-radius: 15px;
}
#nav {
float:left;
width:800px;
height:450px;
background-color:#565656;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
border-radius: 15px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
color: #FFF;
padding-top:5px;
padding-left:10px;
padding-right:10px;
text-align: justify;
margin-top:70px;
margin-left: 130px;
}
#header {
float: left;
width: 770px;
height:55px;
margin-top:0px;
border-radius: 15px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.7em;
color: #FFF;
text-transform: capitalize;
}
#wrapper {
elevation:below;
width:960px;
margin-top:5px;
margin-right:auto;
margin-left:auto;
position:relative;
}
#footer {
float:left;
margin-top:5px;
width:800px;
height:60px;
border-radius: 15px;
filter: alpha(opacity=80); /* internet explorer */
-khtml-opacity: 0.8; /* khtml, old safari */
-moz-opacity: 0.8; /* mozilla, netscape */
opacity: 0.8; /* fx, safari, opera */
border-radius: 15px;
margin-left:130px;
padding-left:10px;
padding-right:10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #FFF;
background-color: #565656;
}
#cssmenu {
margin-left:380px;
position: fixed;