Бесплатная помощь по верстке

**ximet** · 02.08.2013 18:06

Заметил, что иногда бывает просто необходима мини-консультация по верстке. Верстаю я достаточно давно, так что кое что уже накопилось в опыте. А что не знаю, я всегда стараюсь нагуглить и сначала самому разобраться, чтобы повысить свой скил, а потом и человеку объяснить.

Времени у меня естественно не много, но постораюсь отвечать по мере накопления вопросов(только на самом деле мини-вопросы, а не вопрос как сверстать макет). Видел подобные темы и по беплатной помощи по wordpress и там в принципе если нет ТопикСтартера, то отвечают и другие люди, что в принципе тоже тут поддерживается.
p.s. спасибо за толчок к созданию темы semyon.

**semyon** · 02.08.2013 20:26

Раз я сподвиг, то первым и задам вопрос.

Ситуация такая. Есть 2 дива, 1 фиксированный, второй динамический, один в другом. Это что-то типа полоски заполненности (внутренняя полоска динамическая). Надо внутри этой полоски разместить текст аналог процента состояния.
При размещении в родительском диве - дочерний смещается (текст занимает его место), при размещении в дочернем - текст выравнивается по дочернему, т.е. при 0% текста вообще нет.

**ximet** · 02.08.2013 20:36

Сообщение от semyon

текст выравнивается по дочернему, т.е. при 0% текста вообще нет.

Приставил бы листинг кода, было бы яснее. Что могу сказать пока на в скидку, так это проблема с позиционированием, или вы его вообще применяли? Просто при позиционировании вы можете ваш процент состояния выставить где вам будет необходимо.

**kursant** · 02.08.2013 22:48

semyon, вообще вариантов множество. Вот к примеру:

Код HTML:

<div class="block-1"> <div class="block-2"> </div> <span class="text">70%</span> </div> <style>
	body {
		background: #777;
	}
	.block-1 {
		width: 200px;
		height: 30px;
		background: #888;
		border: 1px solid #fff;
		position: relative;
	}
	.block-2 {
		height: 30px;
		width: 70%;
		background: orange;
	}
	.text {
		display: block;
		position: absolute;
		top: 5px;
		left: 85px;
	}
</style>

В итоге: Вложение 10938
Так же можно сделать что бы текст внутри дочернего элемента был или без абсолютного позиционирования.

**Stipkor** · 02.08.2013 22:54

Имеется вопрос по HTML верстке. Подробнее на картинке.
http://savepic.org/4274255.png - Вот что имеется. Это html страница. Нужно сделать ещё такой же блок как на картинке, и чтобы он был справа от имеющегося блока, и они оба были выравнены по горизонтали и вертикали (центр), и между ними было расстояние 15px. Если нужно будет код страницы, оставьте свои данные, я с вами свяжусь.

**ximet** · 02.08.2013 23:46

kursant, я посмотрел код, там немного другая ситуация... Не в позиционировании дело. Там немного другое дело. Я потом напишу сюда результат. Пока я думаю как это.

Stipkor, одно из решений:

code

html

Код HTML:

<link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css">
.className{
	width:270px;
	height:150px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 -275px;
}

.className2{
	width:270px;
	height:150px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 10px;
	
}
<body id="exampleBody"> <div class="className"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и 
	вертикали</span> (CSS)</p> </div> <div class="className2"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и 
	вертикали</span> (CSS)</p> </div>

[свернуть]

styles.css

Код HTML:


.className{
	background-color:#338BC7;
	width:270px;
	height:150px;
	position:relative;
	
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.className2{
	background-color:#338BC7;
	width:270px;
	height:150px;
	position:relative;
	
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

.className p{
	font-size:22px;
	margin:45px 10px 10px;
	color:white;
	text-align:center;
	position:absolute;
}

.className2 p{
	font-size:22px;
	margin:45px 10px 10px;
	color:white;
	text-align:center;
	position:absolute;
}

[свернуть]

**semyon** · 03.08.2013 01:48

kursant, примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает.

**ximet** · 03.08.2013 03:22

semyon, долго думал искал причину. В принципе причина в том, что обернуто было еще в спан.

**kursant** · 03.08.2013 05:52

semyon,

примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает

Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то?

**ximet** · 03.08.2013 12:51

Сообщение от kursant

Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то?

У него она точно также работает, но как ни странно, без
.block-1 {
position: relative;
}
То есть у родительского элемента у него нет position: relative; и получается всё равно работает. Проверил во всех браузерах работает, либо проблема в том, что он где-то не закрыл тег, либо я не знаю. Просто если нету у родительского элемента position: relative;, то по идее должно выравниваться по body, а тут такой вот парадокс вышел.

	02.08.2013 20:26 #2
semyon Web-разработка Регистрация: 20.06.2011 Сообщений: 1,781 Репутация: 549 Webmoney BL: ?	Раз я сподвиг, то первым и задам вопрос. Ситуация такая. Есть 2 дива, 1 фиксированный, второй динамический, один в другом. Это что-то типа полоски заполненности (внутренняя полоска динамическая). Надо внутри этой полоски разместить текст аналог процента состояния. При размещении в родительском диве - дочерний смещается (текст занимает его место), при размещении в дочернем - текст выравнивается по дочернему, т.е. при 0% текста вообще нет. Создание и доработка Ваших сайтов
0 semyon

	02.08.2013 20:36 #3
ximet Дипломник Регистрация: 19.09.2011 Сообщений: 222 Репутация: 28	Сообщение от semyon текст выравнивается по дочернему, т.е. при 0% текста вообще нет. Приставил бы листинг кода, было бы яснее. Что могу сказать пока на в скидку, так это проблема с позиционированием, или вы его вообще применяли? Просто при позиционировании вы можете ваш процент состояния выставить где вам будет необходимо.
0 ximet

	02.08.2013 22:54 #5
Stipkor Новичок Регистрация: 15.01.2013 Сообщений: 29 Репутация: 1	Имеется вопрос по HTML верстке. Подробнее на картинке. http://savepic.org/4274255.png - Вот что имеется. Это html страница. Нужно сделать ещё такой же блок как на картинке, и чтобы он был справа от имеющегося блока, и они оба были выравнены по горизонтали и вертикали (центр), и между ними было расстояние 15px. Если нужно будет код страницы, оставьте свои данные, я с вами свяжусь.
0 Stipkor

	02.08.2013 23:46 #6
ximet Дипломник Регистрация: 19.09.2011 Сообщений: 222 Репутация: 28	kursant, я посмотрел код, там немного другая ситуация... Не в позиционировании дело. Там немного другое дело. Я потом напишу сюда результат. Пока я думаю как это. Stipkor, одно из решений: code html Код HTML: <link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css"> .className{ width:270px; height:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 -275px; } .className2{ width:270px; height:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 10px; } <body id="exampleBody"> <div class="className"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и вертикали</span> (CSS)</p> </div> <div class="className2"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и вертикали</span> (CSS)</p> </div> [свернуть] styles.css Код HTML: .className{ background-color:#338BC7; width:270px; height:150px; position:relative; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .className2{ background-color:#338BC7; width:270px; height:150px; position:relative; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .className p{ font-size:22px; margin:45px 10px 10px; color:white; text-align:center; position:absolute; } .className2 p{ font-size:22px; margin:45px 10px 10px; color:white; text-align:center; position:absolute; } [свернуть] [свернуть]
0 ximet

	03.08.2013 01:48 #7
semyon Web-разработка Регистрация: 20.06.2011 Сообщений: 1,781 Репутация: 549 Webmoney BL: ?	kursant, примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает. Создание и доработка Ваших сайтов
0 semyon

Бесплатная помощь по верстке

Опции темы

Спасибо сказали:

Спасибо сказали:

code

html

styles.css

Тэги топика:

Похожие темы

Бесплатная помощь по wordpress

Бесплатная помощь по ucoz сайтам

Нужна помощь по верстке.

Нужна не бесплатная помощь в заполнении сайта

Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	03.08.2013 03:22 #8
ximet Дипломник Регистрация: 19.09.2011 Сообщений: 222 Репутация: 28	semyon, долго думал искал причину. В принципе причина в том, что обернуто было еще в спан.
0 ximet

	03.08.2013 05:52 #9
kursant Студент Регистрация: 31.01.2013 Сообщений: 58 Репутация: 14 Webmoney BL: ?	semyon, примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то? Качественная и быстрая верстка сайтов
0 kursant

	03.08.2013 12:51 #10
ximet Дипломник Регистрация: 19.09.2011 Сообщений: 222 Репутация: 28	Сообщение от kursant Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то? У него она точно также работает, но как ни странно, без .block-1 { position: relative; } То есть у родительского элемента у него нет position: relative; и получается всё равно работает. Проверил во всех браузерах работает, либо проблема в том, что он где-то не закрыл тег, либо я не знаю. Просто если нету у родительского элемента position: relative;, то по идее должно выравниваться по body, а тут такой вот парадокс вышел.
0 ximet

Темы	Раздел	Ответов	Последний пост
Бесплатная помощь по wordpress	WordPress	2451	02.12.2018 02:53
Бесплатная помощь по ucoz сайтам	Создание сайтов	6	31.03.2013 14:25
Нужна помощь по верстке.	Web программирование	3	25.02.2013 11:54
Нужна не бесплатная помощь в заполнении сайта	Копирайтинг, переводы, постинг	4	22.12.2012 00:33
Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.	DLE	3	01.07.2012 17:09