ورود

View Full Version : قرار دادن متن بر روی عکس به کمک CSS



fazel-d
جمعه 19 تیر 1388, 15:36 عصر
من می خوام که متنی را روی یک قسمت از عکس مثلا بالا سمت راست قرار دهم به شرطی که متن بر روی عکس فیکس شده و با تغییر اندازه مرورگر متن در سر جای خود و بر روی عکس قرار گرفته و تغییر مکان ندهدو
من این کارو با Position و Left و Top انجام دادم ولی وقتی مرورگر را تغییر اندازه دادم مکان نوشته ها از روی عکس جابجا شدند

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

Galestian
جمعه 19 تیر 1388, 19:40 عصر
سلام
پیشنهاد میدم عکس را رد یک لایه و نوشته را در در یک لایه دیگر ولی درون لایه عکس قرار داهید
و z-index آن را بالاتر از z-index لایه عکس قرار داده و Position را هم relative تنظیم نمایید

موفق باشید

fazel-d
شنبه 20 تیر 1388, 19:36 عصر
یه نکته مهم که برای من هم جالب بود :

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

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

conter
چهارشنبه 28 دی 1390, 22:57 عصر
سلام دوستان ببخشید ولی یک سوال داشتم من هر چی سعی میکنم با html و یا php روی یک عکس از قالبی که برای سایتم طراحی کردم و با اسلایس فوتوشاپ بریدم و سیو کردم یک متن بنویسم و در مرکز عکس بذارم ! نمیشه یا بالاش قرار میگیره یا میره زیر تگ های دیگه نمیدونم باید چیکارش کنم بدون اینکه به تیبل ها و تگ های دیگه کار داشته باشه روی اون قسمت عکس متن خودمو قرار بدم !!! میشه یک راهنمایی بکنید !!!

Saber Mogaddas
پنج شنبه 29 دی 1390, 14:26 عصر
سلام
شما می تونید یه دیو ایجاد کنید و عکس رو به پس رمینه دیو بدید و متن رو داخل تگ دیو بنویسید و با دستور padding متن رو در وسط عکس قرار بدید..
موفق باشی..

conter
پنج شنبه 29 دی 1390, 17:07 عصر
دوست عزیز من به اون روشی که گفتین عمل کردم و یک فایل 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
پنج شنبه 29 دی 1390, 21:31 عصر
دوستان من مشکل رو بر طرف کردم به همون روش قرار دادن عکس در div ولی یک مشکل در فوتر واسم به وجود اومده ! من برای ایتم ها در صفحه توی css کد :
a:hover {
text-decoration: none;
font-size: 15px;}

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

cyrusthegreat
پنج شنبه 29 دی 1390, 23:34 عصر
سلام

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

conter
جمعه 30 دی 1390, 11:02 صبح
اقا مرسی دوست عزیز همین طور بود به خاطر کد نویسی زیاد دیگه اصلا به این نکته توجه نکرده بودم خیلی ممنون

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

soroushp
سه شنبه 12 دی 1391, 17:15 عصر
97666

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

کامروا
سه شنبه 12 دی 1391, 17:37 عصر
97666

من می خوام همچین کادری رو بسازم ، باید چی کار کنم؟ من div style="background.." گذاشتم اما جالب نشد
اگر منظورتون گرد شدن گوشه هستش :
border-bottom-right-radius: 25px;

soroushp
سه شنبه 12 دی 1391, 18:55 عصر
منظورتون اینه ؟ میشه بیشتر راهنمایی کنید
<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>

کامروا
سه شنبه 12 دی 1391, 21:52 عصر
منظورتون اینه ؟ میشه بیشتر راهنمایی کنید
<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
سه شنبه 12 دی 1391, 22:16 عصر
اون عکسی که گذاشتم رو می خوام پیاده سازی اش کنم ، با div انجام دادم - اما نشد-نمی دونم مشکل از کجاست

soroushp
چهارشنبه 13 دی 1391, 10:43 صبح
اینطوری:

<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>&nbsp&nbspAll course,A-Z<br>&nbsp&nbspBy Department/subject area</b></p></font></div>