Modification d'un CSS pour base de donnée de films

Question

yoyo77yo

5 Feb 2010 à 14:13

Bonjour à tous, je suis nouveau sur le forum, c'est un ami qui m'a conseillé votre "FOFO".

Voilà je suis nouveau dans la conception de site, et j'ai un petit soucis : j'ai récuperé un fichier CSS que j'ai un peut modifié pour le mettre au couleurs et emplacement voulu : seulement voilà en fonction des écrans et des navigateurs, tout se chamboule : rien n'est a sa place mon site est : http://killers77.free.fr et j'ai IE8 (pas de soucis chez moi) mais sous IE6 ou FIREFOX et en fonction de la taille des écrans, des choses ne vont pas alors qu'en theorie on m'a dit une fois qu'un code bien fait devrait aller sur tout les affichages sans PB : voici le code de mes 2 fichiers principaux.

index.php =


<!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">
<!--
############################################################

Page générée par Filmotech version 2.4.2

Pour plus d'informations, consultez  http://www.filmotech.fr
 

(c) 2007-2009 Pascal PLUCHON

############################################################
-->
<?php require_once("config.inc.php"); ?>
<?php
$genre = "Tous";
$search = "";
$n_derniers = "10";
$afficher_entetes = false;
$titre_fenetre = "FILMOTECH";
$titre_liste = "Liste des films";
$infos = false;
$infos_libelle = "";
$auteur = false;
$auteur_nom = "";
$auteur_mail = "";
$lien_retour = false;
$lien_retour_nom = "";
$lien_retour_url = "";
$afficher_prets = false;
$afficher_non_vu = false;
$afficher_titre_haut = false;
$titre_haut = "";

# Liste des genres
mysql_select_db($database_fmt, $fmt);
$query_Recordset2 = "SELECT DISTINCT Genre FROM " . $nom_table . " ORDER BY Genre";
$Recordset2 = mysql_query($query_Recordset2, $fmt) or die(mysql_error());
$row_Recordset2 = mysql_fetch_assoc($Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2);

# Les 10 dernières entrées
mysql_select_db($database_fmt, $fmt);
$query_Recordset3 = "SELECT ID, TitreVF FROM " . $nom_table . " ORDER BY EntreeDate DESC, ID DESC LIMIT " . $n_derniers;
$Recordset3 = mysql_query($query_Recordset3, $fmt) or die(mysql_error());
$row_Recordset3 = mysql_fetch_assoc($Recordset3);
$totalRows_Recordset3 = mysql_num_rows($Recordset3);

# Liste des films
if ( (isset($_POST['genre'])) && ($_POST['genre']!="") ) {
	$genre = stripslashes(urldecode($_POST['genre']));
	$query_Recordset1 = sprintf( "SELECT ID, TitreVF, Genre, FilmVu, PretEnCours FROM %s WHERE Genre LIKE '%s' ORDER BY TitreVF", $nom_table , $genre ); }
elseif ( (isset($_POST['search'])) && ($_POST['search']!="") ) { 	$search = stripslashes(urldecode($_POST['search']) );
 $query_Recordset1 = sprintf( "SELECT ID, TitreVF, Genre, FilmVu, PretEnCours FROM %s WHERE %s LIKE '%s' ORDER BY TitreVF", $nom_table , $_POST['zonerecherche'] , '%' . addslashes($search) . '%' ); } 
else $query_Recordset1 = "SELECT ID, TitreVF, Genre, FilmVu, PretEnCours FROM " . $nom_table . " ORDER BY TitreVF";

mysql_select_db($database_fmt, $fmt);
$Recordset1 = mysql_query($query_Recordset1, $fmt) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="http://www.filmotech.fr">
<title><?php echo($titre_fenetre); ?></title>
<link href="filmotech_css.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
</head>

<body>
<div id="page">
  
  <div id="top" onclick="MM_goToURL('parent','index.php');return document.MM_returnValue"><?php if ($afficher_titre_haut) { echo("<h1>".$titre_haut."</h1>"); } ?></div>

<div id="wrapper">

<p><script language="JavaScript1.2">
<!-- Begin
//largeur du curseur (en pixels)
var sliderwidth=330
//hauteur du curseur (Netscape)
var sliderheight=145
//vitesse de défilement
var slidespeed=4

//les images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a><img src="/New_images/1.jpg" border=1></a>'
leftrightslide[1]='<a><img src="/New_images/2.jpg" border=1></a>'
leftrightslide[2]='<a><img src="/New_images/3.jpg" border=1></a>'
leftrightslide[3]='<a><img src="/New_images/4.jpg" border=1></a>'
leftrightslide[4]='<a><img src="/New_images/5.jpg" border=1></a>'
leftrightslide[5]='<a><img src="/New_images/6.jpg" border=1></a>'
leftrightslide[6]='<a><img src="/New_images/7.jpg" border=1></a>'
leftrightslide[7]='<a><img src="/New_images/8.jpg" border=1></a>'
leftrightslide[8]='<a><img src="/New_images/9.jpg" border=1></a>'
leftrightslide[9]='<a><img src="/New_images/10.jpg" border=1></a>'
/*
dynamicdrive.com
*/
///////Ne rien modifier sous cette ligne////////////////////////////////////

var copyspeed=slidespeed
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+"&nbsp;&nbsp;"

if (document.all){
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}

function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}

function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2

// End -->
</script>
<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer>
</ilayer></p>
<div id="main">
<?php if ($lien_retour) { ?><div class="retour"><a href="<?php echo($lien_retour_url); ?>"><?php echo($lien_retour_nom); ?></a></div><?php } ?>
<h1><?php echo($titre_liste); ?><?php if ($genre != "Tous") echo( " : <span class='selection'>" . $genre . "</span>" ); ?><?php if ($search != "") echo( " contenant <span class='selection'>" . $search . "</span>" ); ?></h1>
<?php if (($genre != "Tous") || ($search != "")) echo( "<div class='retour'><a href=''>Tout afficher</a></div>" ); ?>
<?php if ($totalRows_Recordset1>0) { ?>
<table width="438" cellpadding="0" cellspacing="0" id="listefilms">
<?php if ($afficher_entetes) { ?>
<tr><?php if ($afficher_prets || $afficher_non_vu) { ?><th width="20">&nbsp;</th><?php } ?><th width="400">Titre</th><th width="4">&nbsp;</th></tr>
<?php } ?>
<?php do { ?>
  <tr class="ligne" onclick="MM_goToURL('parent','filmotech_detail.php?id=<?php echo($row_Recordset1['ID']); ?>');return document.MM_returnValue" onmouseover="className='ligne_on'" onmouseout="className='ligne'">
    
  <?php if ($afficher_prets || $afficher_non_vu) { ?>
  <td class="Puces">
  <?php 
	if ( ($afficher_prets) && ($afficher_non_vu) ) {
			if ( ($row_Recordset1['FilmVu'] == 'NON') && ($row_Recordset1['PretEnCours'] == 'OUI') )
				echo ( '<img src="filmotech_img/fmt_point_vert_orange.png" alt="Film prêté et non visionné" />' );
			elseif  ($row_Recordset1['FilmVu'] == 'NON')
				echo ( '<img src="filmotech_img/fmt_point_vert.png" alt="Film non visionné" />' );
			elseif ($row_Recordset1['PretEnCours'] == 'OUI')
				echo ( '<img src="filmotech_img/fmt_point_orange.png" alt="Prêt en cours" />' );
		} 
		elseif ( ($afficher_prets) && ($row_Recordset1['PretEnCours'] == 'OUI') )
			echo ( '<img src="filmotech_img/fmt_point_orange.png" alt="Prêt en cours" />' );
		elseif ( ($afficher_non_vu) && ($row_Recordset1['FilmVu'] == 'NON') )
			echo ( '<img src="filmotech_img/fmt_point_vert.png" alt="Film non visionné" />' );
?>
  </td>
  <?php } ?>
    
  <td class="TitreVF"><?php echo( $row_Recordset1['TitreVF'] ); ?></td>
  <td>&nbsp;</td>
  </tr>
  <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
<tr>
<?php if ($afficher_prets || $afficher_non_vu) { ?>
<td colspan="3" class="total"><?php printf( "%d film(s)" , $totalRows_Recordset1 ); ?></td>
</tr><tr>
<td colspan="3" class="Legende">
<?php 
	if ( ($afficher_prets) && ($afficher_non_vu) ) {
			echo ( '<img src="filmotech_img/fmt_point_orange.png" alt="Prêt en cours" />' );?>
			&nbsp;Prêt en cours | <?php
			echo ( '<img src="filmotech_img/fmt_point_vert.png" alt="Film non visionné" />' );?>
			&nbsp;Film non visionné <?php }
	elseif ($afficher_prets) {
			echo ( '<img src="filmotech_img/fmt_point_orange.png" alt="Prêt en cours" />' );?>
			&nbsp;Prêt en cours <?php }
		elseif ($afficher_non_vu) {
			echo ( '<img src="filmotech_img/fmt_point_vert.png" alt="Film non visionné" />' );?>
			&nbsp;Film non visionné <?php }
?>
</td>
<?php } else { ?>
<td colspan="2" class="total"><?php printf( "%d film(s)" , $totalRows_Recordset1 ); ?></td>
<?php } ?>
</tr>
</table>
<?php } else { ?>
<p>Aucun film à afficher...</p>
<?php } ?>
<p>&nbsp;</p>
</div> <!-- End #main --><div id="sidebar">
<div id="recherche">
<h2>Recherche</h2>
<form id="form2" name="form2" method="post" action="">
  <p>
    <input name="zonerecherche" type="radio" value="TitreVF" checked />
    Titre  
    <input name="zonerecherche" type="radio" value="Acteurs"/>
Acteurs</p>
  <p>
    <input name="zonerecherche" type="radio" value="Realisateurs"/>
    R&eacute;alisateurs  </p>
  <p align="center">
    <input type="text" name="search" />
  </p>
  <p align="center">
    <input name="Submit" type="submit" value="Go" /></p></form></div>
<div id="genre">
<h2>Recherche par genre</h2>
<form id="form1" name="form1" method="post" action="">
  <select name="genre" onchange="javascript:form1.submit();">
  <option value="" <?php if ($genre==$row_Recordset2['Genre']) echo( 'Selected="selected"' ); ?>>Tous</option>
<?php if ($totalRows_Recordset2>0) do { ?>
    <?php if ($row_Recordset2['Genre']!="") { ?>
		<option value="<?php echo( $row_Recordset2['Genre'] ); ?>" selected="selected" <?php if ($genre==$row_Recordset2['Genre']) echo( 'Selected="selected"' ); ?>>
			<?php echo( $row_Recordset2['Genre'] ); ?></option><?php } ?>
<?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); ?>
  </select>
</form>
<p>&nbsp;</p>

</div>
<div id="dernieresentrees">
<h2 align="center">Nouveaut&eacute;s</h2>
<?php if ($totalRows_Recordset3>0) { ?>
<ul>
<?php do { ?>
<li><a href="filmotech_detail.php?id=<?php echo($row_Recordset3['ID']); ?>"><?php echo($row_Recordset3['TitreVF']); ?></a></li>
<?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?>
</ul> 
<?php } ?>
</div>
</div> <!-- End #sidebar -->

</div> <!-- End #wrapper -->

<div id="footer">
<p>&nbsp;&nbsp;
<?php if ($infos) echo( $infos_libelle . " | " ); ?>
<?php if ($auteur) echo( '<a href="mailto:' . $auteur_mail . '">' . $auteur_nom . "</a> | "); ?>
P</p>
</div> <!-- End #footer -->

</div>
<p>&nbsp;</p> 
<!-- End #page -->
</body>
</html>
<?php mysql_free_result($Recordset1); mysql_free_result($Recordset2); mysql_free_result($Recordset3); ?>

filmotech_css.css


/*
############################################################

Feuille de style générée par Filmotech version 2.4.2

Pour plus d'informations, consultez  http://www.filmotech.fr
 

(c) 2007-2009 Pascal PLUCHON

############################################################
*/
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #FFFFFF; color: #000000;}
ul { list-style: none; }
ul li { list-style: none; }
a:link, a:visited { color: #000066; text-decoration: none }
a:hover { color: #BBBBBB; text-decoration: none; }
.left { float: left; }
.right { float: right; }
#page { width: 920px; margin: 0 auto; position: relative; background: transparent url(filmotech_img/fmt_fond2.png) repeat-y top center; }
#top { width: 900px; background-color: #3399CC; height: 150px; margin: 0 auto;
background-image: url(filmotech_img/fmt_haut.png); background-repeat: no-repeat; background-position: center top; }
#top h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 6em; font-weight: bold; color: #FFFFFF; text-align: left; margin: 0; padding: 20px; }
#wrapper {
	width: 900px;
	margin: 10px auto 50px auto;
	background: transparent url(filmotech_img/films.png) repeat-y top center;
	background-repeat: repeat-x;
	color: #000;
}
#main { width: 460px; Position: relative; float:left; margin-left: 210px; }
#main h1 { font-size: 1.2em; color: #FFFFFF; }
#sidebar { width: 180px; Position: relative; float:left; margin-left: 20px; }
#sidebar p { margin: 10px; }
#sidebar h2 { color: #FFFFFF; font-size: 1.1em; font-weight: bold; margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0;
padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 8px; background-color: #B20A09; }
#sidebar a { color: #000066; }
#sidebar a:hover { color: #BBBBBB; }
#sidebar ul { margin-top: -7px; margin-left:0; padding-top: 0; padding-right: 0; padding-bottom: 4px; padding-left: 0; }
#sidebar li { background: transparent url(filmotech_img/fmt_puce.png) no-repeat 10px 7px; padding: 3px 4px 3px 20px; }
#liens, #genre, #recherche, #affiche, #dernieresentrees, #fichefilm, #fichedvd, #perso_1, #perso_2 { border: thin solid #000; margin-bottom: 5px; background: #FFFFFF;  }
#sidebar select { margin-bottom: -15px; width: 160px; }
#sidebar form {    margin-left: 10px; }
#form2 { font-family:Arial, Helvetica, sans-serif }
#recherche { padding-bottom: 15px; }
#recherche input { margin-top: 5px; }
#affiche img { display: block; margin: 10px auto; }
.Puces { width: 15px; font-weight: bold; }
.TitreVF { width: 400px; font-weight: bold; }
.Genre { width: 300px; }
.selection { color: #CC3333; }
.TitreDetail { font-weight: bold; }
.LigneDetail { text-align: justify; }
.LibelleDetail { font-weight: bold; vertical-align: top; width: 100px; background-color: #EEEEEE; }
.ligne { background-color: #FFFFFF; }
.ligne_on { background-color: #B20A09; }
.total { color: #999999; text-align: center; margin-top: 100px; border-top-width: thin; border-top-style: solid; border-top-color: #CCCCCC; }
#listefilms { border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #999999; border-bottom-color: #999999; }
#listefilms th { font-weight: bold; text-align: center; background: #B20A09; color:#FFFFFF; }
#detailfilm td { margin: 3px; font-size: 1.1em; }
#footer { width: 920px; padding-top: 10px; clear: both; }
#footer p { width: 884px; margin: 0 auto; background: #606666; color: #FFFFFF; padding: 6px 16px 6px 0; text-align: right; font-weight: bold; }
#footer a { color: #FFFF33; }
#footer a:hover  { color: #FF9933; }
.retour { text-align: center; }

Pouvez vous m'aider SVP[/i][/i]
Modifié par yoyo77yo (05 Feb 2010 - 14:28)

Mikachu

5 Feb 2010 à 14:27

Salut et bienvenue ici,

Comme tu dois t'en douter, la plupart des sujets ouverts ici sont des demandes d'aide, aussi pourrais-tu éditer ton message initial afin de rendre ton titre plus explicite.

Sinon ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

Merci de ta compréhension. Smiley cligne

yoyo77yo

6 Feb 2010 à 19:15

désolé je relance car toujour pas de reponse : merci bien

fvsch

6 Feb 2010 à 22:00

Bonsoir,

yoyo77yo a écrit :
on m'a dit une fois qu'un code bien fait devrait aller sur tout les affichages sans PB

Et la marmotte, elle met le chocolat dans le papier...

Enfin, ça dépend de ce que tu appelles «bien codé». Un code produit par un expert va permettre un affichage optimisé dans différentes résolutions, un affichage optimisé sur smartphone, etc. Mais ça demande beaucoup de boulot.

Pour revenir au problème lui-même:
- je n'ai pas testé sous IE6, mais tu as sans doute un problème de doubled float-margin bug concernant div#main (je te laisse chercher);
- sous Firefox, ça a l'air pas mal, juste que la marge de gauche de div#main est un peu trop faible;
- toujours sous Firefox, je n'ai pas vu de différence particulière quand on diminue la largeur de la fenêtre du navigateur.

Sujet clos

CSS et mise en forme, CSS3

Modification d'un CSS pour base de donnée de films