[مشكلة] ارجوا توضيح اخطائي بمواضع العناصر في css

محروم.كوم · #1 09-28-2011, 04:10 AM

السلام عليكم و رحمة الله و بركاته

اخواني مشلتي بإختصار هي بموضع العناصر عند عرض التصميم (طبعا اقصد CSS)
اي بمعنى انني عندما اعرض التصميم بملئ الشاشة فلا مشكلة و يظهر التصميم كما هو مطلوب كالتالي : (لكن لاحظو العلامات الصفراء لأنها ستوضح مشكلتي في الصورة التي تليها)

اما عند تصغير شاشة المتصفح فإن العناصر تتداخل مع بعضها البعض و بعضها يختفي جزء منه و بعضها لا يبقى في الوسط كما في الصورة التالية : (لاحظو ايضا العلامات الصفراء)

و هذا هو كود ال CSS الذي كتبته :

رمز PHP:

body {
direction: rtl;
background: #FAFAFA;
font-family: Tahoma;
font-size: 13px;
text-shadow: 1px 1px 2px #000000;
}

.tab{
border: 1px double silver;
border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
background-color: #f1f1f1;
position: absolute;
left:50%;
margin-top:220px;
margin-left:-250px;
padding:15px;
}

#pic {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
background-color: #f1f1f1;
position: fixed;
left:50%;
margin-top:50px;
margin-left:-700px;
padding:15px;
width: 1120px;
height: 570px;
overflow: auto;
}

#footer {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
position:fixed;
left:10px;
bottom:10px;
padding: 10px;
margin: 10px;
width:96%;
background: #F1F1F1;
color: gray;
}

.heading {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
padding: 10px;
margin: 10px;
width:97%;
background: #F1F1F1;
color: gray;
text-align: center;
}

.minimal {
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
-ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
-o-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px Tahoma;
line-height: 1;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 190px;

}

.minimal:hover {
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
-ms-box-shadow: inset 0 0 1px 1px #eaeaea;
-o-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}

.minimal:active {

background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
-ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
-o-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}

.sidebar {
width: 210px;
border: 1px solid #999;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
padding: 10px;
margin-top: 50px;
margin-right: 10px;
}

.sidebar .headbar {
background-color: #999;
color: #FFF;
text-align: center;
padding: 5px;
font-weight: bold;
}

.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}

.sidebar ul li {}

.sidebar ul li a {
display: block;
background-color: #FFF;
color: #555;
padding: 5px 7px 5px 7px;
text-decoration: none;
border-bottom: 1px solid #F1F1F1;
}
.sidebar ul li a:hover{
background-color: #F1F1F1;
color: #000;
border-bottom: 1px dotted #000;
}

ارجوا المساعدة و لكم جزيل الشكر __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مشكلة تواجهني نقطة التمدد الرجاء توضيح الامر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-22-2011 09:40 AM
مشكلة بالقاعدة البيانات المنتدى مع صورة توضيح	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	09-02-2010 06:00 PM
مقترح «الأجانب السبعة» يفتح الباب لتجنيس أفضل العناصر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-15-2010 10:30 AM
_(``·._ برنامج Inpaint لحدف العناصر من الصور + شرح بالصور _.·``)_	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-30-2009 03:10 PM
عيسى عبيد: العناصر الشابة مكسبنا من المباراة	وحداوي البال	رياضة محلية و عالمية	7	06-26-2009 10:01 AM