28172 sujets

CSS et mise en forme, CSS3

Probleme affichage sous Firefox

Bonjour,

Je suis en train de faire un petit site vitrine (http://www.printcreation.fr)
J'ai un probème d'affiche sous Firefox mais pas sous IE.
Il s'agit du pied de site (texte avec un décalage à gauche sous tous les navigateurs).
Sous firefox, le footer file sous le menu de gauche, le cadre blanc ne descend pas jusqu'en bas.

Merci pour votre aide, je débute.

Cordialement,

Ci joint une partie de mon css :

body
{
	width: 100% ;
	margin: 10px 0 ;
	padding: 0px ;
	text-align: center ;
	background-color: #dfdfdf;
	text-decoration: none;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif;
}

div#site
{
	width: 770px ;
	margin: 0 auto ;
	text-align: center ;
	border: 2px solid rgb(227,0,79) ;
	background: #fff ;
}

div#tete
{
	/*padding: 20px 0 0 450px ;*/
	background: url(http://www.printcreation.fr/graphics/printcreation.jpg) no-repeat 2px 2px ;
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	height: 70px ;
}

div#menuhaut
{
	padding: 0 0 0 5px ;
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
}

div#menugauche
{
	float: left;
	width: 190px ;
	margin: 0 auto ;
	text-align: center ;
}

div#corps
{
	padding: 5px 5px 5px 5px ;
	float: right;
	margin: 10px 10px 0 0 ;
	border: 1px solid rgb(156,157,159) ;
	width: 540px ;
	text-align: center;
}

div#pied
{
	width: 770px ;
	bottom: 0;
	margin: 0;
	text-align: center ;
}

ul#header
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	text-align: left ;
	text-decoration: none ;
}

ul#header li
{
	display: inline ;
	list-style: none ;
	color: rgb(156,157,159);
	font-family: verdana, arial;
	font-size: 10pt;
	text-align: left ;
	text-decoration: none ;
}

ul#header li a
{
	font-family: verdana, arial;
	font-size: 10pt;
	color: rgb(156,157,159);
	text-align: left ;
	text-decoration: none ;
}

ul#header li a:hover
{
	font-family: verdana, arial;
	font-size: 10pt;
	color: rgb(227,0,79);
	text-align: left ;
	text-decoration: none ;
}

ul#menu
{
	margin: 10px ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menu li
{
	margin: 0px 0 5px 0 ;
	padding: 0 ;
	font-family: verdana, arial;
	font-size: 8pt;
}

ul#menu li a
{
	display: block ;
	width: 190px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 5px ;
	text-decoration: none ;
	background: url(http://www.printcreation.fr/graphics/menu.jpg) no-repeat 0 0 ;
	border: 1px solid #dbd ;
	font-family: verdana, arial;
	font-size: 8pt;	
}

ul#menu li a:hover
{
	background: url(http://www.printcreation.fr/graphics/menu.jpg) no-repeat 0 -30px ;
	border: 1px solid #f97 ;
	font-family: verdana, arial;
	font-size: 8pt;	
}

ul#sousmenu
{
	margin: 10px ;
	padding: 0 ;
	list-style-type: none ;
}


ul#sousmenu li
{
	margin: 0px 0 5px 0 ;
	padding: 0 ;
	font-family: verdana, arial;
	font-size: 8pt;
}

ul#sousmenu li a
{
	display: block ;
	width: 190px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 5px ;
	text-decoration: none ;
	background: url(http://www.printcreation.fr/graphics/menu.jpg) no-repeat 0 0 ;
	border: 1px solid #dbd ;
	font-family: verdana, arial;
	font-size: 8pt;	
}

ul#sousmenu li a:hover
{
	background: url(http://www.printcreation.fr/graphics/menu.jpg) no-repeat 0 -30px ;
	border: 1px solid #f97 ;
	font-family: verdana, arial;
	font-size: 8pt;	
}

ul#footer li
{
	display: inline ;
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	color: rgb(156,157,159);
	font-family: verdana, arial;
	font-size: 7pt;
	text-align: center;	
}

ul#footer li a
{
	font-family: verdana, arial;
	font-size: 7pt;
	color: rgb(156,157,159);
	text-align: center;	
}

ul#footer li a:hover
{
	font-family: verdana, arial;
	font-size: 7pt;
	color: rgb(227,0,79);
	text-align: center;	
}

ul#footer li a:visited
{
	font-family: verdana, arial;
	font-size: 7pt;
	color: rgb(227,0,79);
	text-align: center;	
}

ul#foot
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	text-align: center;	
}

ul#foot li
{
	color: rgb(156,157,159);
	font-family: verdana, arial;
	font-size: 7pt;
	text-align: center;	
}

ul#foot li a
{
	font-family: verdana, arial;
	font-size: 7pt;
	color: rgb(156,157,159);
	text-align: center;	
}

ul#foot li a:hover
{
	font-family: verdana, arial;
	font-size: 7pt;
	color: rgb(227,0,79);
	text-align: center;
}


Le footer :

<div id="pied">
<ul id="footer">
	<li><a href="http://www.printcreation.fr/carte-visite-correspondance/index.php">Cartes de visites</a> | </li>
	<li><a href="http://www.printcreation.fr/flyer-tract/index.php">Flyers</a> | </li>
	<li><a href="http://www.printcreation.fr/flyer-tract/index.php">Tracts</a> | </li>
	<li><a href="http://www.printcreation.fr/affiche/index.php">Affiches</a> | </li>
	<li><a href="http://www.printcreation.fr/tete-lettre-entete/index.php">Têtes de lettre</a> | </li>
	<li><a href="http://www.printcreation.fr/tete-lettre-entete/index.php">Papier en-tête</a> | </li>
	<li><a href="http://www.printcreation.fr/depliant-brochure/index.php">Brochures</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/sous-main/index.php">Sous mains</a> | </li>
	<li><a href="http://www.printcreation.fr/fin-annee/calendrier/index.php">Calendriers</a> | </li>
	<li><a href="http://www.printcreation.fr/bache-banderole/index.phpv">Bâches</a> | </li>
	<li><a href="http://www.printcreation.fr/bache-banderole/index.php">Banderoles</a> | </li>
	<li><a href="http://www.printcreation.fr/depliant-brochure/index.php">Dépliants</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/enveloppe/index.php">Enveloppes</a> | </li>
	<li><a href="http://www.printcreation.fr/chemise-rabat/index.php">Chemises à rabats</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/magazine/index.php">Magazines</a> | </li>
	<li><a href="http://www.printcreation.fr/carte-postale/index.php">Cartes postales</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/liasse-autocopiant/index.phpv">Liasses</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/liasse-autocopiant/index.php">Blocs autocopiants</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/carnet-bloc-note/index.php">Carnets</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/carnet-bloc-note/index.php">Blocs-notes</a> | </li>
	<li><a href="http://www.printcreation.fr/carte-visite-correspondance/index.php">Cartes de correspondance</a> | </li>
	<li><a href="http://www.printcreation.fr/fin-annee/carte-voeux/index.php">Carte de voeux</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/set-table/index.php">Sets de tables</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/menu/index.php">Menus</a> | </li>
	<li><a href="http://www.printcreation.fr/vimprimerie/liasse-autocopiant/index.php">Duplicatas</a> | </li>
	<li><a href="http://www.printcreation.fr/imprimerie/liasse-autocopiant/index.php">Triplicatas</a> | </li>
	<li><a href="http://www.printcreation.fr/logo-graphisme/creation-logo/index.php">Création de logo</a> | </li>
	<li><a href="http://www.printcreation.fr/logo-graphisme/creation-charte-graphique/index.php">Création de charte graphique</a></li>
</ul>
<ul id="foot">
	<li><a href="http://www.printcreation.fr">printcreation.fr</a> &copy; 2008</li>
	<li>Réalisation : <a href="http://www.alb01.com">Alb01.com</a></li>
</ul>
</div>
</div>
</body>
</html>


Le header :

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<meta name="Identifier-URL" content="http://www.printcreation.fr" />
		<meta name="author" content="CREAWEB" />
		<meta name="language" content="Fr" />
		<meta name="keywords" content="imprimerie, print, impression, imprimeur, communication, flyer, dépliant, tête de lettre, papier en tête, cartes de visite, affiches, brochures, pochettes à rabats, logo, création logo, image" />
		<meta name="description" content="Réalisation et Impression de tous vos imprimés : Carte de visite, Tête de lettre, Flyer, Dépliant, Affiche, Pochette à rabats, magazine, livret. Nous pouvez également créer votre logo et votre charte graphique." />
		<meta name="doc-type" content="Web Page" />
		<meta name="doc-rights" content="Public" />
		<link href="http://www.printcreation.fr/css/imprimerie.css" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="http://www.printcreation.com/favicon.ico" type="image/x-icon" />
		<link rel="icon" href="http://www.printcreation.com/favicon.ico" type="image/x-icon" />
		<title>[Printcreation.fr] - Imprimerie en ligne de carte de visites, flyers, tete de lettre, etc.</title>
	</head>
<body>
<div id="site">
	<div id="tete">	
	</div>
	<div id="menuhaut">
		<ul id="header">
			<li><a href="http://www.printcreation.fr/index.php">Accueil</a> | </li>
			<li><a href="http://www.printcreation.fr/contact-imprimeur/formulaire.php">Contact</a> | </li>
			<li><a href="http://www.printcreation.fr/serveur-ftp/index.php">Transfert de fichiers</a></li>
		</ul>
	</div>
	<div id="menugauche">
		<ul id="menu">
			<li><a href="http://www.printcreation.fr/promotion-imprimerie/index.php">NOS PROMOTIONS</a></li>
			<li><a href="http://www.printcreation.fr/carte-visite-correspondance/index.php">Cartes de visites</a></li>
			<li><a href="http://www.printcreation.fr/flyer-tract/index.php">Flyers / Tracts</a></li>
			<li><a href="http://www.printcreation.fr/tete-lettre-entete/index.php">Têtes de lettre</a></li>
			<li><a href="http://www.printcreation.fr/depliant-brochure/index.php">Dépliants</a></li>
			<li><a href="http://www.printcreation.fr/affiche/index.php">Affiches</a></li>
			<li><a href="http://www.printcreation.fr/chemise-rabat/index.php">Chemises à rabats</a></li>
			<li><a href="http://www.printcreation.fr/carte-postale/index.php">Cartes postales</a></li>
			<li><a href="http://www.printcreation.fr/bache-banderole/index.php">Bâches</a></li>
			<li><a href="http://www.printcreation.fr/imprimerie/index.php">Autres produits</a></li>
		</ul>
	</div>


Et une page :

<?
include 'http://www.printcreation.fr/includes/header.php';
?>

<div id="corps">
<h1>Cartes postales</h1>
<h3>Description du produit :</h3>
<ul id="description">
	<li>Format : 100 x 150 mm.</li>
	<li>Papier : 350 grammes</li>
	<li>Impression : Recto/Verso</li>
	<li>Couleurs : Quadri (Recto) - Noir (Verso)</li>
	<li>Pelliculage : sur le recto seulement</li>
</ul>
<h3>Modèle :</h3>
<img src="http://www.printcreation.fr/graphics/13.jpg"alt="Modèle de cartes postales"title="Cartes postales">
<h3>Tarifs :</h3>
<ul id="description">
	<li>Les 500 : 145 Euros HT</li>	
	<li>Les 1000 : 155 Euros HT</li>
	<li>Les 2500 : 245 Euros HT</li>
	<li>Les 5000 : 335 Euros HT</li>
	<li>Autres quantités : NC</li>
	</ul>
<h4><a target="_blank" href="http://www.printcreation.fr/pdf/13.pdf">Exemples de réalisations</a></h4>		
</div>

<?
include 'http://www.printcreation.fr/includes/footer.php';
?>
Salut,

Un problème lié au contexte de formatage, un overflow: auto; sur ton bloc site devrait en principe régler ce problème mais peut être compte tenu de ta construction en soulever d'autres Smiley cligne
ca corrige en partie. Le cadre blanc descend bien jusqu'en bas, mais ca me rajoute des ascenseurs à l'interieur du bloc site.
De plus mon footer se barre toujours sous le menu de gauche Smiley decu
Sujet clos
Aller à