powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / help! позиционирование элементов внутри td
11 сообщений из 11, страница 1 из 1
help! позиционирование элементов внутри td
    #38101547
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть табличка, прописана по всем правилам (table, tbody, tr, td - 4шт) одна строка, 4 ячейки.

Внутрь ячейки надо вложить примерно так:

"ПОИСК" ______ r1 товаров, r2 фирм
+-----------------------------------------------+
I input_text_строка_ввода______ | кн.Найти
+-----------------------------------------------+

,где r1,r2 - input type=radio -- переключатели режима поиска. Ширина поля ввода - ограничена 260 пикселей. Ячейка может быть значительно больше.

Надо, чтобы вся дивка размещалась ровно посередине ячейки таблицы.

Пробовал сделать через text-align -- выходит "не очень"... пробовал через position - ваще какая-то фигня:
то, что вложено в ячейку td id="top-search"
Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="search">
 	<div id="label">ПОИСК:</div>
	<div id="modes">
		&nbsp;<input type="radio" checked="checked" id="isGoods" name="what" value="goods"
			title="Поиск по товарам - можно ..."
		/>&nbsp;товаров
		&nbsp;<input type="radio" id="isFirms" name="what" value="firms"
			title="Поиск по фирмам позволяет ..., и ... пробуйте!"
		/>&nbsp;фирм
	</div>
	<form method="get" action="#" name="searchForm" onsubmit="Mediam_searchSubmit(); return false;">
		<input type="text" name="query" id="query" class="search-text" value="" />
		<input type="submit" class="search-submit" value="Найти" onsubmit="Mediam_searchSubmit();" />
	</form>
</div>


вот стили к этому куску
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
TD#top_search { padding:2px; width:auto; text-align:center; /*vertical-align:top;*/ color:#D9F0F0; }
DIV#search { position:relative; margin:auto; width:324px; font-size:11px; background-color:#0000b0; }
#search #label { position:absolute; top:0px; left:0px; width:66px; height:20px; font-size:16px; font-weight:bold; }
#search #modes { position:absolute; top:0px; right:54px; width:115px; height:20px; }
#search FORM   { position:absolute; top:20px; left:0px; }
#search INPUT { color:#336666; background-color:#C9E0E0; border-color:#336666; }
#search .search-text   { width:262px; font-size:20px; }
#search .search-submit {}



При закоментаренном у TD выравнивании по верхнему краю - выводит содержимое дивки #search - от середины ячейки, теряя половину во всех браузерах... при указании position:static у дивки search - позиционирует её от начала окна браузера, наплевав на TD.
... и т.д.

Как позиционировать элементы (в частности div) внутри ячеек таблицы? Почему у тегов input - какие-то собственные натсройки, не наследуемые от родительских элементов??? Где и что надо читать? htmlbook.ru - читаю, но там мало чего объяснено в части сопряжения разных элементов...
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38101568
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Примеры нужно делать полные, а не огрызки. И картинки нужно показывать, а не эти каракули...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
table {
	width: 200px;
	height: 200px;
}
td {
	text-align: center;
	vertical-align: medle;
	border: 1px solid;
}
div {
	width: 100px;
	height: 100px;
	display: inline-block;
	background-color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table>
	<td>
		<div></div>
	</td>
</table>
</body>
</html>



Arhat109Как позиционировать элементы (в частности div) внутри ячеек таблицы?
Все зависит от ситуации и потребностей...

Arhat109Почему у тегов input - какие-то собственные натсройки, не наследуемые от родительских элементов???
А какие у них "родительские элементы"? И что они должны от них "наследовать"?
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38101577
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa, полностью (рабочий вариант) можно взять тут www.mediam.ru (главная, да и любая страничка). Если привести сюда весь код layout.phtml - боюсь он сильно не влезет... да и мало чем поможет... он же генериться через ZF.

Меня интересует как спозиционировать дивку внутри тега td... это первая табличка, которая шапка. Да и ещё, сегодня обнаружил, что в старом епифане (от 4-го Дебиана) - логотип вылезает вверх ЗА границу окна
... догадываюсь, что из-за установки vertical-align:top для первой ячейки таблицы
... получается, что выравнивание в ячейке таблицы меняет начало точки отсчета (место положение координаты 0,0) в ячейке, так?

тогда
1. как поставить дивку посередине и как спозиционировать её внутренние элементы друг относительно друга, если я не знаю реальных рамеров ячейки?

2. насколько понял DOM модель, страничка - это дерево элементов, и соответственно для тега input должны наследоваться атрибуты из родительского тега, например div, в котором он прописан. Но этого НЕ происходит по факту. Ни цвет, ни фон, ни шрифт ни выравнивание - толком не наследуется. Размеры input-ов "по умолчанию" - ваще непонятно откуда берутся... они разные, даже для одного браузера при разных обновлениях...

... такое ощущение, что табличные теги с дивными как-то "плохо дружат"...

Догадываюсь, что нужно читать какие-то АЗЫ... но вот только какие?
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38101580
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Arhat109,

Да, кстати. Там у меня воткнут фон для всей дивки #search - синенький. Вот он ваще не выводится! Как будто дивки нет совсем.
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38101598
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Arhat109,

Что, никто не поможет? Даже ссылкой не кинут чего читать? :(
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38101660
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Arhat1092. насколько понял DOM модель, страничка - это дерево элементов, и соответственно для тега input должны наследоваться атрибуты из родительского тега
Ты не правильно понял про "наследование"...

Arhat109Размеры input-ов "по умолчанию" - ваще непонятно откуда берутся... они разные, даже для одного браузера при разных обновлениях...
Ну это-то давно известный факт.

Arhat109... такое ощущение, что табличные теги с дивными как-то "плохо дружат"...
Основная проблема - растягивающаяся ячейка... С фиксироваными размерами нет проблем.
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38102124
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,

в чём "неправильность" можете помочь? Если у меня стоит дивка с заданным фоном, рамкой, цветом, ... "общими стилевыми элементами" и внутри дивки стоит форма и в ней есть input, то почему они не должны наследоваться от родителя?

аналогичная проблема с пониманием (у меня точно) - с табличными тегами... что-то НАДО задавать для table, а что-то приходится копировать в каждую td, хотя вроде как есть ещё контейнеры tbody и tr смысла которых в части стилизации - тоже не очень понимаю.

... нифига не понятно.

Фактически "наследование" - значительно надуманное понятие в html, нет? По сути каждый тег обладает своим набором атрибутов, часть из которых может наследоваться, а часть надо указывать каждый раз или будет что-то по умолчанию, причем не каждый раз "одно и то же" (явно чувствуется проблема неинициализированной переменной браузера)...

... и на всё это "сверху" накладывается непонятная зависимость взаимодействия родительских и дочерних тегов...

где это всё можно прочитать?

Дело в том, что перечень тегов, атрибутов стилевых свойств неплохо расписан на htmlbook, но там практически нет ничего про особенности вложений одних тегов в другие...
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38102268
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Arhat109Если у меня стоит дивка с заданным фоном, рамкой, цветом, ... "общими стилевыми элементами" и внутри дивки стоит форма и в ней есть input, то почему они не должны наследоваться от родителя?
Встречный вопрос - откуда ты вообще взял информацию про это "наследование"?

Arhat109аналогичная проблема с пониманием (у меня точно) - с табличными тегами... что-то НАДО задавать для table, а что-то приходится копировать в каждую td, хотя вроде как есть ещё контейнеры tbody и tr смысла которых в части стилизации - тоже не очень понимаю.

... нифига не понятно.
Это не страшно...

Arhat109Фактически "наследование" - значительно надуманное понятие в html, нет?

Оно явно придумано тобой.
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38102702
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa, возможно. Но как я должен понимать текст (много где пишется) "свойство наследуется от родительского элемента", "ненаследуемое свойство" и т.д. это о чём?
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38102845
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Arhat109Но как я должен понимать текст (много где пишется) "свойство наследуется от родительского элемента", "ненаследуемое свойство" и т.д. это о чём?
Для начала нужно таки привести цитату полностью. Тогда можно будет написать что-то конкретнее.
Но это
Код: html
1.
2.
3.
<div>
   <p>...</p>
</div>


не наследование...
Хотя и говорится, что абзац дочерний элемент дива. Тут речь только о иерархии "расположения" элементов в ДОМ модели и не более того...
Само же понятие наследования настолько абстрактно по своему определению, что даже ОО-языки его поддерживают с ооочень большими оговорками.
ХТМЛ же вообще этим не занимается. Тут если только структура "дерева" элементов может быть рассмотрена. (прям как Ёда )
...
Рейтинг: 0 / 0
help! позиционирование элементов внутри td
    #38107000
Arhat109
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,

пасибки, теперь понятнее.
...
Рейтинг: 0 / 0
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / help! позиционирование элементов внутри td
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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