# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) >  قرار دادن متن بر روی عکس به کمک CSS

## fazel-d

من می خوام که متنی را روی یک قسمت از عکس مثلا بالا سمت راست قرار دهم به شرطی که متن بر روی عکس فیکس شده و با تغییر اندازه مرورگر متن در سر جای خود و بر روی عکس قرار گرفته و تغییر مکان ندهدو
من این کارو با Position و Left و Top انجام دادم ولی وقتی مرورگر را تغییر اندازه دادم مکان نوشته ها از روی عکس جابجا شدند

با چه خواصی می توانم کار کنم

----------


## Galestian

سلام  
پیشنهاد میدم عکس را رد یک لایه و نوشته را در در یک لایه دیگر ولی درون لایه عکس قرار داهید 
و z-index  آن را بالاتر از z-index لایه عکس قرار داده و Position  را هم relative تنظیم نمایید 

موفق باشید

----------


## fazel-d

یه نکته مهم که برای من هم جالب بود :

زمانی که بخواهیم یک عنصری را به صورت Relative یا Absolute بر روی عنصر دیگر قرار دهیم می بایست عنصر والد هم در موقعیت  Relative یا Absoluteقرار گیرد.

البته از پاسختون ممنونم . ولی به نتیجه دلخواه رسیدم. شما هم فکر می کنم به موضوع یاد شده اشاره کردید Galestian عزیر

----------


## conter

سلام دوستان ببخشید ولی یک سوال داشتم من هر چی سعی میکنم با html و یا php روی یک عکس از قالبی که برای سایتم طراحی کردم و با اسلایس فوتوشاپ بریدم و سیو کردم یک متن بنویسم و در مرکز عکس بذارم ! نمیشه یا بالاش قرار میگیره یا میره زیر تگ های دیگه نمیدونم باید چیکارش کنم بدون اینکه به تیبل ها و تگ های دیگه کار داشته باشه روی اون قسمت عکس متن خودمو قرار بدم !!! میشه یک راهنمایی بکنید !!!

----------


## Saber Mogaddas

سلام
شما می تونید یه دیو ایجاد کنید و عکس رو به پس رمینه دیو بدید و متن رو داخل تگ دیو بنویسید و با دستور padding متن رو در وسط عکس قرار بدید..
موفق باشی..

----------


## conter

دوست عزیز من به اون روشی که گفتین عمل کردم و یک فایل css هم بهش اضافه کردم ولی نمیتونستم متنم رو روش قرار بدم ! اینم کد ها : 


```
<html>
<head>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="myDiv">
  <img src="images/flare.gif"/>
</div>

<style>
#myDiv
{
width: 804px;
height: 100px;
position: relative;
}

#myDiv img {
width: 500px;
height: 70px;
position: absolute;
bottom: 0px;
left: 152px;
}
</style>
<!-- End Save for Web Slices -->
</body>
</html>
```

و این هم کد های قبل دست زدن به اون ! :



```
<html>
<head>
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
 
  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>
  
</head>
<body bgcolor="#bababa" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- Save for Web Slices (new neon iflare level 2 resize 2.psd) -->
<table id="Table_01" width="900" height="615" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="7">
			<img src="images/index-neon_01.gif" width="900" height="459" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index-neon_02.gif" width="260" height="156" alt=""></td>
		<td>
			<a href="contact.html" class="transition">
			<img src="images/index-neon_03.gif" width="85" height="29" alt="" 
                style="border-width: 0px"></a></td>
		<td rowspan="2">
			<img src="images/index-neon_04.gif" width="53" height="156" alt=""></td>
		<td>
			<a href="index.html">
			<img src="images/index-neon_05.gif" width="73" height="29" alt="" 
                style="border-width: 0px"></a></td>
		<td rowspan="2">
			<img src="images/index-neon_06.gif" width="47" height="156" alt=""></td>
		<td>
			<a href="about.html">
			<img src="images/index-neon_07.gif" width="97" height="29" alt="" 
                style="border-width: 0px"></a></td>
		<td rowspan="2">
			<img src="images/index-neon_08.gif" width="285" height="156" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index-neon_09.gif" width="85" height="127" alt=""></td>
		<td>
			<img src="images/index-neon_10.gif" width="73" height="127" alt=""></td>
		<td>
			<img src="images/index-neon_11.gif" width="97" height="127" alt=""></td>
	</tr>
	
</table>
<!-- End Save for Web Slices -->
</center>
</body>
</html>
```

البته بگم من میخوام توی همون قسمتی متن یا مثلا ادرس ایمیل رو قرار بدم که میشه عکس اول :  


```
<td colspan="7">
			<img src="images/index-neon_01.gif" width="900" height="459" alt=""></td>
```

----------


## conter

دوستان من مشکل رو بر طرف کردم به همون روش قرار دادن عکس در div ولی یک مشکل در فوتر واسم به وجود اومده ! من برای ایتم ها در صفحه توی css کد : 

```
a:hover {
	text-decoration: none;
	font-size: 15px;}
```

رو نوشتم که وقتی موس بر روی ایتم ها بره اندازه اونها بزرگتر شن ! اما یک مشکل به وجود اومده که فوتر سایت هم کلیک خور شده ! و به یک لینک وصل شده در حالی که توی هیچ کدوم از کدها فوتر اصلا به جایی وصل نیست !!! موندم چرا اینجوری شده !!! ممنون میشم راهنماییم کنید !!!

----------


## cyrusthegreat

سلام

دوست عزیز، به نظر بنده، شما یک جایی تک <a> رو باز کردین ولی اون رو نبستین. یه نگاهی بندازین. به احتمال خیلی خیلی زیاد این اتفاق افتاده.

----------


## conter

اقا مرسی دوست عزیز همین طور بود به خاطر کد نویسی زیاد دیگه اصلا به این نکته توجه نکرده بودم خیلی ممنون

----------


## iner30

سلام خدمت دوستان
1- دوست عزیز شما مشکلتون رو که برطرف کردین عکس رو با همون تگ div نمایش دادین یا از img استفاده کردین؟
2- اگه از img استفاده کردین لطف کنین به چه شکل ، اگرم شما استفاده نکردین دوستان دیگر لطفا راهنمایی کنند.

----------


## soroushp

12.jpg

من می خوام همچین کادری رو بسازم ، باید چی کار کنم؟ من div style="background.." گذاشتم اما جالب نشد

----------


## کامروا

> 12.jpg
> 
> من می خوام همچین کادری رو بسازم ، باید چی کار کنم؟ من div style="background.." گذاشتم اما جالب نشد


اگر منظورتون گرد شدن گوشه هستش :
border-bottom-right-radius: 25px;

----------


## soroushp

منظورتون اینه ؟ میشه بیشتر راهنمایی کنید
<div  style="background-color:#D42B1E;width:320px;float:left;padding-right:45px; height:30px; padding-left:25px; padding-bottom:25px;padding:15px;border-bottom-right-radius:25px;"></div>

----------


## کامروا

> منظورتون اینه ؟ میشه بیشتر راهنمایی کنید
> <div  style="background-color:#D42B1E;width:320px;float:left;padding-right:45px; height:30px; padding-left:25px; padding-bottom:25px;padding:15px;border-bottom-right-radius:25px;"></div>


 شما منظورتون چیه؟
میخوایین چی کار کنین دقیقا؟

----------


## soroushp

اون عکسی که گذاشتم رو می خوام  پیاده سازی اش کنم ، با div انجام دادم - اما نشد-نمی دونم مشکل از کجاست

----------


## soroushp

اینطوری:

<div style="border:1px;background:#D42B1E;border-bottom-right-radius:2em;width:265px; padding:280px;padding-top:5px;padding-right:25px;padding-left:3px;padding-bottom:3px">
<font color=#FFFFFF><p>&nbsp&nbsp&nbsp<font size="5">Find a course</font></p><input type=radio name="t1"><b>Undergraduate<input type=radio name="t1">Postgraduate</b><br><br>&nbsp&nbsp<input type="text" value="Find a Course" style="height:35px;vertical-align:top"><input type="image" src=../End_Project/17.jpg name="t1"><br><br><hr style="border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);"><br><p>&nbsp&nbspOr browse our range of Undergraduate<br>&nbsp&nbspdegrees:<br><br><b>&nbs  p&nbspAll course,A-Z<br>&nbsp&nbspBy Department/subject area</b></p></font></div>

----------

