fara

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

مشکل در کد css

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

ثبت پرسش جدید

نجما

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

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

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 3 سال پیش مطرح شد

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

ارسال پاسخ

fara

تخصص : دانشجو

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

اين 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 3 سال پیش آپدیت شد

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

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

ارسال پاسخ

نجما

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

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

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

گزینش سوالات

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

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

تگ‌های محبوب

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