اجرا نشدن درست تگ ها

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

سلام خسته نباشید من جلسه‌های قبل این سرفصل رو نوشتم ولی به درستی اجرا نمیشن میشه مشکلشو دربیارین؟

این هم تگ css

یلدا خداوردی ۲۸ شهریور ۱۴۰۴، ۱۵:۰۸

https://drive.google.com/file/d/1eI1ZHivs2_c5PFxg2USVooB2lkbm_LnB/view?usp=drive_link

یلدا خداوردی ۲۸ شهریور ۱۴۰۴، ۱۵:۰۸

https://drive.google.com/file/d/1wWFEkxcmWcwtcXtHTiyOwgkZWgNlopZi/view?usp=drive_link

یلدا خداوردی ۲۸ شهریور ۱۴۰۴، ۱۵:۰۹

سلام وقت بخیر

دو تا لینک که قرار دادید، برای همه قابل دسترس نیست باید از تنظیمات محدودیت رو بردارید

ترجیحا کدتون رو کدپن قرار بدید و بفرستید

بهترین پاسخ

محمد رضایی ۲۸ شهریور ۱۴۰۴، ۱۶:۳۵

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

یلدا خداوردی ۲۹ شهریور ۱۴۰۴، ۰۹:۴۸

سلام. وقتتون بخیر

مشکلتون چی هست در لاگین؟

با فیلترشکن وارد کدپن بشید و لاگین کنید لطفا.

سحر پاشائی ۲۹ شهریور ۱۴۰۴، ۰۹:۵۳

کلا میگه در دسترس نیست

یلدا خداوردی ۲۹ شهریور ۱۴۰۴، ۱۰:۰۶

برای اینکه کدی رو جایی قرار بدید،

گزینه اول: گیت هاب هست، اگه هنوز یاد نگرفتید عیب نداره ولی سعی بکنید تو سریع‌ترین زمان ممکن یاد بگیرید

گزینه دوم: کدپن هست، که فقط هنگام ثبت‌نام و ورود نیاز به فیلترشکن هست نمی‌دونم حالا مشکل شما چیه الان که من دارم پاسخ میدم باز میشه(توی کروم اکستنشن veepn نصب و مجدد امتحان کنید)

گزینه سوم: گوگل درایو هست، که خودتون به همین طریق فرستاده بودید ولی برای همه دسترسی ندادید، ترجیحا فایل‌ها رو به zip تبدیل بکنید و بعد آپلود این مراحل رو که پایین قرار دادم رو طی بکنید تا هرکسی بتونه به فایل دسترسی داشته باشه:

مرحله1: روی فایل موردنظر راست کلیک بکنید

مرحله2:

مرحله3:

مرحله4:

و بعد این مراحل و زدن done، کپی لینک رو انجام بدید و بفرستید

محمد رضایی ۲۹ شهریور ۱۴۰۴، ۱۱:۴۳

https://drive.google.com/file/d/1wWFEkxcmWcwtcXtHTiyOwgkZWgNlopZi/view?usp=sharing

یلدا خداوردی ۳۰ شهریور ۱۴۰۴، ۰۸:۲۳

https://drive.google.com/file/d/1eI1ZHivs2_c5PFxg2USVooB2lkbm_LnB/view?usp=sharing

یلدا خداوردی ۳۰ شهریور ۱۴۰۴، ۰۸:۲۴

سلام. وقت بخیر
چند مورد از ایرادات کد:
1. تو HTML از کلاس‌های col-s-* و col-xl-* استفاده کردید ولی این کلاس‌ها تو CSS تعریف نشدن، پس بخش‌هایی اصلا استایل نمی‌گیرن.

2. <div>های تودرتو گذاشتید که بعضیا بسته نشدن یا درجای درست بسته نشدن.

3. داخل .row باید فقط ستون‌ها باشن؛ ولی یک <div class="card"> بدون کلاس‌های col-* بین ستون‌ها اومده و گرید رو می‌شکنه.

4. container-fluid و img-responsive رو تو CSS تعریف نکردید در نتیجه نوار بالا تمام‌عرض نمی‌شه و تصویر ریسپانسیو نیست.

5. سلسله‌مراتب بخش محتوا مبهمه: کارت باید داخل ستون محتوا باشد، شما بین aside و article قرار دادین.

اصلاح شده:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css.css" />
  <title>Document</title>
  <style>
    ul.menu li { padding: 10px; margin: 30px; text-align: center; }
    .card { border: 1px solid #efefef; font-size: 16px; }
    .box-shadow { box-shadow: 0 0 2px 0 #d0d0d0; }
    .card-header { border-bottom: 1px solid yellowgreen; padding: 10px; }
    .card-body { padding: 10px; }
  </style>
</head>
<body>
  <div class="container-fluid blueviolet-color">
    <div class="row">
      <ul class="menu">
        <li>
          <a href="">home</a>
          <a href="">learning options</a>
          <a href="">contact with us</a>
          <a href="">about us</a>
          <a href="">exit</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="row mb">
      <div class="col-xs-12 col-md-12 col-l-12">
        <img class="img-responsive" src="./img/selena-gomez-photo-2.jpg" alt="">
      </div>
    </div>
    <div class="row">
      <aside class="col-xs-12 col-md-4 col-l-4">sidebar</aside>
      <article class="col-xs-12 col-md-8 col-l-8">
        <div class="card box-shadow round-corner">
          <div class="card-header">
            <h5>the newest articles</h5>
          </div>
          <div class="card-body">content</div>
        </div>
      </article>
    </div>
  </div>
</body>
</html>

CSS

/* افزودنی‌های ضروری */
.container-fluid { width: 100%; margin: 0; }
.img-responsive { max-width: 100%; height: auto; display: block; }
/* بقیه‌ی CSS شما بدون تغییرهای غیرضروری */
.para{ font-size:40px;color:blueviolet;background-color:darkgoldenrod; }
@media screen and (min-width:600px) and (max-width:800px){
  body{ background-color:aquamarine; }
}
.blueviolet-color{ background-color:blueviolet; }
.chartreuse-color{ background-color:chartreuse; }
.cadetblue-color{ background-color:cadetblue; }
.container{ max-width:1200px; margin-left:auto; margin-right:auto; }
.row::after{ content:''; clear:both; display:table; margin:20px; }
[class^="col"]{ float:right; padding-left:15px; padding-right:15px; }
.mb{ margin-bottom:20px; }
.round-corner{ border-radius:5px; }
/* xs */
@media screen and (max-width:576px){
  .col-xs-1{width:8.33%} .col-xs-2{width:16.66%} .col-xs-3{width:25%}
  .col-xs-4{width:33.33%} .col-xs-5{width:41.66%} .col-xs-6{width:50%}
  .col-xs-7{width:58.33%} .col-xs-8{width:66.66%} .col-xs-9{width:75%}
  .col-xs-10{width:83.33%} .col-xs-11{width:91.66%} .col-xs-12{width:100%}
  .col-xs-offset-1{margin-right:8.33%} /* ... بقیه‌ی offsetها همان قبلی ... */
}
/* md */
@media screen and (min-width:576px) and (max-width:992px){
  .col-md-1{width:8.33%} .col-md-2{width:16.66%} .col-md-3{width:25%}
  .col-md-4{width:33.33%} .col-md-5{width:41.66%} .col-md-6{width:50%}
  .col-md-7{width:58.33%} .col-md-8{width:66.66%} .col-md-9{width:75%}
  .col-md-10{width:83.33%} .col-md-11{width:91.66%} .col-md-12{width:100%}
}
/* l */
@media screen and (min-width:992px){
  .col-l-1{width:8.33%} .col-l-2{width:16.66%} .col-l-3{width:25%}
  .col-l-4{width:33.33%} .col-l-5{width:41.66%} .col-l-6{width:50%}
  .col-l-7{width:58.33%} .col-l-8{width:66.66%} .col-l-9{width:75%}
  .col-l-10{width:83.33%} .col-l-11{width:91.66%} .col-l-12{width:100%}
}

سحر پاشائی ۳۰ شهریور ۱۴۰۴، ۱۲:۱۰

ممنون از توضیحات خانم پاشائی، منم همزمان داشتم روی این مشکل کار می‌کردم حالا که پاسخ داده شده

من با flex و grid ایجاد کردم، جلوتر که به سرفصل این دو مبحث مهم رسیدید حتما این تمرین رو نگاهی بکنید

لینک‌های موردنیاز رو پایین قراردادم:
گیت هاب | کدپن | مشاهده آنلاین

محمد رضایی ۳۰ شهریور ۱۴۰۴، ۱۴:۱۹

https://drive.google.com/file/d/1eI1ZHivs2_c5PFxg2USVooB2lkbm_LnB/view?usp=sharing

یلدا خداوردی ۳۰ شهریور ۱۴۰۴، ۱۷:۱۶

https://drive.google.com/file/d/1wWFEkxcmWcwtcXtHTiyOwgkZWgNlopZi/view?usp=sharing

یلدا خداوردی ۳۰ شهریور ۱۴۰۴، ۱۷:۱۸

سلام.خسته نباشید، مشکل قبلی تا حدودی فک کنم رفع شد ولی توو جلسه ی اخر دوباره به یه مشکل خوردم اگه مشکه راه حلشو بگین ممنون

یلدا خداوردی ۳۰ شهریور ۱۴۰۴، ۱۷:۲۰

منظور از مشکل چی هست؟ با جزئیات بیشتر توضیح بدید

درضمن استاد فایل‌ها رو جلسه آخر قسمت پیوست قرار دادن، دانلود بکنید و با کدی که نوشتید مقایسه بکنید

محمد رضایی ۳۱ شهریور ۱۴۰۴، ۰۲:۴۳

قسمت article کنار قسمت aside قرار نمیگیره و همزمان مقایسه هم کردم ولی ایرادشو متوجه نشدم

یلدا خداوردی ۳۱ شهریور ۱۴۰۴، ۰۶:۴۲

این کد‌ها رو اول فایل css اضافه نکرده بودید:

*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* این قسمت باعث میشد که مشکل بشه */
  font-family: Vazir-Medium;
}
body {
  direction: rtl;
}
a {
  text-decoration: none;
}
li,
ol,
ul {
  list-style: none;
}

اینجا هم علامت دَش یادتون رفته بود:

[class^="col-"] {/* col- */
  float: right;
  padding-left: 15px;
  padding-right: 15px;
}

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

محمد رضایی ۳۱ شهریور ۱۴۰۴، ۰۸:۰۱