Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.04.2010, 22:08   #1
klyne
 
Регистрация: 23.04.2010
Сообщений: 3
Сообщение CSS позиционирование блоков

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

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

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

Возможно ли такое сделать?
klyne вне форума Ответить с цитированием
Старый 27.04.2010, 11:09   #2
klyne
 
Регистрация: 23.04.2010
Сообщений: 3
Сообщение Пример того, что хочется получить

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

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

Структура кода:
Код HTML:
<div id="cont">
<p>Основной текст, который обтекает то, что ниже.</p>
<div id="inct">текст врезки, который обтекается тем, что выше</div>
</div>
Есть какие идеи?
klyne вне форума Ответить с цитированием
Старый 27.04.2010, 17:39   #3
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию

задайте картинке float:right - и текст автоматически начнет обтекать изображение слева
Magneto вне форума Ответить с цитированием
Старый 27.04.2010, 19:50   #4
vadim66
 
Регистрация: 27.04.2010
Сообщений: 3
По умолчанию

и поменять местами картинку с текстом...
Код:
<html>
<head>
<style>
#inct {
	float: right;
}

</style>
</head>
<body>
<div id="cont">
<div id="inct">текст врезки, который обтекается тем, что выше</div>
<p>Основной текст, который обтекает то, что ниже.</p>
</div>
</body>
</html>
или последовательность принципиальна?
vadim66 вне форума Ответить с цитированием
Старый 28.04.2010, 10:27   #5
klyne
 
Регистрация: 23.04.2010
Сообщений: 3
Сообщение

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

vadim66
===
Цитата:
Сообщение от vadim66 Посмотреть сообщение
и поменять местами картинку с текстом...

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

Последний раз редактировалось klyne; 28.04.2010 в 10:50.
klyne вне форума Ответить с цитированием
Старый 28.04.2010, 12:52   #6
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию

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

вместо картинки используйте див - задайте ему ширину и высоту в пикселях и флоат:райт - а также его нужно обьявлять перед обьявлением текста
Magneto вне форума Ответить с цитированием
Старый 30.04.2010, 12:45   #8
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Позиционирование 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