18.02.15 21.4 ك

إذا قمت بقص أي موقع تم إنشاؤه على أساس html ، فسترى بنية طبقات معينة. علاوة على ذلك ، بمظهره ، سيكون مشابهًا لطبقة الكيك. إذا كنت تعتقد ذلك ، فعلى الأرجح أنك لم تأكل لفترة طويلة. لذا أشبع جوعك أولاً ، ثم سنوضح لك كيفية توسيط طبقة div على موقعك:

فوائد التخطيط باستخدام العلامة

هناك نوعان رئيسيان من بناء هيكل الموقع:

• مجدول؛
• حاجز.

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

عند استخدام التخطيط الجدولي ، لن يتم عرض صفحة الويب حتى يتم تحميلها بالكامل. بينما عند استخدام كتل div ، يتم عرض العناصر على الفور.

بالإضافة إلى سرعة التحميل العالية ، يسمح لك إنشاء الموقع بتقليل كمية كود html عدة مرات. بما في ذلك من خلال استخدام فئات CSS.

ومع ذلك ، يجب استخدام التخطيط الجدولي لهيكلة عرض البيانات على الصفحة. مثال كلاسيكي على استخدامه هو عرض الجداول.

يُطلق على إنشاء الكتل المستند إلى العلامات أيضًا اسم الطبقات ، وتسمى الكتل نفسها طبقات. هذا لأنه عند استخدام قيم خصائص معينة ، يمكن وضعها فوق الأخرى ، على غرار الطبقات في Photoshop.

مساعدات تحديد المواقع

في تخطيط الكتلة ، يتم تحديد موضع الطبقة بشكل أفضل باستخدام أوراق الأنماط المتتالية. خاصية تحديد المواقع الرئيسية في CSS هي تعويم.
بناء جملة الخاصية:
تعويم: اليسار | حق | لا شيء | يرث ،
أين:

• يسار - محاذاة العنصر إلى الحافة اليسرى للشاشة. تلتف بقية العناصر إلى اليمين ؛
• يمين - محاذاة على اليمين ، لف بقية العناصر - على اليسار ؛
• لا شيء - لا يسمح بالتغليف ؛
• ترث - ترث قيمة العنصر الأصل.

ضع في اعتبارك مثالًا خفيف الوزن لوضع divs باستخدام هذه الخاصية:

#left (العرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ تعويم: يسار ؛ الخلفية: RGB (255،51،102) ؛) # يمين (العرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ تعويم: يمين ؛ الخلفية: RGB (0،255،153) ؛) الكتلة اليسرى الكتلة الصحيحة

لنحاول الآن استخدام نفس الخاصية لوضع عنصر div الثالث في وسط الصفحة. لكن للأسف ، لا تحتوي قيمة float على قيمة مركزية. وعندما تُعطى كتلة جديدة قيمة محاذاة إلى اليمين أو اليسار ، فإنها تنتقل في الاتجاه المحدد. لذلك ، يبقى فقط تعيين الكتل الثلاثة على الطفو: اليسار:

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

في المثال التالي ، سنستخدم طبقة حاوية لوضع باقي العناصر عليها. هذا يحل مشكلة تبديل الكتل بالنسبة لبعضها البعض عند تغيير حجم النافذة. يتم توسيط الحاوية في المنتصف عن طريق ضبط خصائص الهامش على صفر للهوامش من الأعلى والتلقائي على الجوانب (الهامش: 0 تلقائي):

#container (width: 600px؛ margin: 0 auto؛) #left (width: 200px؛ height: 100px؛ float: left؛ background: rgb (255،51،102)؛) # right (width: 200px؛ height: 100px؛ float : يسار ؛ الخلفية: rgb (0،255،153) ؛) #center (العرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ تعويم: يسار ؛ الخلفية: rgb (255،0،0) ؛) كتلة مركز كتلة يسار الكتلة اليمنى

يوضح هذا المثال نفسه كيف يمكنك توسيط div أفقيًا. وإذا قمت بتحرير الكود أعلاه بشكل طفيف ، فيمكنك تحقيق محاذاة رأسية للكتل. للقيام بذلك ، تحتاج فقط إلى تغيير طول طبقة الحاوية (تقليلها). أي بعد تحرير css الخاص به ، يجب أن يبدو الفصل كما يلي:

بعد التغيير ، ستصطف جميع الكتل بشكل صارم في المنتصف. ولن يتغير موقعهم بأي حجم من نافذة المتصفح. هذا ما يبدو عليه div المتمركز عموديًا:

في المثال التالي ، استخدمنا عددًا من خصائص css الجديدة لتوسيط الطبقات داخل الحاوية:

#container (العرض: 450 بكسل ؛ الارتفاع: 150 بكسل ؛ الهامش: 0 تلقائي ؛ لون الخلفية: # 66CCFF ؛) # اليسار (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الخلفية: RGB (255،51،102) ؛ العرض: كتلة مضمنة ؛ محاذاة رأسية: وسط ؛ هامش يسار: 35 بكسل ؛) # يمين (عرض: 100 بكسل ؛ ارتفاع: 100 بكسل ؛ خلفية: RGB (0،255،153) ؛ عرض: كتلة مضمنة ؛ محاذاة عمودية: وسط ؛ هامش اليسار: 35 بكسل ؛) #center (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الخلفية: RGB (255،0،0) ؛ العرض: كتلة مضمنة ؛ محاذاة رأسية: وسط ؛ هامش اليسار: 35 بكسل ؛)

وصف موجز لخصائص css وقيمها التي استخدمناها في هذا المثال لتوسيط div داخل div:

• display: inline-block - يصطف عنصر الكتلة في خط ويلفه بعنصر آخر ؛
• محاذاة رأسية: وسط - محاذاة العنصر في الوسط بالنسبة إلى الأصل ؛
• margin-left - يضبط الهامش على اليسار.

كيفية عمل ارتباط من طبقة

غريب كما يبدو ، إنه ممكن. في بعض الأحيان قد تكون هناك حاجة إلى كتلة div كارتباط عند تخطيط أنواع مختلفة من القوائم. ضع في اعتبارك مثالًا عمليًا لتنفيذ طبقة الارتباط:

# layer1 (العرض: 500 بكسل ؛ الارتفاع: 100 بكسل ؛ الخلفية: RGB (51255204) ؛ الحدود: الأخدود ؛) أ (العرض: كتلة ؛ محاذاة النص: المركز ؛ الارتفاع: 100٪ ؛ اللون: RGB (255،0،51) ؛) رابط لموقعنا

في هذا المثال ، باستخدام خط العرض: block ، قمنا بتعيين الارتباط إلى قيمة عنصر الكتلة. ولجعل ارتفاع div بأكمله رابطًا ، اضبط الارتفاع: 100٪. إخفاء وإظهار عناصر الكتلة

توفر عناصر الكتلة المزيد من الخيارات لتوسيع وظائف الواجهة أكثر من التخطيط الجدولي القديم. غالبًا ما يكون تصميم الموقع فريدًا ويمكن التعرف عليه. لكن عليك أن تدفع ثمن هذا النقص الحصري في المساحة الخالية.

هذا ينطبق بشكل خاص على الصفحة الرئيسية ، حيث تكون تكلفة الإعلان عليها هي الأعلى. لذلك ، هناك مشكلة حيث "دفع" لافتة إعلانية أخرى. وهنا لا يمكنك الابتعاد عن محاذاة div في منتصف الصفحة!

الحل الأكثر عقلانية هو إخفاء كتلة ما. فيما يلي مثال بسيط على هذا التنفيذ:

# layer1 (display: block؛ width: 500px؛ height: 100px؛ background: rgb (51،255،204)؛ border: groove؛) عرض الوظيفة () (if (layer1 == "none") (layer1 = "block"؛) else (layer1 = "none" ؛) document.getElementById ("layer1"). style.display = layer1؛)

هذا هو الزر السحري. سيؤدي النقر فوقه إلى إخفاء أو إظهار الكتلة المخفية.

يوم جيد ، المشتركين والقراء من هذا المنشور. أريد اليوم أن أخوض في التفاصيل وأخبرك بكيفية توسيط النص في css. في بعض المقالات السابقة ، لقد تطرقت بشكل غير مباشر إلى هذا الموضوع ، لذلك لديك بعض المعرفة في هذا المجال.

ومع ذلك ، في هذا المنشور ، سوف أخبرك بجميع أنواع الطرق لمحاذاة الكائنات ، وكذلك شرح كيفية وضع مسافة بادئة للفقرات وتخطيها. لذلك دعونا نبدأ التعلم!

أتش تي أم أل ونسله ومحاذاة

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

بالنسبة إلى التحقق (تم وصف هذا المصطلح بالتفصيل في المقالة "") ، فإن مواصفات html نفسها تدين استخدام< center>، نظرًا لأنه يجب استخدام DOCTYPE متعدية> للتحقق من الصلاحية.

هذا النوع يتخطى العناصر المحظورة.

مركز

سيتم توسيط هذا المحتوى.

لاحظ أنه بالنسبة للصورة ، فإن السمة التي نقوم بتحليلها لها قيم مختلفة قليلاً.

في المثال ، استخدمت محاذاة = "وسط". بفضل هذا ، يتم محاذاة الصورة بحيث تقع الجملة بالضبط في منتصف الصورة.

أدوات توسيط CSS

يتم استخدام خصائص CSS المصممة لمحاذاة الكتل والنصوص والمحتوى الرسومي في كثير من الأحيان. هذا يرجع في المقام الأول إلى الراحة والمرونة في تنفيذ الأساليب.

لنبدأ بخاصية توسيط النص الأولى ، وهي محاذاة النص.

وهي تعمل بنفس طريقة المحاذاة في. من بين الكلمات الرئيسية ، يمكنك اختيار واحدة من القائمة العامة أو أن ترث خصائص سلف (يرث).

أريد أن أشير إلى أنه في css3 يمكنك تعيين معلمتين إضافيتين: ابدأ - اعتمادًا على قواعد كتابة النص (من اليمين إلى اليسار أو العكس) ، قم بتعيين المحاذاة إلى اليسار أو اليمين (على غرار اليسار أو اليمين) والنهاية - العكس للبدء (عند كتابة نص من اليسار إلى اليمين ، فإنه يعمل على أنه يمين ، عند كتابته من اليمين إلى اليسار - اليسار).

text-align div (border: 5px double red؛ padding: 0 22px 0 22px؛) #l (text-align: right؛) #s (text-align: end؛)

تقدم على اليمين

جملة باستخدام النهاية

دعني أخبرك عن خدعة صغيرة. إذا تم تحديد ضبط ، فقد يتدلى السطر الأخير قبيح من الأسفل. من أجل توسيطها ، على سبيل المثال ، يمكنك استخدام خاصية محاذاة النص الأخيرة.

تُستخدم خاصية المحاذاة الرأسية لمحاذاة محتوى الموقع أو خلايا الجدول عموديًا. فيما يلي وصفت الكلمات الرئيسية الرئيسية للعنصر.

الكلمة الرئيسية	غاية
حدود	يحدد المحاذاة لخط الأصل ، والذي يسمى الخط الأساسي. إذا كان كائن السلف لا يحتوي على مثل هذا الخط ، فإن المحاذاة تحدث على طول الحد السفلي.
وسط	يتم محاذاة منتصف الكائن القابل للتغيير إلى الخط الأساسي ، والذي تتم إضافة أرضية ارتفاع العنصر الأصل إليه.
قاع	يتم ضبط الجزء السفلي من المحتوى المحدد على الجزء السفلي من الكائن الموجود أسفله بالكامل.
قمة	على غرار القاع ، فقط مع الجزء العلوي من الكائن.
ممتاز	عمل حرف مرتفع.
الفرعية	جعل العنصر منخفضًا.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

FLOWER محاذاة عمودية

محاذاة رأسية div (حجم الخط: 4em ؛ محاذاة النص: المركز ؛ زخرفة النص: تسطير ؛) #A (محاذاة رأسية: أعلى ؛) #B (محاذاة رأسية: وسط ؛) #C (محاذاة رأسية : سوبر ؛) # D (محاذاة رأسية: فرعي ؛) زهرة

المسافة الفارغة

وأخيرًا ، وصلنا إلى المسافة البادئة في الفقرة. تستخدم لغة css خاصية خاصة تسمى مسافة بادئة نصية.

باستخدامه ، يمكنك إنشاء خط أحمر وحافة (تحتاج إلى تحديد قيمة سالبة).

مسافة بادئة نصية #a (مسافة بادئة نصية: 53px ؛) #b (مسافة بادئة نصية: -43px ؛) div (خلفية: # FFDAB9 ؛ عرض: 35٪ ؛ حجم الخط: 29 بكسل ؛ هامش اليسار: 30٪ ؛ حشو اليسار: 50 بكسل ؛)

لإنشاء خط أحمر ، تحتاج إلى معرفة معلمة واحدة فقط.

إنها خاصية نصية بسيطة.

هناك عدة طرق مختلفة جوهريًا لتوسيط كائن ما عموديًا باستخدام CSS ، ولكن قد يكون اختيار العنصر المناسب أمرًا صعبًا. سننظر في بعضها ، وننشئ أيضًا موقعًا إلكترونيًا صغيرًا باستخدام المعرفة المكتسبة.

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

الطريقة الأولى

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

بعض المعلومات المفيدة التي يجب أن تتمحور. # غلاف (عرض: جدول ؛) #cell (عرض: خلية جدول ؛ محاذاة عمودية: وسط ؛)

الايجابيات

• يمكن أن يغير المحتوى الارتفاع ديناميكيًا (الارتفاع غير محدد في CSS).
• لا يتم اقتطاع المحتوى إذا لم تكن هناك مساحة كافية له.

سلبيات

• لا يعمل في IE 7 وما دونه
• الكثير من العلامات المتداخلة

الطريقة الثانية

تستخدم هذه الطريقة تحديد الموضع المطلق لـ div ، حيث تم تعيين أعلى مستوى له عند 50٪ وهامشه العلوي (أعلى الهامش) مطروحًا منه نصف ارتفاع المحتوى. هذا يعني أن الكائن يجب أن يكون له ارتفاع ثابت ، والذي يتم تحديده في أنماط CSS.

نظرًا لأن الارتفاع ثابت ، يمكنك ضبط الفائض: تلقائي ؛ بالنسبة إلى div الذي يحتوي على المحتوى ، لذلك إذا لم يكن المحتوى مناسبًا ، فستظهر أشرطة التمرير.

المحتوى هنا #content (الموضع: مطلق ؛ أعلى: 50٪ ؛ الارتفاع: 240 بكسل ؛ الهامش العلوي: -120 بكسل ؛ / * ناقص نصف الارتفاع * /)

الايجابيات

• يعمل في جميع المتصفحات.
• لا يوجد استثمار إضافي.

سلبيات

• عندما لا توجد مساحة كافية ، يختفي المحتوى (على سبيل المثال ، يوجد div داخل الجسم ويقلص المستخدم النوافذ ، وفي هذه الحالة لن تظهر أشرطة التمرير.

الطريقة الثالثة

في هذه الطريقة ، سنقوم بلف محتوى div مع div آخر. عيّن ارتفاعه إلى 50٪ (الارتفاع: 50٪ ؛) وهامشه السفلي إلى نصف ارتفاعه (الهامش السفلي: -محتوى الارتفاع ؛). المحتوى سوف يمسح العائمة ويتم توسيطها.

content here #floater (float: left؛ height: 50٪؛ margin-bottom: -120px؛) #content (clear: both؛ height: 240px؛ position: النسبي ؛)

الايجابيات

• يعمل في جميع المتصفحات.
• عندما لا توجد مساحة كافية (على سبيل المثال ، عندما يتم تصغير النافذة) لا يتم قطع المحتوى ، ستظهر أشرطة التمرير.

سلبيات

• أعتقد أن شيئًا واحدًا فقط: استخدام عنصر فارغ إضافي.

الطريقة الرابعة.

تستخدم هذه الطريقة الوظيفة: الملكية المطلقة ؛ للديوف ذات الأبعاد الثابتة (العرض والارتفاع). ثم قمنا بتعيين إحداثياتها أعلى: 0 ؛ أسفل: 0؛ ، ولكن نظرًا لارتفاعها الثابت ، لا يمكنها التمدد ويتم توسيطها. هذا مشابه جدًا للطريقة المعروفة المتمثلة في التوسيط الأفقي لعنصر مستوى الكتلة ذي العرض الثابت (الهامش: 0 تلقائي ؛).

معلومات مهمة. # المحتوى (الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ يمين: 0 ؛ هامش: تلقائي ؛ ارتفاع: 240 بكسل ؛ العرض: 70٪ ؛)

الايجابيات

• بسيط جدا.

سلبيات

• لا يعمل في Internet Explorer
• سيتم قص المحتوى بدون أشرطة التمرير إذا لم تكن هناك مساحة كافية في الحاوية.

الطريقة الخامسة

يمكنك استخدام هذه الطريقة لتوسيط سطر واحد من النص. ما عليك سوى تعيين ارتفاع النص (ارتفاع السطر) على ارتفاع العنصر (الارتفاع). بعد ذلك ، سيتم عرض الخط في المنتصف.

بعض أسطر النص #content (الارتفاع: 100 بكسل ؛ ارتفاع السطر: 100 بكسل ؛)

الايجابيات

• يعمل في جميع المتصفحات.
• لا يقطع النص إذا لم يكن مناسبًا.

سلبيات

• يعمل فقط مع النص (لا يعمل مع عناصر الكتلة).
• إذا كان هناك أكثر من سطر من النص ، فإنه يبدو سيئًا للغاية.

هذه الطريقة مفيدة جدًا للعناصر الصغيرة ، مثل توسيط النص في زر أو حقل نص.

الآن بعد أن عرفت كيفية تحقيق محاذاة مركزية رأسية ، فلنقم بإنشاء موقع ويب بسيط سيبدو في النهاية كما يلي:

الخطوة 1

من الجيد دائمًا البدء بالترميز الدلالي. سيتم تنظيم صفحتنا على النحو التالي:

• #floater (لتوسيط المحتوى)
• #centred (عنصر المركز)
  • #جانب
    • #شعار
    • #nav (قائمة
    • #محتوى
  • #bottom (لجميع حقوق الطبع والنشر)

  لنكتب ترميز html التالي:

  شركة مركزية شركة

  • بيت
  • منتجات
  • مدونة
  • اتصال
  • عن
  عنوان الصفحة

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

  العنوان 2

  تبني جاهزية الويب المخصصة بكفاءة بدلاً من العمليات الموجهة للعملاء. تنمو بحزم متطلبات عبر الأنظمة الأساسية مقابل التقنيات الاستباقية. تمكين الخدمات الوصفية متعددة التخصصات بسهولة دون واجهات على مستوى المؤسسة. قم بتبسيط مجالات الموضوعات الاستراتيجية التنافسية بشكل ملائم مع الأسواق الإلكترونية المركزة. Phosfluorescently نقابة المجتمعات ذات المستوى العالمي في مواجهة أسواق القيمة المضافة. إعادة ابتكار خدمات شاملة بشكل مناسب قبل تقديم خدمات إلكترونية قوية.

  يظهر إشعار حقوق النشر هنا

  الخطوة 2

  سنكتب الآن أبسط CSS لوضع العناصر على الصفحة. يجب عليك حفظ هذا الرمز في ملف style.css. عليه أن الرابط مكتوب في ملف html.

  Html، body (margin: 0؛ padding: 0؛ height: 100٪؛) body (background: url ("page_bg.jpg") 50٪ 50٪ no-تكرار # FC3؛ font-family: Georgia، Times، serifs؛ ) #floater (position: النسبي ؛ float: left ؛ height: 50٪ ؛ margin-bottom: -200px ؛ width: 1px ؛) #centered (position: النسبي ؛ clear: left ؛ height: 400px ؛ width: 80٪ ؛ max -width: 800px؛ min-width: 400px؛ margin: 0 auto؛ background: #fff؛ border: 4px مطلق ؛ يسار: 0 ؛ أعلى: 0 ؛ أسفل: 0 ؛ يمين: 70٪ ؛ مساحة: 20 بكسل ؛ هامش: 10 بكسل ؛) # المحتوى (الموضع: مطلق ؛ يسار: 30٪ ؛ يمين: 0 ؛ أعلى: 0 ؛ أسفل: 0 ؛ تجاوز: تلقائي ؛ ارتفاع: 340 بكسل ؛ الحشو: 20 بكسل ؛ الهامش: 10 بكسل ؛)

  قبل أن نتمكن من محاذاة المحتوى الخاص بنا إلى الوسط ، نحتاج إلى ضبط ارتفاعات النص و html على 100٪. نظرًا لأن الارتفاع يتم اعتباره بدون حشوة داخلية وخارجية (الحشو والهامش) ، قمنا بتعيينها (الحشو) على 0 بحيث لا توجد أشرطة تمرير.

  الحشوة السفلية للعنصر "العائم" ناقص نصف ارتفاع المحتوى (400 بكسل) ، أي -200 بكسل ؛

  يجب أن تبدو صفحتك الآن كما يلي:

  

  عرض العنصر #centered 80٪. هذا يجعل موقعنا أضيق على الشاشات الصغيرة وأكثر اتساعًا على الشاشات الأكبر حجمًا. تبدو معظم المواقع قبيحة على الشاشات العريضة الجديدة في الزاوية اليسرى العليا. تعمل خصائص min-width و max-width أيضًا على تقييد صفحتنا بحيث لا تبدو واسعة جدًا أو ضيقة جدًا. لا يدعم Internet Explorer هذه الخصائص. يجب ضبطه على عرض ثابت.

  نظرًا لأن العنصر #centered مضبوطًا على الموضع: نسبي ، يمكننا استخدام الوضع المطلق للعناصر بداخله. ثم قم بتعيين الفائض: تلقائي ؛ للعنصر #content بحيث تظهر أشرطة التمرير إذا لم يكن هناك محتوى مناسب.

  الخطوه 3

  وآخر شيء سنفعله هو إضافة بعض التصميم لجعل الصفحة تبدو أكثر جاذبية. لنبدأ بالقائمة.

  #nav ul (list-style: none؛ padding: 0؛ margin: 20px 0 0 0؛ text-indent: 0؛) #nav li (padding: 0؛ margin: 3px؛) #nav li a (display: block؛ لون الخلفية: # e8e8e8 ؛ الحشو: 7 بكسل ؛ الهامش: 0 ؛ زخرفة النص: لا شيء ؛ اللون: # 000 ؛ الحد السفلي: 1 بكسل صلب #bbb ؛ محاذاة النص: اليمين ؛) #nav li a :: after ( content: "" "؛ color: #aaa؛ font-weight: bold؛ display: inline؛ float: right؛ margin: 0 2px 0 5px؛) #nav li a: hover، #nav li a: focus (background: # f8f8f8؛ border-bottom-color: # 777؛) #nav li a: hover :: after (margin: 0 0 0 7px؛ color: # f93؛) #nav li a: active (padding: 8px 7px 6px 7px؛)

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

  لاحظ أننا حددنا بعد ذلك أنه يجب تقديم الروابط كعناصر على مستوى الكتلة. الآن ، عند عرضها ، يتم تمديدها عبر العرض الكامل للعنصر الذي توجد فيه.

  شيء آخر مثير للاهتمام استخدمناه في القوائم هو: قبل و: بعد الفصول الزائفة. أنها تسمح لك بإضافة شيء قبل وبعد عنصر. هذه طريقة جيدة لإضافة رموز أو رموز مثل سهم في نهاية كل رابط. هذه الحيلة لا تعمل في Internet Explorer 7 وما بعده.

  

  الخطوة 4

  وأخيرًا وليس آخرًا ، سنضيف بعض الحجاب لتصميمنا لمزيد من الجمال.

  #centered (-webkit-border-radius: 8px؛ -moz-border-radius: 8px؛ border-radius: 8px؛) h1، h2، h3، h4، h5، h6 (font-family: Helvetica، Arial، sans- serif؛ font-weight: normal؛ color: # 666؛) h1 (color: # f93؛ border-bottom: 1px solid #ddd؛ letter-spacing: -0.05em؛ font-weight: bold؛ margin-top: 0؛ padding-top: 0؛) #bottom (padding: 10px؛ font-size: 0.7em؛ color: # f03؛) #logo (font-size: 2em؛ text-align: center؛ color: # 999؛) #logo strong (font-weight: normal؛) #logo span (display: block؛ font-size: 4em؛ line-height: 0.7em؛ color: # 666؛) p، h2، h3 (line-height: 1.6em؛) أ (اللون: # f03 ؛)

  في هذه الأنماط ، قمنا بتعيين الزوايا الدائرية للعنصر #centered. في CSS3 ، سيتم التعامل مع هذا من خلال خاصية border-radius. لم يتم تنفيذ ذلك حتى الآن بواسطة بعض المتصفحات ، باستثناء استخدام البادئات -moz و -webkit لموزيلا فايرفوكس و Safari / Webkit.

  

  التوافق

  كما قد تكون خمنت ، فإن المصدر الرئيسي لمشاكل التوافق هو Internet Explorer:

  • يجب ضبط عنصر #floater على العرض
  • حشو إضافي حول القوائم في IE 6

  237152 المشاهدات

  فلاد مرزفيتش

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

  التمركز العمودي

  تتمثل إحدى طرق إظهار تركيز الموقع وعنوانه للزائر في استخدام صفحة البداية. هذه هي الصفحة الأولى التي يوجد فيها ، كقاعدة عامة ، مقدمة فلاش أو صورة تعبر عن الفكرة الرئيسية للموقع. الصورة هي أيضًا رابط لأقسام أخرى من الموقع. يلزم وضع هذه الصورة في منتصف نافذة المتصفح ، بغض النظر عن دقة الشاشة. لهذا الغرض ، يمكنك استخدام جدول بعرض وارتفاع يساوي 100٪ (مثال 1).

  مثال 1: توسيط الصورة

  محاذاة الجدول (العرض: 100٪ ؛ / * عرض الجدول * / الارتفاع: 100٪ ؛ / * ارتفاع الجدول * /)

  في هذا المثال ، يتم تعيين المحاذاة الأفقية باستخدام معلمة علامة align = "center" ، ولا تحتاج محتويات الخلية إلى توسيطها عموديًا ، حيث يتم تعيين هذا الموضع افتراضيًا.

  من أجل ضبط ارتفاع الجدول على 100٪ ، يجب إزالة الرمز ، لم يعد الرمز صالحًا.

  يضمن استخدام العرض والارتفاع لكامل المساحة المتاحة لصفحة الويب محاذاة محتويات الجدول بدقة في وسط نافذة المتصفح ، بغض النظر عن حجمها.

  محاذاة أفقية

  من خلال الجمع بين سمات المحاذاة (المحاذاة الأفقية) و valign (المحاذاة الرأسية) للعلامة ، يجوز تعيين عدة أنواع من مواضع العناصر بالنسبة لبعضها البعض. على التين. يوضح الشكل 1 كيفية محاذاة العناصر أفقيًا.

  لنلقِ نظرة على بعض الأمثلة على محاذاة النص وفقًا للشكل أدناه.

  محاذاة لأعلى

  لتحديد محاذاة محتويات الخلية للأعلى ، للعلامة يلزم تعيين سمة valign مع أعلى قيمة (المثال 2).

  مثال 2: استخدام valign

  تنسيق

  العمود 1

  العمود 2

  في هذا المثال ، يتم التحكم في خصائص الخلية باستخدام معلمات العلامات ، ولكنه أيضًا أكثر ملاءمة للتغيير من خلال الأنماط. على وجه الخصوص ، يتم تحديد محاذاة الخلية بخصائص المحاذاة الرأسية ومحاذاة النص (المثال 3).

  مثال 3: تطبيق أنماط المحاذاة

  جدول المحاذاة (العرض: 100٪ ؛ / * عرض الجدول * /) # col1 (العرض: 75٪ ؛ / * عرض العمود الأول * / الخلفية: # f0f0f0 ؛ / * لون خلفية العمود الأول * /) # col2 (العرض: 25 ٪ ؛ / * عرض العمود الثاني * / الخلفية: # fc5 ؛ / * لون خلفية العمود الثاني * / محاذاة النص: يمين ؛ / * محاذاة لليمين * /) # col1 ، # col2 (محاذاة رأسية: أعلى ؛ / * أعلى -محاذاة * / المساحة المتروكة: 5 بكسل ؛ / * المساحة المتروكة حول محتوى الخلية * /)

  العمود 1

  العمود 2

  لتقصير الكود ، يستخدم هذا المثال تجميع محدد لأنه يتم تطبيق خصائص المحاذاة الرأسية والحشو على خليتين في نفس الوقت.

  تتم المحاذاة للأسفل بنفس الطريقة ، ولكن يتم استخدام الجزء السفلي بدلاً من الأعلى.

  محاذاة للوسط

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

  

  في هذه الحالة ، توجد الصيغة بدقة في منتصف نافذة المتصفح ، ورقمها على الحافة اليمنى. لمثل هذا الترتيب من العناصر ، تحتاج إلى جدول به ثلاث خلايا. يجب أن يكون للخلايا الخارجية نفس الحجم ، في الخلية الوسطى تتم المحاذاة في المركز ، وفي الخلية اليمنى - على الحافة اليمنى (المثال 4). هذا العدد من الخلايا مطلوب لضمان توسيط الصيغة.

  مثال 4: محاذاة الصيغة

  تنسيق

  (18.6)

  في هذا المثال ، تُترك الخلية الأولى من الجدول فارغة ، وهي تعمل فقط على إنشاء مسافة بادئة ، والتي ، بالمناسبة ، يمكن أيضًا تعيينها باستخدام الأنماط.

  محاذاة عناصر النموذج

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

  

  لكي تتم محاذاة النص الموجود بالقرب من حقول النموذج إلى اليمين ، وتكون عناصر النموذج نفسها محاذاة إلى اليسار ، فأنت بحاجة إلى جدول به حد غير مرئي وعمودين. سيحتوي العمود الأيسر على النص نفسه ، وسيحتوي العمود الأيمن على حقول نصية (مثال 5).

  مثال 5 محاذاة حقول النموذج

  تنسيق

  اسم
  بريد إلكتروني
  تعليق

  في هذا المثال ، تمت إضافة سمة align = "right" للخلايا التي تتطلب المحاذاة الصحيحة. لكي يتم وضع التسمية "تعليق" في الحد العلوي للنص متعدد الأسطر ، يتم تعيين الخلية المقابلة على محاذاة أعلى باستخدام سمة valign.

• المغلق ،
• لغة البرمجة

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

نعم ، بالنسبة للمحاذاة الرأسية في CSS ، توجد خاصية محاذاة رأسية خاصة مع العديد من القيم. ومع ذلك ، في الممارسة العملية لا يعمل كما هو متوقع. دعنا نحاول معرفة ذلك.


دعنا نقارن الأساليب التالية. المحاذاة مع:

• الجداول،
• المسافة الفارغة،
• ارتفاع خط ،
• تمتد
• هامش سلبي ،
• تحول ،
• عنصر زائف
• فليكس بوكس.
كتوضيح ، ضع في اعتبارك المثال التالي.



يوجد عنصرا div ، أحدهما متداخل في الآخر. دعونا نعطيهم الفئات المناسبة - الخارجي والداخلي.


الهدف هو محاذاة العنصر الداخلي لمركز العنصر الخارجي.

بادئ ذي بدء ، ضع في اعتبارك الحالة عندما تكون أحجام الكتل الخارجية والداخلية معروفة. دعنا نضيف العرض: inline-block إلى العنصر الداخلي ، و text-align: center and vertical-align: في المنتصف إلى العنصر الخارجي.

تذكر أن المحاذاة تنطبق فقط على العناصر التي لها وضع العرض المضمن أو المضمن.

دعنا نضبط أحجام الكتل ، وكذلك ألوان الخلفية لرؤية حدودها.

خارجي (العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ محاذاة النص: المركز ؛ المحاذاة الرأسية: الوسط ؛ لون الخلفية: #ffc ؛) الداخل (العرض: كتلة مضمنة ؛ العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ لون الخلفية : #fcc؛)
بعد تطبيق الأنماط ، سنرى أن الكتلة الداخلية تتم محاذاتها أفقيًا ، ولكن ليس عموديًا:
http://jsfiddle.net/c1bgfffq/

لماذا حصل هذا؟الحقيقة هي أن خاصية المحاذاة الرأسية تؤثر على محاذاة العنصر نفسه ، وليس محتواه (إلا عندما يتم تطبيقه على خلايا الجدول). لذلك ، فإن تطبيق هذه الخاصية على العنصر الخارجي لم يفعل شيئًا. علاوة على ذلك ، فإن تطبيق هذه الخاصية على العنصر الداخلي لن يفعل شيئًا أيضًا ، نظرًا لأن الكتل المضمنة تتماشى عموديًا مع الكتل المجاورة ، وفي حالتنا لدينا كتلة مضمنة واحدة.

هناك عدة تقنيات لحل هذه المشكلة. دعونا نلقي نظرة فاحصة على كل منهم أدناه.

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

http://jsfiddle.net/c1bgfffq/1/

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

يمكن إزالة أول ناقص جزئيًا عن طريق استبدال علامات الجدول و td بـ div وتعيين وضع عرض الجدول في CSS.


. router-wrapper (display: table؛) .outer (display: table-cell؛)
ومع ذلك ، فإن الكتلة الخارجية ستظل طاولة مع كل النتائج المترتبة على ذلك.

المحاذاة باستخدام الحشو إذا كانت ارتفاعات الصندوق الداخلي والخارجي معروفة ، فيمكن ضبط المحاذاة باستخدام الحشو الرأسي للمربع الداخلي باستخدام الصيغة: (H خارجي - H داخلي) / 2.

خارجي (ارتفاع: 200 بكسل ؛) داخلي (ارتفاع: 100 بكسل ؛ الهامش: 50 بكسل 0 ؛)
http://jsfiddle.net/c1bgfffq/6/

عيب الحل هو أنه قابل للتطبيق فقط في عدد محدود من الحالات عندما تكون ارتفاعات كلتا الكتلتين معروفة.

المحاذاة مع ارتفاع السطر إذا كنت تعلم أن المربع الداخلي يجب ألا يشغل أكثر من سطر واحد من النص ، يمكنك استخدام خاصية ارتفاع السطر وتعيينها على ارتفاع المربع الخارجي. نظرًا لأن محتوى الكتلة الداخلية يجب ألا يلتف إلى السطر الثاني ، فمن المستحسن إضافة مسافة بيضاء: nowrap and overflow: hidden rules أيضًا.

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (مسافة بيضاء: nowrap ؛ تجاوز: مخفي ؛)
http://jsfiddle.net/c1bgfffq/12/

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

خارجي (ارتفاع: 200 بكسل ؛ ارتفاع الخط: 200 بكسل ؛). داخلي (ارتفاع الخط: عادي ؛ عرض: كتلة مضمنة ؛ محاذاة رأسية: وسط ؛)
http://jsfiddle.net/c1bgfffq/15/

عيب هذه الطريقة هو أنه يجب معرفة ارتفاع الكتلة الخارجية.

المحاذاة باستخدام "التمدد" يمكن استخدام هذه الطريقة عندما يكون ارتفاع الكتلة الخارجية غير معروف ، ولكن ارتفاع الكتلة الداخلية معروف.

لهذا تحتاج:

• تعيين الوضع النسبي للكتلة الخارجية ، وتحديد المواقع المطلقة للكتلة الداخلية ؛
• أضف القواعد أعلى: 0 وأسفل: 0 إلى الكتلة الداخلية ، ونتيجة لذلك ستمتد إلى الارتفاع الكامل للكتلة الخارجية ؛
• اضبط القيمة على تلقائي للحشو الرأسي للكتلة الداخلية.
.outer (position: النسبي ؛) .inner (الارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ الهامش: تلقائي 0 ؛)
http://jsfiddle.net/c1bgfffq/4/

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

المحاذاة مع قمة الهامش السالبة هذه التقنية معروفة على نطاق واسع وتستخدم كثيرًا. مثل السابق ، يتم تطبيقه عندما يكون ارتفاع الكتلة الخارجية غير معروف ، لكن ارتفاع الكتلة الداخلية معروف.

تحتاج إلى ضبط الكتلة الخارجية على تحديد المواقع النسبي ، والكتلة الداخلية على تحديد الموضع المطلق. تحتاج بعد ذلك إلى تحريك الصندوق الداخلي لأسفل بمقدار نصف ارتفاع الجزء العلوي من الصندوق الخارجي: 50٪ وتحريكه لأعلى بمقدار نصف ارتفاع الهامش العلوي الخاص به: -H الجزء الداخلي / 2.

خارجي (موضع: نسبي ؛). داخلي (ارتفاع: 100 بكسل ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ قمة الهامش: -50 بكسل ؛)
http://jsfiddle.net/c1bgfffq/13/

عيب هذه الطريقة هو أنه يجب معرفة ارتفاع الوحدة الداخلية.

المحاذاة مع التحويل تشبه هذه الطريقة الطريقة السابقة ، ولكن يمكن استخدامها عندما يكون ارتفاع الصندوق الداخلي غير معروف. في هذه الحالة ، بدلاً من تعيين حشوة سالبة بالبكسل ، يمكنك استخدام خاصية التحويل ورفع المربع الداخلي لأعلى باستخدام وظيفة translateY وقيمة -50٪.

خارجي (الموضع: نسبي ؛). داخلي (الموضع: مطلق ؛ أعلى: 50٪ ؛ تحويل: ترجمة Y (-50٪) ؛)
http://jsfiddle.net/c1bgfffq/9/

لماذا في الطريقة السابقة كان من المستحيل تحديد القيمة كنسبة مئوية؟ نظرًا لأن قيم النسبة المئوية لخاصية الهامش مرتبطة بالعنصر الأصلي ، فإن قيمة 50٪ ستساوي نصف ارتفاع الصندوق الخارجي ، وسنحتاج إلى رفع الصندوق الداخلي بمقدار نصف ارتفاعه. هذا هو بالضبط ما هي خاصية التحويل.

عيب هذه الطريقة هو أنه لا يمكن تطبيقها إذا كانت الكتلة الداخلية لها موضع مطلق.

المحاذاة مع Flexbox الطريقة الأكثر حداثة للمحاذاة الرأسية هي استخدام تخطيط الصندوق المرن (المعروف باسم Flexbox). تتيح لك هذه الوحدة التحكم بمرونة في مواضع العناصر على الصفحة ، ووضعها في أي مكان تقريبًا. تعد محاذاة مركز Flexbox مهمة بسيطة للغاية.

يجب ضبط الكتلة الخارجية على العرض: flex ، ويجب ضبط الكتلة الداخلية على margin: auto. وهذا كل شيء! جميل، أليس كذلك؟

خارجي (عرض: مرن ؛ عرض: 200 بكسل ؛ ارتفاع: 200 بكسل ؛) داخلي (عرض: 100 بكسل ؛ هامش: تلقائي ؛)
http://jsfiddle.net/c1bgfffq/14/

عيب هذه الطريقة هو أن Flexbox مدعوم فقط من قبل المتصفحات الحديثة.

أي طريقة تختار؟ من الضروري الانطلاق من بيان المشكلة:
• من أجل المحاذاة الرأسية للنص ، من الأفضل استخدام الحشو الرأسي أو خاصية ارتفاع السطر.
• بالنسبة للعناصر ذات المواضع المطلقة ذات الارتفاع المعروف (مثل الأيقونات) ، فإن نهج الهامش العلوي السلبي مثالي.
• للحالات الأكثر تعقيدًا حيث يكون ارتفاع الكتلة غير معروف ، يجب استخدام عنصر زائف أو خاصية التحويل.
• حسنًا ، إذا كنت محظوظًا بما يكفي لعدم الحاجة إلى دعم الإصدارات القديمة من IE ، فبالطبع فإن Flexbox أفضل.