28173 sujets

CSS et mise en forme, CSS3

Pour une fois c'est firefox mais IE en met une couche aussi

Salut tout le monde,
en ce moment j'essai de faire une grosse MAJ de mon site, changement d'hebergeur et nom de domaine oblige Smiley smile

Donc je refait tout de A a Z et deja les soucis commence.... Probleme de mise en boite et je ne voit vraiment pas ou ...

Bref ca passe comme je le veut exactement sous IE et pas sous firefox ...

Je vous met le code Smiley cligne 



<!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: Acceuil, toutes les news PSP du moment</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="design.css" />
	   <META name="verify-v1" content="OkqisW2Wtp5mj8wtfVzhhrrFJwZkJZpE54LfLtMu48Y=" />
   </head>
   
   
   
   
   
   <body>
   
   
  
<!--bloc de banniere-->
<div id="banniere">  
<img src="images/banniere.png" />
</div>
<!-- fin du bloc de banniere-->


 
<!--bloc de menu horizontal-->
<div id="menu_horizontal">
<?php
include ("menu.html");
?>
</div>
<!--fin du bloc de menu horizontal-->



<div id="contenu"> <!--Debut du bloc de contenu général-->




	<!--bloc de chat box -->
	<div class="chat_box">
	
	<iframe frameborder="0" width="160" height="305" src="http://www3.cbox.ws/box/?boxid=2506209&amp;boxtag=6746&amp;sec=main" marginheight="2" 	marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EDDEDB 1px solid;" id="cboxmain"></iframe><br>
	<iframe frameborder="0" width="160" height="75" src="http://www3.cbox.ws/box/?boxid=2506209&amp;boxtag=6746&amp;sec=form" marginheight="2" 	  marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform">
	</iframe>
	
	</div>

// ici il reste des div class ou il y aura des include dedans, rien de tres 
important 

Et a la fin de ces class, je ferme mon div id de contenu global 

</div> voila [langue]


Et le code CSS : 

body
{
	text-align: center;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;  
}

#menu_horizontal
{
	margin-top: 1px;
}

#contenu
{
	text-align: center;
	margin-top: 10px;
	width: 800px;
	border: 1px solid black;
}

.chat_box
{
	float: left;
}


Voila le site : http://underground-psp.fr

Ca passe bien sous IE mais sur FF c'est du n'importe quoi Smiley decu
EDIT :

Le problême est résolu grace à ce lien : http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Modifié par immat (17 Dec 2006 - 17:59)
Salut,

Comme tu l'as sans doute lu dans la règle 13 du forum, ton code PHP ne nous aide pas trop pour résoudre ton problème, le code HTML généré serait bien plus intéressant.

A première vue, je ne suis pas sûr que tu appliques le style "margin: auto" au bon élément (relis la faq).
Modifié par Eldebaran (17 Dec 2006 - 11:50)
Salut immat,

C'est pourtant Firefox qui interprète correctement le code. Il s'agit du problème classique des flottants qui qui "débordent" de leur conteneur. Tu pourras trouver quelques explications et solutions par ici.

Une solution simple serait par exemple d'ajouter la déclaration overflow: hidden; à #contenu
Merci de ta réponse; j'ai remit un margin auto sur le div ID de mon bloc de contenu mais il y a une chose que je ne comprend pas, c'est que mon element class ( ma chat box ) n'est pas entourée par la marge a part en haut ( sur FF ) alors que sous IE ca passe tres bien.. Mon imbirquement est pourtant ( du moins a l'air ) bon !

Pardon pour le code, mais il y a peu de PHP dedans seulement des include et donc il y a pas de différence entre la page HTML générer et la source en PHP, mais si c'est plus lisible je t'enleve les balises Smiley smile

Voila si quelqu'un trouve uen solution parce que la je rame.. J'ai deja essayer de transformer mon bloc de la chat box en un bloc inline ( bien que ce soit deja le cas ) mais ca ne change rien.. toujours une barre en haut sur FF et non un bloc qui entoure comme je le veut sous IE

Voila je ne remet pas le code puisque juste un margin: auto; differe. Il est donc placer dans la balise .chat_box
Je n'ai pas enlever le margin: auto; de la balise body ( dans mon css bien sur )

Merci de vos réponses Smiley smile
J'ai parler trop vite dans mon post précédant, c'est parfait ca marche !!
Super ton lien j'ai compris ce qu'il se passait par la même occasion, vraiment merci beaucoup Smiley smile
Bon encore des problêmes ... Cette fois c'est sous IE, le bloc que je veux a gauche est forcement au centre !!

En fait je veux faire un bloc de nouveauter, un tableau quoi, je voudrais qu'il se mette sous mon bloc de presentation, a 5px du chat... Bien sur l'image serai au dessus
mais comme un exemple parle mieu je vous invite a regarder Smiley smile
http://underground-psp.fr

Voila le code CSS 


body
{
	text-align: center;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;  
}

#menu_horizontal
{
	margin-top: 1px;
}

#contenu
{
	margin: auto;
	text-align: center;
	margin-top: 10px;
	width: 800px;
	border: 1px solid black;
	overflow: hidden;
	padding-top: 5px;
}

.chat_box
{
	
	float: left;
}

.bloc_presentation
{
	width: 628px;
	margin-right: 5px;
	margin-left: 5px;
	border:  1px solid black;
	margin: auto;
	overflow: hidden;
	background: url("images/logo_presentation.jpg") no-repeat bottom right;
}

.bloc_nouveaute
{
	width: 314px;
	margin-left: 5px;
	margin-top: 5px;
	border: 1px solid black;
	overflow: hidden;
}


Et dans mon code html, l'image "nouveautee" est en dur au dessus le div du bloc de nouveautée : 


<div align="left">
	<img src="images/nouveautees_haut.gif" />
	</div>
	<div class="bloc_nouveaute">
	<?php include ("presentation.html"); ?>
	</div>
Voila c'est regler pour le souci cité precedement et de nouveaux apparaissent ^^ Cette fois c'est pour placer le menu vertical... J'aimerais qu'il soit en dessous le chat mais il ne veut pas !!! Smiley decu Il reste au desssus de mes bloc presentation, nouveautés et actualitées .

Pour le placer, jai mit un float left, un margin-top de 5px ( entre le chat logiquement et le menu ) Mais il reste toujours au dessus de tout.. Voila il suffit de visiter mon site pour se rendre compte du chantier Smiley smile

Merci de vos réponses !!

Edit : Rectification, maintenant c'est sous IE qu'il ne veut pas se placer comme il faut.. Voila le CSS que j'ai utiliser : 



.image_menuV
{
	position: absolute;
	float: left;
	margin-top: 400px;
	margin-left: 5px;
	display: block;
}

.menu_vertical
{
	float: left;
	width: 160px;
	border: 1px solid black;
	margin-top: 430px;
	position: absolute;
	margin-left: 5px;

Modifié par immat (17 Dec 2006 - 21:39)
Sujet clos
Aller à