WFruit | Fruit Supplier and Wholesale
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 11

موضوع: مشکل css برای اسلاید شو

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 40.0.2214.115
    میزان امتیاز
    29

    پیش فرض مشکل css برای اسلاید شو

    با سلام.

    من یک اسلایدشو میخوام تو navbar بزارم از لحاظ مکان مشکلی ندارم فقط با cssاش مشکل دارم.

    کد css اش اینه »:
    کد:
    #gallery{
    	/* CSS3 Box Shadow */
    	-moz-box-shadow:0 0 3px #AAAAAA;
    	-webkit-box-shadow:0 0 3px #AAAAAA;
    	box-shadow:0 0 3px #AAAAAA;
    	
    	/* CSS3 Rounded Corners */
    	
    	-moz-border-radius-bottomleft:4px;
    	-webkit-border-bottom-left-radius:4px;
    	border-bottom-left-radius:4px;
    	
    	-moz-border-radius-bottomright:4px;
    	-webkit-border-bottom-right-radius:4px;
    	border-bottom-right-radius:4px;
    	
    	border:1px solid white;
    	
    	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
    	
    	/* The width of the gallery */
    	width:920px;
    	overflow:hidden;
    }
    
    
    #slides{
    	/* This is the slide area */
    	height:400px;
    	
    	/* jQuery changes the width later on to the sum of the widths of all the slides. */
    	width:920px;
    	overflow:hidden;
    }
    
    
    .slide{
    	float:left;
    }
    
    
    #menu{
    	/* This is the container for the thumbnails */
    	height:45px;
    }
    
    
    ul{
    	margin:0px;
    	padding:0px;
    }
    
    
    li{
    	/* Every thumbnail is a li element */
    	width:60px;
    	display:inline-block;
    	list-style:none;
    	height:45px;
    	overflow:hidden;
    }
    
    
    li.inact:hover{
    	/* The inactive state, highlighted on mouse over */
    	background:url(img/pic_bg.png) repeat;
    }
    
    
    li.act,li.act:hover{
    	/* The active state of the thumb */
    	background:url(img/active_bg.png) no-repeat;
    }
    
    
    li.act a{
    	cursor:default;
    }
    
    
    .fbar{
    	/* The left-most vertical bar, next to the first thumbnail */
    	width:2px;
    	background:url(img/divider.png) no-repeat right;
    }
    
    
    li a{
    	display:block;
    	background:url(img/divider.png) no-repeat right;
    	height:35px;
    	padding-top:10px;
    }
    
    
    a img{
    	border:none;
    }
    و کد اچ تی ام ال نمایش اسلایدشو اینه

    کد HTML:
    
      <div id="gallery">
        <div id="slides">
        <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>
        </div>
        <div id="menu">
        <ul> <li class="fbar">&nbsp;</li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
        </ul>
        </div>
    </div>

    وقتی کد css رو اضافه میکنم به additional.css قالب انجمن بهم میخوره به دلیل li و ul است. نمیشه کاری کرد که این کد css فقط برای همون بلوک توی navbar باشه ؟

    نمیشه یه کاری کرد که li , ul توی css اسمشون تغییر کنه تا اینجوری قاطی نشه؟

    خیلی گیر این کار موندم !!!




  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Oct 2014
    ورژن ویبولتین
    4
    نوشته ها
    53
    مورد پسند
    10 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 35.0
    میزان امتیاز
    10

    پیش فرض

    درود
    از تگ <style> قبل کد html ی که داری استفاده کن و کد Css رو توی تگ <style> قرار بده.
    بر قرار و شکیبا باشید...

    کاربر مقابل از 3a3ver بابت این پست مفید تشکر کرده است:


  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 40.0.2214.115
    میزان امتیاز
    29

    پیش فرض

    یعنی اینطوری>؟ نشدد

    کد HTML:
    <style>
    code css
    code html man
    
    </style>
    نقل قول نوشته اصلی توسط 3a3ver نمایش پست ها
    درود
    از تگ <style> قبل کد html ی که داری استفاده کن و کد Css رو توی تگ <style> قرار بده.
    بر قرار و شکیبا باشید...
    ....
    ویرایش توسط sheymes : 2015/03/06 در ساعت 03:31 PM دلیل: ادغام دو پست

  5. Top | #4
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 40.0.2214.115
    میزان امتیاز
    29

    پیش فرض

    بالا

  6. Top | #5
    کاربر سایت

    تاریخ عضویت
    Oct 2014
    ورژن ویبولتین
    4
    نوشته ها
    53
    مورد پسند
    10 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 35.0
    میزان امتیاز
    10

    پیش فرض

    نقل قول نوشته اصلی توسط sheymes نمایش پست ها
    یعنی اینطوری>؟ نشدد

    کد HTML:
    <style>
    code css
    code html man
    
    </style>


    ....
    درود مجدد.

    خیر به اینگونه:

    کد:
    <div id="Dive Slidere Shoma" >
    <style>
    Code Haye css Shoma
    </style>
    
    Mahale Cod Haye HTML Shoma
    
    </div>
    مشکلی بود در خدمتم.
    بر قرار باشید...

    کاربر مقابل از 3a3ver بابت این پست مفید تشکر کرده است:


  7. Top | #6
    کاربر اخراجی

    تاریخ عضویت
    Dec 2012
    ورژن ویبولتین
    4.2.2
    نوشته ها
    436
    مورد پسند
    174 بار
    اطلاعات
    Windows NT 6.4 Chrome 41.0.2272.76
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط 3a3ver نمایش پست ها
    درود
    از تگ <style> قبل کد html ی که داری استفاده کن و کد Css رو توی تگ <style> قرار بده.
    بر قرار و شکیبا باشید...
    چه ربطی داره بردار من ؟

    به اول تگ های سی اس اس و اچ تی ام التون پیش نیاز اضافه کنید
    مثلا اگه میخواید li برای یک مکان خاص اجرا بشه اینجوری عمل کنید
    کد:
     li .myclassname { css here }
    با این کد میگه که حتی اگه ما li داشتیم هم کار نکنه یعنی باید به این صورت اجرا بشه
    کد:
    <li class="myclassname">code</li>
    موفق باشید

    یه راهی هم هست که کل کد ها رو ادیت نکنید اونم اینه که چون مرحله اول یه div با id - gallery روخوانی شده میتونید به تمام دستورات سی اس اس قبلش #gallery اضافه کنید
    از کد زیر به جای سی اس اس استفاده کنید
    کد:
    #gallery{
    	/* CSS3 Box Shadow */
    	-moz-box-shadow:0 0 3px #AAAAAA;
    	-webkit-box-shadow:0 0 3px #AAAAAA;
    	box-shadow:0 0 3px #AAAAAA;
    	
    	/* CSS3 Rounded Corners */
    	
    	-moz-border-radius-bottomleft:4px;
    	-webkit-border-bottom-left-radius:4px;
    	border-bottom-left-radius:4px;
    	
    	-moz-border-radius-bottomright:4px;
    	-webkit-border-bottom-right-radius:4px;
    	border-bottom-right-radius:4px;
    	
    	border:1px solid white;
    	
    	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
    	
    	/* The width of the gallery */
    	width:920px;
    	overflow:hidden;
    }
    
    
    
    
    #gallery #slides{
    	/* This is the slide area */
    	height:400px;
    	
    	/* jQuery changes the width later on to the sum of the widths of all the slides. */
    	width:920px;
    	overflow:hidden;
    }
    
    
    
    
    #gallery .slide{
    	float:left;
    }
    
    
    
    
    #gallery #menu{
    	/* This is the container for the thumbnails */
    	height:45px;
    }
    
    
    
    
    #gallery ul{
    	margin:0px;
    	padding:0px;
    }
    
    
    
    
    #gallery li{
    	/* Every thumbnail is a li element */
    	width:60px;
    	display:inline-block;
    	list-style:none;
    	height:45px;
    	overflow:hidden;
    }
    
    
    
    
    #gallery li.inact:hover{
    	/* The inactive state, highlighted on mouse over */
    	background:url(img/pic_bg.png) repeat;
    }
    
    
    
    
    #gallery li.act,li.act:hover{
    	/* The active state of the thumb */
    	background:url(img/active_bg.png) no-repeat;
    }
    
    
    
    
    #gallery li.act a{
    	cursor:default;
    }
    
    
    
    
    #gallery .fbar{
    	/* The left-most vertical bar, next to the first thumbnail */
    	width:2px;
    	background:url(img/divider.png) no-repeat right;
    }
    
    
    
    
    #gallery li a{
    	display:block;
    	background:url(img/divider.png) no-repeat right;
    	height:35px;
    	padding-top:10px;
    }
    
    
    
    
    #gallery a img{
    	border:none;
    }
    تمام ، نیاز هم نیست چیز دیگه ای عوض کنید

    کاربر مقابل از PersianCloob بابت این پست مفید تشکر کرده است:


  8. Top | #7
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 41.0.2272.89
    میزان امتیاز
    29

    پیش فرض

    نقل قول نوشته اصلی توسط PersianCloob نمایش پست ها
    چه ربطی داره بردار من ؟

    به اول تگ های سی اس اس و اچ تی ام التون پیش نیاز اضافه کنید
    مثلا اگه میخواید li برای یک مکان خاص اجرا بشه اینجوری عمل کنید
    کد:
     li .myclassname { css here }
    با این کد میگه که حتی اگه ما li داشتیم هم کار نکنه یعنی باید به این صورت اجرا بشه
    کد:
    <li class="myclassname">code</li>
    موفق باشید

    یه راهی هم هست که کل کد ها رو ادیت نکنید اونم اینه که چون مرحله اول یه div با id - gallery روخوانی شده میتونید به تمام دستورات سی اس اس قبلش #gallery اضافه کنید
    از کد زیر به جای سی اس اس استفاده کنید
    کد:
    #gallery{
        /* CSS3 Box Shadow */
        -moz-box-shadow:0 0 3px #AAAAAA;
        -webkit-box-shadow:0 0 3px #AAAAAA;
        box-shadow:0 0 3px #AAAAAA;
        
        /* CSS3 Rounded Corners */
        
        -moz-border-radius-bottomleft:4px;
        -webkit-border-bottom-left-radius:4px;
        border-bottom-left-radius:4px;
        
        -moz-border-radius-bottomright:4px;
        -webkit-border-bottom-right-radius:4px;
        border-bottom-right-radius:4px;
        
        border:1px solid white;
        
        background:url(img/panel.jpg) repeat-x bottom center #ffffff;
        
        /* The width of the gallery */
        width:920px;
        overflow:hidden;
    }
    
    
    
    
    #gallery #slides{
        /* This is the slide area */
        height:400px;
        
        /* jQuery changes the width later on to the sum of the widths of all the slides. */
        width:920px;
        overflow:hidden;
    }
    
    
    
    
    #gallery .slide{
        float:left;
    }
    
    
    
    
    #gallery #menu{
        /* This is the container for the thumbnails */
        height:45px;
    }
    
    
    
    
    #gallery ul{
        margin:0px;
        padding:0px;
    }
    
    
    
    
    #gallery li{
        /* Every thumbnail is a li element */
        width:60px;
        display:inline-block;
        list-style:none;
        height:45px;
        overflow:hidden;
    }
    
    
    
    
    #gallery li.inact:hover{
        /* The inactive state, highlighted on mouse over */
        background:url(img/pic_bg.png) repeat;
    }
    
    
    
    
    #gallery li.act,li.act:hover{
        /* The active state of the thumb */
        background:url(img/active_bg.png) no-repeat;
    }
    
    
    
    
    #gallery li.act a{
        cursor:default;
    }
    
    
    
    
    #gallery .fbar{
        /* The left-most vertical bar, next to the first thumbnail */
        width:2px;
        background:url(img/divider.png) no-repeat right;
    }
    
    
    
    
    #gallery li a{
        display:block;
        background:url(img/divider.png) no-repeat right;
        height:35px;
        padding-top:10px;
    }
    
    
    
    
    #gallery a img{
        border:none;
    }
    تمام ، نیاز هم نیست چیز دیگه ای عوض کنید
    ببخشید کد html اسلایدشو رو که گذاشتم میتونین با این هما هنگ گنین کدشو بدین خیلی ممنون میشم

  9. Top | #8
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Linux Chrome 38.0.2125.509
    میزان امتیاز
    29

    پیش فرض

    بالا '''''

    دوستان کسی میتونه اینجوری که دوستمون PersianCloob گفت تنظیم کنه کد هارو?

  10. Top | #9
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Linux Chrome 38.0.2125.509
    میزان امتیاز
    29

    پیش فرض

    بااالا

  11. Top | #10
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    210
    مورد پسند
    58 بار
    اطلاعات
    Linux Chrome 38.0.2125.509
    میزان امتیاز
    29

    پیش فرض

    up

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •