مشکل در طراحی HTML و CSS

[mrkeivan]

سلام
من قالب زیر رو می خوام \یاده سازی کنم و بروش زیر این کار رو انجام دادم اما مشکل هستش و مثلا page auto height مشکل دارهُ لطفا بهترین راه پیاده سازی این قالب رو به من راهنمایی کنید ( البته در کد من صفحه روی فوتر نمیاد، یعنی نشد) :ناراحت:


<div id="BackgroundBox" class="center">
<div id="BackgroundHeader">
</div>
<div id="BackgroundMain">
<div id="MainBox" class="center">
<asp:ContentPlaceHolder ID="CPHMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="BackgroundFooter">
</div>
</div>

.center {
width:1000px;
margin:0px auto;
text-align:right;
}

#BackgroundBox {
width: 1200px;
}

#BackgroundHeader {
height:386px;
width: 1200px;
background-image: url('/Resources/Themes/Main/Images/BackTop.jpg');
background-repeat: repeat-x;
}
#BackgroundMain {
background-image: url('/Resources/Themes/Main/Images/MainBackground.jpg');
background-repeat: repeat;
width: 1200px;
min-height: 900px;
height: auto;
overflow: hidden;
}
#BackgroundFooter {
height: 298px;
width: 1200px;
background-color: #161616;
}
#MainBox {
position: absolute;
width: 1000px;
min-height: 880px;
margin-top: -180px;
margin-left: 100px;
height: auto;
overflow: hidden;
-moz-box-shadow: 0 0 7px #414141;
-webkit-box-shadow: 0 0 7px #414141;
box-shadow: 0 0 7px #414141;
}

[mrkeivan]

عکس رو فراموش کردم :D

[mehbod.rayaneh]

سلام
برای طراحی اینا را لازم دارید :
1 . reset کردن : ینی صفر کردن تمامی مقادیر در همه مرورگرها :

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,footer,hea der,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

از اینجا میتونید متناسب با نوع html کد ریسیت مورد نظر را دریافت کنید :
http://www.cssreset.com/
تقسیم بندی صفحه ب 3 قسمت :


<div id="head">

</div>
<div id="main">

</div>
<div id="footer">
<div class="red">

</div>
</div>

و در آخر هم استایل دادن به اون 3 قسمت :

#head{
width:100%;
height:150px;
background:#000
}
#main{
margin:-30px auto;
width:800px;
min-height:1000px;
background:red;
overflow:hidden;
}
#footer{
width:100%;
height:150px;
background:#000;
}
.red{
margin:-30px auto;
width:800px;
height:30px;
background:red;
}

البته! من اینجا برا این ک از z-index و position استفاده نکنم 1 کلکی زدم و 1 دیو توی فوتر اضافه کردم! :لبخند:
موفق باشید.