/ قرار دادن 5 آیکون و توضیحات کنار هم... [html]
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 13

موضوع: قرار دادن 5 آیکون و توضیحات کنار هم... [html]

  1. #1
    Qorbat آنلاین نیست.
    Qorbat
    کاربر سايت
    28نوشته2مورد پسند

    تاریخ عضویت
    Aug 2015
    شماره عضویت
    9508
    پسندیده است
    28 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set

    قرار دادن 5 آیکون و توضیحات کنار هم... [html]

    سلام خسته نباشید..

    میخوام 5 تا آیکون در html به همراه توضیحاتشون که زیرشون هست کنار هم در یک ریف وسط صفحه قرار بدم.

    مثال :

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    یه کمکی میکنید.. البته بنده میخوام با 5 تا آیکون پیاده سازی ـش کنم .. اگر بصورت کد باشه ممنون میشم

    ممنون
    ویرایش توسط Qorbat : 08-31-2015 در ساعت 10:10 PM

  2. نوين وردپرس تبلیغات شما

  3. #2
    MahMoUoD آنلاین نیست.
    MahMoUoD
    کاربر سايت
    352نوشته322مورد پسند

    تاریخ عضویت
    May 2013
    شماره عضویت
    1744
    پسندیده است
    820 پست
    بلاگ
    پست
    میزان امتیاز
    333
    www.farshost.net
    یه دایو تعریف میکنید برای هر باکس
    داخلش عکس آیکون ها و توضیح زیرشو میزارید
    کد:
    <div class="box">
    <img src="#">
    <p>...</p>
    </div>
    حالا برای دایو با کلاس box خاصیت های زیر رو تعریف میکنید



    کد:
    .box{
    width:20%;
    float:right;
    margin:0 auto;
    }

    کاربر زیر پست MahMoUoD را پسندیده است:


    ویرایش توسط MahMoUoD : 08-31-2015 در ساعت 11:50 PM

  4. #3
    Qorbat آنلاین نیست.
    Qorbat
    کاربر سايت
    28نوشته2مورد پسند

    تاریخ عضویت
    Aug 2015
    شماره عضویت
    9508
    پسندیده است
    28 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set
    سلام..
    الان واسه هر کدوم یه دایو تعریف کردم
    حالا میخوام وسط صفحه قرار بگیرن دقیقا اینا .
    این سی اس اس رو چجوری تغییر بدم تا وسط صفحه قرار بگیرن دقیقا ؟
    کد:
    .Way1{
    float:right;
    margin-right:5%;
    }
    
    .Way2{
    float:right;
    margin-right:5%;
    }
    
    .Way3{
    float:right;
    margin-right:5%;
    }
    
    .Way4{
    float:right;
    margin-right:5%;
    }
    
    .Way5{
    float:right;
    margin-right:5%;
    }

  5. #4
    Ali.shafaey آنلاین نیست.
    Ali.shafaey
    کاربر برتر فصل
    مدير ارشد
    6,425نوشته8,292مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1571
    پسندیده است
    4,628 پست
    بلاگ
    پست
    میزان امتیاز
    8298
    مسئول 7 ستاره
    king-design.ir
    درود
    کد:
    <div class="All_li">
    <ul>
    <li><p> W i k i v b . I r </p></li>
    <li><p> W i k i v b . I r </p></li>
    <li><p> W i k i v b . I r </p></li>
    <li><p> W i k i v b . I r </p></li>
    <li><p> W i k i v b . I r </p></li>
    </ul>
    </div>
    و
    کد:
    .All_li ul{
    display: table;
    margin:0 auto;
    }
    .All_li ul li{
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 20px !important;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    }
    .All_li p{
    position: relative;
    top: 100px;
    }
    .All_li ul li:nth-child(1) {background: url('لینک عکس');}
    .All_li ul li:nth-child(2) {background: url('لینک عکس');}
    .All_li ul li:nth-child(3) {background: url('لینک عکس');}
    .All_li ul li:nth-child(4) {background: url('لینک عکس');}
    .All_li ul li:nth-child(5) {background: url('لینک عکس');}
    شاد باشیدمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست Ali.shafaey را پسندیده است:



    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #5
    MahMoUoD آنلاین نیست.
    MahMoUoD
    کاربر سايت
    352نوشته322مورد پسند

    تاریخ عضویت
    May 2013
    شماره عضویت
    1744
    پسندیده است
    820 پست
    بلاگ
    پست
    میزان امتیاز
    333
    www.farshost.net
    نقل قول نوشته اصلی توسط Qorbat نمایش پست ها
    سلام..
    الان واسه هر کدوم یه دایو تعریف کردم
    حالا میخوام وسط صفحه قرار بگیرن دقیقا اینا .
    این سی اس اس رو چجوری تغییر بدم تا وسط صفحه قرار بگیرن دقیقا ؟
    کد:
    .Way1{
    float:right;
    margin-right:5%;
    }
    
    .Way2{
    float:right;
    margin-right:5%;
    }
    
    .Way3{
    float:right;
    margin-right:5%;
    }
    
    .Way4{
    float:right;
    margin-right:5%;
    }
    
    .Way5{
    float:right;
    margin-right:5%;
    }

    سلام
    برای هر کدوم نباید کلاس جداگانه بزارید. کلاس همه ی باکس ها باید یکی باشه
    کد کاملش رو براتون میزارم. میتونید لینک ها و توضیح هارو جایگزین کنید
    HTML:


    کد:
    <div class="box-container">
        <img src="Adrese axe 1">
        <p>Tozihe axe 1</p>
    </div>
    <div class="box-container">
        <img src="Adrese axe 2">
        <p>Tozihe axe 2</p>
    </div>
    <div class="box-container">
        <img src="Adrese axe 3">
        <p>Tozihe axe 3</p>
    </div>
    <div class="box-container">
        <img src="Adrese axe 4">
        <p>Tozihe axe 4</p>
    </div>
    <div class="box-container">
        <img src="Adrese axe 5">
        <p>Tozihe axe 5</p>
    </div>

    CSS:

    کد:
      .box-container {
    width: 20%;
    float: right;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
    }


    البته به روش پست 4 هم میتونید عمل کنید. ولی این به نظرم ساده تر و راحت تر باشه.
    اگه دیدید یکی از باکس ها میره به سطر بعد عرض باکس رو کمتر از 20% مثلا 19% قرار بدین.


    موفق باشید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست MahMoUoD را پسندیده است:


    ویرایش توسط MahMoUoD : 09-01-2015 در ساعت 12:02 PM

  7. #6
    Qorbat آنلاین نیست.
    Qorbat
    کاربر سايت
    28نوشته2مورد پسند

    تاریخ عضویت
    Aug 2015
    شماره عضویت
    9508
    پسندیده است
    28 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set
    سلام تشکر دوستان.... @MahMoUoD داداش اگر بخوام فاصله بین عکس هارو کم کنم چکار کنم ؟ این فاصله width رو که کم میکنمش دیگه وسط وای نمیسته !

  8. #7
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    دوست عزیز تصاویر رو بدید تا فایل اماده رو تحویل بدم اینجوری گیج میشید.

    کاربر زیر پست Farshad Ghanbari را پسندیده است:



  9. #8
    Qorbat آنلاین نیست.
    Qorbat
    کاربر سايت
    28نوشته2مورد پسند

    تاریخ عضویت
    Aug 2015
    شماره عضویت
    9508
    پسندیده است
    28 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set
    ممنون ازت فرشاد عزیز....
    این عکس رو توی 5 تاش قرار بدید ( بعدا عوض میکنم خودم بقیشو ) : http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png
    و برای توضیحات زیرشون هم فقط بنویسید : " پروژه "

  10. #9
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    پیوست شد
    فايل هاي پيوست شده فايل هاي پيوست شده
    • نوع فایل: rar f.rar (414 بایت, 6 نمايش)

    کاربر زیر پست Farshad Ghanbari را پسندیده است:


    ویرایش توسط Farshad Ghanbari : 09-01-2015 در ساعت 05:36 PM

  11. #10
    Qorbat آنلاین نیست.
    Qorbat
    کاربر سايت
    28نوشته2مورد پسند

    تاریخ عضویت
    Aug 2015
    شماره عضویت
    9508
    پسندیده است
    28 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set
    تشکر فرشاد جان،
    میخواستم ببینم میشه یکم فاصله ی بین آیکون هارو بیشتر کرد؟؟؟
    کد رو میزارم برای دوستان که مجبور نشن دانلود کنن اگر میتونن کمک کنن :
    کد PHP:
    <html>
    <
    head>
    <
    title>Farshad_2025</title>
    <
    style>
    .
    box {
        
    positionrelative;
        
    width665px;
        
    height170px;
        
    margin50px auto;
        
    margin-bottom0;
    }
    .
    box ul li {
        list-
    stylenone;
        
    floatleft;
        
    width87px;
        
    height140px;
        
    margin15px;
    }
    .
    box ul li p {
        
    floatleft;
        
    width100%;
        
    text-aligncenter;
    }
    </
    style>
    </
    head>
    <
    body>

    <
    div class="box">

    <
    ul>

    <
    li> <img src="http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png" width="87" height="87" alt="project" /> <p>project</p> </li>

    <
    li> <img src="http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png" width="87" height="87" alt="project" /> <p>project</p> </li>

    <
    li> <img src="http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png" width="87" height="87" alt="project" /> <p>project</p> </li>

    <
    li> <img src="http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png" width="87" height="87" alt="project" /> <p>project</p> </li>

    <
    li> <img src="http://upload.wikivb.ir/images/ol5zg5mq3655clvcd4bn.png" width="87" height="87" alt="project" /> <p>project</p> </li>

    </
    ul>

    </
    div>

    </
    body>
    </
    html

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

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

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

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

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

  1. یه کمک کوچک در قالب html
    توسط babak در انجمن رسیدگی به مشکلات وردپرس شما
    پاسخ: 6
    آخرين نوشته: 03-27-2014, 09:32 PM
  2. کد html برای اطلاع رسانی در انجمن
    توسط M4hdi در انجمن رسیدگی به مشکلات انجمن شما ( پرسش و پاسخ )
    پاسخ: 8
    آخرين نوشته: 03-25-2014, 05:35 AM
  3. کد html اطاعبه بالای سایت
    توسط HonarNo در انجمن رسیدگی به مشکلات انجمن شما ( پرسش و پاسخ )
    پاسخ: 1
    آخرين نوشته: 12-29-2013, 04:55 PM
  4. پاسخ: 0
    آخرين نوشته: 06-29-2013, 12:46 PM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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