28172 sujets

CSS et mise en forme, CSS3

[Résolu] Adapter la page sur cinq browsers

Bonjour,

Je suis en train de créer une page qui doit fonctionner parfaitment avec cinq navigateurs : IE6, IE7, Firefox, Opera et Safari. Seulement, avec les trois derniers, j'ai un problème avec le pied de page malgré que j'ai mis sur le CSS : bottom: 0; mon footer s'arrete avec le premier écran et ne va pas au fond de la page quand le contenu est plus long qu'un écran.
Quand le contenu est moins qu'un écran, l'affichage est parfait sur tous les navigateurs.

Voilà le code et merci pour votre aide.

<!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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>title</title>
	<style type="text/css" media="screen">
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	html {
		font-size: 100%;
	}
	body {
		font-size: .9em;
		background-color: #FFFFFF;
	}
	#wrapper {
		position: relative;
		width: 995px;
		margin: 0 auto;
		min-height: 100%;
		background-image: url(fondoblu.png);
		background-repeat: repeat-y;
	}
	#header {
		margin-top: 0;
		height: 100px;
		background-color: #cc0000;
	}
	#navigation {
		height: 26px;
		background-color: #0000FF;
	}
	#column-1 {
		float: left;
		width: 195px;
		background-color: #66FF00;
	}
	#column-2 {
		float: left;
		width: 598px;
		background-color: #99CCCC;
	}
	#column-3 {
		float: left;
		width: 202px;
		background-color: #66FF00;
	}
	#vide {
		margin-bottom: 0;
		padding-bottom: 40px;
		visibility: hidden;
	}
	#footer {
		border-top: solid 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background: royalblue;
	}
	</style>
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	div#page {
		height: 100%;
	}
	</style>
	<![endif]-->
</head>
<body>
<div id="wrapper">
	<div id="header">header</div>
	<div id="navigation">navigation</div>
	<div id="wrapper-content">
		<div id="column-1"><p>left</p></div>
		<div id="column-2"><p>corpo</p></div>
		<div id="column-3"><p>right</p></div>
	</div>
	<div id="vide">&nbsp;</div>
	<div id="footer">footer</div>
</div>
</body>
</html>

Modifié par wael (17 Jul 2008 - 16:58)
Bon, je crois que c'est réglé. J'ai juste ajouté 

	#wrapper-content {
		overflow: auto;
	}


Merci. J'espère que çà va aider plusieurs personnes.
Modifié par wael (17 Jul 2008 - 13:36)
Bon ben bravo ! Smiley biggol

juste en passant : ce n'est peut-être pas utile de mettre tous tes textes en gras Smiley cligne !
Pour le gras, c'est juste une habitude Smiley smile

Sinon, en faisant le test sur IE6, quand la page est vide, elle ne se met pas sur une hauteur de 100% alors, il faut ajouter ces deux lignes :

	#wrapper {
		height: auto !important;
		height: 100%;
	}

Modifié par wael (17 Jul 2008 - 15:10)
Pour le gras, c'est juste une habitude Smiley smile

Sinon, en faisant le test sur IE6, quand la page est vide, elle ne se met pas sur une hauteur de 100% et aussi le footer cache encore deux lignes du wrapper.

Alors voilà je mets le nouveau code complet après correction. J'ai fait les tests sur IE7, Firefox 3, Opera 9.51, Safari 3.1.2 et IE6. Tout fonctionne très bien.

<!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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>title</title>
	<style type="text/css" media="screen">
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	html {
		font-size: 100%;
	}
	body {
		font-size: .9em;
		background-color: #FFFFFF;
	}
	#wrapper {
		position: relative;
		width: 995px;
		margin: 0 auto;
		min-height: 100%;
		background-image: url(fondoblu.png);
		background-repeat: repeat-y;
		height: auto !important;
		height: 100%;
	}
        #wrapper-content {
		overflow: auto;
	}
	#header {
		margin-top: 0;
		height: 100px;
		background-color: #cc0000;
	}
	#navigation {
		height: 26px;
		background-color: #0000FF;
	}
	#column-1 {
		float: left;
		width: 195px;
		background-color: #66FF00;
	}
	#column-2 {
		float: left;
		width: 598px;
		background-color: #99CCCC;
	}
	#column-3 {
		float: left;
		width: 202px;
		background-color: #66FF00;
	}
	#vide {
		margin-bottom: 0;
		padding-bottom: 40px;
		visibility: hidden;
		width: 100%;
	}
	#footer {
		border-top: solid 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		background: royalblue;
	}
	</style>
	<!--[if lte IE 6]>
	<style type="text/css" media="screen">
	div#page {
		height: 100%;
	}
	</style>
	<![endif]-->
</head>
<body>
<div id="wrapper">
	<div id="header">header</div>
	<div id="navigation">navigation</div>
	<div id="wrapper-content">
		<div id="column-1"><p>left</p></div>
		<div id="column-2"><p>corpo</p></div>
		<div id="column-3"><p>right</p></div>
	</div>
	<div id="vide">&nbsp;</div>
	<div id="footer">footer</div>
</div>
</body>
</html>

Modifié par wael (17 Jul 2008 - 15:45)
Sujet clos
Aller à