ErrorCorrection
Decipat
- Katılım
- 11 Ağustos 2022
- Mesajlar
- 2.428
- Çözümler
- 4
Üstüne geldiğinde Paddin'i 5px artması için ayarladım ama arkadaki sarı arka plan aşağıya kayıyor.
Nasıl çözebilirim?
Tekrar şu kodu dener misin.Değişmedi hocam maalesef.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<style type="text/css">
body {
margin: 0;
}
* {
margin: 0;
}
.navbar {
background-color: yellow;
padding: 15px 0 15px 10px;
}
.main-div__items > li > a {
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}
.main-div {
display: inline-block;
width: calc(100% - 150px);
text-align: center;
}
.main-div__items {
margin: 0;
padding: 0;
list-style: none;
}
.main-div__item {
display: inline-block;
margin-left: 10px;
box-sizing: border-box;
}
.main_logo {
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.main-div__item:hover {
background-color: #F5FFC9;
border: 2px solid #F5FFC9;
}
</style>
</head>
<body>
<header class="main-header">
<div class="navbar">
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Bu</a></li>
<li class="main-div__item"><a href="#">Bir</a></li>
<li class="main-div__item"><a href="#">Deneme</a></li>
<li class="main-div__item"><a href="#">Yazısıdır.</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<style type="text/css">
body{
margin: 0;
}
*{
margin: 0;
}
.navbar{
background-color: yellow;
padding: 15px 0 15px 10px;
}
.main-div__items > li > a{
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}
.main-div{
display: inline-block;
width: calc(100% - 150px);
text-align: center;
}
.main-div__items{
margin: 0;
padding: 0;
list-style: none;
}
.main-div__item{
display: inline-block;
margin-left: 10px;
}
.main_logo{
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.main-div__item:hover{
background-color: #F5FFC9;
border: 2px solid #F5FFC9;
}
</style>
</head>
<body>
<header class="main-header">
<div class="navbar">
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Bu</a></li>
<li class="main-div__item"><a href="#">Bir</a></li>
<li class="main-div__item"><a href="#">Deneme</a></li>
<li class="main-div__item"><a href="#">Yazısıdır.</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
Kodları atabilir misiniz?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<style type="text/css">
body{
margin: 0;
}
*{
margin: 0;
}
.navbar{
background-color: yellow;
padding: 15px 0 15px 10px;
}.main-div__items > li > a{
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}.main-div{
display: inline-block;
width: calc(100% - 150px);
text-align: center;
}.main-div__items{
margin: 0;
padding: 0;
list-style: none;
}.main-div__item{
display: inline-block;
margin-left: 10px;
}.main_logo{
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}.main-div__item:hover{
background-color: #F5FFC9;
padding: 2px;
}
</style>
</head>
<body>
<header class="main-header">
<div class="navbar">
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Bu</a></li>
<li class="main-div__item"><a href="#">Bir</a></li>
<li class="main-div__item"><a href="#">Deneme</a></li>
<li class="main-div__item"><a href="#">Yazısıdır.</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
Şu kodu main-div__item: Hover sınıfı içine ekleyin düzelecektir.
Kod:.main-div__item:hover { background-color: #F5FFC9; border: 2px solid #F5FFC9; box-sizing: border-box; }
Tekrar şu kodu dener misin.Değişmedi hocam maalesef.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<style type="text/css">
body {
margin: 0;
}
* {
margin: 0;
}
.navbar {
background-color: yellow;
padding: 15px 0 15px 10px;
}
.main-div__items > li > a {
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}
.main-div {
display: inline-block;
width: calc(100% - 150px);
text-align: center;
}
.main-div__items {
margin: 0;
padding: 0;
list-style: none;
}
.main-div__item {
display: inline-block;
margin-left: 10px;
box-sizing: border-box;
}
.main_logo {
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.main-div__item:hover {
background-color: #F5FFC9;
border: 2px solid #F5FFC9;
}
</style>
</head>
<body>
<header class="main-header">
<div class="navbar">
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Bu</a></li>
<li class="main-div__item"><a href="#">Bir</a></li>
<li class="main-div__item"><a href="#">Deneme</a></li>
<li class="main-div__item"><a href="#">Yazısıdır.</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<style type="text/css">
body{
margin: 0;
}
*{
margin: 0;
}
.navbar{
background-color: yellow;
padding: 15px 0 15px 10px;
}
.main-div__items > li > a{
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}
.main-div{
display: inline-block;
width: calc(100% - 150px);
text-align: center;
}
.main-div__items{
margin: 0;
padding: 0;
list-style: none;
}
.main-div__item{
display: inline-block;
margin-left: 10px;
}
.main_logo{
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
.main-div__item:hover{
background-color: #F5FFC9;
border: 2px solid #F5FFC9;
}
</style>
</head>
<body>
<header class="main-header">
<div class="navbar">
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Bu</a></li>
<li class="main-div__item"><a href="#">Bir</a></li>
<li class="main-div__item"><a href="#">Deneme</a></li>
<li class="main-div__item"><a href="#">Yazısıdır.</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
Tekrar şu kodu dener misin?
Kod:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Css-sites</title> <style type="text/css"> body { margin: 0; } * { margin: 0; } .navbar { background-color: yellow; padding: 15px 0 15px 10px; } .main-div__items > li > a { text-decoration: none; color: #4E6E81; font-weight: bold; font-size: 15px; font-family: sans-serif; } .main-div { display: inline-block; width: calc(100% - 150px); text-align: center; } .main-div__items { margin: 0; padding: 0; list-style: none; } .main-div__item { display: inline-block; margin-left: 10px; box-sizing: border-box; } .main_logo { color: #40513B; text-decoration: none; font-size: 15px; font-weight: bold; } .main-div__item:hover { background-color: #F5FFC9; border: 2px solid #F5FFC9; } </style> </head> <body> <header class="main-header"> <div class="navbar"> <div class="main-div"> <ul class="main-div__items"> <li class="main-div__item"><a href="#">Bu</a></li> <li class="main-div__item"><a href="#">Bir</a></li> <li class="main-div__item"><a href="#">Deneme</a></li> <li class="main-div__item"><a href="#">Yazısıdır.</a></li> </ul> </div> </div> </header> </body> </html>
Tam da yeni kod paylaşmıştım, neyse düzelmişse sevindim. İyi geceler dilerim.Oldu hocam teşekkür ederim. Bende eklemiştim de border box özelliğini ama yanlış yere eklemiştim galiba
İyiy Sosyaller.
Tam da yeni kod paylaşmıştım, neyse düzelmişse sevindim. İyi geceler dilerim.
Paylaştım "edit" diye belirterek.Yeni kodu da paylaşın hocam. Belki işime yarar sonradan.
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.