28172 sujets

CSS et mise en forme, CSS3

Bien le bonjours !

Je pense que mon problème n'a pas besoin d'explication... enfin... je vous laisse regarder sur :le site

Sous FF/Safari pas de soucis ! Ils m'affichent exactement ce que je veux !
Mais sous IE... Smiley bawling je désespères !

Vous avez le site et je vous mets le code dans la suite:
juste pour info: ce code viens se chargé en include dans une page

<style type="text/css">
#container{
	margin:auto;
	width:831px;
}
.les_flotters{
	float:left;
	margin-left:8px;
	margin-right:8px;
	margin-bottom:18px;
	height:164px;;
}
img{
	border:0px;
}

#box {
	z-index:3;
}

#box a {
	color:#ffffff;
	text-decoration:none;
	display:block;
}

#box a:hover {
	color:black;
	width:261px;
}

#box a span {
	display:none;
}

#box a:hover span {
	color:black;
	display:block;
	margin-top:-164px;
}

.work_cat{
	position:absolute;
	font-family:Verdana, Arial, sans-serif;
	font-weight:bold;
	font-size:16px;
	text-align:right;
	width:251px;
	margin-top:8px;
	
	
}
.work_title{
	position:absolute;
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	text-align:right;
	width:251px;
	margin-top:30px;
	
}

</style>
<div id="container">
		<? 
			require_once("global/database.php");
 			$sql = "SELECT * FROM `works` WHERE visibility='1' ORDER BY priority,id DESC";
 			$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

			// on cherche le nombre d entree dans la base de donee
			$sql_nbr = mysql_query($sql) or die('Erreur SQL nbr !<br>'.$sql.'<br>'.mysql_error());
			$nbr_rows = mysql_num_rows($sql_nbr);
			
			//----------[DEBUT BOUCLE]------------
			for($i=0; $i != $nbr_rows ; $i++) {
				while($data = mysql_fetch_assoc($req)) {
					echo('
						<div id="box" class="les_flotters">
							<a href="?p=5&vidz='.$data["id"].'"><img src="videos/'.$data["id"].'.jpg">
								<span>
									<p class="work_cat">'.$data["cat"].'</p>
									<p class="work_title">'.$data["title"].'</p>
									<img src="images/over.gif" />
								</span>
							</a>
						</div>
						');
				}
			}
			//------------[FIN BOUCLE]------------
			
		?>
</div>



Merci beaucoup de vous penchez sur mon problème, qui ne fait que d'augmenté mon désire d'allé dire 2 mots a bill Smiley fache !

Amicalement

Chum
Modifié par Chum (15 Feb 2008 - 12:57)
Bonjour,

Chum a écrit :

Merci beaucoup de vous penchez sur mon problème, qui ne fait que d'augmenté mon désire d'allé dire 2 mots a bill Smiley fache !


Hum... Désolé, mais disons que l'idée "d'aller dire 2 mots a bill" est amusante, étant donné que la page est faite n'importe comment (un vrai festival de ce qu'il ne faut pas faire, à vrai dire) Smiley ravi

Sérieusement: il faut tout reprendre, en se préoccupant d'abord d'utiliser HTML correctement. Je passe la main pour indiquer les ressources et tuoriels à consulter.
Modifié par Laurent Denis (14 Feb 2008 - 10:20)
Laurent Denis a écrit :
Bonjour,
Hum... Désolé, mais disons que l'idée "d'aller dire 2 mots a bill" est amusante, étant donné que la page est faite n'importe comment (un vrai festival de ce qu'il ne faut pas faire, à vrai dire) Smiley ravi

Sérieusement: il faut tout reprendre, en se préoccupant d'abord d'utiliser HTML correctement. Je passe la main pour indiquer les ressources et tuoriels à consulter.



L'idée c'est que j'ai du reprendre le code d'une personne qui bidouillait et j'ai du corrigé déjà beaucoup de truc pour qu'il m'affiche a peu près correctement le code !

mais bon je ne vais pas justifier mes erreurs... d'ailleurs je suis la pour apprendre Smiley cligne
Modifié par Chum (14 Feb 2008 - 14:16)
Comment je pourrais refaire ce code pour évité le absolute ?....
A ce que je lis ca pourrais être une source de problème...

Personne n'a une idée ?
Bon, je donne, heu, un peu l'avancée de mes recherches...

voilà le bout du code qui plantouille... du moins c'est ce que je crois...


.work_cat{
	position:absolute;
	font-family:Verdana, Arial, sans-serif;
	font-weight:bold;
	font-size:16px;
	text-align:right;
	width:251px;
	margin-top:8px;
}

.work_title{
	position:absolute;
	font-family:Verdana, Arial, sans-serif;
	font-size:12px;
	text-align:right;
	width:251px;
	margin-top:30px;
}


Je vais libérer le max de truc de ces 2 class... (genre les font-family...) et on verra ce qui cause problème...

La suite dans un nouvel épisode ^^
Dans l'épisode suivant vous aurez la possibilité exclusive de découvrir Jones avec kate au tribunal ! la partie 32 sur 103456 vous attend !!! palpitant non Smiley lol

Soyez nombreux a suivre la vie passionnantes du déboggage d'un site Smiley ravi

Amicalement

Chum
Bonjour,

Tu as un gros problème avec ton code HTML:

- pas valide (loin de là...);
- pas de Doctype (gros problème);
- pas d'élément html ( Smiley eek );
- un élément style placé dans le body;
- etc.

Bref, c'est un peu n'importe quoi. Ça n'est pas nécessairement la cause du problème de rendu observé, mais tenter de corriger un problème de rendu sans partir sur une base saine serait une bêtise.

Donc:
http://validator.w3.org

Et lire aussi:
http://blog.alsacreations.com/2006/10/23/296

Bonne continuation. Smiley smile
Modifié par Florent V. (15 Feb 2008 - 10:02)
En fait je voulais juste dire que cette page était en include d'une autre page... c'est juste le contenu !
c'est pourquoi il n'y a pas de doctype, et autre balise .

heu je crois que j'ai mal du m'exprimer.
Il y a une page (index.php) qui a le doctype, head, body,... ... et dans cette page il y a 3 zone:
1.Bandeau de tete
2.Menu
3.Contenu

Dans ces 3 zone viens se chargé les contenu différent suivant la page ou l'on est !

voila cette page qui charge les autres:
Je m'excuse déjà pour la taille de la page...


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

<link rel="shortcut icon" href="faviconV21.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="MUSIC VIDEO - COMMERCIAL - SHORT FILM - EXPERIMENTAL PRODUCTIONS">
<meta name="keywords" lang="fr-ch" content="video, filming, cam, graphisme, films, design, designer, film, camera, fashion, trailer, clip, commercial, ***, production, concept, movie, experimental, short, long, nyc, lowrider, pub, suisse, brian, friends, shooting, multimedia">
<META HTTP-EQUIV="Content-Language" content="fr-ch">
<meta name="reply-to" content="***@***.ch">
<meta name="category" content="Internet">
<meta name="robots" content="index">
<meta name="distribution" content="global">
<meta name="revisit-after" content="15 days">
<meta name="author" lang="fr-ch" content="Charles Multone">
<meta name="copyright" content="Charles Multone">
<meta name="identifier-url" content="www.***.ch">
<meta name="expires" content="never">

<meta name="Date-Creation-yyyymmdd" content="02.04.2004">

<title>*** Pictures on the street</title>

<style type="text/css"></style>
<!--Fireworks 8 Dreamweaver 8 target.  Created Fri Jun 15 09:09:42 GMT+0200 2007-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

<script language="JavaScript" type="text/JavaScript">
 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText  
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"  
   img.outerHTML = strNewHTML
   i = i-1
      }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<link rel="stylesheet" href="styles.css" media="all" />
</head>
<?php
$p_works = 0;
$p_news = 0;
$p_photos = 0;
$p_about = 0;
include 'background_color.php';
if (isset($_GET["p"])){
	switch($_GET["p"]){
		case 1 :
			$p_works = 1;
			$width_content = '815';
			break;
		case 2 :
			$p_news = 1;
			$width_content = '815';
			break;
		case 3 :
			$p_photos = 1;
			$width_content = '815';
			break;
		case 4 :
			$p_about = 1;
			$background = "#7D7D87";
			$width_content = '815';
			break;
		case 5 :
			$p_works = 2;
			$width_content = '815';
			break;
		case 6 :
			$p_photos = 2;
			$width_content = '815';
			break;
	}
}
?>
<body bgcolor="<? print $background; ?>" onLoad="MM_preloadImages('images/works_f2.gif','images/news_f3.gif','images/photos_f4.gif','images/about_f5.gif');">
<table width="<? print $width_content; ?>" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="menu.png" fwbase="menu.gif" fwstyle="Dreamweaver" fwdocid = "881027471" fwnested="0" -->
  <tr>
   <?php
   // selection de la couleur du titre
   $img_titre = "images/titre_bleu.png";
   if ($p_works >= 1) $img_titre = "images/titre_bleu.png";
   else if($p_news == 1) $img_titre = "images/titre_vert.png";
   else if($p_photos >= 1) $img_titre = "images/titre_jaune.png";
   else if($p_about == 1) $img_titre = "images/titre_violet.png";
   ?>
    <td colspan="7"><!--<a href="index.php">--><img name="titre" src="<?php print $img_titre; ?>" width="815" height="151" border="0" id="titre" alt="" /><!-- </a> --></td>
   <td><img src="images/spacer.gif" width="1" height="155" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="<?php print $background; ?>">&nbsp;</td>
   <td><img src="images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="?p=1" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('works','','<?php print "images/works_over.png"; ?>',1);"><img name="works" src="<?php if($p_works==1) print "images/works_over.png"; else print "images/works.png"; ?>" width="168" height="42" border="0" id="works" alt="" /></a></td>
    <td width="61" bgcolor="<?php print $background; ?>">&nbsp;</td>
   <td><a href="?p=2" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('news','','<?php print "images/news_over.png"; ?>',1);"><img name="news" src="<?php if($p_news==1) print "images/news_over.png";  else print "images/news.png";?>" width="127" height="42" border="0" id="news" alt="" /></a></td>
    <td width="61" bgcolor="<?php print $background; ?>">&nbsp;</td>
   <td><a href="?p=3" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('photos','','<?php print "images/photos_over.png"; ?>',1);"><img name="photos" src="<?php if($p_photos==1) print "images/photos_over.png"; else print "images/photos.png";?>" width="180" height="42" border="0" id="photos" alt="" /></a></td>
    <td width="62" bgcolor="<?php print $background; ?>">&nbsp;</td>
   <td><a href="?p=4&en=2" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('about','','<?php print "images/about_over.png"; ?>',1);"><img name="about" src="<?php if($p_about==1) print "images/about_over.png"; else print "images/about.png";?>" width="156" height="42" border="0" id="about" alt="" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="42" border="0" alt="" /></td>
  </tr>
</table>
<br>
<?php
   if($p_works == 1){
   		include("works.php");
   }else if($p_works == 2){ 
   		include("a_video.php");
   }else if($p_news == 1){ 
   		include("news.php");
   }else if($p_photos == 1){ 
   		include("photos.php");
   }else if($p_photos == 2){ 
   		include("a_pic.php");
   }else if($p_about == 1){ 
   		include("about.php");
   }else{
		$result=round(rand(1,11));
		if($result == '11'){
			echo('<center><EMBED SRC="pages/accueil/video_accueil.mov" width="815" height="415" CONTROLLER="TRUE"><param name="controller" value="true"/></center>');
		}else{
			echo('<div align="center">
				<a href="?p=1">
					<img src="pages/accueil/accueil'.$result.'.jpg" width="815" height="582" border="0" name="triangle" />
				</a>
			  </div>'
			);
		}
   }
?>
<!-- onmouseover="document.triangle.src=\'pages/accueil/t_accueil'.$result.'.jpg\'" onmouseout="document.triangle.src=\'pages/accueil/accueil'.$result.'.jpg\'" -->
</body>
</html>



Florent V. a écrit :
Bonjour,

Tu as un gros problème avec ton code HTML:

- pas valide (loin de là...);
- pas de Doctype (gros problème);
- pas d'élément html ( Smiley eek );
- un élément style placé dans le body;
- etc.

Bref, c'est un peu n'importe quoi. Ça n'est pas nécessairement la cause du problème de rendu observé, mais tenter de corriger un problème de rendu sans partir sur une base saine serait une bêtise.

Donc:
http://validator.w3.org

Et lire aussi:
http://blog.alsacreations.com/2006/10/23/296

Bonne continuation. Smiley smile


Il est vrai que le doctype m'avais échappé ... merci de me l'avoir signalé ! je vais regarder pour les autres problème !
merci beaucoup !
Pour ce qui est des style je vais les centralisé.

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Après toutes les correction tout fonctionne !!!
Merci beaucoup Florent V. pour ton aide !

Je déclare ce problème résolu !

(ha oui pour mon problème ben c'est simple fallait finir le code html, mettre un doctype, et modifier 2-3 taille dans mon css qui était fausse !)

bonne fin de journée !

Chum[/i][/i][/i][/i][/i][/i][/i]
Modifié par Chum (19 Feb 2008 - 15:31)