Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Разработка под ASP.NET > Задать ширину ссылки такое же, как и меню(asp:Menu

Автор: alexburzak 7.4.2009, 22:25

Сделал стандартное asp:Menu

Код


        <asp:Menu ID="mMain" runat="server" CssClass="currentClass">
            <Items>
                <asp:MenuItem Value="1111" Text="aaaa" NavigateUrl="~/test.aspx"></asp:MenuItem>
                <asp:MenuItem Value="2222" Text="bbbb" NavigateUrl="~/test.aspx"></asp:MenuItem>
                <asp:MenuItem Value="3333" Text="cccc" NavigateUrl="~/test.aspx"></asp:MenuItem>
                <asp:MenuItem Value="4444" Text="dddd" NavigateUrl="~/test.aspx"></asp:MenuItem>
            </Items>
        </asp:Menu>

Поставил таблицу стилей и в ней прописал ширину 200 пикселей.

Код


.currentClass
{
    background:red;
    width:200px;
}

Проблема в том, что ссылка в меню не хочет раздвигатся на 200 пикселей (смотрите картинку – синий цвет, что бы также и там была ссылка и рука становилось виде курсора).
smile

Плиз, как я могу сделать, что бы ссылки в моем меню были на всю ширину?

Автор: Idsa 7.4.2009, 22:29

alexburzak, на мой взгляд, это будет безобразно выглядеть.
Попробуйте прописать горизонтальное выравнивание по ширине align: justify.

Автор: SKrivosein 8.4.2009, 03:21

Если тебе не надо конкретно меню asp:Menu то всё можно
красиво решить средствами XHTML

Код


    <div id="navigation">
        <ul>
          <li><a href="~/test.aspx" id="1111">
              <asp:Label ID="l_1111" runat="server" Text="aaaa" CssClass="label"></asp:Label>
          </a></li>
          <li><a href="~/test.aspx" id="2222">
              <asp:Label ID="Label1" runat="server" Text="bbbb" CssClass="label"></asp:Label>
          </a></li>
          <li><a href="~/test.aspx" id="3333">
              <asp:Label ID="Label2" runat="server" Text="cccc" CssClass="label"></asp:Label>
          </a></li>
          <li><a href="~/test.aspx" id="4444">
              <asp:Label ID="Label3" runat="server" Text="dddd" CssClass="label"></asp:Label>
          </a></li>
       </ul>

и CSS

Код


#navigation li
{
    margin: 1px;
    width: 200px;
    height: 28px;
    list-style-type: none;
    line-height: 28px;
    font-size: 20px;
    font-style: normal;
    background: #FF0000 url(App_Images/menu.png) repeat-x;
}
#navigation li a
{
    display: block;
    width: 200px;
    text-decoration: none;
    letter-spacing: 1px;
}
#navigation li a:hover
{
    text-decoration: none;
    background: #FF6600 url(App_Images/menuover.png) repeat-x;
}
.label
{
    height: 28px;
    width: 200px;
    display: block;
    color: #FFFFFF;
    text-align: center;
}

причем можно поменять практически какое угодно свойство внешниго вида, убрав margin: 1px положеш их на себя,
вставив App_Images/menu.png и App_Images/menuover.png подходящие картинки сделать абсолютно что-то своё,
короче нет придела совершенству. smile

Конечно текста CSS больше, но если поставить все настройки в asp:Menu то тоже получется не мало. smile

Автор: alexburzak 8.4.2009, 14:29

Цитата(Idsa @ 7.4.2009, 22:29)

alexburzak, ..... align: justify.

Спасибо, но не получилось. Если можно пример кода, что именно имелось ввиду. Возможно я не совсем понял.

Добавлено через 3 минуты и 23 секунды

Цитата(SKrivosein @ 8.4.2009, 03:21)

Если тебе не надо конкретно меню asp:Menu то всё можно
красиво решить средствами XHTML

Красивое решение, но к сожалению мне нужно именно asp:Menu.
Попробывал использовать - padding-left:40px;
Но к сожалению, у меня много всевозможных динамически меняющихся менющек и жесткое кодирование не подходит.
Есть еще варианты?

Автор: SKrivosein 8.4.2009, 15:33

Код


<asp:Menu ID="mMain" runat="server" CssClass="currentClass">
            <StaticMenuItemStyle CssClass="itenStyle" /><!-- добавить это -->
            <Items>

и CSS

Код


.currentClass
{
    width: 200px;
}
.itenStyle
{
    margin: 0px 0px 1px 5px;
    text-align: center;
    width: 200px;
    color: #FFFFFF;
    font-size: 20px;
    background: red;
}

это кучший результат которого пока достиг, ну можно поменять цвет письма а так....
К сожалению Мicrosoft в реальном коде фарматирует всё на таблицы прошитые Javascript, немогу изменить стили <a>-чек.

Автор: Soah 8.4.2009, 19:37

Цитата(alexburzak @ 7.4.2009, 22:25

)

то бы также и там была ссылка и рука становилось виде курсора

если я правильно понял

Код


<style type="text/css">
    .currentClass {
        background: red;
        width: 200px;    
    }

    .currentClass a {
        display: block;
    }
</style>

Автор: SKrivosein 8.4.2009, 21:49

Во блин, человеку(мне) иногда свойствено тупить.
Так же моя последняя версия с помощью Soah

Код


.currentClass
{
    margin: 20px;
    width: 200px;
}
.itenStyle
{
    margin-bottom: 1px;
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
    background: red;
}
.itenStyle a
{
    display: block;
}
.itenStyle a:hover
{
    background-color: #CC0000;
}