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

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

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

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

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

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

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

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

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

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

почему ?
...
Рейтинг: 0 / 0
10.10.2013, 16:46
    #38423283
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
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
10.10.2013, 18:02
    #38423417
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
andron81 почему ?
Попробуй и увидишь...
...
Рейтинг: 0 / 0
10.10.2013, 18:03
    #38423421
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
andron81, а ну забыл align - ы расставить в tr.
...
Рейтинг: 0 / 0
10.10.2013, 18:05
    #38423424
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
andron81но тут намного проще сделать используя table
Не совсем понял как "намного проще" сочетается с одним примером на бабличке... Сделай на ДИВах - тогда можно или сравнить... Или поправить.
...
Рейтинг: 0 / 0
10.10.2013, 18:17
    #38423433
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
krvsaandron81но тут намного проще сделать используя table
Не совсем понял как "намного проще" сочетается с одним примером на бабличке... Сделай на ДИВах - тогда можно или сравнить... Или поправить.

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

а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
...
Рейтинг: 0 / 0
10.10.2013, 20:19
    #38423558
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
andron81а на дивах я боюсь мне даже не по зубам. кучу CSS стилей придеться описывать
Если бы не селекты, твою картинку можно реализовать вообще используя один див...
...
Рейтинг: 0 / 0
10.10.2013, 20:21
    #38423562
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
Хотя они все с одинаковыми данными значениями (читай равной ширины) - значит одним дивом можно обойтись...
...
Рейтинг: 0 / 0
10.10.2013, 20:32
    #38423578
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
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
10.10.2013, 20:43
    #38423591
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
krvsa,

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


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

Добавь label`ей и будет тебе счастие...
Для вечернего чтива
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html
...
Рейтинг: 0 / 0
10.10.2013, 21:04
    #38423611
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
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
10.10.2013, 21:11
    #38423614
andron81
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
сочетание div+table
andron81,

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

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

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

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



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


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

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

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


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