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

Abdu Rlhman · 30 مايو

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 مايو

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

Mustafa Suleiman · 31 مايو

إما أنك لم تقم بحفظ الكود ثم تحديث الصفحة لتظهر التحديثات، أو هناك مشكلة في الكود مثل عدم توافق أسماء الكلاسات مع هيكل 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 مايو

بتاريخ 20 ساعة قال محمد_عاطف:

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

بتاريخ 6 ساعة قال 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 مايو

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

بتاريخ 21 ساعة قال 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 مايو

بتاريخ 21 ساعة قال محمد_عاطف:

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

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

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

بتاريخ 21 ساعة قال 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 مايو

بتاريخ 5 دقائق مضت قال Abdu Rlhman:

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

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

Abdu Rlhman · 31 مايو

بتاريخ 4 دقائق مضت قال محمد_عاطف:

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

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

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

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

بتاريخ 16 دقائق مضت قال محمد_عاطف:

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

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

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

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

السؤال

Abdu Rlhman

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

Recommended Posts

محمد عاطف17

Mustafa Suleiman

Abdu Rlhman

محمد عاطف17

Abdu Rlhman

محمد عاطف17

Abdu Rlhman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية