Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Как растянуть меню?

Обсуждение темы Как растянуть меню? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; На сайте существуют границы самого сайта. В данных границах имеется меню Цитата: *{ margin:0; padding:0; } body{ background:#fff; color:#666; font:12px/18px Tahoma, Arial, Helvetica, ...


Закрытая тема
 
Опции темы
Старый 30.07.2011, 21:24   #1
На сайте существуют границы самого сайта.
В данных границах имеется меню

Цитата:
*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
width:100%;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:block;
float:left;
}
#menu li a{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
background:url(/images/images/menu_007_left.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu li a span{
display:block;
float:left;
background:url(/images/images/menu_007_right.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
#menu li a:hover{
display:block;
float:left;
background:url(/images/images/menu_007_left_h.jpg) no-repeat left;
height:66px;
}
#menu li a:hover span{
display:block;
float:left;
background:url(/images/images/menu_007_right_h.jpg) no-repeat right;
color:#fff;
height:66px;
}
#menu li a.current{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
background:url(/images/images/menu_007_left_h.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu li a.current span{
display:block;
float:left;
background:url(/images/images/menu_007_right_h.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
PHP код:
<div id="menu">
    <
ul>
        <
li><a href="#" class="current"><span>home</span></a></li>
        <
li><a href="#"><span>about us</span></a></li>
        <
li><a href="#"><span>services</span></a></li>
        <
li><a href="#"><span>solutions</span></a></li>
        <
li><a href="#"><span>contact us</span></a></li>                                
    </
ul>
</
div
вопрос в том, как сделать так, чтобы меню растягивалось по всей ширине, т.е. не возникало проблемм с пустой границей до конца меню, если в меню мало категорий или меню изменяется на каждой странице (текст уменьшается или увеличивается)?

Сейчас проблемма в том, что до конца полосы остается пустое место.
 
Старый 30.07.2011, 21:24
Ссылки
Старый 30.07.2011, 22:58   #2
попробуй в каждом <li> сделать так: <li style="width:18-20%">, либо переверстай его таблицей или блоками с процентными width-ами, либо скриптом делать пересчет ширины каждой менюшки после загрузки. без скрипта все равно придется жертвовать несколькими пикселями в последней менюшке, так как есть все эти паддинги, бордеры, маргины в пикселях, которые будут давать дополнительное значение ширины.
 
Старый 30.07.2011, 23:17   #3
сделал <li style="width:18-20%"> вообще ничего не изменилось, странно, даже не съехало
 
Старый 30.07.2011, 23:47   #4
не <li style="width:18-20%">, а <li style="width:18%"> например или <li style="width:20%">
18-20 - это диапазон. тебе надо выбрать самому число, потому что от него зависит будет ли съезжать последнее меню на следующую строчку.

Добавлено через 24 минуты

добавляй сразу в стиль
Код:
#menu li{
list-style:none;
display:block;
float:left;
width:18%;
}
должно работать. только у тебя сразу возникнет проблема с видом кнопок - я так понял они у тебя фиксированной картинкой. переделывать придется на повторяющийся паттерн и добавлять repeat-x.

Последний раз редактировалось redreem; 30.07.2011 в 23:47.. Причина: Добавлено сообщение
 
Старый 31.07.2011, 00:10   #5
Нет, так вообще все съехало, а можно сам html по центру задать, там справа мало места остается, так будет слева и справа, более-менее хорошо смотреться будет?

<div align="center" id="menu"> не отцентровало (
 
Старый 31.07.2011, 00:17   #6
в смысле "съехало"? в опере есть Dragon Fly, вызывается по Ctrl+Shift+I - в нем можно тыкать в блоки и видеть каких они размеров и как расположены - посмотри. поставь 17% если последний пункт переехал на следующую строчку.
 
Старый 31.07.2011, 00:27   #7
Я пробовал разные значения, все съезжает аж в 3 столбика
вот меню, что пытаюсь сделать http://webmastermix.ru/files/css-bla.../slide_bb.html
 
Старый 31.07.2011, 00:30   #8
вот вариант - добавь после менюшки такой скрипт:
Код:
<script type="text/javascript">
		mEl=document.getElementById('menu');
		liEl=document.getElementsByTagName('li');
		mW=mEl.parentNode.offsetWidth;
		itemW=Math.floor(mW/liEl.length);
		lastItemW=mW-itemW*(liEl.length-1);
		for (var i=0;i<liEl.length;i++) liEl[i].style.width=itemW+'px';
		liEl[liEl.length-1].style.width=lastItemW+'px';
</script>
и поменяй стиль:
Код:
#menu ul{
list-style:none;
padding:0px 0px;
}
 
Старый 31.07.2011, 00:37   #9
сейчас растинуло на всю ширену, но в категориях где 2 слова, второе слово снисло вниз и между плашками в меню пробелы.
 
Старый 31.07.2011, 00:43   #10
работает - вот

Добавлено через 1 минуту

а чтоб не сносило вместо about us пиши
Код:
about&nbsp;us

Последний раз редактировалось redreem; 31.07.2011 в 00:44.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо redreem за это полезное сообщение:
74ivan74 (31.07.2011)
Старый 31.07.2011, 00:43
Закрытая тема




Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли background растянуть? kirill1989 Зал дебютантов 11 04.03.2013 01:34
Как растянуть меню на юкосе lorein HTML, CSS, JavaScript 2 27.03.2012 20:59
Растянуть изображение в таблице ruFletch HTML, CSS, JavaScript 5 20.03.2005 01:42
Как растянуть таблицу на 100%? Anya_Lebedeva HTML, CSS, JavaScript 3 02.02.2005 13:19
Как по вертикали растянуть! kors@r Зал дебютантов 13 26.04.2004 20:06


Текущее время: 03:10. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум