ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка: а в зоопарке бардак!
26 сообщений из 26, показаны все 2 страниц
  все  
верстка: а в зоопарке бардак!
    #38426027
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Вот разметка:

Код: 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.
58.
59.
60.
<html>
	<head>
		<title>Test</title>
		<link href="//css.cdn.tl/normalize.css" rel="stylesheet" />

		<style type="text/css">
		*, *:before, *:after {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		html, body { height: 100%; }

		dl {
			display: inline-table;
			border: 1px solid #000;
			width: 100%;
		}
		dt {
			min-width: 105px;
			display: table-cell;
		}
		dd {
			position: relative;
			margin: 0;
			display: block;
			white-space: nowrap;
			width: 100%;
			display: table-cell;
		}

		#inp1 {
			position: absolute;
			top: 0;
			background-color: transparent;
			width: 100%;
		}
		#inp2 {
			position: absolute;
			top: 0;
			color: #bbb;
			width: 100%;
			border-color: transparent;
		}
		</style>
	</head>
	<body>
		<p>Пример параграфа</p>
		<dl>
			<dt>
				<label for="inp1">Метка :</label>
			</dt>
			<dd>
				<input id="inp2" type="text" class="suggest_text" value="привет" tabindex="-1">
				<input id="inp1" type="text" class="suggest_input" value="при" />
			</dd>
		</dl>
	</body>
</html>



В Яндек и Опере все вроде бы ок - но инпут по пысоте вылазит
в IE почемуто dt и dd не стали ячеками таблицы
в ФФ вообще все разлетелось, плюс инпуты по ширине гораздо больше чем dd

Как накормить их всех правильно?
Помогите плиз
...
Рейтинг: 0 / 0
14.10.2013, 04:43
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426029
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Прошу прощения - забыл задействовать спойлеры

Хотел добавить, что в мобильных браузерах - все как в ФФ
...
Рейтинг: 0 / 0
14.10.2013, 04:51
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426060
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spКак накормить их всех правильно?
Читать и делать выводы...
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html
...
Рейтинг: 0 / 0
14.10.2013, 08:38
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426061
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , вот от тебя не ожидал такого говнокода...
...
Рейтинг: 0 / 0
14.10.2013, 08:39
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426420
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

извините что расстроил (
но это тест кусочек
...
Рейтинг: 0 / 0
14.10.2013, 12:44
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426427
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsaspКак накормить их всех правильно?
Читать и делать выводы...
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/blochnaya-verstka-form.html

Дивы в данном случае мало подходят - слишком много классов или кода в CSS - использование списка облегчает кодирование в CSS да и более семантично.
Данный пример был взят из статьи, говорящей, что некошерно в век развитой семантики все верстать безликими дивами - вот я и поверил им :)
...
Рейтинг: 0 / 0
14.10.2013, 12:47
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426441
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

+ мне еще надо делать перестроения label и input при разных media-queries
+ мне нужны контейнеры для них потому как например вместо текстового input может быть 4 чекбокса и т.п.
...
Рейтинг: 0 / 0
14.10.2013, 12:53
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426491
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
как я в случае с версткой дивами, ссылку на статью которую вы дали, сделаю данный пример при узком экране: метка и инпут расположены в разных строчках, а при широком - в одну строку? при условии что у меня 2инпута и один должен лежать под другим (т.е. абсолютное позиционирование)?

Если не будет контейнера для инпутов - то при узком экране они залезут на метку, ктороя должна располагаться выше инпутов
...
Рейтинг: 0 / 0
14.10.2013, 13:12
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426499
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , я не совсем понял, что тебе нужно в итоге... Картинкой челе покажи...
...
Рейтинг: 0 / 0
14.10.2013, 13:15
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426502
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spиспользование списка облегчает кодирование в CSS да и более семантично
У тебя не список... А "блок цитат". А это-то как раз вообще не симантично.
...
Рейтинг: 0 / 0
14.10.2013, 13:17
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426520
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spпри узком экране: метка и инпут расположены в разных строчках, а при широком - в одну строку? при условии что у меня 2инпута и один должен лежать под другим (т.е. абсолютное позиционирование)?
Как вариант...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<script src="one.js"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
span {
	position: relative;
	display: inline-block;
	padding: 0;
	border: 1px solid red;
}
.i1 {
	position: absolute;
	left: 0;
	right: 0;
}
.i2 {
	position: relative;
	left: 0;
	right: 0;
	background-color: transparent;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
	<label>Label:</label>
	<span>
		<input type='text' value='Привет' class='i1' />
		<input type='text' value='При'  class='i2' />
	</span>
</div>
<body>
</body>
</html>


Если я правильно понял...
...
Рейтинг: 0 / 0
14.10.2013, 13:28
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426526
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsaspиспользование списка облегчает кодирование в CSS да и более семантично
У тебя не список... А "блок цитат". А это-то как раз вообще не симантично.

ну в данном случае мне нужно чтоб в блоке dd inp2 лежал точно под inp1 и по ширине они не выходили за пределы контейнера - dd
по поводу использования цитат или дивов - это все решаемо :)
оно должно выглядеть как на рисунке для Оперы и Яндекса, но чтоб инпуты не вылазили за границы dd
...
Рейтинг: 0 / 0
14.10.2013, 13:30
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426528
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , мой пример выше подойдет?
...
Рейтинг: 0 / 0
14.10.2013, 13:31
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426548
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

как всегда, спасибо :)
но непонятно почему у вас из блока span инпуты не выпадают а у меня из блока dd - выпадают?
...
Рейтинг: 0 / 0
14.10.2013, 13:44
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426571
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

ага вот зачем мне нужны обертки вокруг метки и инпутов (вспомнил) - мне нужно чтоб все это было резиновое -метка не более, к примеру 150px, а инпуты растянуты на всю доступную ширину

если span и инпутам указать 100% ширины - разметка съедет до 2х строк - а мне нужно в данном случае - одну строку, но для маленьких значений ширин экрана мне нужно будет перестроить их в 2 строки!
...
Рейтинг: 0 / 0
14.10.2013, 13:53
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426580
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

еще один маленький недостаток - если приглядется то инпуты по вертикали располагаются со сдвигом в 1px - видно при увеличенном масштабе
...
Рейтинг: 0 / 0
14.10.2013, 13:57
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426687
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spесли приглядется то инпуты по вертикали располагаются со сдвигом в 1px - видно при увеличенном масштабе
Тут можно доработать ЦСС-свойствами

Код: css
1.
2.
top: <значение>;
left: <значение>;
...
Рейтинг: 0 / 0
14.10.2013, 14:46
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426691
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spно непонятно почему у вас из блока span инпуты не выпадают а у меня из блока dd - выпадают?
Наверное тут "виной" твои родительские элементы... Т.е. их значения свойства display ...
В моем ванрианте они более "просты" для браузеров.
...
Рейтинг: 0 / 0
14.10.2013, 14:48
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426698
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spметка не более, к примеру 150px, а инпуты растянуты на всю доступную ширину
...
мне нужно в данном случае - одну строку, но для маленьких значений ширин экрана мне нужно будет перестроить их в 2 строки!
Одно исключает другое...
Либо это две "разные" разметки. Широким - своя. Узким - своя...
...
Рейтинг: 0 / 0
14.10.2013, 14:51
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426723
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spесли приглядется то инпуты по вертикали располагаются со сдвигом в 1px - видно при увеличенном масштабе
Вот так вроде по-лучше будет...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<script src="one.js"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
span {
	position: relative;
	display: inline-block;
	padding: 0;
	border: 2px inset #000000;
}
input {
	border: 0;
	padding: 0;
	border-spacing: 0;
}
.i1 {
	position: absolute;
	top: 3px;
	left: 0;
}
.i2 {
	position: relative;
	top: 0;
	left: 0;
	background-color: transparent;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
	<label>Label:</label>
	<span>
		<input type='text' value='Привет' class='i1' />
		<input type='text' value='При'  class='i2' />
	</span>
</div>
<body>
</body>
</html>
...
Рейтинг: 0 / 0
14.10.2013, 15:00
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426765
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsaspметка не более, к примеру 150px, а инпуты растянуты на всю доступную ширину
...
мне нужно в данном случае - одну строку, но для маленьких значений ширин экрана мне нужно будет перестроить их в 2 строки!
Одно исключает другое...
Либо это две "разные" разметки. Широким - своя. Узким - своя...

да нет же!
при широком экране - dl -это таблица а dt и dd - ячейки
а при узком экране - мы говорим что dl, dt и dd - это простые блоки
...
Рейтинг: 0 / 0
14.10.2013, 15:23
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426810
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

Многие сайты подобную верстку используют, вот тот ВК

Код: html
1.
2.
3.
4.
5.
6.
  <div class="settings_row_wrap clear_fix">
    <div class="settings_label fl_l ta_r">Старый пароль:</div>
    <div class="settings_labeled fl_l">
      <input id="settings_old_pwd" class="text" value="" type="password">
    </div>
  </div>
...
Рейтинг: 0 / 0
14.10.2013, 15:50
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426848
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spпри широком экране - dl -это таблица а dt и dd - ячейки
а при узком экране - мы говорим что dl, dt и dd - это простые блоки
Тогда просто сделать на ДИВах, применив табличные свойства display... А в узком варианте поставить другие значения...
В любом случае связка dl, dt и dd не симантично.
...
Рейтинг: 0 / 0
14.10.2013, 16:14
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38426852
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Только у инпутов убрать все бордюры. Браузеры эти элементы отрисовывают по-разному...
Бордюры делать у материнских элементов.
...
Рейтинг: 0 / 0
14.10.2013, 16:15
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38427036
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

ок, спасибо
...
Рейтинг: 0 / 0
14.10.2013, 17:47
| Ответить | Цитировать | Написать  
верстка: а в зоопарке бардак!
    #38431518
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
вот переделал с дивами, но почему-то див с инпутами выскочил вниз?

Код: 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.
58.
59.
60.
61.
62.
<html><head>

  <title>Test</title>

  <meta charset="utf-8">  
  <link href="//css.cdn.tl/normalize.css" rel="stylesheet" />

  <style type="text/css">
  *, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
  }
  
  html, body { height: 100%; }

  .dl {
   display: table;
   width: 100%;
  }
  .dt {
   min-width: 105px;
   display: table-cell;
  }
  .dd {
   margin: 0;
   white-space: nowrap;
   width: 100%;
   display: table-cell;
   padding:0;
  }

  .ih {
    position:relative;
    top: 0;
  }

  div.ih input { 
    top:0;
    margin:0; 
    position:absolute;  
    width:100%; 
  }

  </style>
 </head>
 <body>
  <p>Пример параграфа</p>
  <div class="dl">
   <div class="dt">
     <label for="inp1">Метка :</label>
   </div>
   <div class="dd">
    <div class="ih">
      <input id="inp2" type="text" class="suggest_text" value="привет" tabindex="-1">
      <input id="inp1" type="text" class="suggest_input" value="при" />
     </div>
   </div>
   
  </div>
 </body>
</html>



причем в инспекторе нет никаких отступов - загадка какаято...
...
Рейтинг: 0 / 0
17.10.2013, 16:16
| Ответить | Цитировать | Написать  
26 сообщений из 26, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка: а в зоопарке бардак!
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1447777]:
 0ms
get settings:
 7ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 154ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 207ms
total:  428ms
созд. / загр.: 428ms
x
x
Закрыть


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