encore et toujour un pb d'incompatibilité

encore et toujour un pb d'incompatibilité - HTML/CSS - Programmation

Marsh Posté le 27-04-2007 à 12:38:26    

bonjour à tous
voila g un petit soucis d'affichage d'image entre firefox et IE sachant que sous firefox tout marche impec
le probleme d'affichage se situe au menu et sur le corp du text:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>site </title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.        <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="test.css" />
  7.    </head>
  9.    <body>
  10.        
  11.        <!-- en-tête -->
  13.        <div id="en_tete">
  15.        </div>
  16.        <div >
  17.        <MARQUEE>website</MARQUEE>
  18.        </div>
  19.        <!-- menu -->
  21.          <div>
  22.            <ul id="menu">
  23.               <li><a href="page.php">lien1</a></li>
  24.               <li><a href="page.php">lien2</a></li>
  25.               <li><a href="page.php">lien3</a></li>
  26.               <li><a href="page.php">lien4</a></li>
  27.               <li><a href="page.php">lien5</a></li>
  28.             </ul>
  29.          </div>
  31.        <!-- corps -->
  33.        <div id="corps">
  34.            <h1>Lorem ipsum</h1>
  35.            <p>
  36.                Lorem ipsum<br />
  37.                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pretium facilisis pede.
  38.                Sed luctus. Mauris ullamcorper. Cras pharetra dapibus nibh. Vivamus nunc enim, condimentum et, congue vel, iaculis et, urna.
  39.                Maecenas non dolor sit amet enim aliquet sodales. Quisque vitae purus. Aliquam vehicula magna non elit. Morbi luctus aliquam felis.
  40.                Nunc tortor nunc, commodo a, commodo eu, volutpat vehicula, massa. Mauris pharetra interdum erat.
  41.            </p>
  42.      
  43.            <h2>Aliquam aliquam</h2>
  44.            <p>
  45.                Aliquam aliquam, arcu vel porttitor pharetra, erat augue aliquet ligula, sed bibendum leo ante quis nunc. Sed nisi metus, convallis sit amet,
  46.                varius in, egestas quis, risus. Etiam a quam. Nulla facilisi. Mauris posuere, lorem eget commodo sodales, ante nisl tincidunt magna,
  47.                nec porttitor massa ante in erat. Etiam ultrices leo quis arcu euismod feugiat. Phasellus eleifend quam quis quam. Nunc condimentum <br />
  48.            </p>
  49.        </div>
  51.        <!-- pied de page -->
  53.        <div id="pied_de_page">
  54.            <p>Copyright </p>
  55.        </div>
  57.    </body>
  58. </html>


css:

Code :
  1. #menu
  2. {   float: left;
  3.    margin: 0;
  4.    padding:0;
  5.    width:  120px;
  6.    border : solid 1px #000000;
  7.    border-bottom: none;
  8.    background-image: url("../IMAGE/transparent.png" );
  9. }
  11. #menu li
  12. {
  13.    list-style-type:none;
  14.    margin: 0;
  15.    padding: 0;
  16.    border-bottom: 2px solid #000000;
  17. }
  19. #menu a
  20. {
  21.    text-decoration:none;
  22.    color:#000000;
  23.    display:block;
  24.    padding-left:1.5em;
  25. }
  27. #menu a:hover
  28. {
  29.    background-image: url("../IMAGE/transparent.png" );
  30. }
  32. /* corps */
  34. #corps
  35. {
  36.    margin-left: 140px;
  37.    margin-bottom: 20px;
  38.    padding: 5px;
  39.  
  40.    color: #000000;
  41.    /*background-color: #626262;*/
  42.    background-image: url("../IMAGE/transparent.png" );
  43.    background-repeat: repeat-x;
  44.  
  45.    border: 2px solid black;
  46. }


voila je vous remercie d'avance  :)

Reply

Marsh Posté le 27-04-2007 à 12:38:26   

Reply

Marsh Posté le 27-04-2007 à 13:22:45    

t'as un lien qu'on voit ce que ça donne ?
ton corps tu peux lui mettre un float:right;
ton

Code :
  1. <div>
  2.           <ul id="menu">
  3.               <li><a href="page.php">lien1</a></li>
  4.               <li><a href="page.php">lien2</a></li>
  5.               <li><a href="page.php">lien3</a></li>
  6.               <li><a href="page.php">lien4</a></li>
  7.               <li><a href="page.php">lien5</a></li>
  8.            </ul>
  9. </div>


je te conseille de la remplacer par:

Code :
  1. <div id="menu">
  2.           <ul>
  3.               <li><a href="page.php">lien1</a></li>
  4.               <li><a href="page.php">lien2</a></li>
  5.               <li><a href="page.php">lien3</a></li>
  6.               <li><a href="page.php">lien4</a></li>
  7.               <li><a href="page.php">lien5</a></li>
  8.           </ul>
  9. </div>

Message cité 1 fois
Message édité par dartyduck le 27-04-2007 à 13:23:40

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 27-04-2007 à 13:33:28    

dsl mais je travail en local sur ma machine et apparement pour l'image du corp g trouver le probleme  
IE n'aime pas les images pour faire la transparence
 
sinon pour le menu il est en CSS il est aussi transparent pour le faire j'ai utilisé ceci:
 

Code :
  1. -moz-opacity:0.5;
  3. opacity: 1.5;
  5. filter:alpha(opacity=40);


 
mais le probleme est qu'il ne change pas de couleur quand on passe dessus

Message cité 1 fois
Reply

Marsh Posté le 27-04-2007 à 14:05:01    

dartyduck a écrit :


Code :
  1. <div id="menu">
  2.           <ul>
  3.               <li><a href="page.php">lien1</a></li>
  4.               <li><a href="page.php">lien2</a></li>
  5.               <li><a href="page.php">lien3</a></li>
  6.               <li><a href="page.php">lien4</a></li>
  7.               <li><a href="page.php">lien5</a></li>
  8.           </ul>
  9. </div>



 
UL est du type block, la majorité du temps la div autour sera inutile.
 

sebP59 a écrit :

dsl mais je travail en local sur ma machine et apparement pour l'image du corp g trouver le probleme  
IE n'aime pas les images pour faire la transparence
 
sinon pour le menu il est en CSS il est aussi transparent pour le faire j'ai utilisé ceci:
 

Code :
  1. -moz-opacity:0.5;
  3. opacity: 1.5;
  5. filter:alpha(opacity=40);


 
mais le probleme est qu'il ne change pas de couleur quand on passe dessus


 
Mozilla embarque opacity, de plus tu as trois valeurs différentes. Opacity est égale à 150% dans ton cas (  :??: ) alors que -moz-opacity et filter valent respectivement 50% et 40%.
Autre chose, marquee n'existe pas en XHTML, et déclarer un site en XHTML 1.1 aujourd'hui (et surement demain) est inutile, et enfin, cherche « css shorhands » dans google ;)


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 27-04-2007 à 14:18:48    

oui dsl pour l'opacity c'était juste un exemple je les modifié sinon c bon j'ai regler mes probleme.
J'ai regarder pour css shorhands mais je ne vois pas ou tu veux en venir
Mais sinon merci pour vos message


Message édité par sebP59 le 27-04-2007 à 14:19:09
Reply

Marsh Posté le 27-04-2007 à 14:47:52    

Code :
  1. #corps
  2.     {
  3.       margin-left: 140px;
  4.       margin-bottom: 20px;
  5.       padding: 5px;
  6.      
  7.       color: #000000;
  8.       /*background-color: #626262;*/
  9.       background-image: url("../IMAGE/transparent.png" );
  10.       background-repeat: repeat-x;
  11.      
  12.       border: 2px solid black;
  13.     }


 
et
 

Code :
  1. #corps
  2.     {
  3.       margin: 0 0 20px 140px;
  4.       padding: 5px;
  6.       color: #000000;
  8.       background: url("../IMAGE/transparent.png" ) repeat-x;
  9.       border: 2px solid black;
  10.     }


 
Sont équivalents, seulement j'utilise les shorthands dans ma version


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed