28220 sujets

CSS et mise en forme, CSS3

Mettre le footer en bas, avec un positionnement absolute..

Bonjour!

Voila, j'ai fait le design de mon site, en mettant les blocs en positionnement absolu.

Seulement voila, j'aimerais bien que mon footer soir toujours en bas,
mais avec le positionement absolu et la taille variable du contenu de mes pages,

je ne vois pas comment faire pour qu'il soit toujours en bas de la page??

merci de m'aider! Smiley cligne
alors,

ilo pour tes liens :

-le premier,je trouve aucun code, juste des images qui rendent compte.
-sur le deuxième, j'ai pas trouvé ce que je voulais..

et raphael,

dans la faq, on dit que cette méthode ne marche pas dans le cas, ou le contenu dépasse la page, ce qui est mon cas..

alors comment faire?

surtout que je peut aps utiliser de position relative comme ca marche pas sous IE ??

merci! Smiley cligne
Salut !!

Pourquoi utiliser le positionnement en absolute pour tes blocs, quel intérêt ?

Perso, je ne me sert de ce positionnement que pour placer un bloc à une position précise dans un <div>, un <p>, etc...

Faire une mise en page dans le flux normal, est largement plus facile.
Mets un bout de ton code html/css pour voir, mais à mon avis cela risque d'être difficile.
ba enfait, je suis obligé de faire des positionnement absolu,

voila mon header :

<div class="header">
	   
	   <div class="platintoto"> <img src="images/platinetoanx.gif" alt="toanx" title="Toan-x !"/> </div>
	   
	   <div class="banniere"> <img src="images/banniere.jpg" alt="banniere" /> </div>
	   
	   <div class="platinseb"> <img src="images/platineseb.gif" alt="seb" title="Dj Seb" /> </div>
	   
	   </div>


Donc, déja dans mon header, je place ces images en absolu dans mon bloc..

Et ensuite, je fais un menu en bouton, j'utilise une technique qui les rend en bloc (un des tuto de ce site), et donc s'il deviennent des blocs, je suis obligé de les mettre en positionnement absolu si je veut les mettre l'un à coté de l'autre..

Voila pourquoi j'utilise le positionnement absolu..
Salut,
Sur la page tu fait click droit, afficher la source et tu verras comme par magie le html et le css 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="en" lang="en">




<head>

<title>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">
	@import "css/main.css";
	@import "css/product_features.css";




	/* The CSS that's required to position the footer */

	html
	{
		height: 100%;
	}

	body
	{
		height: 100%;
	}

	#page
	{
		position: relative;
		min-height: 100%;
	}

	* html #page
	{
		height: 100%;
	}

	#footer
	{
		position: absolute;
		bottom: 0;
	}




</style>

</head>




<body>
	<p class="hidden">
		<a href="#content">Skip to content</a>
	</p>
	<div id="page">
		<div id="header">
			<p id="logo">
				<span class="replacement"></span><a href="#"><span class="replacement"></span><span class="linkText">XXXX</span></a>

			</p>
			<ul id="menu">
				<li id="menuSupport" >
					<span class="replacement"></span><a href="#" title="Support and documentation"><span class="replacement"></span><span class="linkText">Support</span></a>
				</li>
				<li id="menuAbout" >
					<span class="replacement"></span><a href="#" title="About"><span class="replacement"></span><span class="linkText">About</span></a>
				</li>
			</ul>
		</div>

<!-- END header -->
		<div id="content">
			<div id="contentMain">
				<h1 id="headingFeaturesPages">
					<span class="featureIcon"></span>Product X <span class="hidden">&ndash;</span> <span class="subTitle">Features: Pages</span>
				</h1>
			</div>
<!-- END contentMain -->
			<div id="contentSub">
				<ul id="quickLinks">
					<li class="first on">
						<a href="#"><span>Feature</span> tour</a>
					</li>
					<li>
						<a href="#"><span>Try</span> a demo</a>
					</li>
					<li>
						<a href="#"><span>Buy</span> online</a>
					</li>
				</ul>
			</div>
<!-- END contentSub -->
			<div class="clearer">
			</div>
		</div>
<!-- END content -->
		<div id="footer">
			<ul id="bottomLinks">
				<li class="first">
					<a href="#">Support</a>
				</li>
				<li>
					<a href="#">Employment</a>
				</li>
				<li>
					<a href="#">Contact Us</a>
				</li>
			</ul>
			<p>
				&copy; 2005 XXXX. All rights reserved.
			</p>
		</div>
<!-- END footer -->
	</div>
<!-- END page -->
</body>




</html>
Sujet clos
Aller à