VPF::Задать ширину ссылки такое же, как и меню(asp:Menu

alexburzak

Дата 7.4.2009, 22:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 254
Регистрация: 12.3.2007
Где: Hadera

Репутация: 1
Всего: 1

Сделал стандартное 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

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

Присоединённый файл ( Кол-во скачиваний: 13 )

link.JPG 3,73 Kb

--------------------

HomePage :: Продвижение сайтов, сопровождение сайта малым и средним бизнесам в интернете

Idsa

Дата 7.4.2009, 22:29 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2086
Регистрация: 5.12.2006
Где: Томск

Репутация: 15
Всего: 62

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

--------------------

Мой блог: alexidsa.blogspot.com

SKrivosein

Дата 8.4.2009, 03:21 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Если тебе не надо конкретно меню 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 254
Регистрация: 12.3.2007
Где: Hadera

Репутация: 1
Всего: 1

Цитата(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;
Но к сожалению, у меня много всевозможных динамически меняющихся менющек и жесткое кодирование не подходит.
Есть еще варианты?

--------------------

HomePage :: Продвижение сайтов, сопровождение сайта малым и средним бизнесам в интернете

SKrivosein

Дата 8.4.2009, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 512
Регистрация: 18.2.2009

Репутация: 1
Всего: 54

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Во блин, человеку(мне) иногда свойствено тупить.
Так же моя последняя версия с помощью 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;
}

--------------------

Оптимист - это плохо информированный человек.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Разработка под ASP.NET \| Следующая тема »