درس توسيط المحتوى CSS

ليوناردو دافينشي · 05-03-2009, 09:51 PM

السلام عليكمـ

درس بسيط وصغير عن كيفية توسيط المحتوى

اذا أردت اجعل div بمنتصف الصفحة بالدقة كيف ؟

توسيط أفقي اليكم المعادلة بالرياضيات

(عرض العنصر - 100) ÷ 2
أو
50 - (عرض العنصر ÷ 2)

مثال:-

كود PHP:

  
#exampleID {
    position: absolute;
    width: 70%;
    left: 15%;

}

عرض العنصر 70%
70 - 100 =30
30 ÷ 2 =15

اي أن left او right سوف تساوي 15%

كذالك نفس الشئ لتوسيط المحتوى عمودياً

(ارتفاع العنصر - 100) ÷ 2
أو
50 - (ارتفاع العنصر ÷ 2)

مثال للتوسيط عمودي و أفقي :

كود PHP:

  
#exampleID {
    position: absolute;
    width: 70%;
    height: 60%;    
    left: 15%;
    top: 20%;

            }

وبهذا الشكل يكون المحتوى بمنتصف الصفحة

كذالك نفس الطريقة لتوسيط div داخل div

لكن div الرئيسية يجب ان تكون

كود PHP:

  position: relative

للتجربة:

كود PHP:

  <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
<!--
#Example     { 
    position: absolute;
    left: 38%;
    top: 40%;
    width: 24%;
    height: 20%; 
    border-style: solid; border-width: 2px 
    }
-->
</style>

</head>

<body>

<div id="Example">

</div>

</body>

</html>

الأزهر · 05-03-2009, 10:49 PM

بورك فيك عزيزي

Fez-Soft · 06-03-2009, 01:46 PM

مشكور اخي ليوناردو ..
^_*

سحاب اون لاين · 07-03-2009, 06:31 PM

هل جربت هذه الطريقة :

كود PHP:

  #div {
margin: auto;
width: 500px;
}

كود PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>
 
<style type="text/css">
#example {
 border: 2px gray solid;
 width: 400px;
 height: 200px;
 margin: auto;
}
</style>
 
</head>
 
<body>
 
<div id="example">
</div>
 
</body>
 
</html>

ليوناردو دافينشي · 09:32 PM

إقتباس:

المشاركة الأصلية بواسطة سحاب اون لاين

هل جربت هذه الطريقة :

كود PHP:

#div { margin: auto; width: 500px; }

كود PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 2</title> <style type="text/css"> #example { border: 2px gray solid; width: 400px; height: 200px; margin: auto; } </style> </head> <body> <div id="example"> </div> </body> </html>

غريب ردك

طريقتي غير مؤلوفة ,, ولو يا سحاب بتعرفني تبع الغرائب

يمكن مستغرب لانني نسيت ان اكتب بالعنوان التوسيط بواسطة position

؟

الأزهر و Fez-Soft >>> > مشكور شباب

محمد1004 · 13-03-2009, 05:09 PM

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

جرب تحكم بعرض الصفحة تلاقي انه المربع ما ضل بنصف الصفحة لانو انت تتعامل مع نسبة من حواف الصفحة

لكن بالنسبة لرد سحاب اون لاين ممتاز جدا و هو الصح

شكرا لكم ..

ليوناردو دافينشي · 14-03-2009, 09:10 AM

إقتباس:

المشاركة الأصلية بواسطة محمد1004

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

جرب تحكم بعرض الصفحة تلاقي انه المربع ما ضل بنصف الصفحة لانو انت تتعامل مع نسبة من حواف الصفحة

لكن بالنسبة لرد سحاب اون لاين ممتاز جدا و هو الصح

شكرا لكم ..

انا نفس رأيك بالزبط ..

باركـ الله فيك