سوال: قرار دادن DIV در FOOTER سایت [بایگانی]

gilanema

سه شنبه 02 مهر 1392, 10:45 صبح

1-میخواستم DIV 4 رو پائین داخل دایو رضا بزارم.

2-اشکالات این کدها رو برام بنویسید لطفا.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>firest </title>
<style type="text/css">
.body { border-radius: 15px;
margin: 0px;
padding: 0px;
}
.maindiv { border-radius: 15px;
width: auto; height: 768px; background-color: #CFCFCF; margin: 0px;
}
.rightdiv{ border-radius: 15px;
float: left; height: 100%; width: 15%; background-color: #7CAECC;
}
.leftdiv{ border-radius: 15px;
float: right; height: 100%; width: 15%; background-color: #7CAECC;
}
.centerdiv{ border-radius: 15px;
height: 100%; width: 70%; background-color: #C8CC3B;
margin-left: auto; margin-right: auto; font-family: Arial, Helvetica, sans-serif;
font-size: medium; font-style: italic; direction: rtl; font-stretch: extra-expanded;
font-weight: 800; text-align: center; text-decoration: line-through; text-indent: 30px;
text-shadow: 5px 2px 7px #999999; text-transform: capitalize;
}
.menudiv { border-radius: 15px;
height: 10%; background-color: #f00; width: 50%; margin-left: auto; margin-right: auto;
padding: 3%;
}
.menudiv ul li{ border-radius: 15px;
display: inline; list-style-type: none; padding-right: 20px;
}

</style>
</head>

<body>
<div class="maindiv">

<div class="menudiv"><ul><li><a href="#">home</a> </li><li><a href="#">about</a> </li><li><a href="#">portfolio</a> </li><li><a href="#">contact</a> </li></ul></div>
<div class=" leftdiv">reza</div>
<div class=" rightdiv">reza</div>
<div class=" centerdiv">reza

<div style="width: 604px; height: 80px; background-color: #fff000; position:relative; bottom:10px; margin:90 210px; "> 4</div>

</div>

</div>

</body>

</html>

mehbod.rayaneh

سه شنبه 02 مهر 1392, 15:30 عصر

درود
اول ب لایه بندی بیشتر دقت کنید و بعد ب استایلها!
برای div هایی ک قراره ارتفاعشون با زیاد شدن مطالب زیاد بشه نیز از min-height استفاده کنید!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>firest </title>
<style type="text/css">
.body{border-radius:15px;margin:0px;padding:0px}
.maindiv{border-radius:15px;width:auto;min-height:768px;background-color:#CFCFCF;margin:0px;display:block;overflow:hi dden}
.rightdiv{border-radius:15px;float:left;height:100%;width:15%;backg round-color:#7CAECC}
.leftdiv{border-radius:15px;float:right;height:100%;width:15%;back ground-color:#7CAECC}
.centerdiv{border-radius:15px;height:100%;width:70%;background-color:#C8CC3B;margin:auto;font-family:Arial, Helvetica, sans-serif;
font-size:medium;font-style:italic;direction:rtl;font-stretch:extra-expanded;font-weight:800;text-align:center;text-decoration:line-through;
text-indent:30px;text-shadow:5px 2px 7px #999999;text-transform:capitalize}
.menudiv{border-radius:15px;height:10%;background-color:#f00;width:50%;margin:auto;padding:3%}
.menudiv ul li{border-radius:15px;display:inline-block;list-style-type:none;padding-right:20px}
.content{width:100%;height:768px;display:block;ove rflow:hidden}
.footer{width:768px;height:80px;background-color:#fff000;bottom:10px;margin:20px auto;display:block}
</style>
</head>
<body>
<div class="maindiv">
<div class="menudiv">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div class="content">
<div class=" leftdiv">reza</div>
<div class=" rightdiv">reza</div>
<div class=" centerdiv">reza</div>
</div>
<div class="footer">4444444444</div>
</div>
</body>
</html>
موفق باشید