To A-F, RE: Есть офигенные верстальщики... *?

BaNru · 24.09.2011

A-F, ты интересовался как сверстать...
Мне было интересно, как же все таки такое реализовать и подумав сделал один примерчик. Конечно код напоминает УГ, но вопрос решен. Работает в FF, Опере. Хроме не работает min-width у таблицы. IE6 надо поправить line-height или что то ещё схожее, но в общем тоже работает.

Кто не в теме - читаем тут

Кто еще может предложить варианты?
У меня ещё один вариант крутится на CSS3, но реализуем ли он, пока не знаю.

motek · 24.09.2011

BaNru сказал(а):
A-F, ты интересовался как сверстать...
Мне было интересно, как же все таки такое реализовать и подумав сделал один примерчик. Конечно код напоминает УГ, но вопрос решен. Работает в FF, Опере. Хроме не работает min-width у таблицы. IE6 надо поправить line-height или что то ещё схожее, но в общем тоже работает.

Кто не в теме - читаем тут

Кто еще может предложить варианты?
У меня ещё один вариант крутится на CSS3, но реализуем ли он, пока не знаю.

"резиновый декоративный DIV" ...а там таблица :biggrin: ....
а разве расстояние между буквами не должно увеличиваться при увеличении экрана?
если нет,то у меня получилось так:

Код:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title>резиновый декоративный DIV</title>
	<style>
* {
	margin: 0;
	padding: 0;
}
body {
	font: 100% Arial, Tahoma, Verdana, sans-serif;
}
#globl_wrap {
	margin: 20px;
	background: #ffffff;
}
#middle {
	display: block;
	border-left: 75px solid #ffffff;
	border-right: 20px solid #ffffff;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	margin-right: -100%;
}
#content {
	padding: 0 15px;
}
#sideLeft {
	display: block;
	float: left;
	width: 75px;
	position: relative;
	background: #ffffff;
	left: -75px;
	font-size:800%;
	line-height:.75;
}
#sideRight {
	display: block;
	float: right;
	margin-right: -20px;
	width: 20px;
	height: 70px;
	position: relative;
	background: #ffffff;
	border-top:10px solid #000000;
	border-right:10px solid #000000;
	border-bottom:10px solid #000000;
	border-left:0;
}
	</style>
</head>
<body>
<div id="globl_wrap">
	<section id="middle">
		<div id="container">
			<div id="content">
				 Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus 				a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices 					nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. 	 
			</div>
		</div>
		<aside id="sideLeft">A</aside>
		<aside id="sideRight">&nbsp;</aside>
	</section>
</div>
</body>
</html>

BaNru · 24.09.2011

motek, ты почитал переписку, посмотрел макет?
1) Ни каких скриптов

Код:

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Ну ладно, черт с ним, это для осла
2) То что ты реализовал, можно было реализовать меньшим кодом
3) Что же тут не так?
- Нету обтекания буквы - это главное условие
- Не тянется вертикально правая "скобка" (хотя это уже моё условие, для меня выдуманное мною :unsure: )
Если уж на то пошло, то в твоем варианте ее проще было заменить ]
и сделать обычную трехколоночную верстку.

Приведу картинку от A-F для наглядности - что требовалось.

Да, кстати, про таблицу - лень было просто верстать блоки, ибо главной задачей было сделать обтекание текста.

lekzd · 25.09.2011

Умные дяди из Adobe уже заняты этим:

Тут можно глянуть
(бинарники для webkit)

ЗЫ: да я знаю, что это ничем кроме IE 10 (частично) не поддерживается

A-F · 26.09.2011

Оу как интересно

у меня еще есть задачки хотите?

lekzd · 26.09.2011

A-F , ждем, товарищ

A-F · 26.09.2011

Картинка http://zalil.ru/31761720

Сверстать текст как показано на картинке, каждая колонка должна масштабироваться пропорционально при изменении окна браузера, для IE6 необязательно

To A-F, RE: Есть офигенные верстальщики... *?

BaNru

Пацифизжу

motek

злой как @

BaNru

Пацифизжу

lekzd

parse error: parse error, unexpected T_STRING...

A-F

Well-Known Member

lekzd

parse error: parse error, unexpected T_STRING...

A-F

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей