تراز کردن متن و تصویر در یک خط
#1
Note 
درود بر شما
من یه کدی نوشتم که مربوط میشه به قسمت headerسایت.حالا میخوام که سمت راست صفحه لوگوم باشه و سمت چپ شماره تلفن و ایگون تلفن ولی تراز کردنش رو نمیدونم میشه کمکم کنید

[HTML]
body
{
margin:0;
padding:0;
/*direction:rtl*/
font-family:Tahoma;
}

#main
{
width:1000px;
height:600px;/*removed*/
background-color:#fff;
margin:0 auto;


}
#header
{
width:1000px;
height:109px;
float:left;
margin-top:15px;
}

#bg-header-left
{
width:11px;
height:109px;

background-image:url(../images/bg-header-left.png);
background-repeat:no-repeat;
float:left;

}

#bg-header-center
{

width:978px;
height:109px;

float:left;
background-image:url(../images/bg-header-center.png);
background-repeat:repeat-x;
}

#bg-header-right
{

width:11px;
height:109px;

background-image:url(../images/bg-header-right.png);
background-repeat:no-repeat;
float:left;


}

#logo
{
width:218px;
height:32px;

float:left;
margin-left:58px;
margin-top:30px;

}


#logo_right
{
width:220px;
height:23px;
float:right;
margin-left:58px;
margin-top:30px;
text-align:right;

}

<!--Main Start-->
<div id="main">

<!--Header Start-->
<div id="header">
<div id="bg-header-left"></div>
<div id="bg-header-center">


<div id="logo_left">

<a href="#">

<img src="images/logo.png" alt="" />

</a>

</div>

<div id="logo_right">

<p align="left"><img src="images/icon_phone.png" align="icon_phone" /><img src="images/phone.png" align="phone" /></p>

</div>

</div>
<div id="bg-header-right"></div>

</div>
<!--Header End-->




</div>
<!--Main End-->




[/HTML]

پاسخ
#2
Note 
کد رو نگاهی کردم شما برای جابجایی div ها از margin-top و... استفاده کرده در اینطور حالت ها وقتی میخوای به راحتی یه div یا هرچی رو جابجا کنید بجای استفاده از margin ابتدا position: relative; تعیین کنید و با استفاده از دستور top و bottom بخش مورد نظر رو جابجا کنید. :32:مثال:
کد:
#id {
float: left;
position: relative;
top: 10px;
}
حتی میتونید از مقادیر منفی استفاده کنید:
کد:
#id {
float: left;
position: relative;
top: -10px;
}

توتال دیزاین
مرجع تخصصی طراحی وب سایت ، وب اپلیکیشن و سیستم های مدیریت همایش, ویندوز اپلیکیشن
و هر آنچه شما بخواهید...
پاسخ
#3
Note 
[img]E:/pickweb/handman[/img]
شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم

پاسخ
#4
Note 
یخورده بهش نزدیک شدم ولی همچنان بر از مشکله
[HTML]
body
{
margin:0;
padding:0;
/*direction:rtl*/
font-family:Tahoma;
}

#main
{
width:1000px;
height:600px;/*removed*/
background-color:#FFF;
margin:0 auto;


}
#header
{
width:1000px;
height:109px;
float:left;
margin-top:15px;
}

#bg-header-left
{
width:11px;
height:109px;

background-image:url(../images/bg-header-left.png);
background-repeat:no-repeat;
float:left;

}

#bg-header-center
{

width:978px;
height:109px;

float:left;
background-image:url(../images/bg-header-center.png);
background-repeat:repeat-x;
}

#bg-header-right
{

width:11px;
height:109px;

background-image:url(../images/bg-header-right.png);
background-repeat:no-repeat;
float:left;


}

#logo_left
{
width:218px;
height:32px;
float:left;
margin-left:58px;
margin-top:30px;

}

.img1
{
float: right;
position: relative;
top: -10px;

}

.img2
{
float:right;
position: relative;
top: -10px;

}
<!--Main Start-->
<div id="main">

<!--Header Start-->
<div id="header">
<div id="bg-header-left"></div>
<div id="bg-header-center">


<div id="logo_left">

<a href="#">

<img src="http://www.softafzar.net/images/logo.png" alt=""/>


</a>
</div>
<img src="http://www.softafzar.net/images/icon_phone.png" alt="icon" class="img1"/>
<img src="http://www.softafzar.net/images/phone.png" alt="phone" id="img2" />

</div>


</div>
<div id="bg-header-right"></div>

</div>
<!--Header End-->




</div>
<!--Main End-->
[/HTML]

آخرین ویرایش: 08-09-2014 ساعت 22:36، توسط SOFTAFZAR
پاسخ
#5
Note 
hasti نوشته است:[img]E:/pickweb/handman[/img]
شرمنده من متوجه عرض شما نشدم من میخوام یه چیزی مثل این درست کنم
اینجا که چیزی نیست!
منم حرف پیچیده ای نزدم: شما میخوای لوگو سمت راست باشه از float: right استفاده میکنی و میخوای شماره تلفن سمت چپ باشه از float: left استفاده میکنی. حالا میخوای این دوتا از بالای صفحه یک فاصله داشته باشن یا به قول خودتون ترازشون کنید برای این کار اول position: relative رو برای هر دو در css تعریف کنید سپس میتونید با استفاده از دستور های top و bottom در css هرکدوم رو به هر اندازه که لازمه از بالای صفحه فاصله بدین! اشتباه شما اینه که از margin برای فاصله دادن عناصر و تراز کردنشون استفاده می کنید

توتال دیزاین
مرجع تخصصی طراحی وب سایت ، وب اپلیکیشن و سیستم های مدیریت همایش, ویندوز اپلیکیشن
و هر آنچه شما بخواهید...
پاسخ
#6
Note 
دوست عزیز ممنون مشکلم با راهنمائی شما کاملا برطرف شد

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note متحرک کردن تصویر پس زمینه؟ parsA 1 921 24-02-2015 ساعت 09:33
آخرین ارسال: SOFTAFZAR
Note قراردادن متن روی تصویردرhtml hasti 3 604 06-08-2014 ساعت 22:29
آخرین ارسال: Php1
Note چند تصویر Loading AnimeIraN 1 477 07-08-2013 ساعت 15:51
آخرین ارسال: AnimeIraN

کاربرانِ درحال بازدید از این موضوع:   1 مهمان