CSS/Проблем с позициониране

Чета. Може да стане с прозрачни изображения за ъглите и абсолютно позициониране на падащата част под бутона.
 
[css]
<style>
.menu {width:460px;height:40px;background:url(img/menu.png) no-repeat; position:absolute;z-index: 999;}
.inactive a:link {display:block;float:left;margin:7px 0 0 10px;text-decoration:none;width:25px;height:25px;background:url(img/inactive.png) no-repeat;}
.active a:link {display:block;float:left;margin:7px 0 0 10px;text-decoration:none;width:25px;height:25px;background:url(img/active.png) no-repeat;}
#text {font-family:airal;color:#fff;font-size:14px;float:left;margin:11px;}
.info {width:460px;height:194px;background:url(img/1.png) no-repeat;float:left;margin-top: 26px; font-family:arial;font-size:12px;color:#fff;padding:20px 5px 20px 5px; z-index: 1;}
</style>
[/css]

Просто го постави върху твоя код.

Надявам се да съм помогнал. Успех!
 
Владко не вижам смисъл да се слагат тези з-индекс
[css].menu {width:460px;height:40px;background:url(img/menu.png) no-repeat; position: relative; top: 10px;}[/css]
 
Това ми хрумна първо като идея, ама после се сетих за позиционирането, аз пише по-подредено и не съм ги махал :D... Важното е че работи, въпреки че аз обичам всичко да си е подредено...
 
Само да зададеш абсолютна позиция на menu може да причини размествания под различните браузъри. А позиционирането релативно с отрицателни стойности оставя празно разстояние отдолу равно на изваденото. Т.е. под менюто ще има 10px празно разстояние винаги.

Целия код трябва да се огради от един релативно позициониран родител, като вътре в него да се позиционират абсолютно елементите на бутона и падащото меню.

HTML:
<!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>WD by NAZI_93 </title>
	<style type="text/css">
		div.rel-parent {
			width: 460px; height: 40px;
			position: relative;
		}
		.menu {
			background:url(img/menu.png) no-repeat;
			width:460px; height:40px;
		}
		.inactive a:link {
			background:url('img/inactive.png') no-repeat;
			width:25px; height:25px;
			text-decoration:none;
			margin:7px 0 0 10px;
			display:block;
			float:left;
		}
		.active a:link {
			background:url('img/active.png') no-repeat;
			width:25px; height:25px;
			text-decoration:none;
			margin:7px 0 0 10px;
			display:block;
			float:left;
		}
		#text {
			font-family: 'Arial', serif;
			font-size:14px;
			color:#ffffff;
			margin:11px;
			float:left;
		}
		.info {
			width:460px; height:194px;
			background:url('img/1.png') no-repeat;
			padding:20px 5px 20px 5px;
			position: absolute;
			left: 0; top: 30px;
			margin: 0px 0 0 0;
			font-family:arial;
			font-size:12px;
			color:#ffffff;
			z-index: -1;
			float:left;
		}
	</style>

</head>
<body>
	<div class="rel-parent">
		<div class="menu">
			<div class="inactive"><a href="#"></a></div>
			<div id="text">Кликнете тук, за да видите нашата работа по проекта</div>
		</div>
		<div class="info">
			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
			Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
			when an unknown printer took a galley of type and scrambled it to make a type
			specimen book. It has survived not only five centuries, but also the leap into 
			electronic typesetting, remaining essentially unchanged. It was popularised in
			the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
			and more recently with desktop publishing software like Aldus PageMaker including
			versions of Lorem Ipsum.
		</div>
	</div>
</body>
</html>

P.S. - ако целта е div.info да измества съдържанието под себе си, а не да застава над него можеш да помислиш върху това да сложиш фона му на родителския елемент и да премахнеш позиционирането. Така полето ще застане зад бутоните.
 
@Vladkata вече е перфектно,благодаря много и на другите,които взеха участие по проблема.
 

Back
Горе