درس خاصيه position: absolute بلغة css

01-15-2010, 06:10 PM

مثال
http://www.xps0ft.com/css/
الشرح
الصوره

ومن ثما الاكواد جاهزه

كود بلغة HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="position: absolute" />
<meta name="keywords" content="تصميم في لغة css  position: absolute"  />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>درس تصميم position: absolute</title>

</head>

<body>
<div id="container">

 <div id="header">درس تصميم المربعات بخاصيه <br />
  position: absolute </div>
 <div id="main">
 <div id="box4">بسم الله الرحمن الرحيم</div>
 <div id="box">مثال فقط للتجربه الصتدوق</div>
 <div id="box2">زوايه الصندوق السحري</div>
 <div id="box3">مثال فقط للتجربه الصتدوق</div>

</div>
 
</div>

<div id="footer">جميع الحقوق محفوظه لموقع اكس بي سوفت</div>
</body>
</html>

اكواد css

كود:

html, body {
 height: 100%;
 padding:0;
 margin:0;
 }
 #container {
  background: #FFF;
  min-height: 100%;
  margin: 0 auto;
  width:760px;
  }
 /* Fix IE */
 * html #container {
  height: 100%;
  }
  #header {
    color: #FFF;
    background-color: #F9C;
    height: 60px;
    font-size: 24px;
    text-decoration: none;
    width: 100%;
    text-align: center;
   }
  #main {
    padding:10px;
    font-weight: bold;
    text-align: center;
   }
 #footer {
    background-color: #F60;
    font-size: 20px;
    text-align: center;
    height: 40px;
    margin-right: 100px;
    margin-left: 100px;
    padding-top:15px;
   }
  #box {
    position: absolute;
    top: 50px;
    left: 120px;
    border: 1px solid #000;
    clear: left;
    background-attachment: fixed;
    background-color: #C00;
    color: #FF0;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 50px;
    height: auto;
    width: auto;
    float: left;
    margin-top: 200px;
    margin-right: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
}

#box2 {
    position: absolute;
    top: 50px;
    left: 120px;
    border: 1px solid #000;
    clear: right;
    background-attachment: fixed;
    background-color: #000;
    color: #FF0;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 50px;
    height: auto;
    width: auto;
    float: right;
    margin-top: 200px;
    margin-right: 100px;
    margin-bottom: 100px;
    margin-left: 400px;
}
#box3 {
    position: absolute;
    top: 50px;
    left: 120px;
    border: 1px solid #000;
    clear: both;
    background-attachment: fixed;
    background-color: #C63;
    color: #FF0;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 50px;
    height: auto;
    width: auto;
    float: none;
    margin-top: 300px;
    margin-right: 250px;
    margin-bottom: 200px;
    margin-left: 250px;
}
#box4 {
    position: absolute;
    top: 50px;
    left: 120px;
    border: 1px solid #000;
    clear: both;
    background-attachment: fixed;
    background-color: #C63;
    color: #FF0;
    text-decoration: none;
    text-align: center;
    display: block;
    padding: 50px;
    height: auto;
    width: auto;
    float: none;
    margin-top: 100px;
    margin-right: 250px;
    margin-bottom: 250px;
    margin-left: 250px;
}
#container #main #box4:hover {
    color: #999;
    background-color: #FCC;
}
#container #main #box:hover {
    color: #CF0;
    background-color: #300;
}
#container #main #box2:hover {
    font-weight: bold;
    color: #000;
    text-decoration: none;
    background-color: #CCC;
}
#container #main #box3:hover {
    font-weight: bold;
    color: #F0F;
    text-decoration: none;
    background-color: #6C9;
}

الدرس الاصلي على شبكة اكس بي سوفت العربية
الرابط
درس خاصيه position: absolute بلغة css

01-15-2010, 06:16 PM

شكرا لك على شرح الموضوع

الله يعطيك الف عافيه

تقبل مروري

01-20-2010, 11:14 PM

تسلم اخي على المجهود

يعطيك الف عافية

ماننحرم من جديدك

06-05-2010, 04:13 PM

جزاك الله اخى الكريم على هذا الشرح

06-11-2010, 01:56 PM

الف شكر ليك

شكرا على المجهود الرائع

مـشكـور مـشكـور
مــشكــور مــشكــور
مـــشكـــور مـــشكـــور
مــــشكــــور مــــشكــــور
مـــــشكـــــور مـــــشكـــــور
مــــــشكــــــور مــــــشكــــــور
مـــــــشكـــــــور مـــــــشكـــــــور
مــــــــشكــــــــور مــــــــشكــــــــور
مـــــــــشكـــــــــور مـــــــــشكـــــــــور
مــــــــــشكــــــــــور مــــــــــشكــــــــــور
مـــــــــــشكـــــــــــور مـــــــــــشكـــــــــــور
مــــــــــــشكــــــــــــور مــــــــــــشكــــــــــــور
مـــــــــــــشكـــــــــــــور مـــــــــــــشكـــــــــــــور
مــــــــــــــشكــــــــــــــور مــــــــــــــشكــــــــــــــور
مـــــــــــــــشكـــــــــــــــور مـــــــــــــــشكـــــــــــــــور
مــــــــــــــــشكــــــــــــــــور مــــــــــــــــشكــــــــــــــــ ور
مـــــــــــــــــشكــــــــــــــــــور مـــــــــــــــــشكــــــــــــــــــور
مـــــــــــــــــشكــــــــــــــــــور مـــــــــــــــــشكــــــــــــــــــور
مــــــــــــــــشكـــــــــــــــــور مــــــــــــــــشكـــــــــــــــــور

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
طريقة عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

الإهداءات