ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / "правильное" обтекание картинки текстом
16 сообщений из 16, страница 1 из 1
"правильное" обтекание картинки текстом
    #37836679
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
Текст обтекает картинку таким образом:
Код: css
1.
2.
3.
4.
.leftimg{
     float:left; 
     margin-right:8px; 
}


В большинстве случаев все нормально, но бывает необходимо для некоторых абзацев установить цветной фон или бордер. В таком случае фон(левая часть рамки) "уезжает" влево под картинку. Выглядит, при этом, некрасиво все.
Как сделать чтобы фон (бордер) начинался там где текст?
...
Рейтинг: 0 / 0
13.06.2012, 17:03:33
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836723
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
oaken,

а может padding вместо margin?
...
Рейтинг: 0 / 0
13.06.2012, 17:27:44
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836728
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
SharuPoNemnoguoaken,

а может padding вместо margin?Да отступы тут как-то совсем ни при чем. Дело в том что бекграунд текста, которы находится справа от такой картинки заезжает по левую границу картики те растягивается на весь родительский блок.
...
Рейтинг: 0 / 0
13.06.2012, 17:32:50
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836734
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
oaken,

а может кусок кода скинуть?
...
Рейтинг: 0 / 0
13.06.2012, 17:35:26
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836758
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
SharuPoNemnoguoaken,

а может кусок кода скинуть?
Код: 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>111</title>
<style type="text/css">
   .leftimg{
     float:left; 
     margin-right:8px; 
   }
   .header_0{
	   border:thin dashed #FF00FF;
   }
   .header_1{
	   background-color:#CCCC99;
   }
  </style>

</head>
<body>
<p>
  <img src="http://k.img.com.ua/img/forall/a/13598/28.jpg" alt="Az" class="leftimg" />
  <p class="header_0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. Sed auctor sodales odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod.</p>
  <p class ="header_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. Sed auctor sodales odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. Sed auctor sodales odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod. Fusce quis risus felis. Donec viverra, nisl vel mollis luctus, mauris tellus tempus quam, ac vehicula mauris erat id tellus. Pellentesque imperdiet metus ut lorem elementum nec facilisis dui facilisis. Phasellus pellentesque lacinia rhoncus.
 
Donec volutpat eleifend sem id ultricies. Praesent commodo lacus augue. Mauris accumsan ullamcorper purus ut commodo. Cras accumsan arcu eget eros consectetur vulputate. Vestibulum luctus aliquam nibh eget sodales. Praesent eu faucibus odio. Cras et purus nulla. Nam sagittis ultrices nulla id tincidunt. Mauris risus lectus, fermentum quis ullamcorper nec, molestie a turpis. Vivamus lobortis sem vitae metus eleifend venenatis. Mauris metus nibh, vulputate ac convallis nec, consectetur tincidunt felis. Proin sed dui elit.
</p>
</p>
</body>
</html>

первые два абзаца
...
Рейтинг: 0 / 0
13.06.2012, 17:49:13
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836831
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
"Кривой" бордер просто так не сделать...
А вот с фоном можно предложить некое перекрытие фоном картинки. Т.е. картинку ту засунуть в див и вот его фон будет кагбэ перекрвать прямоугольный фон текста...
...
Рейтинг: 0 / 0
13.06.2012, 19:03:52
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37836833
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
oakenпервые два абзаца
Это что еще за "новшество"? Я про абзац в абзаце...
...
Рейтинг: 0 / 0
13.06.2012, 19:05:43
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837286
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
krvsa"Кривой" бордер просто так не сделать... а как сделать "не просто"? хоть направление дайте
krvsaА вот с фоном можно предложить некое перекрытие фоном картинки. Т.е. картинку ту засунуть в див и вот его фон будет кагбэ перекрвать прямоугольный фон текста...засунул картинку в див - результат тот же (
...
Рейтинг: 0 / 0
14.06.2012, 08:50:38
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837288
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
krvsaoakenпервые два абзаца
Это что еще за "новшество"? Я про абзац в абзаце... завтыкал, видимо, при создании образца кода :)
...
Рейтинг: 0 / 0
14.06.2012, 08:51:27
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837293
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
oakenа как сделать "не просто"? хоть направление дайте
Все так или иначе сведется к некоему набору прямоугольников, бордеры которых создадут видимость "кривой" рамки...
1000р на телефон (Мегафон) и я предоставлю тебе прототип всего этого...
Просто задарма корячиться с этим нет желания.
oakenзасунул картинку в див - результат тот же (
Покажи мне (с) Морфеус
...
Рейтинг: 0 / 0
14.06.2012, 08:56:59
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837305
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
oakenзасунул картинку в див - результат тот же (
Вот мой вариант...

Код: 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.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.leftimg{
}
.header_0{
	border:thin dashed #FF00FF;
}
.header_1{
	background-color:#CCCC99;
}
.img_box {
	float:left; 
	padding-right:8px; 
	background-color:#ffffff;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
	<div class='img_box'>
		<img src="http://k.img.com.ua/img/forall/a/13598/28.jpg" alt="Az" class="leftimg" />
	</div>
	<p class="header_0">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. 
		Sed auctor sodales odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod.
	</p>
	<p class ="header_1">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. 
		Sed auctor sodales odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae felis eros. Sed auctor sodales 
		odio quis hendrerit. Suspendisse non nulla ut sem sodales euismod. Fusce quis risus felis. Donec viverra, 
		nisl vel mollis luctus, mauris tellus tempus quam, ac vehicula mauris erat id tellus. Pellentesque imperdiet 
		metus ut lorem elementum nec facilisis dui facilisis. Phasellus pellentesque lacinia rhoncus.
	</p>
	<p>
		Donec volutpat eleifend sem id ultricies. Praesent commodo lacus augue. Mauris accumsan ullamcorper 
		purus ut commodo. Cras accumsan arcu eget eros consectetur vulputate. Vestibulum luctus aliquam nibh 
		eget sodales. Praesent eu faucibus odio. Cras et purus nulla. Nam sagittis ultrices nulla id tincidunt. 
		Mauris risus lectus, fermentum quis ullamcorper nec, molestie a turpis. Vivamus lobortis sem vitae 
		metus eleifend venenatis. Mauris metus nibh, vulputate ac convallis nec, consectetur tincidunt felis. 
		Proin sed dui elit.
	</p>
</div>
</body>
</html>


Смотрел только в ИЕ8...
...
Рейтинг: 0 / 0
14.06.2012, 09:06:13
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837306
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<style type="text/css">
   .leftimg{
     float:left; 
     margin-right:8px;
   }
   .header_0{
	   border:thin dashed #FF00FF;
       margin-left: 308px;
               
   }
   .header_1{
	   background-color:#CCCC99;
       margin-left: 308px;
   }



если вот так, то нормально отображается.
...
Рейтинг: 0 / 0
14.06.2012, 09:06:17
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837310
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
krvsa,

в твоем варианте рамка и БГ все равно идет до самого края под картинкой.
...
Рейтинг: 0 / 0
14.06.2012, 09:08:29
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837321
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SharuPoNemnoguв твоем варианте рамка и БГ все равно идет до самого края под картинкой.
Это так. Но этого никто не видит...
...
Рейтинг: 0 / 0
14.06.2012, 09:15:53
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837326
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SharuPoNemnogu
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<style type="text/css">
   .leftimg{
     float:left; 
     margin-right:8px;
   }
   .header_0{
	   border:thin dashed #FF00FF;
       margin-left: 308px;
               
   }
   .header_1{
	   background-color:#CCCC99;
       margin-left: 308px;
   }



если вот так, то нормально отображается.
Это мягко говоря не обтекание...
Просто 2 колонки... В левой картинка... А во второй текст.
...
Рейтинг: 0 / 0
14.06.2012, 09:18:02
| Ответить | Цитировать | Написать  
"правильное" обтекание картинки текстом
    #37837330
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
krvsaSharuPoNemnogu
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<style type="text/css">
   .leftimg{
     float:left; 
     margin-right:8px;
   }
   .header_0{
	   border:thin dashed #FF00FF;
       margin-left: 308px;
               
   }
   .header_1{
	   background-color:#CCCC99;
       margin-left: 308px;
   }



если вот так, то нормально отображается.
Это мягко говоря не обтекание...
Просто 2 колонки... В левой картинка... А во второй текст.
Марджины - это уже буду использовать если ничего другого не накопаю, ведь нужно обеспечить нукую универсальность стилей, для картинок любых размеров...
...
Рейтинг: 0 / 0
14.06.2012, 09:22:39
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / "правильное" обтекание картинки текстом
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37836734&tid=1449700]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 221ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 84ms
get tp. blocked users:
 2ms
others: 211ms
total:  564ms
созд. / загр.: 564ms
x
x
Закрыть


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