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

درود

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

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

جواد رحمانیان ۱۸ مرداد ۱۴۰۱، ۱۵:۵۵

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

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

راشین محمدی ۱۸ مرداد ۱۴۰۱، ۱۶:۱۳

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

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

جواد رحمانیان ۱۸ مرداد ۱۴۰۱، ۱۶:۲۶

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

راشین محمدی ۱۸ مرداد ۱۴۰۱، ۱۶:۳۲

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

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

راشین محمدی ۱۹ مرداد ۱۴۰۱، ۰۸:۰۴

سلام مجدد

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

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

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

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

7a8c-max richard answer.PNG

برقرار باشید

جواد رحمانیان ۲۱ مرداد ۱۴۰۱، ۱۳:۵۹

سلام و درود

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

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

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

راشین محمدی ۲۲ مرداد ۱۴۰۱، ۰۶:۴۲

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

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

جواد رحمانیان ۲۲ مرداد ۱۴۰۱، ۰۷:۴۲

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

راشین محمدی ۲۲ مرداد ۱۴۰۱، ۱۳:۵۴

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

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

راشین محمدی ۲۲ مرداد ۱۴۰۱، ۱۳:۵۶

چرا اون کار هم شدنی هست. کافیه که دو کلاس 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;
    }

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

بهترین پاسخ

جواد رحمانیان ۲۴ مرداد ۱۴۰۱، ۰۵:۳۸

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

راشین محمدی ۲۴ مرداد ۱۴۰۱، ۰۷:۲۵