28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page non portable

Bonjour à tous , j'ai un comportement très étrange de mon footer , j'ai pourtant suivi ce tuto http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
Lorsque je suis sous IE6 ( à défaut d'avoir le 7 ):
sur une page normal le footer s'affiche comme je veux, tjrs en bas de mon conteneur gris:
cf (mise_en_page.gif)
upload/12239-miseenpage.gif
Par contre dés que je charge dans mon cadre jaune "centre" un contenu de type tableau le résultat sur IE6 est le suivant :
upload/12239-miseenpage.gif
Enfin sur FireFox le problème est tjrs le même le footer se met à l'intérieur du header...tout le temps
upload/12239-miseenpage.gif

Et pour mon code css le voila

div#conteneur
{
	position:relative;
	background-color:white;
	width:850px;
	margin:0 auto; /*Centrage sur FireFox*/
}
div#header 
{   
   height:70px; 
   position:relative;
   background-color:#000050;
} 
div#gauche_menu
{
    
	background-color:#000050;
    width:100px;
    
	height:700px;
    float:left;
}
div#footer
{


	position: absolute;
	bottom: 0; 
	left: 0;
	width: 100%;

	clear: both;	
	height:20px;
	text-align:center;
	background-color:yellow;
}

div#centre
{
    width:650px;
	min-height:400px;	
	margin:20 auto;
	margin-left:30px;
	height:600px;
	float:left;
	background-color:red;
	border:dashed 1px black;
	padding-top:30px;
	padding-left:30px;
}

ça fait quelques jours que je galère sur se placement.. je ne sais plus trop comment faire ... j'attends votre aide avec impatience
Arf il m'a uplaodé 3 fois les même images :

Scree IE6 avec contenu = table
upload/12239-IE6table.gif
Modifié par rockt13 (28 Oct 2008 - 17:08)
peut tu mettre ton code html pour voir comment sont imbriqués les différents éléments de ta page ?
Ou mieux, un lien vers une page en ligne.

PS: pour les noms de fichiers, les noms des fichiers que tu upload sont tronqués à 10 caractères. Si tes images s'appellent toutes 10caracteres-*, tu vas avoir 10caracter.jpg (ou .gif ou .png...) à chaque fois que tu mets une image en ligne... donc à chaque fois tu écrases l'image précédente. Il faut qu'il y ait une partie variable dans les dix premiers caractères des noms de fichiers.
Modifié par Florent V. (28 Oct 2008 - 19:20)
Malheureusement c'est un site intranet pour ma boite, par contre je peux vous filer tout le code que vous voulez..
Pr les 3 screens voici + proprement les 3 images (sans me faire tronquer à cause des noms ):
Voici le résultat que j'aimerai obtenir :
1) upload/12239-resultvoul.gif
et que j'obtiens sous IE6 lorsque le contenu n'est pas un tableau.
2)Voici le résultat que j'obtiens sur IE6 lorsque je contenu est un tableau:
upload/12239-IE6avectab.gif
Le footer prend la largeur du tableau...
3)Sur firefox3 , dans tout les cas le footer est placé en haut...
upload/12239-firefox.gif
Voila comme ça c'est mieux expliqué Smiley smile
Et pour le code HTML le voici :

<html>
<head>
<title>Manufacturing Antivirus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="./style1.css" type="text/css" /> 
</head>

<body>
<?

include("connect.php");
     if(isset($_GET["type_machine"]))
     { 
          $type_machine=$_GET["type_machine"];
          
     }
?>
<div id="conteneur">
	<div id="header"> 			
	</div>
	<div id="gauche_menu">
       <ul id="menu">
       <?    
       echo '<li><a href="index.php?page=tableau&amp;type_machine=pc2b">PC2B</a></li>';       
       echo '<li>SB</li>';
	   echo '<li>EQ</li>';
	   echo '<li>Servers</li>';       
       echo '<li id="expli"><a  href="index.php?page=principe">Le principe</a></li>';	   
	   echo '<li><a  href="index.php?page=add">Mail List</a></li>';
	   if(isset($_SESSION['connection'])&&($_SESSION['connection']=="OK"))
	   {									
			echo '<li><a class="menu" href="logout.php">Logout</a></li>';					
	   }	   
       ?>
       </ul>
	    <?
	   if(!isset($_SESSION['connection'])&&($_SESSION['connection']!="OK"))
	   {
			echo '<div class="login">';
				include ("login.php"); 
			echo '</div>';
	   }

	   ?>
	</div>
	<div id="centre">
	 <? 
	 if(isset($_GET["page"]))
	 { 
	 $page=$_GET["page"];
	
	 }
	 else
	 {
		$page="start";
	 }
	 
	 include($page.".php");
	 ?>
	 
	</div>
	
	<div id="footer">
	 <? echo 'Realisé par '; 
     echo '<a class="contact" href="mailto:moi.moi@.com">Auteur</a>';
	 ?>
	</div>
</div>



</body>
</html>
J'ai modifié les propriété de mon bloc conteneur je suis passé de ceci :

div#conteneur
{
	position:relative;
	background-color:white;
	width:850px;
	margin:0 auto; /*Permet de centrer SOUS FF */
}


à cela

div#conteneur
{
	position:absolute;
	background-color:white;
	width:850px;
	left:0px;
}

Donc maintenant mon site n'est plus centré , il est simplement décalé , en fonction de la valeur de "left"
sous FF le résultat attendu est exactement celui que je voulais , le footer sur toute la largeur du conteneur , et tjrs en bas , quelque soit le contenu ( tableau ou texte )
Sur IE6 , tjrs le même bug , le footer est tjrs bien placé , par contre sa largeur change lorsque le contenu est un tableau, en effet ,la largeur du footer devient égale à la largeur du tableau...et lorsque le contenu est du texte la largeur du footer occupe bien tout l'espace ( la largeur du conteneur .. )
J'ai résolue mon problème après 3 jours de combat lol !

En fait puisque mon conteneur est positionné , et que mon footer est positionné à l'intérieur de mon conteneur , au lieu de faire width:100%; je fait width:850px; //je le force à la largeur de mon conteneur
Et ça marche niquel Smiley smile
mon footer devient donc:

div#footer
{
	position: absolute;
	bottom: 0; 
	left: 0;
	width: 850px;
	clear: both;	
	height:20px;
	text-align:center;
	background-color:020963;
}

Modifié par rockt13 (29 Oct 2008 - 13:55)
Sujet clos
Aller à