Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка меню при помощи CSS / 2 сообщений из 2, страница 1 из 1
10.07.2008, 14:12
    #35422997
coderinside
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка меню при помощи CSS
Уважаемые знатоки! Помогите пожалуйста решить задачу с версткой меню при помощи CSS.

Меню имеет следующий вид:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<ul class="nav">
	<li>
		<a href="/faqs" title="FAQ" id="faq">
			<span class="text">FAQ</span>
		</a>
	</li>
	<li>
		<a href="/dict" title="Справочник" id="dict">
			<span class="text">Справочник</span>
		</a>
	</li>
	<li>
		<a href="/contacts" title="Контакты" id="contact">
			<span class="text">Контакты</span>
		</a>
	</li>
	<li>
		<a href="/helps" title="Помощь" id="help">
			<span class="text">Помощь</span>
		</a>
	</li>
</ul>


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

Вот картинка, рисовал как мог. Надеюсь понятно в общих чертах.

Как сделать этот список в одну строку, скрыть текст в ссылках и повесить на каждый тег <a> картинку вроде догадался. Вот код:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
ul.nav {
   list-style-type: none;
   margin:  0 ;
   padding:  0 ;
   height: 150px;
   padding-top: 20px;
}

ul.nav .text{
	display: none;
}

ul.nav li {
   float: left;
}

ul.nav li a {
   display: block;
   float: left;
   height: 73px;
}


ul.nav li a#faq {
	width: 93px; 
	background-image: url(/img/faq.gif); 
	background-position: 10px; 
}

ul.nav li a#dict {
	width: 93px; 
	background-image: url(/img/dict.gif); 
	background-position: 10px; 
}

ul.nav li a#contact {
	width: 93px; 
	background-image: url(/img/contact.gif); 
	background-position: 10px; 
}

ul.nav li a#help {
	width: 93px; 
	background-image: url(/img/help.gif); 
	background-position: 10px; 
}

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

Подскажите как такое можно реализовать?

P.S. Если есть время - как бы вы сверстали эту шапку?
...
Рейтинг: 0 / 0
01.08.2008, 10:10
    #35464885
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка меню при помощи CSS
а почему бы меню не сделать просто табличкой?
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка меню при помощи CSS / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]