Размеры LI

[cul8er]

Возможно задать минимальную высоту и ширину у тэга <li> ?

Есть меню навигационное. У каждой кнопки прописан background (размер которого width:90; height:40)

Пробовал

#mainmenu ul li
{
    width: 90px;
    height: 40px;
    min-height: 40px;
    min-width:90px;
}

Не выходит. Задать можно только размерность UL

[Gaspode]

width: 90px;

height: 40px;

min-height: 40px;

min-width:90px;

Так вы задавайте либо просто высоту, либо минимальную. Но никак уж не всё сразу.

ЗЫ У вас часом не инлайном li сделаны?

Edited April 23, 2011 by Gaspode

[cul8er]

Так вы задавайте либо просто высоту, либо минимальную. Но никак уж не всё сразу.

ЗЫ У вас часом не инлайном li сделаны?

Именно инлайном

Горизонтальная менюшка

[psywalker]

Именно инлайном

Горизонтальная менюшка

Строчные элементы игнорируют свойства ширины и высоты.

[Gaspode]

Строчные элементы игнорируют свойства ширины и высоты.

Таки да. Делайте плавающие.

[flagreit]

А зачем вам вообще минимальная высота и ширина когда размер бэкграунда фиксированный? Добавлю, что в навигации размеры обычно задают ссылке, к которой и применяется бэкграунд.

#mainmenu ul li a
{
    display: block;
    width: 90px;
    height: 40px;
}

[cul8er]

Добавлю, что в навигации размеры обычно задают ссылке, к которой и применяется бэкграунд.

А если помимо ссылки там еще тэг с картинкой или еще одна ссылка?

Мое мнение задавать размеры нужно к блокам, а не к тексту (ссылкам)

Спасибо за идею насчет отображения блоками плавающими

Необходимо вот такое меню сделать, где картинки так же являются ссылками:

Правильно такое решение?:

CSS

#mainmenu ul li
{
    float: left;
    display: block;

    background:white url(btbg.jpg) no-repeat bottom;

    width: 90px;
    height: 130px;

    margin-right: 5px;
    margin-left: 5px;

    text-align: center;
}

HTML

..
<li>
<a><img></a>
<a>link</a>
</li>
..

Только вот не хватает отцентровки вертикальной, ссылке в блоке синем. Буду дальше ковырять

Edited April 23, 2011 by cul8er

[psywalker]

Это же один линк, зачем делать две ссылки на одни и тот же адрес?

[cul8er]

Это же один линк, зачем делать две ссылки на одни и тот же адрес?

На данном этапе это не важно, но на конечном сайте, может быть картинка это ссылка на общий раздел, а при нажатии на ссылку, выпадение подменю..

Хотя вы правы, можно как и у всех, ссылка одна на общий раздел, а при наведении - выпад. меню.

Что-то с позиционированием никак не соображу, как в списке это реализуется

Уже сделал на дивах, но мне такой вариант подхода не нравится.

Кол-во строк у ссылки может быть от 1 до 3ех, т.е. всякие жесткие паддинги не подходят, нужно отцентровать в синем блоке как то.. Есть идеи?

Edited April 23, 2011 by cul8er

[rediskavet]

Вообще text-align: center; для li должен сработать.

Но не понятно как лишки будут себя вести если в одном из них ссылка будет в одну строку, а в другом на три.

Вы бы выложили ссылку на страницу, где у вас и что не получается, и по подробнее расписали как должно вести себя меню.

Да и картинка(синяя) не подходит для такой ссылки.

Как будет репитится, если ссылка станет на несколько строк?

[cul8er]

Как будет репитится, если ссылка станет на несколько строк?

Размер шрифта и сам шрифт подобраны так, что необходимое количество слов в ссылке влезает

Размер ссылки ограничен 40 высота и 90 ширина (картинка бэкграунда именно такого размера)

text-align:center; - Работает для горизонтального позиционирования. Необходимо же выполнить еще вертикальное позиционирование ссылки (текста), чтобы она размещалась в центре синего блока.

Поэтому я разделял блок LI на две ссылки

html

<li>
<a><img></a>
<a>link1</a>
</li>

css

#mainmenu ul li
{
    float: left;
    display: block;

    background:white url(btbg.jpg) no-repeat bottom;

    width: 90px;
    height: 130px;

    margin-right: 5px;
    margin-left: 5px;

    text-align: center;
}

P.S.

размер каждого LI равен: w90 x h130

из них:

картинка с бабочкой 90x90

синий блок с ссылкой 90x40

Пример того как должно выглядеть меню я привел выше в посту.

[Justnewone]

инлайн блок и инлайн с зумом для ие спасут.

[cul8er]

инлайн блок и инлайн с зумом для ие спасут.

Это как?) (что за зум)

Сделал следующим образом

<div><a><img></a></div>
<div><a><img></a></div>
<div><a><img></a></div>

<ul>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>

Для меня не критично такое написание: картинки с ссылками по отдельности.

Осталась проблема с вертикальным позиционированием ссылок в синем блоке заданной ширины и высоты. Ссылка может быть как в одну строку, так и в две строки.

Если задавать li абсолютом и задавать "координаты отступов" (top,left etc), то это актуально для однострочной ссылки. Если будет две строки, то начало ссылки будет так же положено в центре блока, а вторая строка уйдет далеко вниз.

Что еще можно придумать?))

Не хотелось бы делать для каждой ссылки свою картинку еще и с текстом.

Edited April 25, 2011 by cul8er