Создание "подсказки"

art-Limon · December 21, 2010

Приветствую!

и прошу сразу не закидывать помидорами)))

Задача:

создать такую штучку - картинка с восклицательным знаком + текст в красной рамке с скругленными углами

Как это сделать?!

Мой способ, кажется.. ой-как сильно кажется, что нерационален..

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="60"> </td>
	<td><img src="http://garant-vrn.ru/img/podskazka/uvl.gif" width="15" height="15" border="0" /></td>
	<td width="100%"><img src="http://garant-vrn.ru/img/podskazka/vgp.gif" width="100%" height="15" border="0" /></td>
	<td><img src="http://garant-vrn.ru/img/podskazka/uvp.gif" width="15" height="15" border="0" /></td>
  </tr>
  <tr>
	<td width="60"><img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" width="30" height="30" border="0" /></td>
	<td><img src="http://garant-vrn.ru/img/podskazka/lvp.gif" width="15" height="100%" border="0" /></td>
	<td bgcolor="#FFFFFF">
	<p><b>Индивидуальный подход</b></p>
	<p>Ваш персональный информационный банк формируется из нужных именно Вам информационных блоков с максимальным учетом Ваших индивидуальных особенностей. Гибкий подход к формированию комплекта позволяет получать только нужное и не переплачивать за лишнее.</p></td>
	<td><img src="http://garant-vrn.ru/img/podskazka/pvp.gif" width="15" height="100%" border="0" /></td>
  </tr>
  <tr>
	<td width="60"> </td>
	<td><img src="http://garant-vrn.ru/img/podskazka/unl.gif" width="15" height="15" border="0" /></td>
	<td width="100%"><img src="http://garant-vrn.ru/img/podskazka/ngp.gif" width="100%" height="15" border="0" /></td>
	<td><img src="http://garant-vrn.ru/img/podskazka/unp.gif" width="15" height="15" border="0" /></td>
  </tr>
</table>

eVErl@Sting · December 21, 2010

Как то так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>test</title>
	<style type="text/css">
	body{background:white;}
	.box{border:1px solid black;margin:20px;min-width:580px;width:580px;display:table-cell;position:relative;z-index:1;}
	.box img{ display:block;text-align:center;float:left;vertical-align:middle}
	.roundbox{margin:40px 21px 40px 0px;width:480px;float:right;border:2px solid #CC0000;-moz-border-radius: 10px 10px 10px 10px;  -webkit-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;min-height:110px;}
	.roundbox div{padding:15px;text-align:justify;font-family:Arial;font-size:12px}

	</style>
</head>
<body>
<div class="box">
<div class="roundbox"><div><b>Индивидуальный подход</b><br /><br />Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></div>

</div>
</body>
</html>

notTrue · December 21, 2010

Вот тут нормально сделано ссылка

art-Limon · December 22, 2010

Как то так:
...

Спасибо за живой пример!!!

На самом деле я прочитала все эти способы, но применить корректно не получилось - сейчас Ваше решение сижу разбираю.

Подскажите, каким образом здесь картинку (<img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" width="30" height="30" border="0" align="middle" />) разместить?

notTrue · December 22, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=Windows-1251" />
	<title>test</title>
	<style type="text/css">
	body{background:white;}
	.box{border:1px solid black;margin:20px;min-width:580px;width:580px;display:table;vertical-align: middle; position:relative;z-index:1;}
	.roundbox{margin:40px 21px 40px 0px;width:480px;float:right;border:2px solid #CC0000;-moz-border-radius: 10px 10px 10px 10px;  -webkit-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;min-height:110px;}
	.roundbox div{padding:15px;text-align:justify;font-family:Arial;font-size:12px}
	.box .wapper_img {
	 	display:table-cell;
		vertical-align:middle;
		}

	.box img.wapper_img  {
		height:30px;
		width:30px;
	 	border:none;
		vertical-align: middle; 

	}
	</style>
</head>
<body>
<div class="box">
	<div class="wapper_img"><img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" /></div>
	<div class="roundbox">
	<div><b>Индивидуальный подход</b><br /><br />Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
	</div>
</div>
</body>
</html>

немного доработал предыдущий пример

notTrue · December 22, 2010

Прошу прощения за сумбурный код в посте выше.

Вот так лучше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=Windows-1251" />
	<title>test</title>
	<style type="text/css">
		body {
			background:white;
		}
		.box {
			border:1px solid black;
			margin:20px;
			min-width:580px;
			width:580px;
			display:table;
			vertical-align: middle;
		 	position:relative;
		 	z-index:1;
		 }
		.roundbox {
			margin:40px 0 40px 0px;
			width:480px;
			float:right;
			border:2px solid #CC0000;
			-moz-border-radius: 10px 10px 10px 10px;
			-webkit-border-radius: 10px 10px 10px 10px;
			-khtml-border-radius: 10px 10px 10px 10px;
			border-radius: 10px 10px 10px 10px;
			min-height:110px;
		}
		.roundbox div {
			padding:15px;
			text-align:justify;
			font-family:Arial;
			font-size:12px;
		}
		.wrapper_img {
			 padding-left:45px;
			 display:table-cell;
			 vertical-align:middle;
		}
		img {
			height:30px;
			width:30px;
			border:none;
		}
	</style>
</head>
<body>
<div class="box">
	<div class="wrapper_img"><img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" /></div>
	<div class="roundbox">
	<div><b>Индивидуальный подход</b><br /><br />Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
	</div>
</div>
</body>
</html>

Temiks · December 22, 2010

а можно как то сделать нормально для ИЕ, там они квадратные и картинка "улетела" вверх

notTrue · December 22, 2010

а можно как то сделать нормально для ИЕ, там они квадратные и картинка "улетела" вверх

У меня в 8-м эксплорере картинка на месте, для 6,7 expression нада использовать(в гугле куча инфы поэтому вопросу).

А углы можно картинками сделать, как в ИЕ 6,7 будет смотреться не знаю, но есть подозрение что, тоже колдовать придется.

Edited December 22, 2010 by notTrue

Temiks · December 22, 2010

У меня в 8-м эксплорере картинка на месте, для 6,7 expression нада использовать(в гугле куча инфы поэтому вопросу).
А углы можно картинками сделать, как в ИЕ 6,7 будет смотреться не знаю, но есть подозрение что, тоже колдовать придется.

Странно у меня тоже в 8 отображает вверху,

та знаю что картинками но правльно не очень получается

Вопрос считай-шо по теме

Можно ли сделать такое в ИЕ

скрин с ФФ http://imm.io/2G7T

notTrue · December 22, 2010

Странно у меня тоже в 8 отображает вверху,
та знаю что картинками но правльно не очень получается
Вопрос считай-шо по теме
Можно ли сделать такое в ИЕ
скрин с ФФ http://imm.io/2G7T

Если речь именно о скругленных углах то, я уже давал ссылку выше, там решение и в ИЕ работает.

art-Limon · December 23, 2010

Прошу прощения за сумбурный код в посте выше.
Вот так лучше:
...

Ага, картинка еще одним дивом. Спасибо!

С IE можно как-нибудь побороться (картинка на месте, а вот уголки да, квадратные..)?

Edited December 23, 2010 by art-Limon

eVErl@Sting · December 23, 2010

В предыдущем посту не было время картинку приделать, вот если так сделать то как на картинке во всех браузерах кроме ИЕ получается.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>test</title>
	<style type="text/css">
	body{background:white;}
	.box{border:1px solid black;margin:20px;min-width:580px;width:580px;display:table-cell;}
	.box img{ display:block;text-align:center;float:left;vertical-align:middle}
	.roundbox{margin:40px 21px 40px 0px;width:480px;float:right;border:2px solid #CC0000;-moz-border-radius: 10px 10px 10px 10px;  -webkit-border-radius: 10px 10px 10px 10px; -khtml-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;min-height:110px;position:relative;z-index:1;}
	.roundbox div{padding:15px;text-align:justify;font-family:Arial;font-size:12px;vertical-align:middle;}
	.icon{position:absolute;top:25px;left:-60px;z-index:2;}


	</style>
</head>
<body>
<div class="box">
<div class="roundbox"><div class="icon"><img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" /></div><div><b>Индивидуальный подход</b><br /><br />Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текскст текст текст тексткст текст текст тексткст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></div>

</div>
</body>
</html>

Для поддержки круглых углов в ИЕ можешь заюзать http://code.google.com/p/rocon/

Edited December 23, 2010 by eVErl@Sting

art-Limon · December 23, 2010

http://garant-vrn.ru/sistema-garant/... но ИЕ печалит.. Edited December 23, 2010 by art-Limon

eVErl@Sting · December 23, 2010

http://garant-vrn.ru/sistema-garant/... но ИЕ печалит..

http://www.laminat-shop.ru/price/podskazka.htm

Ну, если бы тот JS подключила и все сделала по инструкции, то получилось бы как у меня по ссылке) Пользуйся!

art-Limon · December 24, 2010

http://www.laminat-shop.ru/price/podskazka.htm
Ну, если бы тот JS подключила и все сделала по инструкции, то получилось бы как у меня по ссылке) Пользуйся!

Расскажи, пож-та, прям очень подробно - КАК? КАК у тебя это получилось!!! =)

и как пользоваться ссылкой вот этой (http://code.google.com/p/rocon/) - тут все нанерусском и JS я совсем не знаю - но! оч хочу разобраться!

Edited December 24, 2010 by art-Limon

eVErl@Sting · December 24, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--[if IE]> 
<script type="text/javascript" src="http://garant-vrn.ru/wp-includes/js/rounded-corners-min.js"></script> 
<![endif]-->

<div class="roundbox-podskazka rc10"><div class="icon"><img src="http://garant-vrn.ru/img/podskazka/voskl-znak.png" alt="внимание" /></div><div><b>Индивидуальный подход</b><br /><br />Ваш текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текскст текст текст тексткст текст текст тексткст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div></div>

Edited December 24, 2010 by eVErl@Sting

art-Limon · December 27, 2010

Задача решена. Отдельное спасибо eVErl@Sting!

Sign In

Создание "подсказки"

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information