یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
fara
2 سال پیش توسط fara مطرح شد
4 پاسخ

مشکل در کد css

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


ثبت پرسش جدید
نجما
@n.bahreman157 2 سال پیش آپدیت شد
1

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

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

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


fara
تخصص : دانشجو
@fjvrse 2 سال پیش آپدیت شد
0

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

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

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

نجما
@n.bahreman157 2 سال پیش آپدیت شد
1

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

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;
      }

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

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