Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ / 17 сообщений из 17, страница 1 из 1
10.04.2010, 14:56:52
    #36572252
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Например, есть такой сайтик . В его верхней части располагается меню. Если окно браузера сжимать, то стрелочки у пунктов меню уползают вверх, а надписи начинают примыкать к краю ячеек (работает в нормальных браузерах).

Так вот, представьте, что вместо стрелочек используются отступы (фиксиованные, 2em, например). И нужно сделать так, чтобы в критический момент эти отступы пропадали, а текст так же примыкал бы вплотную (или почти вплотную) к левому краю своей ячейки или ДИВа.

Вообще, я делал подобное на этом сайте (посжимайте меню) — вставлял с краю пустую ячейку с нужным отступом. Но приделывать по ячейке к каждому пункту меню как-то не очень хочется. Есть способы проще?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 15:48:27
    #36572286
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2Например, есть такой сайтик .
Неверный адрес
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 15:50:08
    #36572288
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2Вообще, я делал подобное на этом сайте
Так же не открывается...

Делай тестовый пример... Или на картинке покажи чего хочешь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 15:57:34
    #36572290
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Заключил адреса сайтов в кавычки, а это не работает — извиняюсь.

В общем, первый сайт: http://www.artlebedev.ru/
второй: http://silent.land.ru/roseurosnab/index.html
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 16:22:50
    #36572299
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Вот пример .

В этом меню я сделал отступы с помощью неразрывных пробелов, которые при сжатии переносятся на новую строчку. К сожалению из-за этого прыгает высота ячейки, да и левые символы в меню не очень хочется использовать. Нужен способ получше.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 17:38:33
    #36572339
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Ещё такой способ — самый лучший, но слишком тяжеловесный.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 18:18:55
    #36572361
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Какие-то менюшки не разбери пойми... Я так и не понял что ты хочешь сделать в итоге. Может тестовый пример прояснит дело?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 18:35:02
    #36572371
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Извиняюсь за то, что сразу пример не сделал.

В общем, нужно сделать абсолютно так же как в прошлом примере , но с меньшим количеством таблиц или вообще без них. Т.е. проще нужно сделать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 20:31:00
    #36572443
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2 , таки с тебя тестовый пример...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 21:20:17
    #36572480
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Так прошлый пример и есть тестовый :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 22:08:50
    #36572505
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2Так прошлый пример и есть тестовый :-)
Он далеко не тестовый...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.04.2010, 23:00:17
    #36572536
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Тогда что значит тестовый пример?

Если что, у меня нет готового сайта. Обычно сайты начинаю делать, когда все проблемные места проработаю. Вот меню и есть такое место, так что это наиболее полный пример, который может у меня быть :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.04.2010, 15:09:30
    #36572801
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2Тогда что значит тестовый пример?
Минимальный код страницы, для иллюстрации проблемы, который выкладывается тут. Его можно скопипастить, подправить и показать что получилось.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.04.2010, 18:05:52
    #36572892
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Код: 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.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
		<style type="text/css">		
			table {
				border-collapse: collapse;
				background: #ccc;
				width:  100 %;
			}

			.item {
				border: solid 1px;
			}
						
			.item1 {
				width:  12 . 5 %;
			}
			
			.item2 {
				width:  12 . 5 %;
			}
			
			.item3 {
				width:  12 . 5 %;
			}			
 
			.item4 {
				width:  25 %;
			}			
			
			.item5 {
				width:  37 . 5 %;
			}
 
			.indent {
				width: 2em;
				}
		</style> 
 
		<table> 
			<tr> 
				<td class="item item1"> 
					<table> 
						<tr> 
							<td class="indent"> 
							</td> 
							<td> 
								Lorem
							</td> 
						</tr> 
					</table> 
				</td> 
				<td class="item item2"> 
					<table> 
						<tr> 
							<td class="indent"> 
							</td> 
							<td> 
								Ipsum
							</td> 
						</tr> 
					</table> 
				</td> 
				<td class="item item3"> 
					<table> 
						<tr> 
							<td class="indent"> 
							</td> 
							<td> 
								Dolor
							</td> 
						</tr> 
					</table> 
				</td> 
				<td class="item item4"> 
					<table> 
						<tr> 
							<td class="indent"> 
							</td> 
							<td> 
								Sed Accumsan
							</td> 
						</tr> 
					</table> 
				</td> 
				<td class="item item5"> 
					<table> 
						<tr> 
							<td class="indent"> 
							</td> 
							<td> 
								Maecenas auctor tempor ligula
							</td> 
						</tr> 
					</table> 
				</td> 
			</tr> 
		</table>

Вот, минимальный код.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.04.2010, 19:50:36
    #36572960
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2нужно сделать так, чтобы в критический момент эти отступы пропадали, а текст так же примыкал бы вплотную (или почти вплотную) к левому краю своей ячейки или ДИВа.
Как вариант...

Код: 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.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
table {
	border-collapse: collapse;
	background: #ccc;
	width:  100 %;
}
.item {
	border: solid 1px;
}
.item1 {
	width:  12 . 5 %;
}
.item2 {
	width:  12 . 5 %;
}
.item3 {
	width:  12 . 5 %;
}			
.item4 {
	width:  25 %;
}			
.item5 {
	width:  37 . 5 %;
}
.indent,
.tab {
	width: 2em;
}
.tab  {
	float: left;
	height: 1px;
}
.tit {
	float: left;
	height:  100 %;
}
</STYLE>
</HEAD>
<BODY>
<table> 
<tr> 
	<td class="item item1"> 
		<div class='tab'></div>
		<div class='tit'> 
			Lorem
		</div> 
	</td> 
	<td class="item item2"> 
		<div class='tab'></div>
		<div class='tit'> 
			Ipsum
		</div> 
	</td> 
	<td class="item item3"> 
		<div class='tab'></div>
		<div class='tit'> 
			Dolor
		</div> 
	</td> 
	<td class="item item4"> 
		<div class='tab'></div>
		<div class='tit'> 
			Sed Accumsan
		</div> 
	</td> 
	<td class="item item5"> 
		<div class='tab'></div>
		<div class='tit'> 
			Maecenas auctor tempor ligula
		</div> 
	</td> 
</tr> 
</table> 
</BODY>
</HTML>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 09:26:03
    #36573324
Shitbox2
Shitbox2
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
krvsa
Как вариант...

Семантически очень хороший вариант. Даже не знаю, можно ли лучше сделать :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 09:49:26
    #36573359
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ
Shitbox2 , но ДИВы не дадут такой "гибкости" по отображению как таблицы... ДИВы более жостче чтоли...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сделать отступ, исчезающий при уменьшении сайта. Нужен самый эффективный способ / 17 сообщений из 17, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 477ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453244]:
 0ms
get settings:
 10ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 182ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 2ms
others: 195ms
total:  477ms
x
x
Закрыть


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