Блог

Главная - Вопросы по программированию - Удалить последний разделитель из меню

Удалить последний разделитель из меню

#html #css #joomla

#HTML #css #joomla

Вопрос:

Я создаю меню в joomla (не волнуйтесь, если вы не знаете joomla, этот вопрос связан с HTML-CSS).

(like "|") Между каждым меню есть разделитель.

это мой код также на jsfiddle http://jsfiddle.net/WRuTC /

HTML

 <div id="footerlinks">        <div class="module">
            <div>
                <div>
                    <div>
                                            <table width="100%" cellspacing="1" cellpadding="0" border="0"><tbody><tr><td nowrap="nowrap"><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=11">HOME</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=12">ABOUT WLB</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=13">KEY PERSONNEL</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=14">CAPABILITIES</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=15">PROJECTS</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_contentamp;amp;view=articleamp;amp;id=1amp;amp;Itemid=16">CONTACT US</a></td></tr></tbody></table>                    </div>
                </div>
            </div>
        </div>

               </div>

CSS

     #footerlinks .module td a {
    border-right: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}

Теперь проблема в том, что этот css помещает разделитель в правую часть меню, и мне не нужен последний разделитель (не нужен самый правый разделитель), как я могу?
любой селектор css?

Комментарии:

1. я не хочу использовать меню типа ul li

2. Приближается 2012 год, а вы все еще используете table макет меню.

3. @JeaffreyGilbert нет, я не являюсь его меню по умолчанию в joomla: (что я могу сделать

Ответ №1:

  #footerlinks .module td a:last-child{border:0}

Но это не будет работать в ie<8. Если вы хотите также поддерживать ie7, поместите границу слева, а затем

  #footerlinks .module td a:first-child{border:0}

Если вы хотите поддерживать ie6, вам нужно добавить класс или стиль в last (вы можете использовать eq. jQuery для его исправления).

Комментарии:

1. @AjayPatel не работает в ie-7 и 8, поэтому вместо этого используйте first-child!

2. Вы можете использовать border-left: 1px solid; и margin-left: -1px; с overflow: hidden; в родительском контейнере, чтобы заставить его работать во всех древних браузерах.

Ответ №2:

Вы можете использовать last-child объявление CSS3 для назначения последнего элемента в вашем меню, например:

 #footerlinks .module td a:last-child {
    border-right:none;
}

Конечно, это не очень поддерживается в старых браузерах, и в этом случае вы можете просто настроить таргетинг на класс элемента меню и удалить границу оттуда. Вы можете взглянуть на источник вашей страницы и взглянуть на класс, автоматически добавляемый joomla для этого пункта меню, например, item-24, item-23 и т. Д., И просто сделайте это:

 #footerlinks .module td .item-24 {
    border-right:none;
}

Ответ №3:

вы должны установить первый td:first-child

:first-child работает во всех браузерах!

 #footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a:first-child {
    border-left: 0px solid #79797A;

}

пример скрипки

Ответ №4:

 #footerlinks .module td a:last-child {
   border-right: 0;
}

Ответ №5:

Удалите границу из #footerlinks .module td a и добавьте это

 #footerlinks .module td a   a { border-left:1px solid #79797A; }

Комментарии:

1. не работает, я не вижу ни одного разделителя, попробуйте ссылку jsfiddle

2. Я думал , что каждый <a> <td> из них разделен с. Он обновлен: jsfiddle.net/WRuTC/2 .

Ответ №6:

        #footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a.first-child {
    border-left: none;

}