powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка меню при помощи CSS
2 сообщений из 2, страница 1 из 1
Верстка меню при помощи CSS
    #35422997
coderinside
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Уважаемые знатоки! Помогите пожалуйста решить задачу с версткой меню при помощи 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
Верстка меню при помощи CSS
    #35464885
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
а почему бы меню не сделать просто табличкой?
...
Рейтинг: 0 / 0
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка меню при помощи CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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