اذهب إلى المحتوى
  • 0

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

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;

}

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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

Snag_4d2cb3d.thumb.png.4b5c23bd37db8de94ae591496b086a06.png

<!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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

بتاريخ 6 ساعة قال Mustafa Suleiman:

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

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

Snag_4d2cb3d.thumb.png.4b5c23bd37db8de94ae591496b086a06.png

<!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>

 

 

17171731952733967223318170963971.jpg

17171732596459034928038008714685.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

بتاريخ 21 ساعة قال Abdu Rlhman:
header .navbar nav ul

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

image.thumb.png.3b86bf8e75f4949a0969b4b88d4d2035.png

ولكن في الصورة السابقة لاحظ أن 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;

}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

17171751197795833350040379605198.jpg

17171751331484385647938612504618.jpg

بتاريخ 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;

}

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

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

1717175233187637078921603848566.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

 

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...