خطأ في تنسيق الصفحة

Abdu Rlhman · 30 مايو 2024

header .navbar nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1100px;

    margin: auto;

}

 

header .navbar nav ul {

    display: flex;

    justify-content: center;

    align-items: center;

}

لماذا لا يتم تنفيذ هذا الكود, لا توجد نتيجة عن تحديث الصفحة

محمد عاطف17 · 30 مايو 2024

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

Mustafa Suleiman · 31 مايو 2024

إما أنك لم تقم بحفظ الكود ثم تحديث الصفحة لتظهر التحديثات، أو هناك مشكلة في الكود مثل عدم توافق أسماء الكلاسات مع هيكل HTML لديك.

إليك كود متوافق مع التنسيقات التي لديك مع بعض التحسينات:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced NavBar</title>
    <style>
        header .navbar nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1100px;
            margin: auto;
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }

        header .navbar nav ul {
            display: flex;
            justify-content: center;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        header .navbar nav ul li {
            margin: 0 15px;
        }

        header .navbar nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

        header .navbar .logo {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }

        header .navbar .search-bar {
            display: flex;
            align-items: center;
        }

        header .navbar .search-bar input[type="text"] {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        header .navbar .search-bar button {
            padding: 5px 10px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 3px;
            margin-left: 5px;
        }
    </style>
</head>
<body>

<header>
    <div class="navbar">
        <nav>
            <div class="logo">MyLogo</div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="search-bar">
                <input type="text" placeholder="Search...">
                <button type="button">Search</button>
            </div>
        </nav>
    </div>
</header>

</body>
</html>

Abdu Rlhman · 31 مايو 2024

بتاريخ On 30‏/5‏/2024 at 19:32 قال محمد_عاطف:

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

أظهر المزيد

بتاريخ On 31‏/5‏/2024 at 09:52 قال Mustafa Suleiman:

إما أنك لم تقم بحفظ الكود ثم تحديث الصفحة لتظهر التحديثات، أو هناك مشكلة في الكود مثل عدم توافق أسماء الكلاسات مع هيكل HTML لديك.

إليك كود متوافق مع التنسيقات التي لديك مع بعض التحسينات:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced NavBar</title>
    <style>
        header .navbar nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1100px;
            margin: auto;
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }

        header .navbar nav ul {
            display: flex;
            justify-content: center;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        header .navbar nav ul li {
            margin: 0 15px;
        }

        header .navbar nav ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

        header .navbar .logo {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }

        header .navbar .search-bar {
            display: flex;
            align-items: center;
        }

        header .navbar .search-bar input[type="text"] {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        header .navbar .search-bar button {
            padding: 5px 10px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 3px;
            margin-left: 5px;
        }
    </style>
</head>
<body>

<header>
    <div class="navbar">
        <nav>
            <div class="logo">MyLogo</div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="search-bar">
                <input type="text" placeholder="Search...">
                <button type="button">Search</button>
            </div>
        </nav>
    </div>
</header>

</body>
</html>

أظهر المزيد

محمد عاطف17 · 31 مايو 2024

لاحظ الخطأ هنا

بتاريخ On 30‏/5‏/2024 at 19:22 قال Abdu Rlhman:
header .navbar nav ul
أظهر المزيد

حيث هذا الكود سيقوم بتنفيذ التنسيق على العنصر ul الذى يوجد بداخل nav الذى يوجد بداخل navbra. الذى يوجد بداخل header .

ولكن في الصورة السابقة لاحظ أن ul بداخل navbar. وليس nav .

إذا الحل كالتالي :

header .navbar nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1100px;

    margin: auto;

}

 

header .navbar ul {

    display: flex;

    justify-content: center;

    align-items: center;

}

Abdu Rlhman · 31 مايو 2024

بتاريخ On 30‏/5‏/2024 at 19:32 قال محمد_عاطف:

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

أظهر المزيد

عدلت التنسيق ولسا الخطأ متواجد لا يتم التنفيد

لانه الصورة الأولى قبل شوي كانت مو الصح التي اريد تعديلها

بتاريخ On 30‏/5‏/2024 at 19:22 قال Abdu Rlhman:
header .navbar nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1100px;

    margin: auto;

}

 

header .navbar nav ul {

    display: flex;

    justify-content: center;

    align-items: center;

}
لماذا لا يتم تنفيذ هذا الكود, لا توجد نتيجة عن تحديث الصفحة
أظهر المزيد

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

محمد عاطف17 · 31 مايو 2024

بتاريخ On 31‏/5‏/2024 at 17:06 قال Abdu Rlhman:

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

أظهر المزيد

من فضلك قم بإرسال ملفات المشروع لديك و إخبارى بالخطأ لديك أو ما الذى تريد تنفيذه ولا يعمل

Abdu Rlhman · 31 مايو 2024

بتاريخ On 31‏/5‏/2024 at 17:12 قال محمد_عاطف:

من فضلك قم بإرسال ملفات المشروع لديك و إخبارى بالخطأ لديك أو ما الذى تريد تنفيذه ولا يعمل

أظهر المزيد

النتيجة النهائية للكود الكتابة الموجودة من المفترض يكون جزء الhome وتبعاته يمين الصفحة والاسم الي هوا abdurlhman ks يسار الصفحة

بالكود المكتوب افتح الملف تو تلاحظ الخطأ

ثم ارجع لقراءة الاقتباسindex.html

بتاريخ On 31‏/5‏/2024 at 17:12 قال محمد_عاطف:

من فضلك قم بإرسال ملفات المشروع لديك و إخبارى بالخطأ لديك أو ما الذى تريد تنفيذه ولا يعمل

أظهر المزيد

تم الحل حبيبي تسلم

نفذت ما قلت في تعليقك السابق

خطأ في تنسيق الصفحة

السؤال

Abdu Rlhman

7 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

Mustafa Suleiman

Abdu Rlhman

محمد عاطف17

Abdu Rlhman

محمد عاطف17

Abdu Rlhman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية