سلام وقتتون بخیر
این مشکل زمانی به وجود میاد که از فلوت استفاده میکنیم . برای حل این مشکل چندین راه متفاوت هست
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 👇
.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>
درود خوبی...
برای پایین نشان دادن border باید عرض و ارتفاع المان رو تعریف کنید.
.divheader {
margin: 10px 50px 10px 50px;
border-bottom: 5px solid grey;
width: auto;
height: 200px;
}
سلام وقتتون بخیر
این مشکل زمانی به وجود میاد که از فلوت استفاده میکنیم . برای حل این مشکل چندین راه متفاوت هست
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;
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟