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


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

Как это сделать таблицами я знаю. А как слоями?
Подскажите плиз, никак не получается.
Заранее спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2016, 12:45
    #39337796
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка необычного заголовка блока
urukhay,

http://webcodius.ru/spravochnik-css/kak-sdelat-bukvicu-na-html-stranice-pri-pomoshhi-css.html
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2016, 14:09
    #39337916
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка необычного заголовка блока
urukhay , ширина той "иконки" какая?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2016, 14:46
    #39337977
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка необычного заголовка блока
Ну 30*30, к примеру.
Небольшая.

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

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

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

Ну если тебе заголовок (header) только нужно - оставь себе таблицу....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2016, 15:51
    #39338060
krvsa
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
| Ответить | Цитировать | Написать  
31.10.2016, 16:07
    #39338084
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка необычного заголовка блока
urukhayВадя,
там должна быть именно иконка, а не буквица!
чукча писатель?
просмотреть всё не умеет?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2016, 22:15
    #39338319
urukhay
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
| Ответить | Цитировать | Написать  
31.10.2016, 23:46
    #39338353
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка необычного заголовка блока
urukhayВ общем, прихожу к выводу, что когда речь идет о каком-то выравнивании, проще использовать таблицы.
Хотя, опыта верстки дивами мало, но пока создается такое впечатление.

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

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

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

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

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

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

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

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

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



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


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