Общий фон для нескольких элементов

[brainiac]

Сдалал меню на списках, разложил элементы по горизонтали. Теперь вот хочу сделать один общий фон для всех элементов li. То есть использовать одну большую по длине картинку. Подскажите, как это можно сделать. Что-то я туплю…

#main-menu {
	position: absolute;
	bottom: 45px;
	right: 0px;
}
#main-menu ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#main-menu li {
	display: inline;
	margin: 0;
	padding: 0;
}
#main-menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #f1f1f1;
	background-image: url(../img/bg-menu-item.png); /* от этого можно отказаться в пользу общего фона*/
	background-repeat: repeat-x;
	color: #555555;
	padding-left: 10px;
	padding-right: 50px;
	padding-top: 10px;
	padding-bottom: 20px;
}
#main-menu a:hover {
	background-color: #4594d8;
	background-image:url(../img/bg-menu-item-select.png); /* и от этого тоже */
	background-repeat: repeat-x;
	color: #ffffff;
}

[stars]

Эх научиться бы вам нормально изъясняться...

Исходя из того что вы написали вариантов 2:

1) задать background-image: в #main-menu ul тогда картинка будет 1 под кнопками.

2) задать background-image: в #main-menu ul li тогда картинка будет дублироваться у каждой кнопки.

[brainiac]

Эх научиться бы вам нормально изъясняться...

Исходя из того что вы написали вариантов 2:

1) задать background-image: в #main-menu ul тогда картинка будет 1 под кнопками.

2) задать background-image: в #main-menu ul li тогда картинка будет дублироваться у каждой кнопки.

Извините, не знал, как бы это нормально объяснить.

Но мне не подходит, ни первое, ни второе. Есть большое изображение (700x50px). И есть штук 5 элементов списка (LI), расположенных по горизонтали. Нужно, чтобы фоном первого LI стало начало этой большой картинки, второго LI — продолжение, третьего LI — следующий кусок этого изображения и т.д. При этом резать его нельзя (нужно сделать максимально гибко, чтобы потом менять этот фон).

[psywalker]

Ну тут только один вариаант, сделать фиксированное меню и задать жёсткую ширину каждому LI

[stars]

по средствам css и html я не вижу способа решения вашей задачи... кроме как или разрезать картинку или для каждой кнопки background-position: прописывать свой...

Если кнопки имеют одинаковый размер или имею какие-то границы то можно автоматически прописывать background-position: на пхп каждой следующей кнопке...

кстати можете сделать меню фиксированным задать общий background lu если между кнопками есть расстояние и вы не хотите там видеть background то сделайте в картинки прозрачные дыры ))))) вообще честно говоря это бред ))))

Вообще если вы делаете меню списком то задавать background по средствам 1 общей картинки глупо... Если вы уперлись в 1 большую картинку то зачем вам списки? используйте <MAP> http://www.htmlbook.ru/html/map.html

Edited April 28, 2010 by stars

[brainiac]

Эх… ну ладно. Наверное прийдётся резать всё-таки. Но фиксированные блоки тут не подойдут. Как, впрочем, и карта-изображение. Гибкость превыше всего.