سوال: چیدمان عناصر صفحه با استفاده ازposition
#11
این کدیه که تو سایت الگو قرار داره و به راحتی عناصر در وسط صفحه قرار گرفته:
کد:
#intro
        {
            position:relative;
            top:50%;
            margin-top:-35px;
            width:100%;
            height:120px;
            background-color:#9C0;    
            border-top:5px solid #ba1000;
            border-bottom:5px solid #ba1000;
            overflow:hidden;
        }
ولی من همین کار رو انجام میدم وبه نتیجه نمیرسم؟

پاسخ
#12
منظورتون دقیقا کدوم عناصره؟ باکس اصلی شما هم تو وسط صفحه ست (همو کدی که تو پست اول گذاشتید).

در کل ما مورد قراردادن المان تو وسط صفحه که صحبت کردیم! در مورد ایجاد فاصله هم صحبت کردیم. در مورد position ها هم گفتیم!. شما الان دقیقا میخواین همون صفحه رو پیاده کنید؟ اگر متوجه نشدید دقیقا بگید هر المنت باید کجا باشه تا بیشتر راهنمایی کنیم.

آخرین ویرایش: 16-06-2015 ساعت 21:05، توسط THE KNIGHT
چطور امضا کنم؟  Huh
پاسخ
#13
ببخشید دوست عزیز خیلی اذیت شدین!من همه حرفم اینه که چرا من نمیتونم تگ اصلی که همون introمیشه رو توسطposition:relativeدرمرکز صفحه قرار بدم ولی تو سایت الگو توسط همین دستور(relative) این کارو انجام داده من میخوام یاد بگیرم توسط این دستور این کارو انجام بدم؟(مثلا الان این -35px رو بر چه مبنایی قرار داده؟)

پاسخ
#14
(16-06-2015 ساعت 21:16)mansoureh نوشته است:  ببخشید دوست عزیز خیلی اذیت شدین!من همه حرفم اینه که چرا من نمیتونم تگ اصلی که همون introمیشه رو توسطposition:relativeدرمرکز صفحه قرار بدم ولی تو سایت الگو توسط همین دستور(relative) این کارو انجام داده من میخوام یاد بگیرم توسط این دستور این کارو انجام بدم؟(مثلا الان این -35px رو بر چه مبنایی قرار داده؟)

سلام
ببینید وقتی اون سایت رو باز میکنی اولش ویژگی  height کادر برابر 130 پیکسله(120 پیکسل  height داره و 10 پیکسل هم border) پس اگر بخواد دقیقا کادر در وسط صفحه باشه باید margin-top رو روی 65px- بذاره که اون عدد رو واسه خودش یچیز زده!

شما کدی که نوشتی رو بصورت کامل بذار تا بگیم کجا رو اشتباه کردی . طبق گفته های بالا میتونی کادر رو دقیقا بذاری وسط صفحه.

پاسخ
#15
کد کار:
کد:
<!-- start Intro -->
    <div id="intro">
        <!-- Start Main -->
        <div id="main">
        <img src="images/logo.png" alt="logo" id="logo" />
        <img src="images/intro-2.png" alt="image-hand" id="hand" />
        <div id="english"><h1>English</h1></div>
        <div id="persian"><h1>فارسی</h1></div>
        </div>
        <!-- END Main -->
        
    </div>
    <!-- END Intro -->

    <style type="text/css">
        body
        {
            margin:0;
            padding:0;
            background-color:#eee;
            background-image:url(images/bg.png);
            background-repeat:repeat;
            
        }
        
        #intro
        {
            width:100%;
            height:400px;
            border-top:5px solid #ba1000;
            border-bottom:5px solid #ba1000;
            background-color:#fff;
            position:fixed;
            top:50%;
            margin-top:-200px;
        }
        #main
        {
            width:1000px;
            /*height:400px;*/
            /*background-color:#39F;*/
            margin:0 auto;
        }
        
        #logo
        {
            width:400px;
            height:100px;
            position:absolute;
            left:50%;
            margin-left:-200px;
            top:5px;
        }
        
        #hand
        {
            width:412px;
            height:250px;
            position:absolute;
            left:50%;
            margin-left:-206px;
            margin-top:130px;
            /*background-color:#0C0;*/
            
        }
        
        #english
        {
            width:100px;
            height:100px;
            position:absolute;
            left:30%;
            margin-left:-50px;
            top:280px;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            border:1px solid #ba1000;
            background-image:url(images/logo23.png);
            background-repeat:no-repeat;
            background-position:center center;
            
        }
        
        
        #persian
        {
            width:100px;
            height:100px;
            position:absolute;
            right:30%;
            margin-right:-50px;
            top:280px;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            border:1px solid #ba1000;
            background-image:url(images/logo23.png);
            background-repeat:no-repeat;
            background-position:center center;
            
        }
        
        
        #english h1 ,#persian h1
        {
            color:#000;
            text-align:center;
            top:50%;
            left:50%;
            font-size:20px;
            padding-top:25px;
            
        }
        
        #persian:hover,#english:hover
        {
            background-color:#eee;
        }
        
    </style>

پاسخ
#16
سلام.
مرورگر شما چی هست؟ این درسته وسط صفحه است!

پاسخ
#17
درود برشما
من با همه مرورگرها کار میکنم.(فایرفاکس-کروم-ie)
بله این وسط صفحه است چون منpositoin :fixedگذاشتم.ولی مدنظر م بود با position:relativeاین کارو انجام بدم .

پاسخ
#18
من relative هم گذاشتم تغییر نکرد وسط صفحه بود

پاسخ
#19
جداااااااااااااااااااااااااااااااااااااااااااااااااااااا Huh Cry

پاسخ
#20
فقط fixed رو relative کردم.  یه عکس بذار! من مرورگرم کرومه

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

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