• مشکل در padding در ساخت منو
    #1
    سلام خسته نباشید
    من این منو رو طراحی کردم ولی تو margin و padding ایراد دارم .میشه کمکم کنید.

    کد:
    .menu
    {
        width:502px;
        height:40px;
        /*background-color:#F30;/*remove*/
        float:right;
        margin-right:4px;
        margin-top:12px;
        line-height:20px;
        
    }

    .menu ul
    {
        float:left;
    }

    .menu ul li
    {
        float:left;
        list-style-type:none;
        height:40px;
        text-align:center;
    }

    .menu ul li a
    {
        color:#FFBA00;
        display:block;
        text-decoration:none;
        height:22px;
        font-family:arial;
        font-size:14px;
    }
    .menu ul li a:hover
    {
        text-decoration:underline;
    }    
    /*.menu-home
    {
        margin-right:26px;
    }*/

    li.line
    {
        border-left-width:1px;
        border-left-style:solid;
        border-color:#999;
        
    }

    .icon
    {    width:16px;
         height:16px;
         background-image:url(../images/icon.png);
         background-repeat:no-repeat;
         /*margin-right:26px;
         margin-left:1px;*/
    }

    <div class="menu">
                   <ul>
                       <li><a href="#" title="" class="menu-home">Become a member</a></li>
                       <li class="line"><a href="#" title="">Business</a></li>
                       <li class="icon"></li>
                       <li class="line"><a href="#" title="">Academic </a></li>
                       <li class="icon"></li>
                       <li class="line"><a href="#" title="">Government</a></li>
                       <li class="icon"></li>
                   </ul>
               </div>

    آخرین ویرایش: 19-07-2015 ساعت 16:36، توسط Daniel
    پاسخ
    #2
    heightها رو پاک کنید
    فقط به a خاصیت padding بدید نه به li.

    پاسخ
    #3
    مرسی .من به هرکدوم که padingیا marginمیدادم یا borderها بهم میریخت یاicon هایی که گذاشتم.مجبور شدم به liهای padding بدم.
    1-چه جوری ارتفاع بردر ها کم کنم؟(درواقع من میخوام منوی سایت lyndaرو طراجی کنم)
    2-این جوری borderذاشتن کار منطقی هست یا نه؟

    پاسخ
    #4
    سلام
    ارتفاع border همون ارتفاع li هست. معمولا نیازی نیست به هیچکدوم height بدید.


    کد:
    .menu
    {
       /*background-color:#F30;/*remove*/
       float:right;
       margin-right:4px;
       margin-top:12px;
       line-height:20px;
    }

    .menu ul
    {
       float:left;
    }

    .menu ul li
    {
       float:left;
       list-style-type:none;
       padding: 5px 5px 5px 15px;
    }

    .menu ul li a
    {
       color:#FFBA00;
       display:block;
       text-decoration:none;
       font-family:arial;
       font-size:14px;
    }
    .menu ul li a:hover
    {
       text-decoration:underline;
    }    
    /*.menu-home
    {
       margin-right:26px;
    }*/

    li.line
    {
       border-left-width:1px;
       border-left-style:solid;
       border-color:#999;
       
    }

    .icon
    {    width:16px;
        height:16px;
        background-image:url(../images/icon.png);
        background-repeat:no-repeat;
        /*margin-right:26px;
        margin-left:1px;*/
    }

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان