هل يمكن ظهور مربع نص على صوره في صفحه مرتبطه بملف Css

السلام عليكــم ورحمـة الله وبركاتــة

اخواني الاعزاء لدي صورة هذه الصورة عبارة عن اربعة خطوط افقيه ووضعت هذه الصورة على صفحة ASPX وارغب بوضع مربعات نص على كل خط افقي بمعنى انه سيكون هناك اربعة مربعات نصيه كل منها سيكون فوق الخط الموجود بالصوره هذه الصفحه مرتبطه بملف CSS محتوياته كالتالي :

* {
	padding: 0;
	margin: 0;
} 

body {
	background: #fff;
	font: .74em "Trebuchet MS" Verdana, Arial, sans-serif;
	line-height: 1.5em; 
}
a {
	color: #3B6EBF;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


#wrap {
margin: 20px auto;
width: 724px;
background: #fff url('images/midbg.jpg');
background-repeat: repeat-y;
}

#top { 
background: #fff url('images/topbg.jpg');
height: 30px;
}

#content {
padding: 0 40px 0 40px;
}

#bottom {

background: #fff url('images/botbg.jpg');
height: 30px;
}


.header {
height: 100px;
background: #85ACF7 url('images/hidr.jpg');
}

.header h1 { padding-left: 17px; padding-top: 22px; font-size: 22px; color: #FFF; }
.header h1 a { font-size: 22px; color: #FFF; text-decoration: none;}
.header h2 { padding-left: 17px; padding-top: 0px; font-size: 17px; color: #FFF; }

.breadcrumbs { 
	background: #F6F9FB; 
	border-bottom: 1px solid #E1E1E1; 
	padding: 5px;
}

.middle {
	float: left;
	width: 59%;
	margin: 0 10px;
	padding: 1% 1%;
	text-align: justify;
}

.txtbx {
	float: right;	
	margin: 0 5px;
	text-align: justify;
	top : 50%;	
	left: 20%;
	padding-top: 10px	 	 
}
.Lefting {
	float:  right;
	width: 51%;
	margin: 1 12px;
	padding: 1% 1%;
	text-align: justify;
}
.right {
	float: left;
	width: 31%;
	margin: 2 10px;
	padding: 1% 1%;

}

.right ul {
	padding: 20px 15px 20px;
	margin:0;
}

.right li {
	margin-bottom:5px;
	list-style-type: square;
	color: #3B6EBF;
}

.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}

#footer {
	text-align: center;
	color: #666;
}

ومحتويات صفحة ASPX كالتالي :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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 id="Head1" runat="server">
	<title>Forms Editing</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
	<form id="form1" runat="server">
		 <div id="wrap">

<div id="top">

</div>


<div id="content" dir="rtl">

<div class="header" dir="rtl">
<img src="images/FromsIMG/logo.jpg" alt="" /><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="149" height="72"><param name="movie" value="promo2.swf"/><param name="loop" value="true"/><param name="quality" value="high"/><param name="bgcolor" value="#85ACF7"/></object></div>


<div class="breadcrumbs">
<a href="Default2.aspx">Home</a> | <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="Gray"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server" CssClass="txtbx" Width="51px" Height="5px"></asp:TextBox>

</div>
	<img src="images/FromsIMG/Form26.jpg" alt =""/>  
	<div id="clear"></div>
</div>

<div id="bottom"></div>

</div>


<div id="footer">
Design by : <a href="http://www.edueast.gov.sa/"> My </a>
</div>

	</form>

</body>
</html>

الصورة التي احاول وضع مربعات النص عليها والموجوده في صحفة ASPX هي: img src="images/FromsIMG/Form26.jpg

وحاولت وضع مربع نص فوق الصورة بانشاء txtbx في ملف CSS كالتالي :

.txtbx {
	float: right;	
	margin: 0 5px;
	text-align: justify;
	top : 50%;	
				left: 20%;
	padding-top: 10px	 	
 }

ولكن دون جدوى فهل من منقـذ أو منقـذه أو منقذون او متخصص انقاذ .