fara

2 سال پیش توسط fara مطرح شد

مشکل در کد css

سلام من یک div درست کردم و میخوام در پایینش فقط یک بردر بندازم اما با اینکه تو css زدم border-bottom، بردر رو بالای div میندازه

ثبت پرسش جدید

نجما

@n.bahreman157 2 سال پیش آپدیت شد

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

1-میتونین به دیو والد (کلاس divheader) ارتفاع بدید

 .divheader {
      margin: 10px 50px 10px 50px;
      border-bottom: 5px solid grey;
      display: block;
      height: 80px;
      }

2-یا اینکه به تگ والد استایل overflow: auto بدید

.divheader {
      margin: 10px 50px 10px 50px;
      border-bottom: 5px solid grey;
      display: block;
      overflow: auto;
      }

3-یا اینکه در کنار کلاس والد از کلاس clearfix استفاده بکنید

<div class="divheader clearfix">

البته باید استایلشم اضافه بکنید

.clearfix::after { 
      content: " ";
      display: block; 
      height: 0; 
      clear: both;
      }

ارسال پاسخ

علیرضا

@alireza.gh147csc 2 سال پیش مطرح شد

سلام
میشه لطفا کدتو بفرستی.

ارسال پاسخ

fara

تخصص : دانشجو

@fjvrse 2 سال پیش آپدیت شد

اين css 👇

.divheader{
        margin:10px 50px 10px 50px;
        border-bottom:5px solid grey;
        display:block;
}
.divnav{
        display:block;
}
.h1s{
        float:left;
        font-family:cursive;
}
.buttons{
        float:right;
        border-radius:10px;
        border:1px solid white;
        height:30px;
        width:100px;
        margin:2px;
        margin-top:30px;
        background-color:white;
        font-family:cursive;
}
a:link{
        text-decoration:none;
}
a:hover{
        text-decoration:underline;
}

اين html👇


<html>
<head>
<title>hellocplor</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" type="text/css" href="propose color.css">
</head>
<body>
<div class="divheader">
<h1 class="h1s">Candelin</h1>
<a href="https://www.filimo.com/" class="buttons" target="blank">Basket</a>
<a href="https://www.tarafdari.com/" class="buttons" target="blank">Contact</a>
<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program" class="buttons" target="blank">About us</a>
<a href="https://www.w3schools.com/" class="buttons" target="blank">Products</a>
<a href="https://www.google.com/" class="buttons" target="blank">Home</a>
</div>
<div class="divnav">
<h2>Welcome to Candelin</h2>
</div>
</body>
</html>

</body></html>

ارسال پاسخ

رایموند

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

@Raymond 2 سال پیش آپدیت شد

درود خوبی...
برای پایین نشان دادن border باید عرض و ارتفاع المان رو تعریف کنید.

.divheader {
  margin: 10px 50px 10px 50px;
  border-bottom: 5px solid grey;
  width: auto;
  height: 200px;
}

ارسال پاسخ

نجما

@n.bahreman157 2 سال پیش آپدیت شد

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

1-میتونین به دیو والد (کلاس divheader) ارتفاع بدید

 .divheader {
      margin: 10px 50px 10px 50px;
      border-bottom: 5px solid grey;
      display: block;
      height: 80px;
      }

2-یا اینکه به تگ والد استایل overflow: auto بدید

.divheader {
      margin: 10px 50px 10px 50px;
      border-bottom: 5px solid grey;
      display: block;
      overflow: auto;
      }

3-یا اینکه در کنار کلاس والد از کلاس clearfix استفاده بکنید

<div class="divheader clearfix">

البته باید استایلشم اضافه بکنید

.clearfix::after { 
      content: " ";
      display: block; 
      height: 0; 
      clear: both;
      }

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

مشکل در کد css

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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