خدا قوت سلام

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

سلام چرا منو ساید بار و تصویرم وسط داکیومنتم قرار نگرفته

https://s8.uupload.ir/files/screenshot_2024-09-23_212034_psm9.png

درود. وقت بخیر

با روش‌های مختلف مثل

Margin: 0 auto;

یا فلکس می‌تونید بیارید وسط.

دقت کنید به عنصر درست پراپرتی‌ها رو اعمال کنید و عنصر بلاکی باشه.

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

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

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<style>
  ul.menu li{
    display: inline;
    margin: 20px;
    line-height: 70px;
  }
  .card{
    border: 1px solid #efefef;
    padding: 10px;
    font-size:16px ;
  }
  .card-header{
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
  }
</style>
<body>
 <nav class="container-fluid gray-Color">
  <div class="row">
    <div class="container">
      <div class="row"><ul class="menu">
        <li><a href="">خانه</a></li>
        <li><a href="">دوره‌های اموزشی</a></li>
        <li><a href="">تماس با ما</a></li>
        <li><a href="">درباره ما</a></li>
      </ul></div>
    </div>
  </div>
 </nav>
 <section class="container  mt-20">
  <div class="row">
    <div class="col-xs-12">
      <img class="img-responsive" src="../imag/p.png" alt="">
    </div>
  </div>
 </section>
 <section class="container">
  <div class="row">
   <aside class="col-xs-12  col-md-4 col-l-4 col-xl-4">
    <div class="card box-shadow">
      <div class="card-header">
        <h5>جدیدترین مقالات</h5>
      </div>
      <div class="card-body">
        <ui>
          <li><a href="">دوره طراحی وب</a></li>
          <li><a href="">دوره php</a></li>
          <li><a href="">طراحی واکنشگرا</a></li>
        </ui>
      </div>
    </div>
   </aside>
   <article class="col-xs-12 col-md-8 col-l-8 col-xl-8">jjjj</article>
  </div>
 </section>
</body>
</html>

rojin ۰۲ مهر ۱۴۰۳، ۱۹:۴۷

مشکل رو پیدا نمیکنم ! مچکرم

rojin ۰۲ مهر ۱۴۰۳، ۱۹:۴۸

اینم از css
.container-fluid {
  width: 100%;
}
.container{
  clear: both;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.row::after{
  content: "";
  clear: both;
  display: table;
}
.round-corner{
  border-radius: 5px;
}
.img-responsive{
  width: 100%;
  height:auto;
}
.mb-20{
  margin-bottom: 20px;
}
.mt-20{
  margin-top: 20px;
}
.box-shadow{
  box-shadow: 1px 1px 1px #efefef;
}
.gray-Color{
  background-color: gray;
}
 [class ^=col-] {
  float: right;
}
@media only screen and (max-width:600px) {
.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%;
}
}
@media  only screen and (min-width:768px) {
.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%;
}
}
@media only 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%;
}
}
@media only screen and (min-width:1200px) {
.col-xl-1 {
  width: 8/33%;
}
.col-xl-2 {
  width: 16/66%;
}
.col-xl-3 {
  width: 25%;
}
.col-xl-4 {
  width: 33/33%;
}
.col-xl-5 {
  width: 41/66%;
}
.col-xl-6 {
  width: 50%;
}
.col-xl-7 {
  width: 58/33%;
}
.col-xl-8 {
  width: 66/66%;
}
.col-xl-9 {
  width: 75%;
}
.col-xl-10 {
  width: 83/33%;
}
.col-xl-11 {
  width: 91/66%;
}
.col-xl-12 {
  width: 100%;
}
}

rojin ۰۲ مهر ۱۴۰۳، ۱۹:۵۰

اینم از css
.container-fluid {
  width: 100%;
}
.container{
  clear: both;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.row::after{
  content: "";
  clear: both;
  display: table;
}
.round-corner{
  border-radius: 5px;
}
.img-responsive{
  width: 100%;
  height:auto;
}
.mb-20{
  margin-bottom: 20px;
}
.mt-20{
  margin-top: 20px;
}
.box-shadow{
  box-shadow: 1px 1px 1px #efefef;
}
.gray-Color{
  background-color: gray;
}
 [class ^=col-] {
  float: right;
}
@media only screen and (max-width:600px) {
.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%;
}
}
@media  only screen and (min-width:768px) {
.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%;
}
}
@media only 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%;
}
}
@media only screen and (min-width:1200px) {
.col-xl-1 {
  width: 8/33%;
}
.col-xl-2 {
  width: 16/66%;
}
.col-xl-3 {
  width: 25%;
}
.col-xl-4 {
  width: 33/33%;
}
.col-xl-5 {
  width: 41/66%;
}
.col-xl-6 {
  width: 50%;
}
.col-xl-7 {
  width: 58/33%;
}
.col-xl-8 {
  width: 66/66%;
}
.col-xl-9 {
  width: 75%;
}
.col-xl-10 {
  width: 83/33%;
}
.col-xl-11 {
  width: 91/66%;
}
.col-xl-12 {
  width: 100%;
}
}

rojin ۰۲ مهر ۱۴۰۳، ۱۹:۵۰

سلام مجدد، با این تغییرات تصویر و سایدبار، هردو میان وسطِ صفحه:
این بخش از کد HTML رو به این صورت تغییر بدید:

<section class="container mt-20">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-md-8">
      <img
        class="img-responsive"
        src="Assets/images/about-us-man.jpg"
        alt=""
      />
    </div>
  </div>
</section>
<section class="container">
  <div class="row justify-content-center">
    <aside class="col-xs-12 col-md-4">
      <div class="card box-shadow">
        <div class="card-header">
          <h5>جدیدترین مقالات</h5>
        </div>
        <div class="card-body">
          <ul>
            <li><a href="">دوره طراحی وب</a></li>
            <li><a href="">دوره برنامه‌نویسی</a></li>
            <li><a href="">دوره تحلیل داده</a></li>
          </ul>
        </div>
      </div>
    </aside>
  </div>
</section>

این بخش از کد CSS هم اضافه بشه:

.row {
  display: flex;
  justify-content: center; /* برای وسط‌چینی محتوا */
}
.card {
  border: 1px solid #efefef;
  padding: 10px;
  font-size: 16px;
  margin: 20px; /* به فاصله‌های بین کارت‌ها توجه کنید */
}
.card-header {
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
}

justify-content: center; در کلاس .row برای وسط‌چینی سطرها استفاده شده.

margin برای کارت‌ها اضافه شده تا فاصله‌ی مناسبی بین اون‌ها ایجاد کنه.

سحر پاشائی ۰۳ مهر ۱۴۰۳، ۰۷:۰۷

معذرت میخوام خانوم پاشائی عزیز.....سوالم رو احتمالا خوب نپرسیدم و نامرتب شد ! از justify-content:center; استفاده کردم imag و منو رو وسط چین کرد ولی من نمیخوام ساید بارم وسط چین شه .....سایدبارم باید سمت راست قرار بگیره و محتوام سمت چپ ....ساید بارم col-xs-12 col-md-4 و محتوام col-xs-12 col-md-8;

rojin ۰۳ مهر ۱۴۰۳، ۰۸:۰۰

سلام مجدد ...بنده یه بار دیگه تمرینی رو که خود استاد انجام میده رو انجام دادم و دقیق مثله خودشون! ولی نمیدونم مشکل کجاست که رسپانسیو برام درست درنمیاد....ساید بار و محتوا که در یک ردیف هستند برای من محتوا میفته پایین ساید بار! و سوال دوم استاد گفتن مهم فهم اسن مبحثه و حتما رسپانسیو رو با سی اس اس انجامم ندین اهمینی نداره چون bootsrep همین کارو میکنه....من قشنگ درکش کردم این مباحث رو ولی برام درست درنمیاد! پیشنهادتون رو بفرمایید ممنون میشم

rojin ۰۴ مهر ۱۴۰۳، ۱۴:۰۲