محاولة فاشلة في (css) تصميم استايل

**سطام سعد** · 09-12-2007

السلام عليكم ,

حبيت اعمل استايل متوافق مع المتصفحات باستخدام 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::

إذا كان بداية في غير المكان الصحيح فماهو الصحيح :shy:

**owner** · 09-12-2007

اهلا .

ممكن ترفق لنا الصور المستخدمه ؟

يمكن سبب عدم ظهور الصور هو اختلاف مسار الصور ,

والله اعلم .

**سطام سعد** · 09-12-2007

تفضل owner

**Flasher** · 09-12-2007

كود 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

مب شرط ان تعريف الdiv يكون 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;
}

مابين #header و .اسم الكلاس
لازم تضع مسافة
والا في هذه الحالة يبحث عن العنصر اللي تعريفه يكون :

<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;
}

**AWTARY.COM** · 09-12-2007

هذا برنامج مجاني 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

**owner** · 09-12-2007

تفضل هذا الكود الصحيح .

كود:

 

<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>

بالتوفيق ان شاء الله

**سطام سعد** · 09-12-2007

للاسف الكود فيه مشكلة مادري كيف اوصل لها

في المرفق صوره توضح الهيدر والفوتر .. اللي ابي تعرفونه فيه اعمده على اليمين واليسار وفيه المنتصف ماشوفها واضح في لوحة التصميم , يظهر لي خط فقط

**وافي الروح** · 09-12-2007

ليست لدي خلفيه كامله عن التوزيع لكن اتصور لو تستبدل div بالـspan في توزيع الصور
اتوقع تنحل معك ولايتفكك التصميم

**owner** · 09-12-2007

اهلا ..

لاحظت المشكلة لما كنت اعدل في الاكواد لكن قلت يمكن انته تبغيها بهذا الشكل

على العموم ..

احذف

كود PHP:


<div class="middle"></div>

وراح يطلع تمام الهيدر

الفوتر ما عرفت شنو المشكلة فيه بالضبط .

ياريت لو توضحها اكثر

**سطام سعد** · 10-12-2007

الآن تمام بعد حذف الكود , لكن الفوتر يظهر متجه ليمين :con2:

**owner** · 10-12-2007

اهلا مجددا

عدل

كود:

<div class="middle"></div>

نسيت تضيف "l" :nice:

وبالنسبة الى اسم الصورة فانته نسيت تعدلها في ملفات الستايل

كود:

#footer .middle {
 background: url('css-style/footer.middle.jpg') repeat-x;
 height: 84px;
 margin-right: auto;
 margin-left: auto;
}

انا عدل عليه حتى يكون متمدد على المحور السيني ,

بالنسبة الى توسيط الفوتر فممكن تكتب الكود

كود:

<center>

اعلى بداية الفوتر
وتغلقه بـ

كود:

 </center>

**سطام سعد** · 10-12-2007

عدلت قبل لكن للاسف الخلفيه لاتظهر وعند اضافة كود

كود:

<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>

**owner** · 10-12-2007

اهلا.

اخي انا جربت كود الستايل الخاص بك وظهر لي الناتج .

فهل هذا المطلوب او توجد مشكلة ؟

**سطام سعد** · 10-12-2007

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

الهيدر مافيه مشاكل

**owner** · 10-12-2007

المشاركة الأصلية كتبت بواسطة هاجس ليل مشاهدة المشاركة

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

الهيدر مافيه مشاكل

اذا كنت تقصد الفراغ الابيض اللي في النص فهذا ناتج لانك خليت الصورة تتكرر على المحور الصادي Y ولهذا تتكرر عموديا وليس افقيا .

الصورة اللي تحت لأنك حدد طول الفوتر في الوسط

كود:

	height: 171px;

وفي باقي ستايل الفوتر حددت الطول

كود:

height: 84px;

فراح يكون الوسط اطول من الباقي

بالتوفيق ان شاء الله

الموضوع: محاولة فاشلة في (css) تصميم استايل

أدوات الموضوع

بحث في الموضوع

محاولة فاشلة في (css) تصميم استايل

المواضيع المتشابهه

محاولة فاشلة لعمل محرك بحث للقوالب - يرجا المساعدة -جنني!!!!!!!!!

محاولة فاشلة في إختراق ايميلي ....!!!

أطفال الإنترنت ... إلى متى ؟؟ محاولة اختراق فاشلة لمنتديات الهنوف ..

حدوث محاولة فاشلة لاختراق اشتراكي في سوالف ... من هو

ضوابط المشاركة