28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde, comme le titre l'indique mon site présente trop de diference selon FF et IE pffff pourquoi il n'existe pas que firefox Smiley smile Mes soucis serai resolu... Bon premiere solution, boycoter Internet Explorer mais je pense pas que ce soit la meilleurs solution.. Donc on va opter pour la deuxieme soluce, gerer pour que ca passe !!! Smiley sweatdrop

Bon je vous met mon CSS en esperant que quelqu'un veuille se plonger dans mon fouilli de code .. d'ailleurs en passant si quelqu'un veut bien m'aider a netooyer tout ca Smiley smile je veut dire, je croit que j'ai des balise qui pourrait être améliorer supprimer ect .. Enfin voila mon code a vous de juger ^^ Et n'oubliez le sujet principal Smiley biggrin "trop de difference entre IE et firefox"



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >


   <head>
       <title>Underground psp: Tutoriels, trucs et astuces pour votre PSP, retrouvez tout nos jeux, homebrews, films et jeux</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Underground-psp_Design1" href="design1.css" />
   </head>
   
   
   <body>
   
 <h4 id ="haut"></h4>  
   <!--Banniere du site Underground PSP-->
<div id="banniere">

</div>


<div id="contenuG">	
<div class="Menu">

	
	<?php include ("menu.html") ?>
	

	</div>
	
	<div class="Element_Menu">
	<div class="element_chatbox">
	
	
	<?php include ("Chat_box.php"); ?>
	</div>
	<div class="element_categories">
	<?php include ("menu2.html"); ?>
	</div>
	
	<div align="center">
	<script type="text/javascript"><!--
google_ad_client = "pub-2446050801399362";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text_image";
//2006-11-14: videos, telechargement gratuit, psp 1.5, downgrade, psp
google_ad_channel = "9355258938+4753552111+1840139232+3544398524+5437164796";
google_color_border = "000000";
google_color_bg = "F0F0F0";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
<script type="text/javascript"><!--
google_ad_client = "pub-2446050801399362";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as_rimg";
google_cpa_choice = "CAAQsIO38QEaCL0fHsDYmCAJKIja6n4";
google_ad_channel = "";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
<script type="text/javascript"><!--
google_ad_client = "pub-2446050801399362";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_type = "text_image";
//2006-11-14: sexe, videos sexe gratuit, psp 1.5, psp ceramic, downgrade
google_ad_channel = "4122071705+8949873490+1840139232+1931596331+3544398524";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript" SRC="http://pub.oxado.com/insert_ad?pub=57201"></SCRIPT>
	</div>
	<div style="clear:both"></div>
	</div>



	<!--Contenu du site Underground PSP-->

	<div class="Contenu">
	<div class="Element_Contenu">
<?php
    $page = $_GET['page'];
    include("$page.php");
	
?>  
<div style="clear:both"></div>
	</div>
	</div>
</div>


	<!--Pied de page du site Underground PSP-->
<div id="Pied_de_page">
<div class="element_piedpage">
<?php include ("connectes.php") ?>
<a href="#haut">Retourner en haut</a><br />
<script type="text/javascript"><!--
google_ad_client = "pub-2446050801399362";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
//2006-11-14: jeux videos, musique, psp, psp 1.5, videos
google_ad_channel = "8336091490+5290925219+5437164796+1840139232+9355258938";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>



   </body>
</html>


rop beau ce code n'est ce pas.. Ne fait pas d'overdose de <div> Smiley confused

et le magnifique CSS ( encore plus beau ^^) :


body
{
	width: 1024px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;  
	background-color: black;
	
}

a 
{
   color: white;
}

a img
{
	border: 0px;
}

#banniere
{
	width: 1024px;
	height: 200px;
	background-image: url("images/banniere.png");
	background-repeat: no-repeat;
	margin-bottom: 2px;
	
}

.Menu
{
	float: center;
	width: 1024px;
}

.Element_Menu
{
	margin-top: 20px;
	float: left;
	color: white;
	background-repeat: repeat-x;
	border: hidden;
	margin-bottom: 10px;
	width: 160px;
	margin-left: 40px;
	
}

.element_categories
{
	width: 160px;
	margin-top: 20px;
	border: hidden;
	background-color: black;
	
}

.element_chatbox
{
	
	width: 160px;
	height: 350px;
	overflow: auto;
	background-color: black;
}

#contenuG
{
	
	border: hidden;
	width: 1024px;
	background-color: white;
}

.Contenu
{
	padding-left: 5px;
	margin-left: 228px;
	color: white;
	background-color: #7C7A7A; 
	background-image: url("images/Haut_Contenu.png");
	background-repeat: repeat-x;
	 
}

.Element_Contenu h1
{
	text-align: center;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

.Element_Contenu h4
{
	text-align: left;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	background-image: url("images/Titre_News.png");
	
}
	
#Pied_de_page
{
	width: 1024px;
	height:150px;
	border: hidden;
	color: black;
	background-image: url("images/piedpage.png");	
}

.element_piedpage
{
	padding-top: 15px;
	text-align: center;
}


	


Soyez pas trop dur je commence juste a coder.. Quelque avis sur le site au passage Smiley confused

http://underground-psp.ifrance.com
Le problème principal semble venir du bug des marges doubles pour tes éléments flottants dans la colonne de gauche. Cf. sur internet le « doubled margin bug ».
Pas mal d'article sur cette question, donc je ne développe pas.

Un gros problème trouvé sur le site :
body
{
	width: 1024px;
}

Hou que c'est affreux !
Un écran en 1024px de large, cela signifie dans la pratique une zone d'affichage entre 950 et 100px de large !
Pour ma part, je partirais plutôt sur la base suivante :
body
{
	width: 960px;
}

Dans la mesure où on se fiche des utilisateurs (dont le nombre est certes plus ou moins en train de fondre) en 800x600, bien sûr.
Pour le premier soucis, les double marge, j'ai rajouter un display: inline;
je l'ai mit dans mon css dans la class Element_Menu, cela a changer quelque chose mais pas vraiment grand chose Smiley decu les bloc ne sont toujours pas comme sous firefox je ne comprend pas pourquoi... Sinon pour la taille de 1024 je ne comprend pas ce que tu veux dire Smiley ohwell j'ai creer ma banniere qui fait bien 1024 de largeur .. Doonc je voit pas ou est la réduction en pratique dont tu parle. Un peu d'explication, je suis novice Smiley smile

Edit: autant pour moi, le soucis est presque regler sur IE sauf ... Pour la page d'acceuil, les jeux et les films.. En effet sur ces categorie, mon bloc de texte ne s'agrandi pas et mes bloc menu/pub/chat colle a ce bloc... Hormis ces pages, le reste est identique a FF voila merci beaucoup pour la solution ( double marge ) je ne connaisai pas ce bug .. Encore merci pour votre aide Smiley smile
Modifié par immat (26 Nov 2006 - 01:49)
immat a écrit :
Sinon pour la taille de 1024 je ne comprend pas ce que tu veux dire Smiley ohwell j'ai creer ma banniere qui fait bien 1024 de largeur .. Doonc je voit pas ou est la réduction en pratique dont tu parle. Un peu d'explication, je suis novice Smiley smile

As-tu testé ta page sur un écran en 1024x768 ? Ou même en réduisant la largeur de la fenêtre du navigateur à ces dimmensions ? Le problème risque de te sauter aux yeux.

C'est simple : un écran de 1024px de large, cela signifie, une fois les bordures des fenêtres et barres de défilement soustraites, une largeur utilisable de 990px (pour prendre un peu large). Sur un écran mac en 1024px de large, en général les fenêtres des applications ne sont pas maximisées, et ne prennent pas toute la largeur... même chose parfois sur PC (même si c'est plus simple d'y maximiser une fenêtre). Bref, on peut monter jusqu'à 1000px en théorie, mais mieux vaut assurer ses arrières et ne pas trop dépasser les 970px, par exemple.

Même chose si on vise le 800x600 : la largeur de référence pour un site compatible avec cette résolution est 760px, pas 800px !
Modifié par mpop (26 Nov 2006 - 10:49)