هناك خاصية أريد الاستفسار عنها وهي تمديد الهير والفوتر دون وسط الصفحة بمعنى :
1- إذا كان الكل أي الهيدر والفوتر ووسط الصفحة لهم نفس مقاييس العرض فهذا لا مشكل فيه :
CODE
background:url(footer.png) repeat;
padding:20px;
سؤالي أو المشكلة في ما يلي تابع معي جيدا :
لنفرض أن لدينا وسط الصفحة 1100 بيكسل والهيدر والفوتر متمددين في هذه الحالة
لا مشكلة إذا كانت دقة الشاشة كبيرة 1280*1024 لكن إذا قللنا الدقة إلى 1024*768 أو 900*800
الذي يحصل هو أن وسط الصفحة يصبح أكبر من الفوتر والهيدر وبالتالي لن يصبحا أي
الهيدر والفوتر متمددان بل سينقصا من الجهة اليسرى
أريد طريقة جعلهما يتمددا في هذه الحالة من طرف الشاشة إلى الطرف الآخر كما كانا قبل تغيير الدقة
بحثت كثيرا لكني لم أجد الطريقة رغم أنه يوجد حل لأني لا حظت كثيرا من المواقع الوسط محدد والهيدر والفوتر متمددان
أرجوا من خبراء التصميم بارك الله فيكم حلا لهذه المشكلة.
وهذا مثال :
CODE
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-**="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Nouvelle page 1</title>
</head>
<body>
<div class="header">الهيدر</div>
<div class="content">وسط الصفحة</div>
<div class="footer">الفوتر</div>
<p align="center"> </p>
</body>
</html>
كود الستايل style.css :
CODE
body {
direction: rtl;
}
* { margin:0; }
.header {
background:#000;
font-size:16px;
color:#fff;
padding:20px ;
width: 100%;
font-family:Arial;
border-top: 7px #4E7DA7 solid;
border-bottom: 7px #4E7DA7 solid;
}
.footer {
background:#000;
font-size:16px;
color:#fff;
padding:20px ;
font-family:Arial;
border-top: 7px #4E7DA7 solid;
border-bottom: 7px #4E7DA7 solid;
}
.content {
background:#E45B00;
font-size:16px;
color:#fff;
padding:300px 20px 300px 0;
font-family:Arial;
width:1100px;
}