سوال: قرار گرفتن متن در وسط عكس [بایگانی]

View Full Version : سوال: قرار گرفتن متن در وسط عكس

ravand

یک شنبه 08 آبان 1390, 22:34 عصر

سلام من يه سري كد براي منوهاي قالب وبلاگ نوشتم ، اگه شما بالا و پايين و چپ و راست عكس منو كه آبي رنگ هست رو در نظر بگيريد مي بينيد كه متن منو دقيقا وسط اين عكس آبي رنگ قرار نگرفته. من براي حل اين مشكل از padding و marginراست و چپ و بالا و پايين هم استفاده كردم ولي باعث شد جدول بهم بريزه. كدهاش رو اينجا گذاشتم . خواهشا اول كدهاي خودتون و منو امتحان كنيد و بعد جواب بديد.
متشكرم.

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.Title1{
font-size:10pt;
FONT-WEIGHT: bold;
font-family:tahoma;
color:white;
TEXT-ALIGN: center;
display:block;
width:207px;
background-image:
url('http://s2.picofile.com/file/7166988167/menu2.png');
background-repeat:no-repeat;
height:35px;
}

.rast{
display:block;
width:203px;
margin-top:0px;
padding-bottom: 8px;
padding-top: 8px;
position: relative;
font-family:tahoma;
font-size: 10pt;
border:2px #0E2DEC solid;
BACKGROUND: #E6F0FD;
TEXT-ALIGN: center;
}
</style>
</head>
<body>
<div class="Title1">درباره ی من</div>
<BlogProfile>
<div class="rast">
<BlogPhoto>
<div align=center> <img src="<-BlogPhotoLink->" >
<br>
<span dir="rtl">
<-BlogAbout->
</span>
</div>
</BlogPhoto>
</div>
</BlogProfile>
<br>
</body>
</html>

میلاد قاضی پور

دوشنبه 09 آبان 1390, 00:03 صبح

ravand

دوشنبه 09 آبان 1390, 11:24 صبح

اين كدي كه شما دادي كار نكرد. من از دوستان خواستم كه اگه كدي اينجا ميذارن قبلش امتحان كنند. اين كدي كه شما گذاشتي براي چي بايد متن رو وسط عكس قرار بده؟ :متفکر:

ravand

دوشنبه 09 آبان 1390, 15:15 عصر

بالاخره كد زير رو در قسمت .Title1 قرار دادم كار كرد.

line-height: 2.8em;
حالا اگه دوستان پيشنهاد بهتري دارن ممنون مشم بذارن. شايد اين كار من باعث بشه با بقيه ي مرورگرها مشكل پيدا كنه.

Saber Mogaddas

سه شنبه 10 آبان 1390, 12:32 عصر

سلام
دوست عزیز می دونیم که line-height برای فاصله li ها و یا فاصله دو خط از هم استفاده می شه..شما اگه می خواهید استاندارد و بدون اشغال کارتون رو انجام بدید از ul و li استفاده کنید داخل div و یا شما در هر صورت به این نوشته باید لینک بدید توسط تگ <a> مگر اینکه از jquey یا js استفاده کنید..شما می تونید خصوصیات تگ a رو تنظیم کنید..من این کار رو براتون کردم..

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.Title1{
font-size:10pt;
FONT-WEIGHT: bold;
font-family:tahoma;
color:white;
TEXT-ALIGN: center;
display:block;
width:207px;
background-image:
url('http://s2.picofile.com/file/7166988167/menu2.png');
background-repeat:no-repeat;
height:35px;
}

.rast{
display:block;
width:203px;
margin-top:0px;
padding-bottom: 8px;
padding-top: 8px;
position: relative;
font-family:tahoma;
font-size: 10pt;
border:2px #0E2DEC solid;
BACKGROUND: #E6F0FD;
TEXT-ALIGN: center;
}
.Title1 a
{
color: #FFFFFF;
float: right;
margin-right: 67px;
margin-top: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="Title1"><a href="#">درباره ی من</a></div>
<BlogProfile>
<div class="rast">
<BlogPhoto>
<div align=center> <img src="<-BlogPhotoLink->" >

<span dir="rtl">
<-BlogAbout->
</span>
</div>
</BlogPhoto>
</div>
</BlogProfile>

</body>
</html>

موفق باشید..

ravand

سه شنبه 10 آبان 1390, 17:15 عصر

ببخشيد داداش نميشه به جاي <a href="#"> از <p> استفاده كرد؟
من اين بار رو ميخوام براي هدر سايتم اين كار رو بكنم و متن رو وسط عكس و بالا قرار بدم.:متفکر:

ravand

سه شنبه 10 آبان 1390, 20:38 عصر

شما مطمئني كه اين استانداردش هست؟ ميشه يه روش ديگه اي مثلاً با <p> رو اينجا نشون بدي؟:متفکر:

ghasemweb

چهارشنبه 11 آبان 1390, 11:47 صبح

کد زیر رو جایگزین کن درست میشه تو مرروگرای مختلف هم درست کار میکنه.

<div class="Title1"><div style="padding-top:10px">درباره ی من</div></div>

Saber Mogaddas

چهارشنبه 11 آبان 1390, 13:10 عصر

سلام
چیزی که مطمئن نیستم نمی گم..خندیدم
بله به راحتی می تونی از p هم استفاده کنی

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.Title1{
font-size:10pt;
FONT-WEIGHT: bold;
font-family:tahoma;
color:white;
TEXT-ALIGN: center;
display:block;
width:207px;
background-image:
url('http://s2.picofile.com/file/7166988167/menu2.png');
background-repeat:no-repeat;
height:35px;
}

.rast{
display:block;
width:203px;
margin-top:0px;
padding-bottom: 8px;
padding-top: 8px;
position: relative;
font-family:tahoma;
font-size: 10pt;
border:2px #0E2DEC solid;
BACKGROUND: #E6F0FD;
TEXT-ALIGN: center;
}
.Title1 p
{
color: #FFFFFF;
float: right;
margin-right: 67px;
margin-top: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="Title1"><p>درباره ی من</p></div>
<BlogProfile>
<div class="rast">
<BlogPhoto>
<div align=center> <img src="<-BlogPhotoLink->" >

<span dir="rtl">
<-BlogAbout->
</span>
</div>
</BlogPhoto>
</div>
</BlogProfile>

</body>
</html>

موفق باشی ..

ravand

چهارشنبه 11 آبان 1390, 22:05 عصر

ببخشيد من رفتم توي مرورگر opera اين كدهاي شما رو تست كردم ولي مشكلي داشت ، مشكلش هم اين بود كه عكس منو با خود منو كمي فاصله داشت. شما ميتونيد به آدرس http://browserling.com/ بريد و با انتخاب مرورگر اپرا اين كدها رو تست كنيد.

Saber Mogaddas

پنج شنبه 12 آبان 1390, 20:47 عصر

سلام
من با opera 10.10 تست کردم درست کار می کنه..احتمالا مشکل از اون سایت هست..

موفق باشی..

ravand

پنج شنبه 12 آبان 1390, 20:49 عصر

من تونستم با همين كدم مشكلم رو با مرورگر اپرا حل كنم.

line-height: 2.5em;

Saber Mogaddas

پنج شنبه 12 آبان 1390, 21:00 عصر

برنامه نویس شماید هر طور که دوست دارید با سلیقه خودتون حل کنید حرفهای من فقط می تونه یه راهنمایی باشه همین
موفق باشی