Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка: а в зоопарке бардак! / 25 сообщений из 26, страница 1 из 2
  1  все
14.10.2013, 04:43
    #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:51
    #38426029
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
Прошу прощения - забыл задействовать спойлеры

Хотел добавить, что в мобильных браузерах - все как в ФФ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 08:38
    #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:39
    #38426061
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
sp , вот от тебя не ожидал такого говнокода...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 12:44
    #38426420
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
krvsa,

извините что расстроил (
но это тест кусочек
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 12:47
    #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:53
    #38426441
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
krvsa,

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

Если не будет контейнера для инпутов - то при узком экране они залезут на метку, ктороя должна располагаться выше инпутов
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 13:15
    #38426499
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
sp , я не совсем понял, что тебе нужно в итоге... Картинкой челе покажи...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 13:17
    #38426502
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
spиспользование списка облегчает кодирование в CSS да и более семантично
У тебя не список... А "блок цитат". А это-то как раз вообще не симантично.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 13:28
    #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:30
    #38426526
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
krvsaspиспользование списка облегчает кодирование в CSS да и более семантично
У тебя не список... А "блок цитат". А это-то как раз вообще не симантично.

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

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

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

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

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

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

да нет же!
при широком экране - dl -это таблица а dt и dd - ячейки
а при узком экране - мы говорим что dl, dt и dd - это простые блоки
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 15:50
    #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, 16:14
    #38426848
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
spпри широком экране - dl -это таблица а dt и dd - ячейки
а при узком экране - мы говорим что dl, dt и dd - это простые блоки
Тогда просто сделать на ДИВах, применив табличные свойства display... А в узком варианте поставить другие значения...
В любом случае связка dl, dt и dd не симантично.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 16:15
    #38426852
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
Только у инпутов убрать все бордюры. Браузеры эти элементы отрисовывают по-разному...
Бордюры делать у материнских элементов.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.10.2013, 17:47
    #38427036
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка: а в зоопарке бардак!
krvsa,

ок, спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка: а в зоопарке бардак! / 25 сообщений из 26, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 446ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447777]:
 0ms
get settings:
 5ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 189ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 199ms
total:  446ms
x
x
Закрыть


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