• تراز کردن متن و تصویر در یک خط
    #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 1,314 24-02-2015 ساعت 09:33
    آخرین ارسال: SOFTAFZAR
    Note قراردادن متن روی تصویردرhtml hasti 3 851 06-08-2014 ساعت 22:29
    آخرین ارسال: Php1
    Note چند تصویر Loading AnimeIraN 1 610 07-08-2013 ساعت 15:51
    آخرین ارسال: AnimeIraN

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