powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка необычного заголовка блока
15 сообщений из 15, страница 1 из 1
Верстка необычного заголовка блока
    #39337772
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем привет.
Есть заголовок блока, который представляет собой иконку и текст, справа от нее.
Что-то типа того:
Код: html
1.
2.
3.
4.
<div class="head">
  <div class="icon"></div>
  <div class="title"></div>
</div>


Задача: сверстать таким образом, чтобы при длинном тексте (в 2 и более строки), вторая строка оказывалась не под иконкой, а также, как и первая строка справа от нее. Т.е. все строки должны выравниваться по левой границе относительно первой строки. И весь этот текстовый блок должен быть справа от иконки.

Как это сделать таблицами я знаю. А как слоями?
Подскажите плиз, никак не получается.
Заранее спасибо!
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39337796
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39337916
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay , ширина той "иконки" какая?
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39337977
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну 30*30, к примеру.
Небольшая.

Возможно, я задаю глупые вопросы.
Возможно - это азы. Всю жизнь верстал таблицами.
Пытаюсь перейти на дивы - тяжело идет.

Пока, лично для себя, никаких преимуществ дивов не вижу - один сплошной геморрой.
Может руки не оттуда растут? )) Хз, при верстке таблицами вроде оттуда расли ))
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39337978
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Вадя,
там должна быть именно иконка, а не буквица!
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338044
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay,

а выложите готовый пример, где сверстано таблицами.
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338045
Фотография DarkMaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay,

Ну если тебе заголовок (header) только нужно - оставь себе таблицу....
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338060
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayНу 30*30, к примеру.
Т.е. фиксированная?
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.head {
	overflow: hidden;
}
.icon {
	float: left;
	width: 30px;
	height: 30px;
	border: 1px solid;
}
.title {
	margin-left: 40px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="head">
	<div class="icon"></div>
	<div class="title">
		Задача: сверстать таким образом, 
		чтобы при длинном тексте (в 2 и более строки), 
		вторая строка оказывалась не под иконкой, 
		а также, как и первая строка справа от нее. 
		Т.е. все строки должны выравниваться по левой 
		границе относительно первой строки. 
		И весь этот текстовый блок должен быть справа 
		от иконки.
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338084
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayВадя,
там должна быть именно иконка, а не буквица!
чукча писатель?
просмотреть всё не умеет?
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338319
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa, спасибо!
У меня также было, за исключением одного: у .title тоже float: left стоял.
Видимо, в этом причина была!

user89, лови:
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<!--<meta name="viewport" content="width=device-width; initial-scale=1.0">-->
<style type='text/css'>
*
{
	margin: 0;
	padding: 0;
}
.h td
{
	vertical-align: top;
	border: 1px solid red;
}
.h .icon
{
	width: 30px;
	height: 30px;
	border: 1px solid black;
	background: yellow;
}

.h h1
{
	display: block;
	font-size: 25px;
	line-height: 30px;
	margin-left: 20px;
	border: 1px solid black;
}
</style>
</head>
<body>
	<div class="h">
		<table>
			<tr>
				<td><div class="icon"></div></td>
				<td><h1>Какой-то заголовок</h1></td>
			</tr>
		</table>				
	</div>
</body>
</html>



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

Буду пробовать смешанную верстку, в принципе таблицы никто не отменял.
Жаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные.
Без них табличная верстка стала тяжелее.

Всем спасибо за помощь!
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338353
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayВ общем, прихожу к выводу, что когда речь идет о каком-то выравнивании, проще использовать таблицы.
Хотя, опыта верстки дивами мало, но пока создается такое впечатление.

Буду пробовать смешанную верстку, в принципе таблицы никто не отменял.
Жаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные.
Без них табличная верстка стала тяжелее.

Всем спасибо за помощь!

Смешанной вёрсткой и надо делать. Там где нужна таблица не следует дивы пихать. Но только там, где таблица будет семантически правильной, а не там, где надо элементы выровнять по ширине :)

Насчёт align и valign... Не помню что бы align и valign кто-то отменял для текста в css (может ошибаюсь... если да, киньте ссылку пожалуйста, если кому не лень, когда отменили и что предложили взамен). Зато теперь появилось очень полезное display: flex... Ждём пока браузеры поправят все несоответствия спецификации и начинает юзать по полной :) (когда последний раз смотрел у IE ещё много чего было отмечено жёлтым в том числе "многострочность" этого свойства и у андроида тоже что-то не так вроде было. Может сейчас уже поправили... больше трёх месяцев верстать не приходилось уже) Пока пользовал только частично: для распределения нескольких элементов в одной строке с одинаковыми зазорами между ними (space-between), центрирования нескольких элементов и равномерного распределения по ширине (space-around). Но возможностей там в разы больше!
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338406
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр ,

я имел в виду html атрибуты align и valign, а не css-свойства.
CSS-свойств, кстати, таких нет, есть text-align и vertical-align ))

А верстка с этими атрибутами пока работает, но валидатор выдает ошибки, что атрибуты устарели.
Вот ссылки: align и valign

Flex - крутая штука. Правда мне пока приходилось работать только с justify-content: center.
Но оно работает во всех последних версиях браузеров CH, FF, O, IE (в виндовом сафари - нет).
В мобильных браузерах android и ios тоже работает.

За помощь всем большое спасибо! )
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338426
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay,

хм... Да, ошибся я :) Извините. Давно вёрсткой не занимался, подзабыл некоторые моменты, да и усталость сказывается (почему-то align и valign как свойства css вспомнились :) )
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39338463
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayЖаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные.
Для отображения ЦСС. ;)
...
Рейтинг: 0 / 0
Верстка необычного заголовка блока
    #39340351
helpsetup
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
urukhay,



<p align="left">Текст выровнен по левому краю страницы.</p>
<p align="right">Текст справа страницы.</p>
...
Рейтинг: 0 / 0
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка необычного заголовка блока
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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