Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2009, 13:08
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Подскажите как сделать меню на CSS если:
Конечно как делать меню на CSS я знаю. Сейчас интересует немного другой вопрос. Бился несколько часов над следующей задачей:
Имеется следующий код:
<ul class="menu_top">
<li id="current" class="active item1">
<a href="http://localhost/"><img src="home.gif" align="left" alt="home" /><span>Главная</span></a></li>
<li class="item2"><a href="#"><img src="mail.gif" align="left" /><span>Обратная связь</span></a></li>
<li class="item3"><a href="#"><img src="sitemap.gif" align="left" /><span>Карта сайта</span></a></li>
</ul>

Этот код менять нельзя. С помощью CSS нужно сделать следующее:
(скриншот)
Итого: 1 картинка с белой подложкой, 3 картинкаи УЗКИЕ для каждого пункта меню(их я выделил разными цветами)

Пытался по всякому, не выходит. По сути делаю так:
ul.menu_top {  background:url(../images/top.jpg) left top no-repeat; list-style:none;  }
ul.menu_top li { padding: 0px 5px; float:left; }
ul.menu_top span { display:none; }

Вроде всё нормально, только подложка top.jpg пропадает. Подскажите, пожалуйса, как надо?
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2009, 13:27
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

ul.menu_top добавить нужную ширину, она все равно фиксированная. Ну и высоту до кучи.
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2009, 13:34
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

СПАСИБО, работает!!!

Интересно а в этом логика есть? Не вижу взаимосвязи между фоновой картинкой и высотой и шириной. Эх странные они, эти стандарты).
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2009, 13:39
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Логика есть, все дочерние элементы плавающие и на поток не влияют, поэтому контейнер схлопывается. Т.е. это не фон не виден, это элемент имеет нулевые размеры. Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2009, 17:31
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Цитата:
Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;
и чем оно помогает, какой результат? По идее вообще меню исчезнуть должно
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2009, 17:33
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от x-yuri
и чем оно помогает, какой результат?
Контейнер не схлопывается под плавающие элементы.
Сообщение от x-yuri
По идее вообще меню исчезнуть должно
Размеры не указаны, поэтому ничего не исчезнет. Если размеры указаны, он и так не будет схлопываться.
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2009, 17:48
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Вот теперь вижу логику, спасибо за детальный ответ. Форума лучше я пока не встречал. Респект!
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #8 (permalink)  
Старый 18.10.2009, 00:59
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Kolyaj
Контейнер не схлопывается под плавающие элементы.
кстати, в ie 6 схлопывается. Я знаю пока следующее решение: поставить float
Ответить с цитированием
  #9 (permalink)  
Старый 18.10.2009, 09:47
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Как он схлопывается, если у него размеры жестко заданы?
Ответить с цитированием
  #10 (permalink)  
Старый 18.10.2009, 18:21
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Kolyaj
Обычно в таких случаях, если размеры блока заранее неизвестны, устанавливают свойство overflow: hidden;
Сообщение от x-yuri
кстати, в ie 6 схлопывается
я про случай, когда размеры не заданы. И причина - hasLayout
т.е. для такого кода
<div style="overflow: hidden;
            border: 1px solid green;">
<div style="float: left;
            width: 10px;
            height: 10px;
            background: red;"></div>
</div>

схлопывается только в ie6, пока ему hasLayout не установить
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 10:49
Подскажите как сделать (события onmouseover и onclick) House M.D. Я не знаю javascript 2 04.06.2009 08:50
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 01:31
Подскажите как сделать меню как на mail.ru? dakdak Элементы интерфейса 3 02.01.2009 18:43
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 22:14