| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
|
| | LinkBack | أدوات الموضوع |
| |||||
| محاولة فاشلة في (css) تصميم استايل حبيت اعمل استايل متوافق مع المتصفحات باستخدام css ولكن كالعادة البداية تكون فاشلة الكود كود: <style type="text/css">
<!--
#content {
width: 778px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
}
#header.right {
background-image: url(images/css-style/css_06.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 66px;
}
#header.right1 {
background-image: url(images/css-style/css_05.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 166px;
}
#header.right2 {
background-image: url(images/css-style/css_04.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 164px;
}
#header.left {
background-image: url(images/css-style/css_01.jpg);
float: left;
height: 247px;
width: 113px;
}
#header.left1 {
background-image: url(images/css-style/css_02.jpg);
float: left;
height: 247px;
width: 208px;
}
#header.middle {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
width: 1px;
margin-right: auto;
margin-left: auto;
}
.shadowright {
background-image: url(images/css-style/shadowrigth.jpg);
background-repeat: repeat-y;
background-position: right;
padding-left: 8px;
}
.shadowleft {
background-image: url(images/css-style/shadowleft.jpg);
background-position: left;
padding-left: 8px;
background-repeat: repeat-y;
}
#contaner {
}
#footer {
background-image: url(images/css-style/css_08.jpg);
background-repeat: repeat-x;
height: 84px;
width: 778px;
background-position: center;
}
#footer.right {
background-image: url(images/css-style/footer.right.jpg);
background-repeat: no-repeat;
float: right;
height: 84px;
width: 15px;
}
#footer.left {
background-image: url(images/css-style/footer.left.jpg);
float: left;
height: 84px;
width: 15px;
}
#footer .middle {
background: url(images/top_h_middle.gif) no-repeat;
height: 171px;
margin-right: auto;
margin-left: auto;
width: 337px;
}
-->
</style>
<div id="content">
<!--header-->
<div id="header">
<div class="header.right"></div>
<div class="header.right1"></div>
<div class="header.right2"></div>
<div class="header.middle"></div>
<div class="header.left"></div>
<div class="header.left1"></div>
</div>
<!--/header-->
<!--contaner-->
<div class="shadowrgiht">
<div class="shadowleft">
<div id="contaner">
</div>
</div>
</div>
<!--/contaner-->
<!--footer-->
<div id="footer">
<div class="footer.right"></div>
<div class="footer.left"></div>
<div class="footer.midde"></div>
</div>
<!--/footer-->
</div> بالاضافة إلى ان الفوتر مايجي مع الجدول مضبوط يطلع يسار او يتمدد طبعا اعتمد على شرح ca2oom لأول مرة : طريقه توزيع صور الإستايل بواسطة css بدون جدوال . - ::TRAIDNT FORUM:: إذا كان بداية في غير المكان الصحيح فماهو الصحيح | |||||
|
| |||||
| كود بلغة HTML: <div class="header.right"></div> <div class="header.right1"></div> <div class="header.right2"></div> <div class="header.middle"></div> <div class="header.left"></div> <div class="header.left1"></div> اذا كتبت بال css كود: #header .right اجعلهم كذا : كود بلغة HTML: <div class="right"></div> <div class="right1"></div> <div class="right2"></div> <div class="middle"></div> <div class="left"></div> <div class="left1"></div> كود: #header.right {
background-image: url(images/css-style/css_06.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 66px;
}
#header.right1 {
background-image: url(images/css-style/css_05.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 166px;
}
#header.right2 {
background-image: url(images/css-style/css_04.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 164px;
}
#header.left {
background-image: url(images/css-style/css_01.jpg);
float: left;
height: 247px;
width: 113px;
}
#header.left1 {
background-image: url(images/css-style/css_02.jpg);
float: left;
height: 247px;
width: 208px;
}
#header.middle {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
width: 1px;
margin-right: auto;
margin-left: auto;
} لازم تضع مسافة والا في هذه الحالة يبحث عن العنصر اللي تعريفه يكون : <div id="header" class="right"></div> اما اذا وضعنا المسافة فيبحث عن عنصر بداخل الheader.... كود: #header .right {
background-image: url(images/css-style/css_06.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 66px;
}
#header .right1 {
background-image: url(images/css-style/css_05.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 166px;
}
#header .right2 {
background-image: url(images/css-style/css_04.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 164px;
}
#header .left {
background-image: url(images/css-style/css_01.jpg);
float: left;
height: 247px;
width: 113px;
}
#header .left1 {
background-image: url(images/css-style/css_02.jpg);
float: left;
height: 247px;
width: 208px;
}
#header .middle {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
width: 1px;
margin-right: auto;
margin-left: auto;
} | |||||
|
| |||||
|
هذا برنامج مجاني css ![]() رابط الموقع Free CSS Toolbox تحميل البرنامج : Download Free CSS Toolbox مميزات البرنامج برامج مدفوعة Rapid CSS 2007 Rapid CSS Editor 2007 - cascading style sheet editor Style Studio 3 Download Style Studio 3.0 by style-sheets.com | |||||
|
| |||||
|
تفضل هذا الكود الصحيح . كود:
<style type="text/css">
<!--
#content {
width: 778px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
}
#header .right {
background-image: url(css-style/css_06.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 66px;
}
#header .right1 {
background-image: url(css-style/css_05.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 166px;
}
#header .right2 {
background-image: url(css-style/css_04.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 164px;
}
#header .left {
background-image: url(css-style/css_01.jpg);
float: left;
height: 247px;
width: 113px;
}
#header .left1 {
background-image: url(css-style/css_02.jpg);
float: left;
height: 247px;
width: 208px;
}
#header .middle {
background-image: url(css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
width: 1px;
margin-right: auto;
margin-left: auto;
}
.shadowright {
background-image: url(css-style/shadowrigth.jpg);
background-repeat: repeat-y;
background-position: right;
padding-left: 8px;
}
.shadowleft {
background-image: url(css-style/shadowleft.jpg);
background-position: left;
padding-left: 8px;
background-repeat: repeat-y;
}
#contaner {
}
#footer {
background-image: url(css-style/css_08.jpg);
background-repeat: repeat-x;
height: 84px;
width: 778px;
background-position: center;
}
#footer .right {
background-image: url(css-style/footer.right.jpg);
background-repeat: no-repeat;
float: right;
height: 84px;
width: 15px;
}
#footer .left {
background-image: url(css-style/footer.left.jpg);
float: left;
height: 84px;
width: 15px;
}
#footer .middle {
background: url(css-style/top_h_middle.gif) no-repeat;
height: 171px;
margin-right: auto;
margin-left: auto;
width: 337px;
}
-->
</style>
<div id="content">
<!--header-->
<div id="header">
<div class="right"></div>
<div class="right1"></div>
<div class="right2"></div>
<div class="middle"></div>
<div class="left"></div>
<div class="left1"></div>
</div>
<!--/header-->
<!--contaner-->
<div class="shadowrgiht">
<div class="shadowleft">
<div id="contaner">
</div>
</div>
</div>
<!--/contaner-->
<!--footer-->
<div id="footer">
<div class="right"></div>
<div class="left"></div>
<div class="midde"></div>
</div>
<!--/footer-->
</div> | |||||
|
| |||||
|
اهلا .. لاحظت المشكلة لما كنت اعدل في الاكواد لكن قلت يمكن انته تبغيها بهذا الشكل ![]() على العموم .. احذف كود PHP: الفوتر ما عرفت شنو المشكلة فيه بالضبط . ياريت لو توضحها اكثر | |||||
|
| |||||
|
اهلا مجددا ![]() عدل كود: <div class="middle"></div> وبالنسبة الى اسم الصورة فانته نسيت تعدلها في ملفات الستايل كود: #footer .middle {
background: url('css-style/footer.middle.jpg') repeat-x;
height: 84px;
margin-right: auto;
margin-left: auto;
} بالنسبة الى توسيط الفوتر فممكن تكتب الكود كود: <center> وتغلقه بـ كود: </center> | |||||
|
| |||||
عدلت قبل لكن للاسف الخلفيه لاتظهر وعند اضافة كود كود: <div class="middle"></div> ![]() هذا كود تعريف منتصف الفوتر كود: }
#footer .middle {
height: 171px;
margin-right: auto;
margin-left: auto;
width: 337px;
background-image: url(images/css-style/footer.middle.jpg);
background-repeat: repeat-y;
} كود: </div> </div> </div> <!--/contaner--> <!--footer--> <center> <div id="footer"> <div class="right"></div> <div class="left"></div> </div> </center> <!--/footer--> </div> | |||||
|
| |||||
| اقتباس:
الصورة اللي تحت لأنك حدد طول الفوتر في الوسط كود: height: 171px; كود: height: 84px; بالتوفيق ان شاء الله | |||||
|
| |||||
|
اهلا .. استخدم السبان اقتباس:
او استخدم الDiv ولكن تعمل لها فلوت << لا احبذ هذه الطريقه لأن عندك Div's كثيره . لو ما عرفت ضيفني على Aldirazi#Live.com << استبدل # بـ@ بالتوفيق ان شاء الله | |||||
|
| |||||
| اقتباس:
| |||||
|
| |||||
|
لم يتغيير شي كود: #content {
width: 778px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
}
#header .right {
background-image: url(images/css-style/css_06.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 66px;
}
#header .right1 {
background-image: url(images/css-style/css_05.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 166px;
}
#header .right2 {
background-image: url(images/css-style/css_04.jpg);
background-repeat: no-repeat;
float: right;
height: 247px;
width: 164px;
}
#header .left {
background-image: url(images/css-style/css_01.jpg);
float: left;
height: 247px;
width: 113px;
}
#header .left1 {
background-image: url(images/css-style/css_02.jpg);
float: left;
height: 247px;
width: 208px;
}
#header .middle {
background-image: url(images/css-style/css_03.jpg);
background-repeat: repeat-x;
height: 247px;
width: 1px;
margin-right: auto;
margin-left: auto;
}
.shadowright {
background-image: url(images/css-style/shadowrigth.jpg);
background-repeat: repeat-y;
background-position: right;
padding-left: 8px;
}
.shadowleft {
background-image: url(images/css-style/shadowleft.jpg);
background-position: left;
padding-left: 8px;
background-repeat: repeat-y;
}
#contaner {
}
#footer {
clear: both;
background-image: url(images/css-style/footer.right.jpg);
background-repeat: repeat-x;
height: 84px;
width: 778px;
}
#footer .right {
background-image: url(images/css-style/footer.right.jpg);
background-repeat: repeat-x;
float: right;
height: 84px;
width: auto;
text-align: right;
font-family: tahoma;
font-size: 11px;
color: #FFFFFF;
padding-top: 50px;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 5px;
}
#footer .left {
margin: 0px;
background-image: url(images/css-style/footer.left.jpg);
float: left;
height: 84px;
text-align: left;
font-family: tahoma;
font-size: 11px;
color: #FFFFFF;
padding-top: 50px;
background-repeat: repeat-x;
padding-left: 5px;
padding-right: 25px;
}
body {
margin: 0px;
} | |||||
|
![]() |
| |
| |
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| طريقة حفظ أنماط Css بشكل منفصل ( External Sheet ) | ca2oom | إصلاح وصيانة المنتديات | 19 | 03-03-2008 02:13 AM |
| التسجيل في الدورة: الغربية التطويرية في تصميم استايل (مبتدى) | golden eye | إصلاح وصيانة المنتديات | 6 | 06-11-2005 12:52 PM |
| بحمد الله تم الانتهاء من تصميم الاهداء السادس استايل ( الطير واسير ) تفضلوا بتحميله | الطير | إصلاح وصيانة المنتديات | 9 | 17-06-2005 05:21 PM |
| @@@@@ أكبر مكتبة استايلات @@@@@@ | help me | إصلاح وصيانة المنتديات | 44 | 15-07-2003 06:30 AM |
| اكثر من 85 استايل معرب (( أكبر واجمل مكتبة استايلات في المنتديات العربية )) | alra7a.com | إصلاح وصيانة المنتديات | 5 | 22-02-2003 12:25 PM |