| |
|
|
| | нужно сделать горизонтальное меню (в данном случае фиксированной ширины (960px), но хотелось бы найти решение и для резинового), в котором:
1) расстояния между элементами равны между собой
2) отступы от крайних элементов до краёв родительского блока должны быть равны (меню в целом должно быть по середине родительского блока)
3) ширина элементов не известна (может меняться за счёт текста)
4) количество элементов может изменяться
способы, которыми я пытался это реализовать:
1й способ:
1) элементы представляют собой inline элементы
2) за ними следует длинный inline элемент (visibility: hidden), в любом случае переносящийся на другую строку
3) для родительского блока назначено свойство text-align: justify;
4) если элементы меню состоят из нескольких слов, между этими словами
плюсы: Элементы распределяются по ширине родительского блока с равными интервалами.
минусы: У меня не получилось сделать элементы с закругленными углами, т.к. не получилось добиться одинаковой высоты строчных элементов в разных браузерах, а при попытке вставить внутрь строчного блок, в IE6 элемент растягивался на всю ширину меню.
2й способ:
1) элементы – блоки с типом float: left;
2) расстояния между ними задаются с помощью padding'ов
плюсы: легко придать кнопкам хороший вид, одинаково смотрящийся в браузерах.
минусы: меню сдвинуто в левую сторону и попытки его выровнять ни к чему не привели.
расстояния между элементами не меняются от их количества.
и самое худшее – в IE6 текст на элементах более узкий, следовательно и общая ширина меню тоже. если бы он отображался одинаково, мне бы не составило труда иногда поменять padding'и, если добавится новый пункт меню.
какие (на мой взгляд) могут быть выходы из ситуации?
добавить js код, определяющий ширину элементов и изменяющий padding'и (возможно ли это будет, и если не сложно, подскажите как)
может кто-нибудь знает решение? | |
| |
|
|
| |
|
|
| |
для: sasha1133
(07.10.2010 в 12:36)
| | | Из описанных Вами требований к меню многое непонятно... но об этом - потом.
Сначала попрошу разъяснить одно Ваше утверждение: "в IE6 текст на элементах более узкий"
В настоящий момент я не имею браузера IE6 под руками и потому не могу проверить это Ваше утверждение.
Но неужели, например, код
<body onload="alert (document.getElementById ('spn').offsetWidth)">
<span id="spn" style="font-family: arial; font-size: 12px">TEXT</span>
</body>
|
в браузере IE6 показывает в окошке алерта значение меньшее, чем в прочих браузерах? | |
| |
|
|
| |
 42.8 Кб |
|
| |
для: АЯ
(07.10.2010 в 15:40)
| | | У меня тоже нет IE6, я пользуюсь IETester'ом. В Вашем примере выдаются одинаковые значения. Добавил в свой код, получились разные – файрфокс - 146, ie - 127. У меня используется шрифт 12px Verdana bold. Я предполагаю что ie пользуется своим начертанием шрифта или что то вроде того.
Прикрепляю файл, где видна разница в ширине текста.
Какие именно требования к меню Вам не понятны?
Я хочу сделать меню, которое выглядело бы примерно так (только вместо слов кравивые кнопочки=)):
Элемент1.........Элемент222.........Эл123.........Элемент222123123.........Элемент2
Если добавится/удалится элемент (и/или ширина текста на нём), общая ширина сохраняется, меняются расстояния между элементами, но расстояния между собой должны оставаться равны:
Элемент1....................Эл123....................Элемент222123123....................Элемент2
(Точек не должно быть, просто пробелы для "позиционирования" не сработали)
Надеюсь, объяснил понятно.
PS Насчёт шрифта – оказалось, что IETester игнорирует значение шрифта и выставляет Arial. Не знаю как избавиться от этого глюка. Я думаю что настоящий IE6 не должен так себя вести | |
| |
|
|
| |
|
|
| |
для: sasha1133
(08.10.2010 в 00:35)
| | | Возможен, например, JS-подход.
Меню Ваше состоит из 3 (ТРЁХ) типов элементов:
class="bth" - пункты меню общим количеством Х штук (не менее двух);
class="spc" - пробельные пространства между пунктами и между границами общим количеством Х+1 штук;
id="men" - общий контейнер количеством 1 штука.
Отсюда HTML-шаблон меню выглядит следующим образом:
<div id="men">
<div class="spc"></div>
<div class="btn">Текст первого пункта</div>
<div class="spc"></div>
<div class="btn">Текст второго пункта</div>
<div class="spc"></div>
<div class="btn">Текст третьего пункта</div>
<div class="spc"></div>
<!-- Любое нужное количество по шаблону -->
<div class="btn">Текст последнего пункта</div>
<div class="spc"></div>
</div>
|
Всем DIV'ам, входящим в меню, включая общий контейнер, прописываете float: left, а самому контейнеру даёте изначальную невидимость, вот так:
<style>
#men, #men div {float: left}
#men {visibility: hidden}
</style>
|
Ваши закругления, размеры шрифта и прочие красивости определите в стилях для .btn
Ну и... после закрывающего </div> общего контейнера помещаете скрипт, который:
1) определит фактическую ширину общего контейнера W;
2) определит количество пунктов меню X;
3) отнимет ширину W от заданных 960 и остаток поделит на (X+1), получив D;
4) установит всем DIV'ам класса spc ширину, равную D;
5) вернет контейнеру видимость.
<script>
var R = document.getElementById ('men'), W = R.offsetWidth, S = R.getElementsByTagName ('DIV'), L = S.length;
for (var X = j = 0; j < L; j++) if (S [j].className == 'btn') X++; var D = (960 - W) / (X + 1);
for (j = 0; j < L; j++) if (S [j].className == 'spc') {S [j].innerHTML = ' '; S [j].style.width = D + 'px'}
R.style.visibility = 'visible';
</script>
|
Приблизительно так... в очень первом приближении.
Есть неточности, связанные с нецелым результатом деления.
Учесть это, разумеется, можно, но стоит ли?
Ибо, как пить дать, следующий Ваш вопрос будет связан с тем, что Вы изначально не определили в тех/требованиях - а что делать, если ширина страницы меньше требуемых 960px? Или - что делать, если суммарная ширина пунктов изначально больше 960px?..
PS. Код - рабочий. | |
| |
|
|
| |
|
|
| |
для: АЯ
(08.10.2010 в 04:19)
| | | Спасибо, мне нравится эта реализация, у меня были мысли изменять margin'ы элементов меню (то есть обойтись без пустых div'ов), но это не принципиально.
>следующий Ваш вопрос будет связан с тем, что Вы изначально не определили в тех/требованиях – а что делать, если ширина страницы меньше требуемых 960px? Или - что делать, если суммарная ширина пунктов изначально больше 960px?..
Нет, следующего вопроса не последует, с частными случаями я сам разберусь. Спасибо | |
| |
|
|
| |
|
|
| |
для: sasha1133
(08.10.2010 в 17:44)
| | | Подскажите пожалуйста, как сделать вот такое меню http://www.urealty.ru - разворачиваемое? И вдобавок еще и фиксируемое (запоминаемое).
Большое спасибо! | |
| |
|
|
