:: تراز کردن متن با Dream Weaver CS5

winsent

winsent

Banned
سلام.
در تصویری که ضمیمه کردم، میخوام عبارت "توجه کنید: برای..." درست در وسط آیکون قرار بگیره. الان این متن تقریبا در قسمت زیر آیکون قرار داره. قبلا میدونستم اما یادم رفته، فکر کنم باید یک خصوصیت text باشه.
ممنون از تمامی دوستان
 

پیوست ها

  • warn.jpg
    warn.jpg
    294.9 کیلوبایت · بازدیدها: 20
rayka

rayka

Well-Known Member
سلام دوست عزیز میتونی وقتی آیکون رو قرار دادی یه اسپیس بزنی یا از این خاصیت توی div استفاده کنی
کد: 
valign="middle"
این خاصیت تمام عناصر رو با هر عرض در وسط نمایش میده
 
آخرین ویرایش:
rayka

rayka

Well-Known Member
دوست عزیز این خاصیت رو برای کل div قرار دادی؟
به بین ممکنه توی css خاصیتی واسش تعریف کرده باشی خوب بزار اینو تست کنیم.
نمیدونم شما با css چقدر آشنایی؟
#payam{
PADDING-TOP: 2px
}
از این میتونی استفاده کنی متن رو توی
کد: 
<p id="payam" >matne delkhah</p>
بعد اون مقدار 2px رو تغییر بده تا نتیجه مطلوب حاصل بشه
اگه بتونی سوروس مربوط به همون بخش رو اینجا بزاری واست درست میکنم البته خودت انجام بدی لذت بخش تره فقط چک کن ببین خاصیت تعریف نشده باشه واسه اون بخش کادر شکل
 
آخرین ویرایش:
rayka

rayka

Well-Known Member
روش DrSaeed عزیزم باید جواب بده ولی فکر کنم باز هم آیکون جابجا بشه باید تنها برای متن خاصیت تعریف کنیم تا فقط متن بالا پایین بشه بهر حال امید وارم حل بشه
 
winsent

winsent

Banned
سلام.
آقا کد اون قسمت رو میذارم:
(اسم آیکون قرمز delete هستش)


PHP: 
<div class="warning">
<p>
<img border="0" src="images/delete.png" width="20" height="20"><span lang="en-us">
</span><b><font color="#FFFFFF">توجه کنید:</font> برای دریافت تمامی محصولات سایت به صورت پیش نمایش، به لینک 
<font color="#FFFFFF">&quot;</font><a href="preview.html">دریافت پیش نمایش محصولات</a><font color="#FFFFFF">&quot;</font> مراجعه نمایید.</b></p>
</div>

این هم کد کلاس warning در فایل css هستش:


PHP: 
.warning {
	float:right;
	height:47px;
	margin:0;
	padding:5px 20px 0px 0px;
	width:700px;
	vertical-align: middle;
}
 
آخرین ویرایش:
Saeed

Saeed

Well-Known Member
امیر وقت تست ندارم اما چشمی میگم کهـ اگهـ استایلی کهـ واست گذاشتمو بهـ تگ <b> بدی مشکل حل میشهـ ، اگه نشد فردا کاملشو برات میذارم .. :rose:
 
rayka

rayka

Well-Known Member
سلام امیرجان مشکلت رو بر طرف کردم
کلیشو واست گذاشتم توی پایین
کد: 
.warning {
    float:right;
    height:10px;
    padding:5px 20px 0px 0px;
    width:700px;
}  
.payam{
margin-top: -20px }
کد: 
<div class="warning" >
<img border="0" src="images/delete.png" width="20" height="20">
<div class="payam"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; برای دریافت تمامی محصولات سایت به صورت پیش نمایش، به لینک 
<font color="#FFFFFF">&quot;</font><a href="preview.html">دریافت پیش نمایش محصولات</a><font color="#FFFFFF">&quot;</font> مراجعه نمایید.</b></div>
</div>

واسه اینکه بیشتر تنظیم کنی با عدد -20 بازی کن تا نتیجه مطلوب حاصل بشه
 
آخرین ویرایش:
winsent

winsent

Banned
سلام رایکا جان.
بازهم نتیجه نداد و درست نشد، برعکس!
خراب تر هم شد...!
:green:
 
rayka

rayka

Well-Known Member
راست میگی عزیز ؟ من نتیجشم تست کردم حل شده بود
واستا من عکسم میزارم واست
کل کدهای همون صفه رو بزار من حتما واسط درست میکنم ولی تعجب میکنم این که درست شده بود توی تمامه مرورگرام تست کردم
فکر کنم درست عمل نکردی کدت رو بزار من درست کنم واسط بزارم تا خیالت راحت بشه دیگه
 

پیوست ها

  • test.gif
    test.gif
    66.6 کیلوبایت · بازدیدها: 5
rayka

rayka

Well-Known Member
اینم همون صفحه ای که من توش تست کردم
این کد رو با فرمت html ذخیره کن بد اجرا کن
PHP: 
<html dir="rtl">

<head>
<style>
.warning {
    float:right;
    height:10px;
    padding:5px 20px 0px 0px;
    width:700px;
}  
body         { font-family: Tahoma; font-size: 11px }
.payam{
margin-top: -20px }

</style>

<div class="warning" >
<img border="0" src="images/delete.png" width="20" height="20">
<div class="payam"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; برای دریافت تمامی محصولات سایت به صورت پیش نمایش، به لینک 
<font color="#FFFFFF">&quot;</font><a href="preview.html">دریافت پیش نمایش محصولات</a><font color="#FFFFFF">&quot;</font> مراجعه نمایید.</b></div>
</div>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
ارادتمندم امیر جان
بسیار ساده است، می تونی عکس آیکون رو در پس ضمینه متن قرار بدی و از اونجا تراز اون رو مشخص کنی
HTML: 
	.warning {
    float:right;
    height:47px;
    margin:0;
    padding:5px 20px 0px 0px;
    width:700px;
    vertical-align: middle;
    background:transparent url('images/delete.png') right center no-repeat; 
}

HTML: 
<div class="warning">
<b><font color="#FFFFFF">توجه کنید:</font> برای دریافت تمامی محصولات سایت به صورت پیش نمایش، به لینک 
<font color="#FFFFFF">&quot;</font><a href="preview.html">دریافت پیش نمایش محصولات</a><font color="#FFFFFF">&quot;</font> مراجعه نمایید.</b>
</div>
کد های بسیار نا مرتبی داری!
مشکل شما ارتباطی به نرم افزار dream نداره.
پاینده باشید
 
farik

farik

Well-Known Member
سلام..
echessdesign جان راه حل جالب و به نسبت ابتكاري رو مطرح كردن...ولي اگه من بودم...يك div ميساختم و width رو 100% ميزاشتم و text-align رو center بعد براي عكس يك دايو وبا float :right و متن رو هم به صورت عادي مينوشتم...چون جواب پيدا شده نياز نميبينم تست كنم ولي از نظر تئوري جواب ميده:)
با تشكر TabOTabDesign
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا