Блок с фото-фоном в определенном месте [CSS] Библиотека javascript + CSS

работает в: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

HTML ↴

размер Kb

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

/* --------------------------------- */
/* STANDARD TAG  					*/
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}

/* --------------------------------- */
/*CONTAINER		  					*/
#container{ 
	margin:0 auto;
	margin-top:40px;
	width:260px;
}

/* --------------------------------- */
/*MESSAGE BOX CLEAN	serie	  		 */
	.clean-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-yellow{
		border:solid 1px #DEDEDE; 
		background:#FFFFCC;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.clean-ok{
		border:solid 1px #349534; 
		background:#C9FFCA;
		color:#008000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.clean-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}

/* --------------------------------- */
/*MESSAGE BOX Iconized	  		 */
	.icon-gray{
		border:solid 1px #DEDEDE; 
		background:#EFEFEF;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.icon-yellow{
		border:solid 1px #DEDEDE; 
		background:#FFFFCC url(img/icon-yellow.png) 8px 6px no-repeat;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.icon-ok{
		border:solid 1px #90ac13; 
		background:#eef4d3 url(img/icon-green.png) 8px 6px no-repeat;
		color:#6b800d;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.icon-error{
		border:solid 1px #CC0000; 
		background:#F7CBCA url(img/icon-red.png) 8px 6px no-repeat;
		color:#CC0000;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/*MESSAGE BOX SOLID	serie	  		 */

.solid-gray{
		background:#444444;
		color:#FFFFFF;
		padding:4px;
		text-align:center;
	}
	.solid-yellow{
		background:#FFFFCC;
		color:#222222;
		padding:4px;
		text-align:center;
	}
	.solid-ok{
		background:#008000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	.solid-error{
		background:#CC0000;
		color:#FFFFFF;
		font-weight:bold;
		padding:4px;
		text-align:center;
	}
	
/* --------------------------------- */
/* ROUNDED ALTERNATE	  		 	*/

/* ---------------------------------------------------------------------- */
	.round-a-gray{
		background:#444444 url(img/round_gray-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-gray div{
			background:url(img/round_gray-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-ok{
		background:#008000 url(img/round_green-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-ok div{
			background:url(img/round_green-right.png) right bottom no-repeat;
			padding:4px;
		}
	/* ---------------------------------------------------------------------- */
	.round-a-error{
		background:#CC0000 url(img/round_red-left.png) left top no-repeat;
		color:#FFFFFF;
		text-align:center;
	}
		.round-a-error div{
			background:url(img/round_red-right.png) right bottom no-repeat;
			padding:4px;
		}
		
/* --------------------------------- */
/* TOOLTIPS				  		 	*/

/* ---------------------------------------------------------------------- */
	.tooltips-gray{
		background:#444444;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-gray div{
			background:url(img/tips_gray.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-ok{
		background:#008000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-ok div{
			background:url(img/tips_green.png) left bottom no-repeat;
			padding-top:4px;
			height:18px;
		}
	/* ---------------------------------------------------------------------- */
	.tooltips-error{
		background:#CC0000;
		color:#FFFFFF;
		text-align:center;
		padding-top:4px;
	}
		.tooltips-error div{
			background:url(img/tips_red.png) left bottom no-repeat;
			margin-top:4px;
			height:18px;
		}
</style>
</head>

<h1>Простые</h1>
<div class="clean-gray">Простое окошко сообщения</div>				<br />
<div class="clean-yellow">Простое окошко сообщения</div>			<br />
<div class="clean-ok">Clean Ok! message box</div>			<br />
<div class="clean-error">Clean error message box</div>		<br /><br /><br />

<h1>С иконками</h1>
<div class="icon-yellow">Clean message box</div>			<br />
<div class="icon-ok">Clean Ok! message box</div>			<br />
<div class="icon-error">Clean error message box</div>		<br /><br /><br />

<h1>Сплошные</h1>
<div class="solid-gray">Solid message box</div>				<br />
<div class="solid-yellow">Solid message box</div>			<br />
<div class="solid-ok">Solid Ok message box</div>			<br />
<div class="solid-error">Solid error message box</div>		<br /><br /><br />

<h1>Закругленные</h1>
<div class="round-a-gray"><div>Solid message box</div></div>			<br />
<div class="round-a-gray"><div>
<strong>Solid message box tips</strong><br />
This box adapts automatically the rounded borders to the box size
</div></div>

<br />

<div class="round-a-ok"><div>Solid Ok message box</div></div>			<br />
<div class="round-a-ok"><div>
<strong>Solid Ok message box tips</strong><br />
This box adapts automatically the rounded borders to the box size
</div></div>

<br />

<div class="round-a-error"><div>Solid error message box</div></div>		<br />
<div class="round-a-error"><div>
<strong> Solid error message tips</strong><br />
This box adapts automatically the rounded borders to the box size
</div></div>

<h1>С указателем</h1>
<div class="tooltips-gray">Solid message box<div></div></div>			<br />
<div class="tooltips-ok">Solid message box<div></div></div>				<br />
<div class="tooltips-error">Solid message box<div></div></div>

</div>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

ПРИМЕР ↴