راکت
حل شده

مشکل DOCTYPE

18 پاسخ

سلام کد زیر رو ببینید وقتی <DOCTYPE html!> رو اضافه می کنم یک خط قرمز به زیر body اضافه میشه حالا مشکل خط قرمز نیست اینکه چرا این اتفاق میفته مهمه.



<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>خطای 404</title>
    <link rel="stylesheet" href="https://roocket.ir/../style/reset.css">
    <style>
    body {
        display: flex;
        background: linear-gradient(red,aqua);
        background-size: 100%;
        align-items: center;
        justify-content: center;
flex-direction: column;
height: cover;
    }
    </style>
</head>
<body>
    <img src="../image/browser.svg" alt="404 Page Not Found">
    <p>متاسفانه صفحه مورد نظر یافت نشد!</p>
</body>
</html>

این هم خروجی با background-size امتحان کردم ولی نمیشه
http://s11.picofile.com/file/8393096100/fgf.JPG

ثبت پرسش جدید

پاسخ‌ها

18
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

بهترین پاسخ

مقدار پیش فرضش برابر با اندازه ی محتوای عنصر شماست، چه عنصر html باشه، چه عنصر body باشه و چه موارد دیگه باشند.
https://developer.mozilla.org/en-US/docs/Web/CSS/height

miladhacker
miladhacker
@miladhack84

تخصص: html , css , wordprss , javascript , laravel

سلام خروجی شما الان چی هست

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

عکسی که زیر کد گذاشتم😐
@miladhack84

شاید پاسخ شما همین‌جا باشد

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

این خط رو اضافه کن:

html { height: 100% }
آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

مگه قانونا نباید اینجوری باشه ؟
@milad

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

@milad
مشکل حل شد اما وقتی اندازه تصویر رو تغییر دادم و یا صفحه مرورگر رو بزرگ تر کردم باز به همین مشکل خوردم.
معلوم نیست این doctype با صفحه چیکار می کنه فلکس باک ها هم از کار انداخته

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

من تا به حال از doctype استفاده نمی کردم از وقتی که استفاده می کنم کلا فلکس ها و اندازه هام کلا ریخته بهم حالا من باید چیکار کنم
@miladhack84 @ali.bayat @milad @hesammousavi @juza66 @hossein.r.1442 @elyasbeshkani @endworld @mohsenbostan @rezajashnsaz0011

الیاس سخاوتی نیا
الیاس سخاوتی نیا
@elyassir

تخصص: علاقه‌مند به برنامه‌‎نویسی

@arminamirinasab
خب استفاده نکنین 😐😂🤦‍♂️

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

آخه نمیشه که جز استاندارد های سئو هست و اینکه استاندارد برای همه مرورگر ها😐
@elyasbeshkani

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

مشکل جدیدتون نمیدونم چیه. متوجه مشکل جدید نشدم.

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

باز هم background تیکه تیکه میشه بعد از تغییر اندازه
@milad

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

یک نفر پاسخ بده این doctype چیکار می کنه تو صفحه من تا به حال بدون doctype کد می زدم و مشکلی نداشتم ولی حالا که استفاده می کنم تغییرات زیادی رو در صفحه می بینم.
فلکس های من دچار مشکل شد و اندازه بندی ها لطفا کمکم کنید این مشکل رو حل کنم
@ali.bayat @hesammousavi @hossein.r.1442 @mohsenbostan @elyasbeshkani @milad

علیرضا تحریری
علیرضا تحریری
@alirezatahriri

تخصص: لاراول، لایوایر و Tailwind css

@arminamirinasab سلام شما یک خطایی که دارید مقدار height: رو cover دادید:

    body {
        display: flex;
        background: linear-gradient(red,aqua);
        background-size: 100%;
        align-items: center;
        justify-content: center;
flex-direction: column;
height: 100%;
    }

این کار رو انجام بدید احتمالا درست میشه

سید حسین رضوی
سید حسین رضوی
@hossein.r.1442

تخصص: برنامه نویس وب و طراح رابط کاربری

شما توی یه مرورگر دیگه تست کن ببین باز هم همین مشکل پا برجاست، سعی کن با موزیلا باشه که موتورش با کروم یکی نیست
چون من هم فک میکنم توی دوورژن پاینتر کروم همیشه از همین doctype خطا میگرفت ولی الان ندارم همچین خطایی رو

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

تغییرش دادم مشکل از اون نیست
@alirezatahriri

آرمین امیری نسب
آرمین امیری نسب
@arminamirinasab

تخصص: برنامه نویس فرانت اند

تست کردم باز همین مشکل موجوده
@hossein.r.1442

سبحان دادخواه
سبحان دادخواه
@SobhanDadkhah

تخصص: دانشجوی برنامه نویسی :)

سلام . محتوای فایل css با اسم Reset که اضافه کردید چیه ؟ خودتون نوشتین ؟ یا همون سی اس اس ریست هست ؟

رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

درود...
اساسا در قرار گیری <DOCTYPE html!> نباید مشکل ایجاد کنه...
شاید مشکل از مرورگر باشه یا در تگ body بهش استایل دادید ...

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام