CSS позиционирование блоков - HTML и CSS

klyne · 23.04.2010, 22:08

Здраствуйте.

Имеется страница с div-ной вёрсткой, блок с контентом <div id="cont">контент</div>
Как на странице сделать врезку (обтекаемый текстом блок на странице) таким образом, чтобы html-код врезки был ниже кода контента?
Врезка должна располагаться в правом верхнем углу контента, и обтекаться соответственно текстом слева и снизу, а правым и верхним краями должна примыкать к краю страницы, т.е., как приведён пример, блока <div id="cont">

Пример внешнего вида на википедии.
Однако, здесь html-код правой врезки с фотографией расположен по коду выше, чем обтекаемый текст.

Возможно ли такое сделать?

klyne · 27.04.2010, 11:09

Пример того, что надо, тут:

Текст "Здесь какая-то картинка" читать как врезка.

Структура кода:

Код HTML:

<div id="cont">
<p>Основной текст, который обтекает то, что ниже.</p>
<div id="inct">текст врезки, который обтекается тем, что выше</div>
</div>

Есть какие идеи?

Magneto · 27.04.2010, 17:39

задайте картинке float:right - и текст автоматически начнет обтекать изображение слева

vadim66 · 27.04.2010, 19:50

и поменять местами картинку с текстом...

Код:

<html>
<head>
<style>
#inct {
	float: right;
}

</style>
</head>
<body>
<div id="cont">
<div id="inct">текст врезки, который обтекается тем, что выше</div>
<p>Основной текст, который обтекает то, что ниже.</p>
</div>
</body>
</html>

или последовательность принципиальна?

klyne · 28.04.2010, 10:27

Magneto
===
Не то, ваш код будет работать, если после кода размещения картинки img src достаточно текста для обтекания. Вы разместите картинку _после_ текста, который должен обтекать и посмотрите.
Мне необходима канеш не картинка, а блок, например div, но не суть важно.

vadim66
===

Цитата:

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

и поменять местами картинку с текстом...

или последовательность принципиальна?

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

MrJenika · 28.04.2010, 12:52

в одном из примеров блочной вёрстки указывали на создание дополнительного блока, только уж не помню что да как(

Magneto · 29.04.2010, 13:58

вместо картинки используйте див - задайте ему ширину и высоту в пикселях и флоат:райт - а также его нужно обьявлять перед обьявлением текста

MrJenika · 30.04.2010, 12:45

используйте отрицательные поля (negative margins). Отрицательные поля позволяют сместить область контента за границы окна браузера, освободив место для боковой колонки.

23.04.2010, 22:08	#1
klyne Регистрация: 23.04.2010 Сообщений: 3	CSS позиционирование блоков Здраствуйте. Имеется страница с div-ной вёрсткой, блок с контентом <div id="cont">контент</div> Как на странице сделать врезку (обтекаемый текстом блок на странице) таким образом, чтобы html-код врезки был ниже кода контента? Врезка должна располагаться в правом верхнем углу контента, и обтекаться соответственно текстом слева и снизу, а правым и верхним краями должна примыкать к краю страницы, т.е., как приведён пример, блока <div id="cont"> Пример внешнего вида на википедии. Однако, здесь html-код правой врезки с фотографией расположен по коду выше, чем обтекаемый текст. Возможно ли такое сделать?

27.04.2010, 11:09	#2
klyne Регистрация: 23.04.2010 Сообщений: 3	Пример того, что хочется получить Пример того, что надо, тут: Текст "Здесь какая-то картинка" читать как врезка. Структура кода: Код HTML: <div id="cont"> <p>Основной текст, который обтекает то, что ниже.</p> <div id="inct">текст врезки, который обтекается тем, что выше</div> </div> Есть какие идеи?

28.04.2010, 12:52	#6
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	в одном из примеров блочной вёрстки указывали на создание дополнительного блока, только уж не помню что да как( webinmd.com

30.04.2010, 12:45	#8
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	используйте отрицательные поля (negative margins). Отрицательные поля позволяют сместить область контента за границы окна браузера, освободив место для боковой колонки. webinmd.com

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

27.04.2010, 17:39	#3
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	задайте картинке float:right - и текст автоматически начнет обтекать изображение слева

29.04.2010, 13:58	#7
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	вместо картинки используйте див - задайте ему ширину и высоту в пикселях и флоат:райт - а также его нужно обьявлять перед обьявлением текста

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Позиционирование	Syltan	HTML и CSS	0	25.03.2010 19:15
Позиционирование	serg_sk	HTML и CSS	0	18.03.2010 20:42
Фиксированное позиционирование блоков.	Андрей79	HTML и CSS	0	17.08.2009 11:50
Помогите с позиционированием блоков CSS	Андрей79	HTML и CSS	1	10.04.2009 10:05