أستنجد بخبراء CSS فى أمر مهم

السلام عليكم..اخوانى يواجهنى الأن أخر مشكلة من مشاكل ظلت لمدة 3 أشهر لصناعة موقع واريد حل من أى شخص لديه خبرة طويلة مع CSS..الان اضع اللمسات الاخير باضافة SliderShow فصممت عنصرين على اليمسن والشمال للصورة بخلفية سوداء واريد اضافة صورتين أسهم يمين وشمال صغيرين باكجراوند يمثلان تقليب الصورة للامام أم التراجع...لكن يوجد مشكلة عندى وهى عدم ظهور صورة الباكجراوند لا تظهر أبدا وأتاكد من امتداد JPG فى الكتابة وأيضا متأكد من عنوان ملفين الصورتين أنهما فى نفس الفولدر الذى يوجد به ملف css..المشكلة غامضة....

html , body{

margin: 0; padding: 0; border: 0; background:; font-size: 10px;

} div , span , article , footer , header , hgroup , nav , section , h1 , h2 , h3 , h4 , h5 , h6 , blockquote , a , ol , ul , li , table , tr , th , td , tbody , tfoot , thead{ margin: 0; padding: 0; border: 0; vertical-align: baseline; background: ; } img { margin: 0; padding: 0; border: 0; } table { border-collapse: collapse; border-spacing: 0; } input , select , textarea , form , fieldset{ margin: 0; padding: 0; border: 0; } article , aside , dialog , figure , footer , header , hgroup{

} h1 , h2 , h3 , h4 , h5 , h6 , p , li , blackquote , td , th , a , caption , em , strong , strike{ font-family: Arial , Helvetica , sans-serif; font-size: 100%; font-weight: normal; font-style: normal; line-height: 100%; text-indent: 0; text-decoration: none; text-align: left; color: #000; }/ ol , ul{ list-style: none; } /Global/ /html {

} / body{ background-color: lightgrey; } /Headings/ h1 , h2 , h3 , h4 , h5 , h6{ font-weight: bold; color: #000; } h1 { font-size: 24px; } h2{ font-size: 20px; } h3{ font-size: 16px; } h4{ font-size: 14px; } h5{ font-size: 14px; } h6{ font-size: 14px; } h1 img , h2 img , h3 img , h4 img, h5 img , h6 img{ margin: 0; } /Text Elements*/ p{ color: #000; font-size: 12px; line-height: 150%; }

a{ font-size: 15px; } a:link{ color: blue; } a:visited{ color: blue; } a:hover { color: #f00; } a:active { color: #000; } a:focus{ color: #666; } blackquote { color: #000; } strong { font-weight: bold; } em{ font-style: italic; } /Images/

/Lists/ ul{

}

ul li{ color: #000; font-size: 12px; } ol li{ color: color: #000; font-size: 12px; }

{ background-color: #fff; } th{ font-weight: bold; } thead , th{ color: #ccc; } tbody{

} th,td,caption{

} caption{

} tfoot{

} { background-color: #ccc; text-align: center; font-style: italic; } caption{ color: #efefef; } b{ font-size: 15px; } /Container/

wrapper{

width:900px; margin: 20px auto; background-color: white;

}

top{

width:100%; background-color: black; overflow: hidden; 

}

top p{

color:white;

}

logo{

padding-top: 20px; float: left;

}

sample h3{

color: brown; padding: 80px; text-align: center;

}

socialmedia{

float: right; margin: 10px 100px; padding: 30px 40px;

}

socialmedia ul{

float:right;

}

socialmedia ul li{

display: inline;

}

navigation{

background-color: gray; clear: both; width:100%; height: 30px; 

}

navigation ul li{

float: left; 

}

navigation a:link{

color:white; display: block; min-width:100px; text-align: center; padding-bottom: 9px; padding-top: 6px; font-size: 15px; font-weight: bold; 

}

navigation a:hover{

color:white; background-color: red; 

}

navigation a:visited{

color:white;

}

navigation a:active{

color:white;

}

navigation a:link{

color:white;

}

banner{

background-color: lightgrey; width: 924px; height: 318px; margin-left: 0px; margin-right: 0px; }

prev{

width: 50px; height: 320px; float: left; background-color: black; background-image: url("left.png"); background-repeat: no-repeat; background-position: center; }

slider{

width: 800px; height: 318px; float: left; overflow: hidden; }

next{

width: 50px; height: 320px; background-color: black; background-image: url("right.png"); background-repeat: no-repeat; background-position: center; float: left; }

subbanner{

width:100%; background-color: #CC6699; padding: 20px 0;

}

subbanner p{

text-align: center; font-size: 18px; font-style: italic;

}

content{

float: left; width:650px; padding: 20px;

}

content img{

border: 3px solid green;

}

content p{

margin: 16px 0;

}

content a:link{

border: 1px solid black; color: black; background-color: pink;

}

sidebar h2{

margin: 20px 0 10px 0;

}

sidebar b{

margin: 1px 0;

}*/

sidebar{

 padding:20px; margin-left:675px; 

}

signin input{

border: 1px solid silver;

}

footer{

width:100%; background-color: black;

}

footer p{

color:white; font-size: 13px; text-align: center; padding: 10px 20px;

}*/

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

أخي أحمد، كود بهذا الحجم يفضل أن تضعه على رابط خارجي، مع كود HTML مبدئي لفهم السؤال. حاول استخدام خدمات من قبيل: JSBin أو CodePen.

على كل حال، الكود الحالي ينطوي على استخدام خاطئ ومتكرر للمحرف /.

يفترض استخدامه بالطريقة التالية:

/* Comment here */

الأفضل استعمال online editor أو ضعه على Git hub

أيضا أنت لم توضح الجزء الذي به المشكلة في الكود ؟؟

اعرض مشكلتك بشكل افضي اخي، اعمل برنت سكرين او اشرح الجزئية التي تريدها بشكل افضل !

thisisyusuf أضف ردا

افحص وعدل العنصر في وقت التشغيل في فايرفكس انقر على العنصر واختر افحص العنصر

ولكن لو استخدمت مكون JQuery

أنا استخدم wowslider وأخصصه كما أريد وأربطه بقاعدة بيانات ....

حاول أن تضع رابط لصورة خارجية (ابحث في جوجل عن أي صورة)، واخبرني إن ظهرت الصورة أو لا.