Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / авто ширина блока + центрока по высоте на примере / 16 сообщений из 16, страница 1 из 1
15.03.2010, 23:59:31
    #36522141
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
Есть вот такой пример:
Код: 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.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<style>
			* {border: dashed 1px # 363636 ;}
			a {
				display: inline-block;
	            		vertical-align: middle;
				height: 100 %;	
			}
			div.example {
				margin: auto 10px;
				padding: 1em;
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="example">
			<a href="?"><b>Link  1 </b></a>
			<a href="?" style="float:right">Link  2 </a>
			<a href="?" style="float:right">Link  3 </a>
			<a href="?" style="float:right">Link  4 </a>
		</div>					
	</body>
</html>

1) Требуется чтобы блок Link1 расширился на все незанятое пространство.
2) Надписи Link 1, Link 2, Link 3, Link 4 были по центру.
Уже бьюсь сутки, видимо не так-то это просто сделать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 08:30:28
    #36522296
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT Manблок Link1
Это вот это
Код: plaintext
<b>Link  1 </b>
ты называешь "блоком Link1"?
Насколько я понимаю блок тут только один
Код: plaintext
1.
2.
<div class="example">
...
</div>
Остальное можно вообше назвать - каша.

Нарисуй (на картинке) что тебе хочется получить в итоге...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 08:31:23
    #36522298
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT ManУже бьюсь сутки, видимо не так-то это просто сделать.
Зачем же вы так убиваетесь? Вы же так не убъётесь! (с) из народного фальклёра
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 08:53:29
    #36522314
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
krvsa , шутки шутить иволите? ))
Вот сам все сделал:
Код: 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.
<!DOCTYPE html>
  <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
         <style>
             * {border: dashed 1px # 363636 ;}
             a {
                 display: table-cell;
                 vertical-align: middle;
             }
             div.example {
                 margin: auto 10px;
                 padding: 1em;
                 width: 300px;
                 height: 300px;
                 display: table;
             }
         </style>
     </head>
     <body>
         <div class="example">
             <a href="?" style="width:100%"><b>Link- 1 </b></a>
             <a href="?">Link- 2 </a>
             <a href="?">Link- 3 </a>
             <a href="?">Link- 4 </a>
         </div>                    
     </body>
  </html>
смогешь лучше сделать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2010, 09:43:11
    #36522390
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT ManВот сам все сделал
А ИЕ вкурсе?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 21:04:24
    #36527098
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
8-ой да. Ну, коли знаешь как 6/7 ещё приручить колись.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 21:25:39
    #36527119
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT Manкак 6/7 ещё приручить колись.
Там с центрированием по вертикали только табличка поможет
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 21:35:16
    #36527131
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
krvsaТам с центрированием по вертикали только табличка поможет
До этого я дошел, а вот сделать ссылку в размер ячейки неполучилось. Может вместе подумаем как вписать в ячейку ссылку, чтобы она стала в размер ячейки.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2010, 21:42:57
    #36527143
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
Вот такое начало:
Код: 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.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<style>
			* {border: dashed 1px # 363636 ;}
			div.example {
				border: dashed 1px # 363636 ;
				margin: auto 10px;
				padding: 1em;
				width: 200px;
				height: 200px;
			}
			a {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="example">
		<table style="width:100%; height:100%">
		<tr>
			<td style="width:100%"><a href="?"><b>Продукты</b></a></td>
			<td><a href="?">R</a></td>
			<td><a href="?">E</a></td>
			<td><a href="?">A</a></td>
		</tr>
		</table>			
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 07:13:21
    #36527361
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
Код: plaintext
1.
2.
3.
td a{
	height: 100 %;
}
но в этом случае текст будет вверху ячейки...сделать его посередине не получилось, поэтому возможно лучше ссылки <a> убрать,а саму тэдэшку стилями заточить под ссылку
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 07:51:41
    #36527382
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
EmilRegis поэтому возможно лучше ссылки <a> убрать,а саму тэдэшку стилями заточить под ссылку
с этого момента подробнее... onclick не предлагать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 08:04:34
    #36527391
EmilRegis
EmilRegis
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
а чем не устраивает?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 08:10:10
    #36527394
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
EmilRegisа чем не устраивает?
должно все работать и без javascript-а.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 08:23:30
    #36527403
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT Manкак вписать в ячейку ссылку, чтобы она стала в размер ячейки.
NT ManВот такое начало
Рамка везде во всю ширину ячейки и ссылки посередине. Или ты еще чего хотел сделать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 08:26:17
    #36527408
NT Man
NT Man
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
krvsaРамка везде во всю ширину ячейки и ссылки посередине. Или ты еще чего хотел сделать?
то-же самое по высоте надо получить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.03.2010, 08:43:38
    #36527427
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
авто ширина блока + центрока по высоте на примере
NT Manто-же самое по высоте надо получить.
Тако кроссбраузерно работает только внутри табличной ячейки... Т.е. без onclick будет не кроссбраузерно.

Либо придется целиться маргин-топом, дабы получить эффект центрирования. Типа такого

Код: 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.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<style>
			* {border: dashed 1px # 363636 ;}
			div.example {
				border: dashed 1px # 363636 ;
				margin: auto 10px;
				padding: 1em;
				width: 200px;
				height: 200px;
			}
			td {
				height:  100 %;
			}
			a {
				display: block;
				height:  100 %;
			}
			a b,
			a span {
				display: block;
				margin-top: 85px
			}
		</style>
	</head>
	<body>
		<div class="example">
		<table style="width:100%; height:100%">
		<tr>
			<td style="width:100%"><a href="?"><b>Продукты</b></a></td>
			<td><a href="?"><span>R</span></a></td>
			<td><a href="?"><span>E</span></a></td>
			<td><a href="?"><span>A</span></a></td>
		</tr>
		</table>			
		</div>
	</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / авто ширина блока + центрока по высоте на примере / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 491ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453374]:
 0ms
get settings:
 4ms
get forum list:
 8ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 240ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 33ms
get tp. blocked users:
 1ms
others: 191ms
total:  491ms
x
x
Закрыть


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