Aide - Recherche - Membres - Calendrier
Version complète : Problème de Background en NEtscape & firefox (CSS2)
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
ace5150
Mar 9 2005, 08:06 AM
Bonjour, Voilà j'ai un problème de compatibilité browser... Voici mon css :
CODE
body { position:relative; width:98%; height:100%; margin:0; padding:0; background:url("../images/bgFull.gif") repeat-x #442E0A; font:11px tahoma; font-weight:normal; text-align:center; } .containerBlock { position:relative; width:762px; max-height:100%; height:100%; margin:0 auto; padding:0; background:url("../images/bgContainerBlock.gif") no-repeat #fff; }
Voici le xhtml:
CODE
<body> <div class="containerBlock">  // le reste du code;) </div> </body>
Pour voir le résultat obtenius voir fichiers joins Quelqu'un aurai une solution???? Merci bcp....[/img]
jep
Mar 9 2005, 09:57 AM
Il faut faire attention à la syntaxe de css:background :
[quote]background:#442E0A

smile.gif
ace5150
Mar 9 2005, 10:41 AM
Jai déja testé cela mais le résultat reste le meme...
nanoum
Mar 9 2005, 06:42 PM
salut smile.gif

CODE
background:url("../images/bgFull.gif")


il ne faut pas de guillemets pour le chemin vers ton fichier image :
CODE
background:url(../images/bgFull.gif)



a+ smile.gif
ace5150
Mar 21 2005, 01:05 PM
Cela ne change rien de rien smile.gif
Vous avez des parties de code vous pouvez essayer chez vous ca marche pas...

Quelqu'un aurais une solutions a ce probleme...?

Thx...
nanoum
Mar 21 2005, 01:08 PM
pour que ton height: 100% fonctionne bien, il faut qu'il soit appliqué sur la balise body (ce que tu as deja fait) et également sur la balise html

a+ smile.gif
ace5150
Mar 21 2005, 01:11 PM
Non tjrs rien...
Sol@rweb
Mar 21 2005, 01:16 PM
Salut a toi,

Je vais te répondre d'apres ce que je pense voir su la petite image tongue.gif

Moi je pense que si ça ne fait aps 100% en hauteur c'est tout simplement parce que tu n'as pas de texte dedans.

alors max-height:100%; height:100% c'est bien mais je pense que min-height:100% serait + utile.

Voila voila ++
ace5150
Mar 21 2005, 01:21 PM
A taton nous y arriverons...
Mais non tjrs rien...
Sol@rweb
Mar 21 2005, 01:25 PM
On peut avoir une url ?

Ou le code maintenant que t'as changé pleins de trucs ? smile.gif
ace5150
Mar 21 2005, 01:29 PM
Dsl c un intranet wink.gif
Mais au dessus tu as le code tiens voici toute ma page smile.gif html

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>

<title>Uniway Intranet</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

@import url("style/styleGen.css");

</style>

</head>

<body>

<div class="containerBlock">

<div class="toolBarTop">

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="15">

   <param name="movie" value="flash/dateClock.swf" />

   <param name="quality" value="high" />

   <embed src="flash/dateClock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="15"></embed>

 </object>

 <ul>

   <li><a href="#" class="tool2"><span>Help</span></a></li>

   <li><a href="#" class="tool1"><span>Search</span></a></li>

   <li><a href="#" class="tool0"><span>Home</span></a></li>

 </ul>

</div>

<hr />

<div class="headerBlock">

 <div class="contentLeftBlock">

   <div class="logoBlock">

     <h1><span>UNIWAY | Intranet</span></h1>

   </div>

   <hr />

   <div class="userBlock">

     <h3><span>Personal Settings</span></h3>

     <p class="welcom">welcome <br />

       MOENS STEPHANE</p>

     <p class="alert">Please fill your timeCard and wash your car...</p>

     <a href="#">Goto your TimeCard</a> </div>

   <hr />

   <div class="meteoBlock">

     <h3><span>Wheater</span></h3>

     <ul>

       <li>

         <h5>Monday</h5>

         <img src="images/iconSun.gif">7°c<br />

         11°c</li>

       <li>

         <h5>Tusday</h5>

         <img src="images/iconSun.gif">7°c<br />

         11°c</li>

       <li>

         <h5>Wenesday</h5>

         <img src="images/iconSun.gif">7°c<br />

         11°c</li>

     </ul>

   </div>

 </div>

 <div class="contentRightBlock">

   <div class="pixDayBlock">

     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="469" height="220">

       <param name="movie" value="flash/pixOfTheDay.swf?legendText=Cupidon is a men&urlPix=images/pixOfTheDay/picture.jpg" />

       <param name="quality" value="high" />

       <embed src="flash/pixOfTheDay.swf?legendText=Cupidon is a men&urlPix=images/pixOfTheDay/picture.jpg" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="469" height="220"></embed>

     </object>

   </div>

 </div>

</div>

<hr />

<div class="contentBlock">

 <div class="contentLeftBlock">

   <div class="newsBlock">

     <h3><span>News</span></h3>

     <p><img src="images/news/insideMarch.jpg" /><span class="titleNews">Lorem ipsum dolor Sit amet</span>, consectetuer adipiscing elit. Quisque sit amet sapien. Fusce vel odio sed diam venenatis ullamcorper. Nullam commodo risus sed risus. Suspendisse mollis neque in quam. Sed condimentum laoreet dui. Proin tincidunt dolor nec odio. Morbi iaculis mi. Ut eu nisl. Suspendisse ut sapien.</p>

     <ul>

       <li><a href="#">Sit amet, consectetuer adipiscing elit.</a></li>

       <li><a href="#">Quisque sit amet sapien.</a></li>

       <li><a href="#">Fusce vel odio sed diam.</a></li>

       <li><a href="#">Adipiscing elit. Quisque sit amet.</a></li>

       <li><a href="#">Consectetuer adipiscing.</a></li>

       <li><a href="#">Fusce vel odio.</a></li>

     </ul>

   </div>

 </div>

 <div class="contentRightBlock">

   <div class="docBlock">

     <h3><span>News</span></h3>

     <table>

       <tr>

         <th width="295">Documents</th>

         <th width="77">Language</th>

         <th width="80">Format</th>

         <th>&nbsp;</th>

       </tr>

     </table>

     <div class="docMaskBlock">

       <table>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor

             </th>

           <td width="77"><img src="images/icones/php.gif" /> PHP

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor

             </th>

           <td width="77"><img src="images/icones/php.gif" /> PHP

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor

             </th>

           <td width="77"><img src="images/icones/php.gif" /> PHP

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

         <tr>

           <td width="295">Lorem ipsum dolor sit amet, consectetuer

             </th>

           <td width="77"><img src="images/icones/java.gif" /> JAVA

             </th>

           <td width="80"><img src="images/icones/word.gif" /> 13k

             </th>

         </tr>

       </table>

     </div>

   </div>

 </div>

</div>

</body>

</html>



et voici tout mon css smile.gif

CODE


/* CSS Document */

body         { position:relative; width:98%; height:100%; max-height:100%; min-height:100%; margin:0; padding:0; background:url("../images/bgFull.gif") repeat-x #442E0A; font:11px tahoma; font-weight:normal; text-align:center; }

a         { color:#000; text-decoration:none; }

a:hover        { color:#960; }



.containerBlock      { position:relative; width:762px; max-height:100%; min-height:100%; height:100%; margin:0 auto; padding:0; background:url("../images/bgContainerBlock.gif") no-repeat #fff; } hr,h1        { display:none; }



.toolBarTop       { position:relative; width:759px; height:23px; margin:0; padding:3px 0 0 3px; text-align:left;}

.toolBarTop ul      { position:absolute; top:0; right:0; margin:5px 5px 0 0; padding:0; text-align:right;}

.toolBarTop li      { list-style:none; display:inline; float:right; }

.toolBarTop a.tool0     { display:block; background:url("../images/buttonTool0.gif") no-repeat; height:23px; width:63px; }

.toolBarTop a.tool1     { display:block; background:url("../images/buttonTool1.gif") no-repeat; height:23px; width:71px; }

.toolBarTop a.tool2     { display:block; background:url("../images/buttonTool2.gif") no-repeat; height:23px; width:55px; }

.toolBarTop li span     { display:none; }



.headerBlock      { position:relative; width:762px; margin:0 0 7px 0; padding:0; clear:both; float:left; text-align:left; }

.contentBlock      { position:relative; width:752px; margin:0; padding:0; clear:both; float:left; text-align:left; }

.contentRightBlock    { position:relative; width:513px; float:left; margin:0; padding:0; }

.contentLeftBlock    { position:relative; width:239px; float:left; margin:0; padding:0 0 0 9px; }



 .logoBlock     { position:relative; width:239px; height:49px; background:url("../images/logo.gif") no-repeat; }

 .userBlock      { position:relative; width:239px; height:126px; padding:0; margin:5px 0 10px 0; background:url("../images/bottomLittleBlock.gif") no-repeat bottom; text-align:left; }

 .userBlock h3    { position:relative; display:block; width:100%; height:23px; background:url("../images/titlePersonalSettings.gif") no-repeat; margin:0; padding:0; }

 .userBlock h3 span   { position:relative; display:none; }

 .userBlock p    { position:relative; margin:5px 10px 5px 10px; }

 .userBlock p.welcom   { position:relative; font-weight:bold; }

 .userBlock p.alert   { position:relative; padding:0 0 0 35px; background:url("../images/iconAlert.gif") no-repeat; }

 .userBlock a    { position:absolute; bottom:5px; right:10px; display:block; background:url("../images/arrowBlack.gif") no-repeat 0px 2px; padding:0 0 0 10px; margin:0; }

 

 .meteoBlock     { position:relative; width:239px; height:48px; padding:0; margin:0; background:url("../images/bgWeatherBlock.gif") no-repeat; font:10px tahoma; }

 .meteoBlock h3    { display:none; }

 .meteoBlock ul    { margin:0 0 0 5px; padding:0; width:230px; }

 .meteoBlock li    { display:block; float:left; width:75px; height:48px; }

 .meteoBlock h5    { font:10px tahoma; font-weight:bold; margin:0 0 2px 5px; padding:0; }

 .meteoBlock img    { float:left; padding:0; margin:0; }

 

 .pixDayBlock    { margin:0; padding:20px 0 0 29px; background:url("../images/bgPixOfTheDay.gif") no-repeat;}



 .newsBlock      { border:1px solid; position:relative; width:239px; padding:0 0 25px 0; margin:0; background:url("../images/bottomLittleBlock.gif") no-repeat bottom; text-align:left; }

 .newsBlock h3    { position:relative; display:block; width:100%; height:23px; background:url("../images/titleNews.gif") no-repeat; margin:0; padding:0; }

 .newsBlock h3 span   { position:relative; display:none; }

 .newsBlock p    { padding: 10px; margin:0; }

 .newsBlock img    { float:left; margin: 0 5px 5px 0; }

 .titleNews     { margin:0; padding:0; font:13px arial; font-weight:bold; }

 .newsBlock ul     { margin: 7px; padding:0 0 0 19px; }

 .newsBlock li    { display:list-item; list-style-image: url("../images/arrowBlack.gif"); }

 

 .docBlock     { position:relative; width:469px; padding:0 0 23px 0; margin:0; background:#D3D4D4 url("../images/bgBottomTable.gif") no-repeat bottom; text-align:left; }

 .docBlock h3    { position:relative; display:block; width:100%; height:23px; background:url("../images/titleDocuments.gif") no-repeat; margin:0; padding:0; }

 .docBlock h3 span   { position:relative; display:none; }

 .docBlock table    { border-bottom:1px solid #AFAFAF; }

 .docMaskBlock    { position:relative; width:469px; height:252px; margin:0; padding:0; overflow:auto;}

 .docMaskBlock table   { background-color:#E9E9E9; }

 .docMaskBlock td   { border-bottom:1px dotted #AFAFAF; height:27px; }

Sol@rweb
Mar 21 2005, 01:39 PM
Mdr ui...

Jsais pas si t'as essayé de te mettre a notre place...

Tu crois vraiement que jvé me faire chier a tout lire ?
ace5150
Mar 21 2005, 01:43 PM
J'en demande pas tant un simple copier coller m'aurai suffit mais bon wink.gif
Sol@rweb
Mar 21 2005, 01:55 PM
Pour moi ty arrivera pas a taton a régler ton probleme soit tu mets un attributs soit tu en mets pas
CODE


body {

position:relative;

width:98%;

height:100%;

max-height:100%;

min-height:100%;

margin:0;

padding:0;

background:url("../images/bgFull.gif") repeat-x #442E0A;

font:11px tahoma;

font-weight:normal;

text-align:center;

}


Alors on va commencer par la...

jvois pas pkoi tu met une position dans un body, de meme pour hauteur largeur... le padding 0 sert a rien aussi ( je crois ) conclusion :

CODE
body {

margin:0;

background:url("../images/bgFull.gif") repeat-x #442E0A;

font:11px tahoma;

font-weight:normal;

text-align:center;

}


Et l'autre...

CODE
.containerBlock {

position:relative;

width:762px;

max-height:100%;

min-height:100%;

height:100%;

margin:0 auto;

padding:0;

background:url("../images/bgContainerBlock.gif") no-repeat #fff;

}


Alors le position sert pas a grand chose puisque tu t'en sert meme pas ( je vois pas de top, right, left... )
Pour la hauteur va falloir choisir pour IE tu peux mettre seulement height 100 % vu qu'il prend pas les 2 autres en comptes et pour mozilla tu peux mettre les deux autres mais pas le height.

Et sinon je sais pas quelle version c'est de netscape mais si c'en est une vieille qui respecte pas les standards...

Vala +
nanoum
Mar 23 2005, 06:53 AM
le padding:0 sert pour le body :wink:

certains navigateurs ont de base une marges d'autres un padding au body

sinon, effectivement tes position ne semblent pas utiles ici tout comme les min-height ou max-height
comme je te l'ai déjà indiqué, la syntaxe exact pour les images de fond est sans les guillemets sans quoi tes images risquent de ne pas apparaître sur certains navigateurs

j'ai testé ton code, en ajoutant height:100% sur la balise html cela semble fonctionner

CODE
body {

width:98%;

height:100%;

margin:0;

padding:0;

background:url(../images/bgFull.gif) repeat-x #442E0A;

font:11px tahoma; font-weight:normal;

text-align:center;

}

html {

height:100%;

}

.containerBlock {

width:762px;

height:100%;

margin:0 auto;

padding:0;

background:url(../images/bgContainerBlock.gif) no-repeat #fff;

}



a+ smile.gif
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-2009 Invision Power Services, Inc.