Помогнете ми с една леко заоблена кутийка.

  • Автор Автор nofx
  • Начална дата Начална дата
N

nofx

Registered
Искам да направя такава кутийка с css, която да се оразмерява спрямо броя asdasd-овете, съдържащи се в нея.
За целта съм приготвил три файла, които можете да видите тук.
Благодаря Ви предварително за помощта. (:

edit: не знам защо, но bbкода, който написах не иска да работи в темата ми. Надявам се, въпреки това, да разберете за какво става въпрос (:
 
ами има много вариянти.Ако имаме едина и съща широчина, можеш по няколко начина да направиш кутийката.
Правиш 3 дива.Наи горния задаваш за фон да са горните два заоблени ъгъла.На средния, просто фонче, където е и текста, а на долни див задаваш долните 2 заоблени угъла.

Код: 
<div class="top"></div>
<div class="center">info text </div>
<div class="down"></div>
 
Благодаря ти, точно това ще направя сега. :)
А някакъв хоризонтален начин да ми предложиш? Защото се опитвам да иг подредя хоризонтално, но без особено голям услех.
 
Опа, съвсем се бях объркал в предишното ми мнение. Работата е там, че искам кутийката да се осъразмерява според съдържанието. Т.е. да не е fixed width.
 
Точно както ти го е дал shterev се прави.
Един див за горните заоблени краища, един за долните и този средния му задаваш height: auto и background-a да се повтаря вертикално и си готов :)
 
Боя се, че не съм никак наясно с метода, който каза човекът преди мен (adrian). Би ли пояснил? Извинявам се за причиненото затруднение. :-)
 
Код: 
<!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=windows-1251" />
	<title>title</title>
	<style type="text/css">
		.box			{	width:50%; margin: 0 auto;}
		
		.left_top		{	padding:0 0 0 6px;	
							background: url(left_top.gif) no-repeat left top;}
						
		.right_top		{	height:41px;
							background: url(right_top.gif) no-repeat right top;}
						
		.left_center	{	padding:0px 0 0 6px;
							background: url(left_center.gif) repeat-y left top;}
							
		.right_center	{	background: url(right_center.gif) repeat-y right top;}
							
		.left_bottom	{	padding:0 0 0 6px;
							background: url(left_bottom.gif) no-repeat left top;}
							
		.right_bottom	{	height:6px;
							background: url(right_bottom.gif) no-repeat right top;}
	</style>
</head>
<body>
	
	<div class="box">
		
		<div class="left_top">
			<div class="right_top">Title of something</div>
		</div>
	
		<div class="left_center">
			<div class="right_center">
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
			</div>
		</div>
	
		<div class="left_bottom">
			<div class="right_bottom"></div>
		</div>
	</div>
	
</body>
</html>





left_bottom.gif



left_center.gif


left_top.gif


right_bottom.gif

right_center.gif

right_top.gif







http://web-tourist.net/project/shterev/left_bottom.gif
http://web-tourist.net/project/shterev/left_center.gif
http://web-tourist.net/project/shterev/left_top.gif
http://web-tourist.net/project/shterev/right_bottom.gif
http://web-tourist.net/project/shterev/right_center.gif
http://web-tourist.net/project/shterev/right_top.gif



Ето ти нещо което съм правил аз. Оразмерява се както по хоризонатала , така и по вертикала.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе