powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / сочетание div+table
25 сообщений из 31, страница 1 из 2
сочетание div+table
    #38423093
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Добрый день. в верстке новичок.

Есть сайтец с никакущим деревянным дизайном. Макет пока не готов. но
явно прослеживаются фрагменты попадающие под табличную реализацию,
тем не менее и блоков div тоже валом, потому что под блоки уже написаны рабочие скрипты js (jquery).

Вопрос собственно следующий: как себя ведут div и table по отношению к друг другу. что нельзя делать
, что можно ? на что обратить внимание, чтобы сайт не завалился в каком-нибудь браузере ?

например :
не возбраняется ли делать div внутри table или наоборот ?
...
Рейтинг: 0 / 0
сочетание div+table
    #38423118
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Валидатор вам всё скажет. http://validator.w3.org/
Можно и локальную страницу отправить, если в старой опере (opera 12) сделать ПКМ->Соблюдены ли веб-стандарты
...
Рейтинг: 0 / 0
сочетание div+table
    #38423125
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81как себя ведут div и table по отношению к друг другу. что нельзя делать
Не пытаться "развернуть" ДИВ на весь размер резиновой ячейки...

В остальном все нормально...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423154
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81Добрый день. в верстке новичок.

Есть сайтец с никакущим деревянным дизайном. Макет пока не готов. но
явно прослеживаются фрагменты попадающие под табличную реализацию,
тем не менее и блоков div тоже валом, потому что под блоки уже написаны рабочие скрипты js (jquery).

Вопрос собственно следующий: как себя ведут div и table по отношению к друг другу. что нельзя делать
, что можно ? на что обратить внимание, чтобы сайт не завалился в каком-нибудь браузере ?

например :
не возбраняется ли делать div внутри table или наоборот ?

если с tableй поступать по ее спецификации, никакой div ей не страшен.
...
Рейтинг: 0 / 0
сочетание div+table
    #38423180
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaandron81как себя ведут div и table по отношению к друг другу. что нельзя делать
Не пытаться "развернуть" ДИВ на весь размер резиновой ячейки...

В остальном все нормально...

почему ?
...
Рейтинг: 0 / 0
сочетание div+table
    #38423283
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81,


скажем вот всплывающее окно на одном из сайтов реализовано исключительно при помощи div,




но тут намного проще сделать используя table.

Можно ли сделать так чтобы получить вышеуказанную реализацию ?
Код: 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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
   <tr>
     <td>
       <div id="input1"><input name="input1"> </div>
     </td>
   </tr>
   <tr>
     <td>
       <div id="input2"><input name="input2"> </div>
     </td>
   </tr>
   <tr>
     <td>
   <div id="select1">
  <select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   </div>
     </td>

     <td>
   <div id="select2">   
  <select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   </div>
     </td>

     <td>
   <div id="select3">      
  <select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   </div>   
     </td>

   </tr>
</table>
</div>
...
Рейтинг: 0 / 0
сочетание div+table
    #38423417
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81 почему ?
Попробуй и увидишь...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423421
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81, а ну забыл align - ы расставить в tr.
...
Рейтинг: 0 / 0
сочетание div+table
    #38423424
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81но тут намного проще сделать используя table
Не совсем понял как "намного проще" сочетается с одним примером на бабличке... Сделай на ДИВах - тогда можно или сравнить... Или поправить.
...
Рейтинг: 0 / 0
сочетание div+table
    #38423433
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaandron81но тут намного проще сделать используя table
Не совсем понял как "намного проще" сочетается с одним примером на бабличке... Сделай на ДИВах - тогда можно или сравнить... Или поправить.

ну проще , вот я сделал (правда про выравниваня содержимого в ячейках забыл)

а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
...
Рейтинг: 0 / 0
сочетание div+table
    #38423558
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
Если бы не селекты, твою картинку можно реализовать вообще используя один див...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423562
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Хотя они все с одинаковыми данными значениями (читай равной ширины) - значит одним дивом можно обойтись...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423578
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81ну проще , вот я сделал (правда про выравниваня содержимого в ячейках забыл)

а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
Как вариант...

Код: 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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
<!DOCTYPE html>
<html>
<head>
<!--
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
div {
	width: 370px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	border: 1px solid;
}
input {
	width: 97%;
	margin-bottom: 5px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
	<input name="input1" />
	<input name="input2" />
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
</div>
</body>
</html>


Т.ч. про конкретную простоту я бы поспорил...

А про навыки в ЦСС:
- читай книжки
- начинай использовать

Оно и обращется...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423591
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,

единственное что ещё забыл отметить надо ещё слева расшивровки клепать с небольшим отступом :


...
Рейтинг: 0 / 0
сочетание div+table
    #38423600
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81надо ещё слева расшивровки клепать с небольшим отступом
Ну это уже тебе на "домашнее задание".

Добавь label`ей и будет тебе счастие...
Для вечернего чтива
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html
...
Рейтинг: 0 / 0
сочетание div+table
    #38423611
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaandron81ну проще , вот я сделал (правда про выравниваня содержимого в ячейках забыл)

а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
Как вариант...

Код: 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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
<!DOCTYPE html>
<html>
<head>
<!--
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
div {
	width: 370px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	border: 1px solid;
}
input {
	width: 97%;
	margin-bottom: 5px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
	<input name="input1" />
	<input name="input2" />
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
	<select size="3" multiple name="hero[]">
		<option disabled>Выберите героя</option>
		<option value="Чебурашка">Чебурашка</option>
		<option selected value="Крокодил Гена">Крокодил Гена</option>
		<option value="Шапокляк">Шапокляк</option>
		<option value="Крыса Лариса">Крыса Лариса</option>
	</select>
</div>
</body>
</html>




у тебя ширина головного дива 370px
каждый инпут получается примерно 333 px
все селекты имеют одинаковую ширину. все они в сумме не привышают скажем 250
но как сделать так чтобы крайний левый селект начинался
по горизонтали там же где начинается инпут и крайний
правый селект заканчивался по горизонтале там же где заканчивается инпут.
селекты распологать с одинаковыми отступами друго от друга.
смотреть рисунок постом выше.

и расшифровочки - title, url , tags, прижатые к элементам на одинаковом расстоянии см. рисунок
...
Рейтинг: 0 / 0
сочетание div+table
    #38423614
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81,

всё за что ты написал спасибо. но у меня основная проблема эта выравнивание. попробую поюзать твою ссылку
...
Рейтинг: 0 / 0
сочетание div+table
    #38423617
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81,

а выравниванивание это и есть поблема дива основная как я понимаю. вот почему я сказал что табличной версткой проще, хоть и конструкций больше.
...
Рейтинг: 0 / 0
сочетание div+table
    #38423737
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81но как сделать так чтобы крайний левый селект начинался
по горизонтали там же где начинается инпут и крайний
правый селект заканчивался по горизонтале там же где заканчивается инпут.
селекты распологать с одинаковыми отступами друго от друга.
смотреть рисунок постом выше.

и расшифровочки - title, url , tags, прижатые к элементам на одинаковом расстоянии см. рисунок
1000р на телефон или карточку и вперед!
...
Рейтинг: 0 / 0
сочетание div+table
    #38423907
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaandron81но как сделать так чтобы крайний левый селект начинался
по горизонтали там же где начинается инпут и крайний
правый селект заканчивался по горизонтале там же где заканчивается инпут.
селекты распологать с одинаковыми отступами друго от друга.
смотреть рисунок постом выше.

и расшифровочки - title, url , tags, прижатые к элементам на одинаковом расстоянии см. рисунок
1000р на телефон или карточку и вперед!



ого. много. 100 еще ладно. а так я лучше тейблами сделаю
...
Рейтинг: 0 / 0
сочетание div+table
    #38423917
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81100 еще ладно
Это даже не "за еду"... Максимум "за сигареты"...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423923
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaandron81100 еще ладно
Это даже не "за еду"... Максимум "за сигареты"...


неужели в Волжском сигареты так подорожали
...
Рейтинг: 0 / 0
сочетание div+table
    #38423958
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81 , я Приму не курю...
...
Рейтинг: 0 / 0
сочетание div+table
    #38423962
andron81
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa andron81 , я Приму не курю...

пока ты только на приму сработал. потому как твой вариант и я могу в состоянии сделать
...
Рейтинг: 0 / 0
сочетание div+table
    #38423970
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
andron81пока ты только на приму сработал
Это лишь намек тебе, которым ты так и не смог воспользоваться...

andron81потому как твой вариант и я могу в состоянии сделать
Не тешь себя.
Все, что ты "смог", ты показал в своем примере...
...
Рейтинг: 0 / 0
25 сообщений из 31, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / сочетание div+table
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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