الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

عمل الموقع منصف في وسط الصفحة

بدأه terminal في 26 أغسطس 2010 · 17 رد · 1,908 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته:

هناك مشكله عند البعض في تنصيف الصفحة بإستخدام ال <div>

فالبعض يضع <center> في بداية الصفحة وهذا خطأ..

فما عليك سوى إعطاء الستايل للديف التالي:

. إسم الستايل{
vertical-align:middle;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}

فقط هذا هو المطلوب فهكذا سيتم تنصيف الصفحة في الوسط.

1
#2

في الواقع هذه الطريقة لا تعمل على كامل المتصفحات (ربما فقط على IE، لم أجربها لكني أعتقد هذا)

والطريقة الأصح للمتصفحات جميعها موجودة على هذا الرابط:

/index.php?showtopic=227065

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#3
Xacker كتب:

في الواقع هذه الطريقة لا تعمل على كامل المتصفحات (ربما فقط على IE، لم أجربها لكني أعتقد هذا)

والطريقة الأصح للمتصفحات جميعها موجودة على هذا الرابط:

/index.php?showtopic=227065

السلام عليكم أخي

شكرا على الرد و إعطاء المعلومة لكن هذه الطريقة تم تجربتها كثيرا في مواقع عدة على جميع المتصفحات و كانت تعمل بشكل ممتاز، لا أظن أن هناك أي مشكله قد واجهتني.

#4
terminal كتب:

السلام عليكم أخي

شكرا على الرد و إعطاء المعلومة لكن هذه الطريقة تم تجربتها كثيرا في مواقع عدة على جميع المتصفحات و كانت تعمل بشكل ممتاز، لا أظن أن هناك أي مشكله قد واجهتني.

هل أنت متأكد ؟

قمت باختباره على المتصفحات التالية:

FF 3.6.8

Safari 5.0.1

Opera 10.61

IE 6

IE 8

Chrome 7 beta

لكن إن أردت طريقة تعمل على جميع المتصفحات سابقة الذكر فهي هذه

#mydiv {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px; /*set to a negative number 1/2 of your height*/
	margin-left: -175px; /*set to a negative number 1/2 of your width*/

	width:350px;
	height:300px;
	border: 2px solid #2982C6;
	background-color: #FFF;
	text-align: center;
}

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#5

انتظر استاذنا Xacker :)

طريقة الأخ terminal من المفترض أن تعمل بشكل جيد هذا إن لم تخني الذاكرة

ولكن طريقته تعمل بنفس عمل الوسم center و بالتالي لا أظن أن Vertical-align تعمل مع الـ Div بهذه الطريقة

ولكن على المستوى الأفقي التوسيط يجب أن يعمل بشكل جيد والله أعلم

بالنسبة للـ IE فهناك شرط لتعمل طريقة الأخ terminal بشكل جيد على نحو ما أذكر

ألا و هو أن يكون الوسم : (المتعدد المزايا :) )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

موجودا في الصفحة هذا ما اذكره

ولكن على مستوى التوسيط الأفقي و العمودي معاً فطريقة الأخ Xacker هي الأفضل والله أعلم

جزاكم الله كل الخير ..

1

Everything will be fine when we TALK LESS, DO MORE


#6

كنت أناقش على أساس التوسيط في منتصف الصفحة (أفقياً وعمودياً)

إن كان المقصود تنفيذ ما يشبه <center> فقط (توسيط أفقي) فأعتذر عن إساءة فهم الهدف من الموضوع.

شكراً للتنبيه أستاذ محمد :)

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#7

الطريقه التى ذكرها الأخ terminal صحيحه و تعمل جيداً بالنسبه للمتصفحات التاليه:

FF 3.6.8

Safari 5.0.1

Opera 10.61

Chrome

و ذلك لو كانت الصفحه LTR أو RTL

ولكن بالنسبه للمتصفح IE فلا تعمل بالنسبه للإصدار 6 و فى الإصدار 7 و 8 يحدث تضارب بينهم عند جعل الصفحه RTL

واجهت هذا عند تصميم بانر إعلاني لمنتدى و كنت أريده أن يظهر فى المنتصف و أسفل النافذه و ليست الصفحه و يختفى بالإزاحه لأسفل بعد 10 ثواني ثم يظهر مره أخر بعد 10 ثوانى و هكذا و المنتدى باللغه العربيه أى RTL كما أن الإستايل لا أستطيع أن أضيف أو أعدل الوسم الذى ذكره أخى MoHaMMaD Pro لأن أى تعديل بالنسبه لهذا الوسم ينهار الإستايل فى أجزاء كثيره و يختلف عرضه بالنسبه للمتصفح IE

وكان الحل الذى توصلت إليه هو وضع البانر فى Dev و جعل عرضه 100% و بهذا يتم توسيطه فى كل المتصفحات.

و الله ده عذاب wacko.gif

تم تعديل هذه المشاركة بواسطة asm-soft في 27 أغسطس 2010 في 06:29

forum-signature-01.gif
#8
asm-soft كتب:

الطريقه التى ذكرها الأخ terminal صحيحه و تعمل جيداً بالنسبه للمتصفحات التاليه:

FF 3.6.8

Safari 5.0.1

Opera 10.61

Chrome

و ذلك لو كانت الصفحه LTR أو RTL

ولكن بالنسبه للمتصفح IE فلا تعمل بالنسبه للإصدار 6 و فى الإصدار 7 و 8 يحدث تضارب بينهم عند جعل الصفحه RTL

واجهت هذا عند تصميم بانر إعلاني لمنتدى و كنت أريده أن يظهر فى المنتصف و أسفل النافذه و ليست الصفحه و يختفى بالإزاحه لأسفل بعد 10 ثواني ثم يظهر مره أخر بعد 10 ثوانى و هكذا و المنتدى باللغه العربيه أى RTL كما أن الإستايل لا أستطيع أن أضيف أو أعدل الوسم الذى ذكره أخى MoHaMMaD Pro لأن أى تعديل بالنسبه لهذا الوسم ينهار الإستايل فى أجزاء كثيره و يختلف عرضه بالنسبه للمتصفح IE

وكان الحل الذى توصلت إليه هو وضع البانر فى Dev و جعل عرضه 100% و بهذا يتم توسيطه فى كل المتصفحات.

و الله ده عذاب wacko.gif

و الله الله يعينك ... لكن بالفعل العذاب هذا كله لأنك في البداية أعطيت الأهميه للمتصفح IE6 الذي أوقفت شركة مايكروسفت دعمها له، و أيضاً كل الإصدارات التي تأتي من هذه الشركة للأسف نواجه مشكله في التعامل معها.

إذا نظرنا إلى المتصفحات التي ذكرتها في الأعلى لماذا لا نواجه مشكله في التعامل معها؟ ولكن مع IE's هناك العديد من المشاكل.

#9
MoHaMMaD Pro كتب:

انتظر استاذنا Xacker :)

طريقة الأخ terminal من المفترض أن تعمل بشكل جيد هذا إن لم تخني الذاكرة

ولكن طريقته تعمل بنفس عمل الوسم center و بالتالي لا أظن أن Vertical-align تعمل مع الـ Div بهذه الطريقة

ولكن على المستوى الأفقي التوسيط يجب أن يعمل بشكل جيد والله أعلم

بالنسبة للـ IE فهناك شرط لتعمل طريقة الأخ terminal بشكل جيد على نحو ما أذكر

ألا و هو أن يكون الوسم : (المتعدد المزايا :) )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

موجودا في الصفحة هذا ما اذكره

ولكن على مستوى التوسيط الأفقي و العمودي معاً فطريقة الأخ Xacker هي الأفضل والله أعلم

جزاكم الله كل الخير ..

جزاك الله على المعلومات الطيبة و التصحيح.

أنا فقط أريد التوسيط الأفقي من الصفحة ولم أقصد التوسيط العمودي منها و أيضاً أشكر الأخ Xacker على معلوماته المفيدة.

#10

السلام عليكم..

أنا أستخدم الطريقة التالية:

<style>
body {
height: 100%;
width: 100%;
}

#wrapper {
margin:0 auto;
}
</style>

<div id="wrapper">Content here..</div>

وهي تعمل معي في أي مكان..

1

إنما الإسلام في الصحراء امـتهـد .... لـيـجـيء كــل مـســـلــمٍ أســـد

ليس كالمسلم في الخُلق أحــد .... ليس خلقُ اليوم، بل خلقُ الأبد

---------------------------------------

@AAlakkad

مدونتي

#11
A_Alakkad كتب:

السلام عليكم..

أنا أستخدم الطريقة التالية:

<style>
body {
height: 100%;
width: 100%;
}

#wrapper {
margin:0 auto;
}
</style>

<div id="wrapper">Content here..</div>

وهي تعمل معي في أي مكان..

جيد جداً،

اختزال للطريقة التي طرحها terminal، تحقق المطلوب بعدد أقل من الأسطر حيث تستغني عن الخصائص الغير ضرورية :)

طبعاً من يريد تجربتها عليه أن يقوم بتحديد width أقل من 100% و border حتى يلحظ الفرق.

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#12
Xacker كتب:

جيد جداً،

اختزال للطريقة التي طرحها terminal، تحقق المطلوب بعدد أقل من الأسطر حيث تستغني عن الخصائص الغير ضرورية :)

طبعاً من يريد تجربتها عليه أن يقوم بتحديد width أقل من 100% و border حتى يلحظ الفرق.

+١

لكن في هذه الطريقة على حسب علمي بأن الموقع لن يأخذ height 100% في متصفحات عدة

و لكن لو وضعناhtml هكذا: 

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

سيأخذ height 100%.

welcome to my portfolio:

www.cornerofart.net

Submit you design

here
#13

أعترض على الطريقه التى ذكرها أخى A_Alakkad لأننا فى هذه الحاله اعتمدنا على إعطاء خصائص للـ body و هذا ممكن أن يتعارض مع عناصر أخرى فى إضافه css لها فأضل طريقه هى وضع ما نريده فى div و نجعل عرضه 100% (أقرب و أسهل طريقه للتوافق مع جميع المتصفحات) ثم نتحكم فى ما بداخله كما نريد من تغيير خصائص css و بهذا ابتعدنا عن body و التوريث منها.

تم تعديل هذه المشاركة بواسطة asm-soft في 30 أغسطس 2010 في 16:53

1
forum-signature-01.gif
#14
asm-soft كتب:

أعترض على الطريقه التى ذكرها أخى A_Alakkad لأننا فى هذه الحاله اعتمدنا على إعطاء خصائص للـ body و هذا ممكن أن يتعارض مع عناصر أخرى فى إضافه css لها فأضل طريقه هى وضع ما نريده فى div و نجعل عرضه 100% (أقرب و أسهل طريقه للتوافق مع جميع المتصفحات) ثم نتحكم فى ما بداخله كما نريد من تغيير خصائص css و بهذا ابتعدنا عن body و التوريث منها.

كلامك صحيح في حالة و لكن ليس دقيق في حالة أخرى

فإنهاء الوراثة معروف و قد تطرقت أنت لطريقته في مشاركتك جزاك الله خيرا حدد الخاصية للابن تنتهي وراثته من أبيه

وهذه المشكلة (إن سميناها مشكلة) التي وصفتها أخي لا يسببها فقط إعطاء خصائص للـ Body

و إنما اعطاء أي خاصية لأب و عدم تحديدها للأبناء يؤدي إلى وراثتها من قبلهم فعمليا هي ليست مشكلة بل خطأ من المبرمج

في حال كانت الأبناء تحتاج إلى تحديد الخاصية ولم يحددها أو ممكن أن تكون ميزة تسرع العمل في حال كان المطلوب أن تأخذ الأبناء ذات خواص الآباء

والله أعلم

جزاك الله كل الخير أخي العزيز

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 31 أغسطس 2010 في 00:38

1

Everything will be fine when we TALK LESS, DO MORE


#15
Xacker كتب:

لكن إن أردت طريقة تعمل على جميع المتصفحات سابقة الذكر فهي هذه

#mydiv {
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px; /*set to a negative number 1/2 of your height*/
	margin-left: -175px; /*set to a negative number 1/2 of your width*/

	width:350px;
	height:300px;
	border: 2px solid #2982C6;
	background-color: #FFF;
	text-align: center;
}

لكن لماذا تلك الأرقام بالذات ؟ ماذا لو اختلفت أبعاد النافذة/الشاشة ؟

بالنسبة للـ Margin ،

margin:0 auto;

كل الدروس و المقالات التي تشاهدها تقول : ضع auto .. وستجد أن الموقع في المنتصف ، لكن كيف تعمل في الواقع ؟ ماهو المقصود بـ auto ؟

لا أحب أن أنسخ و ألصق دون أن أفهم ما حدث :-) .

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#16
الشمري كتب:

لكن لماذا تلك الأرقام بالذات ؟ ماذا لو اختلفت أبعاد النافذة/الشاشة ؟

بالنسبة للـ Margin ،

margin:0 auto;

كل الدروس و المقالات التي تشاهدها تقول : ضع auto .. وستجد أن الموقع في المنتصف ، لكن كيف تعمل في الواقع ؟ ماهو المقصود بـ auto ؟

لا أحب أن أنسخ و ألصق دون أن أفهم ما حدث :-) .

ليست تلك الأرقام بالذات أخي الكريم

هذا مجرد مثال

لو لاحظت معي المكتوب في التعليقات

أن المهم أن تضع قيمة الـ margin-left مساوية لنصف العرض

و تضع قيمة الـ margin-top مساوية لنصف الطول

والمكتوب هو مجرد مثال :

العرض 350 نصفها 175

والطول 300 نصفها 150

والله أعلم

بالنسبة للقيمة auto فهي تدع حساب الـ margin في هذه الحالة للمتصفح

وبالتالي مع القيمة auto قد تختلف القيمة الفعلية للـ margin بين متصفح و آخر

فلو وضعت auto من الطرفين (right and left) ستكون القيمة التي يحدد المتصفح متساوية للطرفين

والله تعالى أعلم

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 1 سبتمبر 2010 في 11:18

1

Everything will be fine when we TALK LESS, DO MORE


#17

بارك الله فيك أخي على التوضيح .

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#18
MoHaMMaD Pro كتب:

ليست تلك الأرقام بالذات أخي الكريم

هذا مجرد مثال

لو لاحظت معي المكتوب في التعليقات

أن المهم أن تضع قيمة الـ margin-left مساوية لنصف العرض

و تضع قيمة الـ margin-top مساوية لنصف الطول

والمكتوب هو مجرد مثال :

العرض 350 نصفها 175

والطول 300 نصفها 150

والله أعلم

بالنسبة للقيمة auto فهي تدع حساب الـ margin في هذه الحالة للمتصفح

وبالتالي مع القيمة auto قد تختلف القيمة الفعلية للـ margin بين متصفح و آخر

فلو وضعت auto من الطرفين (right and left) ستكون القيمة التي يحدد المتصفح متساوية للطرفين

والله تعالى أعلم

نعم هذا هو المقصود و أيضاً بال auto هو وضع المتصفح margin كقيمة قياسية على قياس الشاشة التي تعمل بها و resolution التي تعمل بها.

welcome to my portfolio:

www.cornerofart.net

Submit you design

here

مواضيع مشابهة