X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Горизонтальное текстовое меню
CandyDandy
CandyDandy
Topic Starter сообщение 29.11.2010, 21:33; Ответить: CandyDandy
Сообщение #1


Привет. Вот добрался до обычного горизонтального меню с иконкам.
Вопрос такой:
1. Ссылкой у меня определяет весь блок. ссылка + её отступ
Вот мне нужно чтобы этот отступ перестал быть ссылкой. Как это сделать?

<div id="menu">
<ul>
<li><a href="#" class="flink">ссылка 1</a></li>
<li><a href="#" class="olink">Ссылка 2</a></li>
<li><a href="#" class="olink">Сссылка 3</a></li>
<li><a href="#" class="olink">Ссылка 4</a></li>
<li><a href="#" class="olink">Ссылка 5</a></li>
</ul>
</div>


#menu
{
    position:relative;
    top:0px;
    left:0px;
    background:url(menu.png);
    width:999px;
    height:54px;
}

#menu ul
{
    margin:0;
    padding:0;
    list-style:none;
}
#menu li
{
    float:left;
    margin:0;
    padding:0;
}     

.flink
{
    padding-left:36px;
    padding-top:15px;
    display:block;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}

.olink
{
    padding-left:130px;
    padding-top:15px;
    display:block;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#d41d2b;
    font-size:14px;
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
to0n1
to0n1
сообщение 30.11.2010, 0:19; Ответить: to0n1
Сообщение #2


делай отступы margin'ами и будет счастье )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 30.11.2010, 0:29; Ответить: alexdrob
Сообщение #3


(CandyDandy @ 29.11.2010, 23:33) *
Вот мне нужно чтобы этот отступ перестал быть ссылкой. Как это сделать?

Ну а взять и подумать если?
Что в вашем коде тег ссылки? <a></a>
Вы задаёте тегу класс flink и olink
padding - задаёт внутренний отступ, от границы элемента которому присвоен, до текста который в нём будет размещён.
.flink
{
    padding-left:36px;
    padding-top:15px;
}
.olink
{
    padding-left:130px;
    padding-top:15px;
}

То есть элемент а не только содержит текст внутри но и пустоту заданную паддингом.
Как это исправить?
Убрать паддинг у тега и расширить область за границей тега, то есть поставить ему margin.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
CandyDandy
CandyDandy
Topic Starter сообщение 30.11.2010, 1:10; Ответить: CandyDandy
Сообщение #4


Да, точно спасибо! Постараюсь впредь задавать вопросы посложнее ))

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыМеню в мобверсии.
3 павелЯ 332 9.11.2020, 0:35
автор: Composer_JS
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 648 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 2457 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
1 lepota 690 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
0 Olya_Poy 1435 29.11.2017, 11:09
автор: -garmoni-


 



RSS Текстовая версия Сейчас: 26.11.2020, 10:42
Дизайн