Как сделать горизонтальное меню из картинок

[Mila]

Задача вроде несложная - нужно сделать горизонтальное меню, в котором в качестве ссылок будут изображения.

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

Вот HTML код:

	   
 <div id="page-menu">
	 <ul id="menu">
		 <li><a class="home" href="" title="Главная"></a></li>
		 <li><a class="about" href="" title="О сайте"></a></li>
		 <li><a class="map" href="" title="Карта сайта"></a></li>
		 <li><a class="contact" href="" title="Контакты"></a></li>
	</ul>
</div>

Это CSS:

#page-menu { 
  float: right;
  width : 590px; 
  height: 120px; 
  margin : 30px 0 0 0; 
  padding : 0; 
}
ul#menu { 
  margin : 0; 
  padding : 0; 
  overflow: hidden;
} 
ul#menu li { 
  float: left;
  width : 147px; 
  height: 121px; 
  list-style-type : none; 
  margin : 0; 
  padding : 0; 
  display : inline; 
} 
.home { 
  background: url(/images/menu.png') left no-repeat;
} 
.about { 
  background: url(/images/menu.png') left no-repeat;
} 
.map { 
  background: url(/images/menu.png') left no-repeat;
} 
.contact { 
  background: url('/images/menu.png') left no-repeat;
}

Помогите, пожалуйста, кто может...

Edited August 2, 2010 by Mila

[npofopr]

width : 147px;

height: 121px;

надо ссылкам скорее всего тоже задать.

и сделать их display:block

[Vlad]

Для li стоит inline, а для инлайновых элементов ширина и высота не работает.

[Mila]

Спасибо. Получилось.

[PocketGaming]

У меня проблема несколько другого характера, но тоже связанная с горизонтально расположенными картинками. Мне нужно сделать div с overflow: hidden, в котором бы располагались в один ряд. Проблема в том, что я никак не могу заставить картинки располагаться без переноса строки, то есть таким образом, чтобы div растягивался по горизонтали, но не по вертикали. Все это нужно для создания галереи изображений а-ля Яндекс.Картинки, если кто-то знает, как реализовать подобное в обход вышеописанной проблемы — буду рад узнать способ. Сейчас же у меня есть только два варианта, один из которых довольно громоздок.

[swetlana]

Mila, ещё пусть ссылки содержат текст. А не то в отдельных случаях они могут просто не отображаться.

PocketGaming, а точно нужен overflow: hidden, а не overflow: scroll например?

[npofopr]

аля яндекс? дак посмотри фаербагом как у них =)

[PocketGaming]

swetlana, да не важно, при overflow: scroll тоже вниз растягивается. CSS 3 использовать не хочется (это я про overflow-x).

npofopr, если бы все было так просто! У них там, судя по всему, AJAX, и картинки подгружаются скриптом. Мне это не нужно, поскольку изображений не так много, следовательно, и принцип должен быть другой. Я смог придумать только два способа реализации:

1) Маленькие картинки располагаются в ряд, ссылки влево-вправо изменяют значение параметра left (при position: relative).

2) Ссылки влево-вправо присваивают position: absolute и visibility: hidden последнему и первому child'ам div'а, в котором лежат картинки. Таким образом, эти child'ы как бы изчезают (того же эффекта можно добиться, используя display: none, но мне это кажется не совсем правильным) и весь ряд сдвигается.

Второй метод слишком громоздок и неуклюж, он подразумевает огромнейшее количество всяких проверок, чтобы картинка, которая должна появиться при прокрутке, не обладала position: absulute и visibility: hidden, и так далее. Есть, конечно, третий вариант — сварить кашу из массивов и генерировать каждый раз новый div с картинками при нажатии на стрелку прокрутки, но это совсем уж извращение.

[mishka]

http://www.xiper.net/js-plugins/gallery/jcarousellite.html

overflow-x, overflow-y - неработает в ие8, вернее работает как просто overflow

overflow-x, overflow-y это не новое свойство css3, это старое свойство, почемуто выброшенное из css2.1, теперь вот опять вернули, и это хорошо.

если нехочешь юзать js то вот посмотри http://markup-m.narod.ru/tpl/gorizontal_scroll_gallery/

Кто тебе мешает поставить фаербаг, и посмотреть как сделанно на яндексе?

[PocketGaming]

mishka2, по первой ссылке странный материал для домохозяек, которые без сторонних библиотек ничего сложнее "бутылок пива" написать не могут, а вот по второй очень наглядный пример, с огромным интересом изучил, поразившись тому, как умудрился сам до этого не додуматься — за него огромное спасибо! Теперь осталось только применить полученные знания к собственной галерейке (которая, кстати, почти вся на JS). А насчет "посмотреть, как сделано на Яндексе" я уже говорил, там галерея сделана с учетом огромного количества картинок (скажем, по запросу "автомобиль" поисковик находит почти 11 миллионов изображений), в то время как у меня их куда меньше, следовательно, рациональней использовать другой принцип (особенно учитывая, что я пока что не знаю ни одного серверного языка программирования, и, как это ни смешно, сама галерея у меня генерируется браузером пользователя, используя названия картинок из массива).

Edited August 7, 2010 by PocketGaming

[psywalker]

Медвежон, а чё у тя за хост, я не пойму?

[mishka]

Чтото мне кажется что ты чтото перемудрил.

Самый распостраненный подход к созданию галлереи:

Есть контейнер обрезаюший все что не влезет, в нем список которому задается огромная ширина (поэтому лишки не падают), а в нем флотнутые лишки.

Медвежон, а чё у тя за хост, я не пойму?

narod.yandex.ru

да это "лишь бы было" чтобы можна было тут на форуме комунить что нить показать(правда я это делаю очень редко, целых 3 примера сделал, но один (3 колонки одной высоты, центр резина, контент впереди по коду) както снес, никак назад не залью)...

[psywalker]

narod.yandex.ru

да это "лишь бы было" чтобы можна было тут на форуме комунить что нить показать(правда я это делаю очень редко, целых 3 примера сделал, но один (3 колонки одной высоты, центр резина, контент впереди по коду) както снес, никак назад не залью)...

Ясненько дружище, ну тада нормал.

[mishka]

Могу дать архив, чтобы удобнее было...

[PocketGaming]

Получилось, но я так и не понял, почему это не работает без использования списка, и еще один вопрос — что вообще означает * html ? Ведь звездочка — это вроде как все элементы, а html — содержимое тегов <html></html>, так почему же * html .gallery li работает, а .gallery li нет?

[psywalker]

* html вот эта вещь спецом предназначена для ИЕ6, т.е. именно этот браузер понимает эту запись, а остальные просто проигнорируют правило.

[PocketGaming]

А, то есть это чтобы компенсировать непонимание шестым ослом display: table-row?

[mishka]

Получилось, но я так и не понял, почему это не работает без использования списка, и еще один вопрос — что вообще означает * html ? Ведь звездочка — это вроде как все элементы, а html — содержимое тегов <html></html>, так почему же * html .gallery li работает, а .gallery li нет?

Странно.... а "домохозяйки" с того сайта знают про это..

[PocketGaming]

Я и не говорил, что там домохозяйки. Я говорил, что только домохозяйки для создания не самой продвинутой галереи скачивают 4 библиотеки.

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

Кстати, способ очень хорошо подошел для использования overflow: hidden и кнопок влево-вправо. Во всяком случае, clientWidth div'а, где лежит список, показывает именно то, что нужно (в моем случае 1372 пикселя), а значит, можно весьма простым образом расчитать максимально возможную прокрутку, таким образом не дав юзверю крутить пустоту, которая идет после картинок. Огромнющее вам спасибо, ребята, без вас я бы никогда не додумался (а нагуглить не вышло).

Edited August 7, 2010 by PocketGaming

[mishka]

А галлерейка будет резиновой?

И какую библиотеку используешь?

Ну и пример дай посмотреть )

Если не во всеуслышание, так хоть в личку )

Edited August 7, 2010 by mishka2

[npofopr]

во первых там 2мя библиотеками лишь расширяется функционал.

вы офф сайт галереи почитайте для начала.

мне кажется клепаете очередной велосипед. с квадратными колесами.

да да. хочется глянуть галерею )

Edited August 7, 2010 by npofopr

[mishka]

Ну там не самая лучшая галерея. Я сам ей не пользуюсь.

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

[PocketGaming]

Библиотеку никакую не использую, велосипед, пусть и с одним квадратным колесом, да еще и с "восьмеркой", я и сам сделать в состоянии. Все-таки на нем сильно не разгонишься и больно не ударишься, не машина ж. Вот если бы надо было что-нибудь сложное создать, где кривизна и чудовищнейшая неоптимизированность кода, который я в состоянии написать, имели серьезное значение, я бы подключил библиотеку, а сейчас неинтересно с ней.

А галерею покажу, когда доделаю, но сразу говорю: я полный вафел, верстаю и кодингую (программированием такое назвать язык не поворачивается) совершенно ничтожно, ибо нуб.

mishka2, согласен, для общего развития можно, но я пока что новичок и зачастую не в состоянии разобраться со сложным чужим кодом. Единственный сайт, который я использовал как источник идей — s-detdom.ru. Не знаю почему, но на его примере многие вещи объяснял мой преподаватель с курсов, вот я и изучил код. Жаль, кстати, что нет сайта вроде demiart.ru, где были бы уроки по JavaScript, как на демиарте по Photoshop — с объяснением действий и т.д.

Edited August 7, 2010 by PocketGaming

[mishka]

по JS отличный сайт http://javascript.ru/

Edited August 7, 2010 by mishka2

[PocketGaming]

Ну, его я знаю, я немного не о том говорил.

[PocketGaming]

Совсем забыл про обещание поделиться ссылкой на галерею. Конечно, это далеко не конечный вариант: мне еще предстоит разобраться с движением ряда маленьких картинок при нажатии на кнопки "Вперед" и "Назад" и есть идея перенести их на саму картинку, как в LightBox — очень уж мне это нравится, на Netlore.ru, где стоит этот плагин, разглядывать галереи фотографий — одно удовольствие.

А теперь вопрос. Неужели для создания такой вот простенькой галереи без эффектов вроде "мокрого пола" и других понтов, нужно пользоваться библиотекой?! Одно дело, если галерея предназначена для какого-нибудь промо-сайта, который должен быть зрелищным, но, к примеру, в моем случае предполагается просмотр достаточно большого количества изображений (серфинг по сайту, каждый раздел которого оснащен отдельной галереей) и понты ни к чему, как и всяческие jQuery.

Edited August 7, 2010 by PocketGaming