بهم ریختن icon‌ها و نامرتب شدن بخش هدر

درود

این مشکل اغلب به دلیل ترکیب آیکون با متن برای همه پیش میاد و باید با padding و margin مدیریت بشه.

با همین ابزار inspector اندازه‌های مناسب رو پیدا کنید و بعد به استایل اضافه کنید.

نازنین کریمی مقدم ۱۸ مرداد ۱۴۰۱، ۱۵:۵۵

دقیقا icon با متن ترکیب شده

ولی من می‌خوام که icon music به اون طرف صفحه بره ولی هر کاری می‌کنم با جابجایی icon متن هم جابجا میشه.

Max Richard ۱۸ مرداد ۱۴۰۱، ۱۶:۱۳

چرا ساختار این نوار رو مشابه با هدر بالا در نظر نمیگیرید؟

اینطوری میتونید آیکون موزیک رو مثل شبکه‌های اجتماعی بفرستید اون سمت و آیکون و متن خانه این سمت باشه.

نازنین کریمی مقدم ۱۸ مرداد ۱۴۰۱، ۱۶:۲۶

شما می‌تونید کد‌های منو برسی کنید و بعدا مشکل‌ها رو به من بگید

Max Richard ۱۸ مرداد ۱۴۰۱، ۱۶:۳۲

من بخش اون در هم ریختن icon bars و icon music در بخش گوشی درست کردم ولی در بخش کامپیوتر بهم ریخت

نباید متن‌های home , new songs و... به طرف راست برن باید به سمت چپ برن ولی با تغییر دادن icon music متن‌ها هم به حرکت در میان

Max Richard ۱۹ مرداد ۱۴۰۱، ۰۸:۰۴

سلام مجدد

اول من یه توضیح بدم در این خصوص، فکر کنم به دردتون بخوره:

همونطور که استاد در آموزشها توضیح دادند، ما هر سطر رو 12 ستون در نظر میگیریم. یعنی اگر شما میخواید اون آیکون موزیک بیاد سمت راست دو راه دارید:

مشابه با نوار بالا که به دو قسمت تقسیم کردیم، اینجا هم به دو قسمت تقسیمش کنیم. منتها چون صرفا یدونه آیکون میخوایم تو راست بشینه، بهتر هست یه قسمت رو 1 و قسمت دیگه رو 11 درنظر بگیریم.
همه چیز همین مدلی باشه منتها جدا به آیکون موزیک پدینگ و پوزیشن و... بدیم که این راه اصلا استاندارد نیست.

الان تو کدی که پیوست کردم من راه اول رو نوشتم و به هیچ جای کدتون دست نزدم، تست که کنید میبینید اوکی شده.

7a8c-max richard answer.PNG

برقرار باشید

نازنین کریمی مقدم ۲۱ مرداد ۱۴۰۱، ۱۳:۵۹

سلام و درود

با وجود اینکه خودم پیش‌تر این راه رو امتحان کرده بودم

ولی متن‌ها حرکت کردن ولی icon حرکت نکرد

ولی به 2 خط تبدیل شدن

Max Richard ۲۲ مرداد ۱۴۰۱، ۰۶:۴۲

دقت کنید که باید جای آیکون منو رو هم عوض کنید.

من روی رزولوشن و ابعاد شما کد رو تست کردم و مشکلات درون تصویر رو نداره. پروژه ای که پیوست کردم رو دانلود و اجرا کنید انشالله براتون اوکی هست.

نازنین کریمی مقدم ۲۲ مرداد ۱۴۰۱، ۰۷:۴۲

ممنون از راهنمایی تون این بخش از مشکل حل شد

Max Richard ۲۲ مرداد ۱۴۰۱، ۱۳:۵۴

ولی هنوزم که هنوزه یه مشکلی هست

نمیشه که icon bars با متن home تو 2 خط متفاوت باشه

Max Richard ۲۲ مرداد ۱۴۰۱، ۱۳:۵۶

چرا اون کار هم شدنی هست. کافیه که دو کلاس nav.responsive رو یکی کنید: یعنی به جای این دو کلاس،

    .nav.responsive a.icon {
        float: none;
        display: block;
        text-align: left;
    }
    .nav.responsive a:not(.icon-) {
        float: none;
        display: block;
        text-align: left;
    }

این کد رو بنویسید:

    .nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

اگر پاسخ تون رو گرفتید ممنون میشم تیک پاسخ گرفتن رو بزنید که تاپیک از وضعیت پیگیری دربیاد.

بهترین پاسخ

نازنین کریمی مقدم ۲۴ مرداد ۱۴۰۱، ۰۵:۳۸

دسته ت خوش به ت ممنونم

Max Richard ۲۴ مرداد ۱۴۰۱، ۰۷:۲۵