28173 sujets

CSS et mise en forme, CSS3

[decu][pas encore résolu] menu éclaté

Cette page et cette page 2 affichent un menu dans chaque coin de ma page. avec un contour d'un pixel dashed sur tout les contours de la page.

Plusieurs questions :
- Comment réussir à optimiser ce code et le rendre valide pour tout type de navigateur ? Pour l'instant c'est un peu du bidouillage...
- j'aimerais voir mes menus (haut-bas, gauche-droite) rester fixe lorsque je navigue dans le reste de la page (scrollbarre, molette)

Merci de vos conseils.
Modifié par pinch (17 Jul 2006 - 10:10)
pas d'idées sur la question ?

J'ai testé d'autres pistes avec plus ou moins d'erreurs en fonction des navigateurs :
autres pistes

Le bug principale c'est avec le menu bas-droite.
Problème sous IE comme sur FF
Modifié par pinch (13 Jul 2006 - 15:30)
pas plus d'idées que ça ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		
<title>menu haut/menu bas avec JavaScript &amp; CSS</title>
<style type="text/css">
<!--
html,body{
 height:100%;
 overflow:hidden;
}
body {
 margin: 0;
 padding: 0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;
 color: #000000;
 overflow:hidden;
}
#top {
 background-image: url(/debug/css/menus-eclates/chz.png);
 background-repeat: repeat-x;
 background-attachment: fixed;
 background-position: top;
}
#footer {
 position: relative;/* Nécessaire pour Safari */
 background-image: url(/debug/css/menus-eclates/chz.png);
 background-repeat: repeat-x;
 background-attachment: fixed;
 background-position: bottom;
}
#mhg{
 padding-right: 18px;
 padding-left: 5px;
 padding-bottom: 2px;
 background-image: url(cm.png);
 background-repeat: no-repeat;
 background-position: right bottom;
}
#mhd{
 float:right;
 padding-left:18px;
 padding-right:5px;
 padding-bottom:2px;
 background-image: url(cm.png);
 background-repeat: no-repeat;
 background-position: left bottom;
}
#mbg{
 padding-right:18px;
 padding-left:5px;
 padding-bottom:2px;
 background-image: url(cm.png);
 background-repeat: no-repeat;
 background-position: right top;
 z-index:5;
}
#mbd{
 float: right;
 padding-left: 18px;
 padding-right: 5px;
 padding-bottom: 2px;
 background-image: url(cm.png);
 background-repeat: no-repeat;
 background-position: left top;
 z-index:5;
 clear: right;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
 var windowHeight = 0;
 if (typeof(window.innerHeight) == 'number') {
  windowHeight = window.innerHeight;
 }else{
  if (document.documentElement && document.documentElement.clientHeight) {
   windowHeight = document.documentElement.clientHeight;
  }else{
   if (document.body && document.body.clientHeight) {
    windowHeight = document.body.clientHeight;
   }
  }
 }
return windowHeight;
}
function setFooter() {
 if (document.getElementById) {
  var windowHeight = getWindowHeight();
   if (windowHeight > 0) {
    var contentHeight = document.getElementById('top').offsetHeight;
    var footerElement = document.getElementById('footer');
    var footerHeight  = footerElement.offsetHeight;
    if (windowHeight - (contentHeight + footerHeight) >= 0) {
     footerElement.style.position = 'relative';
     footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
    }else {
     footerElement.style.position = 'static';
    }
   }
  }
 }
window.onload = function() {
 setFooter();
}
window.onresize = function() {
 setFooter();
}
//-->
 </script>
</head>
 <body>
  <div id="top">
   <span id="mhd"><a href="#">menu haut-droite</a></span>
   <span id="mhg"><a href="#">menu haut-gauche</a></span> 
  </div>
  <div id="footer">
   <span id="mbd"><a href="#">menu bas-droite</a></span>
   <span id="mbg"><a href="#">menu bas-gauche</a></span>
  </div>
 </body>
</html>
Sujet clos
Aller à