کد سی اس اس باعث می شه که فوتر همیشه به پایین صفحه مرورگر بچسبه

hamed_hymn · Dec 19, 2010

من برای قالب سایتم از کدهای زیر استفاده می کنم، کد سی اس اس باعث می شه که فوتر همیشه به پایین صفحه مرورگر بچسبه (هم زمانیکه ارتفاع محتویات سایت کمتر از ارفتاع مانیتور باشه و چه زمانی که ارتفاع محتویات سایت بیشتر از ارتفاع مانیتور باشه).

این کد یه ایراد داره و اونم زمانیه که رزیولیشن صفحه رو تغییر می دیم، مثلا از
1024 by 768
به
1152 by 864

تغییر می دیم. در این حالت محتویات صفحه بجای اینکه وسط مانیتور قرار بگیرن، سمت راست یا چپ مانیتور قرار می گیرن.

شما راهی به نظرتون نمی رسه که بتونید بعد از تغییر ریولیشن، محتویات صفحه در وسط نمایش داده بشن و فوتر به پایین صفحه بچسبه؟

کد:

[LEFT]CSS:

body {
    margin: 0;
    padding: 0;
}
html, body, #contents {
    max-width:900px;
    min-width:780px;
    min-height: 100%;
}
html>body, html>body #contents {
    height: auto;
}
#all {
    position: absolute;
    top: 0;
    left: 0;
}
#right {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 14em;
    text-align:right;
}
#content {
    margin-top:1em;
    margin-left: 2em;
    margin-right: 16em;
    margin-bottom: 5em;
}
#header {
    position: absolute;
    top: 0;
    width:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width:100%;
}

HTML 
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>css</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="all"></div>
<div id="header">header</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="footer">footer</div>
</div>
</body>
</html[/LEFT]

>

Agent 47 · Dec 19, 2010

با این که من زیاد بلد نیستم ولی فکر کنم اگه margin-left:auto و margin-right:auto بزاری درست میشه.
میتونی یه ID تعریف کنی و هر چیزی رو که خواستی وسط صفحه باشه توی یه div با این آی دی قرار بدی.

MJmoonwalk · Dec 19, 2010

نظر دوست عزیزمون در بالا کاملا درست اما این دستور برای مرورگرهای IE تاثیری نداره!

به این صورت عمل کنید:

کد:

position:absolute;
	right:0;
	left:0;
	width:50%;
	margin:auto;
	text-align:center;
	*left:50%;
	*margin-left:-25%;

و یا از جاوا اسکریپت استفاده کنید!

echessdesign · Dec 29, 2010

درود بر شما
چرا اینقدر پیچیده اش می کنید!
تمامی کد های خود را در بین این تگ قرار دهید:

کد:

<!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=utf-8" />
<title>sssss</title>
<style type="text/css">
#wrp {
	margin:0 auto;
}
</style>
</head>

<body>
	<div id="wrp">
		your code
	</div>
</body>

</html>