IMG и обтекание

Kenshi45 · March 3, 2009

Сделал, чтобы рисунок обтекал текстом, как на сайте написано, но в результате рисунок заезжает внутрь div, это можно исправить?

s0rr0w · March 3, 2009

Сделал, чтобы рисунок обтекал текстом, как на сайте написано, но в результате рисунок заезжает внутрь div, это можно исправить?

overflow: hidden или clear: right;

Kenshi45 · March 3, 2009

overflow: hidden или clear: right;

Не помогает, может я не там задаю?

img{

margin: 10px;

overflow: hidden;

clear: right;

}

Там изображение встроено в текст, а див (цитата) находится ниже текста, и изображение как бы врезается в него, хотя должно его просто отодвигать, другими словами - картинка не внутри а снаружи дива, поэтому overflow и clear в этом случае не помогут

Edited March 3, 2009 by Kenshi45

s0rr0w · March 3, 2009

Не помогает, может я не там задаю?
img{
margin: 10px;
overflow: hidden;
clear: right;
}
Там изображение встроено в текст, а див (цитата) находится ниже текста, и изображение как бы врезается в него, хотя должно его просто отодвигать, другими словами - картинка не внутри а снаружи дива, поэтому overflow и clear в этом случае не помогут

OMG...

Может для начала почитаете вот ЭТО

http://htmlbook.ru/css/clear.html

Что за лентяйство? Вам трудно изучить примеры и матчасть на этом сайте?

Nekromancer · March 3, 2009

ага, ппц...

и не строит применять параметры сразу к тегу.. может стоит просто у самой картинки прописать стиль... или айди поставить.

Edited March 3, 2009 by Nekromancer

Kenshi45 · March 3, 2009

OMG...
Может для начала почитаете вот ЭТО
http://htmlbook.ru/css/clear.html
Что за лентяйство? Вам трудно изучить примеры и матчасть на этом сайте?

Я бы не стал спрашивать, не прочитав что это означает.. Только как я могу запретить обтекать рисунок снизу?

там есть всего два варианта - лево и право. В моем случае получается вот как:

текст текст текст текст 
текст текст текст текст
текст текст текст <img/>
<div>цитата...</div>

В итоге если рисунок находится слишком близко к диву, он в него влезает.

ага, ппц...
и не строит применять параметры сразу к тегу.. может стоит просто у самой картинки прописать стиль... или айди поставить.

Ну это же просто пример...)

s0rr0w · March 3, 2009

Я бы не стал спрашивать, не прочитав что это означает.. Только как я могу запретить обтекать рисунок снизу?
там есть всего два варианта - лево и право. В моем случае получается вот как:
текст текст текст текст 
текст текст текст текст
текст текст текст <img/>
<div>цитата...</div>
В итоге если рисунок находится слишком близко к диву, он в него влезает.
Ну это же просто пример...)

Изучите матчать по той ссылке, что я вам дал. Внимательно изучите пример. Там есть ответ на ваш вопрос.

Kenshi45 · March 3, 2009

Изучите матчать по той ссылке, что я вам дал. Внимательно изучите пример. Там есть ответ на ваш вопрос.

Ну я уже раз 5 перепроверил, ну не вижу связи я между запретом на обтекание и тем, что рисунок заходит за див...(

Nekromancer · March 3, 2009

мож вам не дано?

s0rr0w · March 3, 2009

Ну я уже раз 5 перепроверил, ну не вижу связи я между запретом на обтекание и тем, что рисунок заходит за див...(

Рисунок обязан заходить на div, на то и сделано обтекание.

Но, можно избавиться от этого двумя способами. Первый - clear, второй - overflow.

Имеют разный эффект и преназначение.

И вам не перепроверять стоило, а изучать матчасть.

http://htmlbook.ru/css/clear.html

Там даже скриншот есть того, как работает clear.

Kenshi45 · March 3, 2009

Рисунок обязан заходить на div, на то и сделано обтекание.
Но, можно избавиться от этого двумя способами. Первый - clear, второй - overflow.
Имеют разный эффект и преназначение.
И вам не перепроверять стоило, а изучать матчасть.
http://htmlbook.ru/css/clear.html
Там даже скриншот есть того, как работает clear.

Если я сделаю clear, он перестанет обтекать текстом тоже, а нужно, чтобы он текстом обтекал, но в дивы не врезался

Kenshi45 · March 3, 2009

Вот пример, все сделал как вы сказали. Всеравно не помогает...

http://aionzone.ru/themes/aionzone/test.htm

Исходник:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body{
	margin: 0;
	padding: 12px;
}
img{
	overflow: hidden;
	float: right;
}
div{ 
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 10px;
	color: #333;
}
</style>
</head>
<body>

В этом обновлении вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. 
В результате, при генерации некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. 
Пожалуйста, попробуйте позже». В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье 
будет лучше, чем низкий уровень качества функционирования подземелий для всех находящихся там игроков. В этом обновлении 
вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. В результате, при генерации 
некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. Пожалуйста, попробуйте позже». 
В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье будет лучше, чем низкий уровень 
качества функционирования подземелий для всех находящихся там игроков. В этом обновлении вводится проверка нагрузки, 
что позволяет ограничивать открытие дополнительных подземелий. В результате, при генерации некоторых новых подземелий будет 
появляться сообщение: «Невозможно открыть новые подземелья. Пожалуйста, попробуйте позже». В конце концов, мы решили, 
<img src="http://warcraftnews.ru/sites/default/files/images/2wcfs55.thumbnail.jpg" alt="" title="" width="200" height="160" />
что непродолжительное время ожидания возможности входа в подземелье будет лучше, чем низкий уровень качества функционирования 
подземелий для всех находящихся там игроков.

<div>
	В этом обновлении вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. 
	В результате, при генерации некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. 
	Пожалуйста, попробуйте позже». В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье 
	будет лучше, чем низкий уровень качества функционирования подземелий для всех находящихся там игроков. В этом обновлении 
	вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий.
</div>

</body>
</html>

Faust · March 3, 2009

Вот пример, все сделал как вы сказали. Всеравно не помогает...

http://aionzone.ru/themes/aionzone/test.htm

Исходник:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body{
	margin: 0;
	padding: 12px;
}
img{
	overflow: hidden;
	float: right;
}
div{ 
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 10px;
	color: #333;
}
</style>
</head>
<body>

В этом обновлении вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. 
В результате, при генерации некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. 
Пожалуйста, попробуйте позже». В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье 
будет лучше, чем низкий уровень качества функционирования подземелий для всех находящихся там игроков. В этом обновлении 
вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. В результате, при генерации 
некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. Пожалуйста, попробуйте позже». 
В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье будет лучше, чем низкий уровень 
качества функционирования подземелий для всех находящихся там игроков. В этом обновлении вводится проверка нагрузки, 
что позволяет ограничивать открытие дополнительных подземелий. В результате, при генерации некоторых новых подземелий будет 
появляться сообщение: «Невозможно открыть новые подземелья. Пожалуйста, попробуйте позже». В конце концов, мы решили, 
<img src="http://warcraftnews.ru/sites/default/files/images/2wcfs55.thumbnail.jpg" alt="" title="" width="200" height="160" />
что непродолжительное время ожидания возможности входа в подземелье будет лучше, чем низкий уровень качества функционирования 
подземелий для всех находящихся там игроков.

<div>
	В этом обновлении вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий. 
	В результате, при генерации некоторых новых подземелий будет появляться сообщение: «Невозможно открыть новые подземелья. 
	Пожалуйста, попробуйте позже». В конце концов, мы решили, что непродолжительное время ожидания возможности входа в подземелье 
	будет лучше, чем низкий уровень качества функционирования подземелий для всех находящихся там игроков. В этом обновлении 
	вводится проверка нагрузки, что позволяет ограничивать открытие дополнительных подземелий.
</div>

</body>
</html>

а зачем вы

overflow: hidden;

применили к img

его же к div в вашем случаи нужно !!!!

Kenshi45 · March 3, 2009

а зачем вы
overflow: hidden;
применили к img
его же к div в вашем случаи нужно !!!!

Вот теперь я совсем запутался, почему к div?

Faust · March 3, 2009

ну вам же нужно чтобы рисунок не наползал на див

вот overflow: hidden; в стиле дива и отсекает то что под рисунок попадает

хотя проверил в IE6 все равно наползает

(это же IE тут шаманский бубен нужен)

Edited March 3, 2009 by Faust

s0rr0w · March 3, 2009

ну вам же нужно чтобы рисунок не наползал на див
вот overflow: hidden; в стиле дива и отсекает то что под рисунок попадает
хотя проверил в IE6 все равно наползает
(это же IE тут шаманский бубен нужен)

Еще один знаток...

Kenshi45, вы внимательно изучили ссылку?

Ответьте на несколько вопросов

1. Какому блоку присвоен float?

2. Какому блоку присвоен clear?

3. Почему вы не можете повторить то же самое для своего кода?

Kenshi45 · March 3, 2009

Еще один знаток...

Kenshi45, вы внимательно изучили ссылку?
Ответьте на несколько вопросов
1. Какому блоку присвоен float?
2. Какому блоку присвоен clear?
3. Почему вы не можете повторить то же самое для своего кода?

Ну по идее флоат справа для рисунка а клер слева для дива, но всеравно косяки идут.

Edited March 3, 2009 by Kenshi45

s0rr0w · March 3, 2009

Ну по идее флоат справа для рисунка а клер слева для дива, но всеравно косяки идут.

Я вас не спрашивал, какое значение вы будете присваивать атрибутам, я спрашивал, каким блокам сами свойства присваивать будете.

Если вы сделаете правильно все, то косяков быть не должно.

Sign In

IMG и обтекание

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information