28120 sujets

CSS et mise en forme, CSS3

[RESOLU] Mise en forme ccs bug sous firefox

Bonjour à tous,

je fais le site de ma petite fille et j'ai plusieurs petits problemes de rendu sous firefox que je nai pas sous IE6 (IE7 jai pas testé).
http://jolienell.free.fr/index.php

1) J'ai un bloc div menu qui decale mon image (le demi cercle vert)
2) la class pseudo (couleur soulignement) s'affiche bien sur IE mais pas sous firefox
3) dernier probleme c'est avec lightwindow (http://stickmanlabs.com/lightwindow/) sur la premier page quand vous cliquez sur signez mon livre d'or la "popup" souvre tout le site doit resté en arriere plan mais pas ma galerie image(flash) est ce que vous avez eu deja eu ce probleme pour ceux qui connaisse ce petit programme.

LE CODE HTML
<!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>
<!-- JavaScript -->
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>

<link rel="stylesheet" type="text/css" href= "style_div.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le Jardin de Nell</title>
</head>
<div id="hautconteneur">
<div id="conteneur">
<div id="header"></div>	  
<!-- fin header -->

<div id="menu">
	  <ul id="menuhaut">
			<li><a href="index.php">Mes photos</a></li>
			<li><a href="videos.php">Mes Vidéos</a></li>
			<li><a href="livredor.php">Mon livre d'or</a></li>
	</ul>
</div><!-- fin menu -->
<div id="gauche">
	  <div class="messagehaut"></div>
	  <div class="messagemilieu">
	  <table width="93%" border="0">
  <tr>
    <td>
<?php
mysql_connect("xxx ", "xxxx", "xxxxx");
mysql_select_db("livredor");

$reponse = mysql_query('SELECT * FROM livredor ORDER BY id DESC LIMIT 0,2');

while ($donnees = mysql_fetch_array($reponse))
{
    echo '<span class="pseudo">Par ' . $donnees['pseudo'] . '</span> <p>' . $donnees['message'] . '</p></div>';
}
mysql_close();?>
</td>
  </tr>
</table>
 </div>
	  <div class="messagebas"></div>
      <div align="center"><a href="signelivre.php" title="Signez mon livre d'or" params="lightwindow_width=607" class="lightwindow page-options">SIGNEZ MON LIVRE D'OR</a></div>
  </div>
	  <!-- fin gauche -->
	  
    <div id="centre">
  	 <table width="90%" border="0">
  <tr>
    <td align="center"><img src="imagesite/titrealbum.gif" /></td>
  </tr>
  <tr>
    <td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
  width="100%" 
  height="600" 
  align="texttop">
  <param name="menu" value"false" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="expose/swf/expose.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#F8F79F" />
  <param name="FlashVars" value="bgColor=ffffff&albumsXMLURL=expose/xml/albums.xml&stringsXMLURL=expose/config/strings.xml&formatsXMLURL=expose/config/formats.xml&configXMLURL=expose/config/config.xml&baseXMLURL=expose/xml/&baseImageURL=expose/img/&baseVideoURL=expose/img/&baseAudioURL=expose/img/" />
  <embed src="expose/swf/expose.swf" 
  menu="false"
  quality="high" 
  bgcolor="#F8F79F" 
  width="100%" 
  height="600"
  flashvars="bgColor=ffffff&albumsXMLURL=expose/xml/albums.xml&stringsXMLURL=expose/config/strings.xml&formatsXMLURL=expose/config/formats.xml&configXMLURL=expose/config/config.xml&baseXMLURL=expose/xml/&baseImageURL=expose/img/&baseVideoURL=expose/img/&baseAudioURL=expose/img/" 
  align="texttop" allowscriptaccess="sameDomain" 
  type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
  </tr>
</table>

  	</div><!-- fin centre -->

  	  
  	<div id="pied">
	<table width="100%" border="0">
  <tr>
    <td width="50%" valign="middle"><div align="right"><img src="imagesite/train.gif" /></div></td>
	<td width="50%" valign="middle"><div align="left">Powered by papa</div>
	  </td>
  </tr>
</table>
</div> <!-- FIN pied -->  
</div> <!-- FIN CENTRE -->
	  
</div>	  <!-- FIN CONTENEUR -->
</div>      <!-- FIN hautCONTENEUR -->

</body>
</html>


LE CODE CSS

body {
font-family:Helvetica,Verdana, Arial,  sans-serif;
margin: 0;
padding: 0;
background-color:#F8F79F;
font-size:14px;
}
#hautconteneur{
background:url(imagesite/fondhaut.gif) repeat-x;
width:100%;
height:146px;
}
#conteneur {
width:887px;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color:#F8F79F;
}
#header{
background:url(imagesite/header.gif) no-repeat;
height:146px;
width:887px;
margin:0;
padding:0;
}
#menu{
margin:0;
padding:0;
height:55px;
width:887px;
background-color:#F8F79F;
background:url(imagesite/menu.gif) no-repeat;
}
#centre {
background-color:#F8F79F;
margin-left:225px;
padding-top:10px;
}
#gauche {
width:220px;
clear:both;
float:left;
}
ul#menuhaut{
margin-left:220px;
margin-top:0px;
padding:0;
list-style-type:none;
}
ul#menuhaut li{
float:left;
margin: 0 0 5px 0;
padding:0;
text-decoration:inherit;
}
ul#menuhaut li a{
display: block;
font-size:14px;
color:#27805A;
font-weight:bold;
width: 170px;
line-height: 55px;
text-indent: 58px;
text-decoration: none;
background: url(imagesite/boutonmenu.gif) no-repeat 0 0 ; 
}
ul#menuhaut li a:hover
{
background: url(imagesite/boutonmenu.gif) no-repeat 0 -60px; 
}
ul#menuhaut li a:active
{
background: url(imagesite/boutonmenu.gif) no-repeat 0 -60px;
}

.messagehaut{
background:url(imagesite/hautmessage.gif) no-repeat;
height:108px;
}
.messagemilieu{
background:url(imagesite/milieumessage.gif) repeat-y;
padding-left:25px;
font-size:12px;
color:#006600;
text-align:justify;}
.messagebas{
background:url(imagesite/basmessage.gif) no-repeat;
height:58px;}
#pied {
height:30px;
background-color:#F8F79F;
clear:both;
padding-top:25px;
font-size:9px;
color:#999999;
}
<!-- AUTRES MISE ENPAGE -->
.pseudo{
font-size:11px;
color:#2A6DE8;
font-weight:bold;
text-decoration:underline;
}
.livredormessage{
font-size:12px;
color:#006600;
text-align:justify;
}
#contenumessage {
padding:5px;
margin-bottom:5px;
border:#A1C523 solid 2px;
text-align:justify;
}
a{
text-decoration:none;
}

Modifié par lgm243 (17 Nov 2007 - 12:47)
Hello,

lgm243 a écrit :
1) J'ai un bloc div menu qui decale mon image (le demi cercle vert)
2) la class pseudo (couleur soulignement) s'affiche bien sur IE mais pas sous firefox
3) dernier probleme c'est avec lightwindow (http://stickmanlabs.com/lightwindow/) sur la premier page quand vous cliquez sur signez mon livre d'or la "popup" souvre tout le site doit resté en arriere plan mais pas ma galerie image(flash) est ce que vous avez eu deja eu ce probleme pour ceux qui connaisse ce petit programme.


1) Tu n'avais pas mis toutes les marges de ton ul à 0 (enfin sauf celle de gauche) :

ul#menuhaut {
margin: 0 0 0 220px;
padding: 0;
list-style-type: none;
}


2) Un problème assez bête : les commentaires en CSS s'écrivent entre /* et */. Firefox ne lisait pas la fin du CSS à cause de ça.

/* AUTRES MISE ENPAGE */
.pseudo {
font-size: 11px;
color: #2A6DE8;
font-weight: bold;
text-decoration: underline;
}


3) C'est un problème connu, flash et les boutons select restent au premiers plan, la solution est de les cacher lorsque l'on affiche la box et les réafficher à la fermeture. Ca a l'air d'avoir été déjà prévu :

Dans lighwindow.js, ligne 229, change la valeur de la variable hideFlash :

hideFlash : true,

Modifié par TheMonkeySan (17 Nov 2007 - 12:41)
Sujet clos
Aller à