Aide - Recherche - Membres - Calendrier
Version complète : Probleme Sous Mozilla
La Communauté TitaXium > Service Communication > Espace Developpement
arse
2 May 2005, 20:53
voila le site passe impeccablement sous ie mais voila sous mozilla le design s'étire pas avec le texte en fait, il reste a la taille normale et le texte deborde par la bas... perso la je suis un peu paumé , j'ai eut beau chercher :pinch:

voilou le code

Code
<!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>Document sans nom</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
 if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!--
body {
    background-image: url(design/fondprincipal.gif);
}
-->
</style></head>

<body>

<div id="global">
 <div id="header"></div>
    <div id="menu1">
 
    <div id="menu">
    
    <dl>      
 <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

 <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
     <ul>
   <li><a href="#">Sous-Menu 1.1</a></li>
   <li><a href="#">Sous-Menu 1.2</a></li>
   <li><a href="#">Sous-Menu 1.3</a></li>
   <li><a href="#">Sous-Menu 1.4</a></li>
   <li><a href="#">Sous-Menu 1.5</a></li>
   <li><a href="#">Sous-Menu 1.6</a></li>
   </ul>
 </dd>
    </dl>
    
    
    <dl>    
 <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

     <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
     <ul>
   <li><a href="#">Sous-Menu 2.1</a></li>
   <li><a href="#">Sous-Menu 2.2</a></li>
   <li><a href="#">Sous-Menu 2.3</a></li>
   <li><a href="#">Sous-Menu 2.4</a></li>
     </ul>

     </dd>
    </dl>
    
    <dl>    
 <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
     <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
     <ul>

   <li><a href="#">Sous-Menu 3.1</a></li>
   <li><a href="#">Sous-Menu 3.2</a></li>
   <li><a href="#">Sous-Menu 3.3</a></li>
   <li><a href="#">Sous-Menu 3.4</a></li>
   <li><a href="#">Sous-Menu 3.5</a></li>
     </ul>

     </dd>
    </dl>
    
    <dl>    
 <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
     <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
     <ul>

   <li><a href="#">Sous-Menu 4.1</a></li>
   <li><a href="#">Sous-Menu 4.2</a></li>
   <li><a href="#">Sous-Menu 4.3</a></li>

     </ul>
     </dd>
    </dl>

    </div>
   </div>
    <div id="image">
    <div id="imagedroit"></div>
   <div id="imagemilieu">
      <marquee behaviour="scroll" direction="left" scrollamount="1" scrolldelay="5" loop="-1">
 <img src="design/ampli_kathrein.gif" width="100" height="75" /><img src="design/antenne1.gif" width="111" height="75" /><img src="design/coaxial.gif" width="50" height="75" /><img src="design/fibreimage.gif" width="103" height="75" /><img src="design/fomach.gif" width="77" height="75" /><img src="design/fibre.gif" width="70" height="75" /><img src="design/fibre_plastique_15_1.gif" width="100" height="75" /><img src="design/fibreft.gif" width="81" height="75" />Bienvenue sur JP2.FR <img src="design/ampli_kathrein.gif" width="100" height="75" /><img src="design/antenne1.gif" width="111" height="75" /><img src="design/coaxial.gif" width="50" height="75" /><img src="design/fibreimage.gif" width="103" height="75" /><img src="design/fomach.gif" width="77" height="75" /><img src="design/fibre.gif" width="70" height="75" /><img src="design/fibre_plastique_15_1.gif" width="100" height="75" /><img src="design/fibreft.gif" width="81" height="75" />
      </marquee>
     </div>
 <div id="imagegauche"></div>
    <div>
  </div>
</div>
     <div id="menu2">
 <div id="menuhaut"></div>
 <p>kjkj</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>sdfgkldsfkg</p>
 <p>&nbsp;</p>
 <p>dfgdf</p>
 <p>g</p>
 <p>dfgd</p>
 <p>fg</p>
 <p>df</p>
 <p>g</p>
 <p>dfsg</p>
 <p>sdf</p>
 <p>gds</p>
 <p>fg</p>
 <p>df</p>
 <p>gd</p>
 <p>fg</p>
 <p>dsf</p>
 <p>g</p>
 <p>sd</p>
 <p>fg</p>
 <p>dsf</p>
 <p>gdsf</p>
 <p>g</p>
 <p>dg</p>
 <p>&nbsp;</p>
 <p>dsfdsfg</p>
 <p>d</p>
 <p>fg</p>
 <p>ds</p>
 <p>fg</p>
 <p>sdf</p>
 <p>g</p>
 <p>dfsg</p>
 <p>dsf</p>
 <p>g</p>
 <p>sdfg</p>
 <p>sdf</p>
 <p>g       </p>
 <div id="menubas"></div>
 
 </div>
  <div id="principal">
    <p>fsdfdfs</p>
    <p>fs</p>
    <p>df</p>
    <p>sd</p>
    <p>f</p>
    <p>sdf</p>
    <p>s</p>
    <p>df</p>
    <p>sdf</p>
    <p>sd</p>
    <p>f</p>
    <p>sdf</p>
    <p>sd</p>
    <p>fs</p>
    <p>df</p>
    <p>sdf</p>
    <p>s</p>
    <p>df</p>
    <p>sd</p>
    <p>fs</p>
    <p>df</p>
    <p>sd</p>
    <p>f</p>
    <p>sdf</p>
    <p>jhljh</p>
    <p>k&ugrave;mlk</p>
    <p>pk&ugrave;lkgs</p>
    <p>dfg</p>
    <p>&nbsp;</p>
    <p>sdf</p>
    <p>gd</p>
    <p>fg</p>
    <p>sdf</p>
    <p>gd</p>
    <p>sfg</p>
    <p>sdf</p>
    <p>g</p>
    <p>sdf</p>
    <p>gd</p>
    <p>sfg</p>
    <p>jkmlkl</p>
  </div>
       <div id="bas"></div>
       


</div>
</body>
</html>


et le css

Code
/* CSS Document */
#global {
    position: absolute;
    width: 900px;
    background-color:#CCCCFF;
    font-family: "Courier New", Courier, mono;
    height: 950px;
    margin-right: 0px;
    margin-left: 50%;
    left: -450px;
    background-image: url(design/fondprincipal.gif);
}
#header {
    background-color: #999999;
    height: 150px;
    width: 900px;
    margin-top: 0px;
    margin-right: 0px;
    position: relative;
    top: 0px;
    right: 0px;
    background-image: url(design/debutheader.gif);
}
#image {
    background-color: #FFFF33;
    height: 75px;
    width: 900px;
    position: relative;
    z-index: -150;
}
#menu1 {
    background-color: #00FFFF;
    height: 50px;
    width: 900px;
    position: relative;
       background-image: url(design/menuhaut.gif);
}
#principal {
    background-color: #FFFFFF;
    height: 570px;
    width: 650px;
    position: relative;
    margin: 25px 0px 0px 30px;
}
#menu2 {
    background-color: #FF3366;
    height: 570px;
    width: 150px;
    float: right;
    position: relative;
    margin-top: 25px;
    margin-right: 10px;
    background-image: url(design/menumilieu.gif);
}
#bas {
    background-color: #00FFFF;
    height: 30px;
    width: 860px;
    position: relative;
    margin-left: 30px;
    margin-top: 25px;
    }
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}

#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #A9ECEF;
    border: 1px solid gray;
    margin: 1px;
}
#menu dd {
border: 1px solid #CCCCCC;
}
#menu li {
text-align: center;
background: #89ABAD;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 10px;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #666666;
}
#menuhaut {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #FFFFFF;
    margin: 0px;
    height: 40px;
    background-image: url(design/hautmenu2.gif);
}
#menubas {
    position: absolute;
    width: 100%;
    background-color: #FFFFFF;
    height: 40px;
    margin-bottom: 0px;
    bottom: 0px;
    background-image: url(design/basmenu2.gif);
}
#principalhaut {
    background-color: #CC33FF;
    height: 20px;
    width: 100%;
    position: relative;
}
#imagedroit {
    background-color: #00FF33;
    width: 45px;
    position: absolute;
    z-index: -150;
    float: Aucune;
    height: 75px;
    clear: both;
}
#imagegauche {
    background-color: #330033;
    width: 45px;
    position: absolute;
    z-index: -150;
    float: Aucune;
    height: 75px;
    left: 865px;
}
#imagemilieu {
    background-color: #66FF33;
    width: 820px;
    position: absolute;
    z-index: -150;
    float: Aucune;
    height: 70px;
    margin-left: 45px;
}

merci a tous ^_^
Darkthrone
2 May 2005, 21:57
Si tu pouvais mettre ton code entre balise ça serait pas mal parce que là on voit limite rien du tout wink.gif lol. Merci d'avance
arse
3 May 2005, 21:42
..help.... :-(
Darkthrone
4 May 2005, 11:40
Tu veux une scroll ou faut forcément que ça s'étire ?
De toute manière je pense que tu as oublié une fonction

{
overflow:auto;
}

Essaye ça... Mets là dans chaque élément qui devra s'allonger avec le texte

je suis pas sur que ça marche, mais bon.
arse
5 May 2005, 09:50
j'avais pensé a l'overflow , mais en fait les ascenceurs ( ca s'écrit comme ca?? ) je trouve pas ca esthétique du tout , et j'arrive pas a trouver une fonction qui fasse que mozilla s'étire avec le texte , merci quand meme a toi parce que contrairement a certains forums (dont je citerais pas le nom , mais ou ils ne répondent jamais tant que tu as pas 500 messages...blazant) ici on est toujours enormement aidé et super bien acceuilli ;-)
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2010 Invision Power Services, Inc.