سوال: چیدمان عناصر صفحه با استفاده ازposition
#1
درود برشما
اگه امکان داره یه نگاه به کدمن میندازنین ببین چرا در قسمت box المان های دایره اینجوری قرار گرفتن؟
کد:
<style type="text/css">
body
{
    margin:0;
    padding:0;
    background-color:#eee;
    
}
    #intro
    {
        width:100%;
        height:350px;
        background-color:#fff;    
        border-top:5px solid #ba1000;
        border-bottom:5px solid #ba1000;
        position:fixed;
        top:50%;
        margin-top:-175px;
    }
    
    #main
    {
        width:1000px;
        height:200px;
        /*background-color:#60F;/*remove*/
        margin:0 auto;
        
    }
    
    #header
    {
        width:1000px;
        height:110px;
        /*background-color:#0C3;*/
        position:relative;
    }
    
    #logo
    {
        width:400px;
        height:100px;
        /*background-color:#3CF;/*remove*/
        position:absolute;
        top:5px;
        left:50%;
        margin-left:-200px;
    }
    
    #box
    {
        width:1000px;
        height:240px;
        background-color:#F0F;
    }
    
    #hand
    {
        width:412px;
        height:240px;
        background-color:#FC0;
        position:absolute;
        left:50%;
        margin-left:-206px;
        
    }
    
    #circle-en
    {
        width:140px;
        height:140px;
        border-radius:70px;
        -moz-border-radius:70px;
        -webkit-border-radius:70px;
        background-color:#0C0;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-70px;
        margin-top:-70px;
    }
    
    #circle-fn
    {
        width:140px;
        height:140px;
        border-radius:70px;
        -moz-border-radius:70px;
        -webkit-border-radius:70px;
        background-color:#336;
        position:absolute;
        top:50%;
        left:50%;
        margin-right:-70px;
        margin-top:-70px;
    }
    

    
</style>
<!-- Start Intro -->
   <div id="intro">
       <!-- Start Main -->
       <div id="main">
           <!-- start header -->
           <div id="header">
               <!-- Start Logo -->
               <div id="logo">
                   <img src="logo.png" alt="logo" />
               </div>
               <!-- End Logo -->
           </div>
           <!-- End Header -->
               <!-- Start box -->
               <div id="box">
                   <div id="hand">
                       <img src="hand.png" alt="hand" />
                   </div>
                       <!-- start circle-en -->
                       <div id="circle-en"></div>
                       <!-- End circle-en -->
                       
                       <!-- start circle-fn -->
                       <div id="circle-fn"></div>
                       <!-- End circle-fn -->
               </div>
               <!-- End box -->
           
       </div>
       <!-- End Main -->    
   </div>
   <!-- END Intro -->

آخرین ویرایش: 26-06-2015 ساعت 09:30، توسط Daniel
پاسخ
#2
میخواین چطور باشه؟ همونطوریه که کدشو نوشتی  Rolleyes

آخرین ویرایش: 15-06-2015 ساعت 10:29، توسط Behnam Designer
پاسخ
#3
من میخوام دایره ها درکنار عکس handقرار بگیره.الگوی من سایت ibta.ir.میخوام عناصر درصفحه مثل این سایت قرار بگیره

پاسخ
#4
واسه المنت circle-fn# بذارید right: 50% الان left:50% ـه.

آخرین ویرایش: 15-06-2015 ساعت 16:30، توسط Behnam Designer
پاسخ
#5
درسته هردو رو left قرار داده بودم.امام بازم مشکلش حل نشد هردو دایره روی هم درمرکز عکس قرار میگیرن Undecided

پاسخ
#6
خب بعدش باید با margin درست کنی برای مثال margin ها رو 200px- بذار.

پاسخ
#7
این عددی که برای مارجین قرار میدیم باید نصف عرض باکس(دایره)باشه یا نه؟
منظورم اینه که مثلا اگه عرض باکس من60pxحالاleftیاrightرو روی50% ومارجینشون -30pxبذارم

پاسخ
#8
(15-06-2015 ساعت 22:16)mansoureh نوشته است:  این عددی که برای مارجین قرار میدیم باید نصف عرض باکس(دایره)باشه یا نه؟
منظورم اینه که مثلا اگه عرض باکس من60pxحالاleftیاrightرو روی50% ومارجینشون -30pxبذارم

این تکنیک باعث میشه المنت دقیقا وسط باکس والد قرار بگیره.
بستگی به شما داره که بخواید استفاده کنید یا نه. تو مورد شما فرقی نمیکنه ازش استفاده کنید یا نه چون اولا دایره ها نباید وسط باشن و دایره ها هم هم اندازه هستن. برای هر دو میتونید یه عددی قرار بدید تا از وسط باکس یه فاصله ای داشته باشند.

آخرین ویرایش: 16-06-2015 ساعت 09:56، توسط THE KNIGHT
چطور امضا کنم؟  Huh
پاسخ
#9
خیلی سپاس گذارم از راهنمائی و پاسخ کاملتون

دوست عزیز من یه مساله دیگه ایم برام سوال بوداونم این که من وقتیposition:fixed رو از بالا برابر50درصد قرار میدم ومارجینشوهم نصف عرض باکس میذارم به خوبی جواب میده و دقیقا وسط صفحه من قرار میگیره ,ولی چرا وقتی برابر با relativeمیذارم این جواب رو نمیگیرم(مگر نه این که relativeنسبت به جائی که هست حرکت میکنه؟)

پاسخ
#10
(16-06-2015 ساعت 11:42)mansoureh نوشته است:  خیلی سپاس گذارم از راهنمائی و پاسخ کاملتون

دوست عزیز من یه مساله دیگه ایم برام سوال بوداونم  این که من وقتیposition:fixed رو از بالا برابر50درصد قرار میدم ومارجینشوهم نصف عرض باکس میذارم به خوبی جواب میده و دقیقا وسط صفحه من قرار میگیره ,ولی چرا وقتی برابر با relativeمیذارم این جواب رو نمیگیرم(مگر نه این که relativeنسبت به جائی که هست حرکت میکنه؟)

خوب خودتون جوابتون رو دادید که! Big Grin
وقتی position:fixed میکنید محل قرارگیری النمت نسبت به پنجره مرورگر تعیین میشه اما وقتی relative میذارید دقیقا نسبت به جایی که هست تغییر میکنه و وقتی مثلا right رو %50 میذاری 500 پیکسل از راست بهش اضافه میشه چون width والدش 1000 پیکسله (احتمالا از صفحه میزنه بیرون).

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

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