چیدمان عناصر صفحه با استفاده ازposition

حل شده 

CSS

توسط mansoureh در 3 سال پیش
0 3.9k 22 3 سال پیش
mansoureh behnamdesigner babak98 theknight reza-irdev
0

درود برشما اگه امکان داره یه نگاه به کدمن میندازنین ببین چرا در قسمت 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

پاسخ ها

3

این کد رو اضافه کنید:

html, body{
  height: 100%;
  width: 100%;
}

Container یا والد المنت intro# در اینجا body هست که height اون مشخص نشده بهمین خاطر top: 50% کار نمیکنه.

1

میخواین چطور باشه؟ همونطوریه که کدشو نوشتی  :rolleyes:

آخرین ویرایش: 15-06-2015 ساعت 10:29، توسط Behnam Designer
0

من میخوام دایره ها درکنار عکس handقرار بگیره.الگوی من سایت ibta.ir.میخوام عناصر درصفحه مثل این سایت قرار بگیره

1

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

0

درسته هردو رو left قرار داده بودم.امام بازم مشکلش حل نشد هردو دایره روی هم درمرکز عکس قرار میگیرن :-/

1

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

0

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

1

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

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

آخرین ویرایش: 16-06-2015 ساعت 09:56، توسط THE KNIGHT
0

خیلی سپاس گذارم از راهنمائی و پاسخ کاملتون

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

2

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

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

0

این کدیه که تو سایت الگو قرار داره و به راحتی عناصر در وسط صفحه قرار گرفته:

#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;
		}

ولی من همین کار رو انجام میدم وبه نتیجه نمیرسم؟

1

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

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

آخرین ویرایش: 16-06-2015 ساعت 21:05، توسط THE KNIGHT
0

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

0

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

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

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

0

کد کار:

<!-- 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>
0

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

0

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

0

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

0

جداااااااااااااااااااااااااااااااااااااااااااااااااااااا :cry:

0

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

0

فقط همین؟تنظیمات مارجین رو تغیر ندادین؟

0

نه فقط position رو تغییر دادم

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید