Yeni css öğreniyorum ve deneme amaçlı site oluşturmaya başladım. Ama ne zaman herhangi bir şeye border eklersem o alanın komple düzenini bozuyor. Paddingi ile oynayınca biraz düzeliyor gibi oluyor ama yine de normal olması gibi olmuyor. Border box da ekledim ama hâlâ aynı. Yardım ederseniz sevinirim
Kod :
HTML
<body>
<header>
<nav><!--<label class="logo">Emre Özdemir</label>-->
<ul>
<li><ahref="#">Ana Sayfa</a></li>
<li><ahref="#">Mağaza</a></li>
<li><ahref="#">Siparişler</a></li>
<li><ahref="#">Üyelik</a></li>
</ul>
</nav>
</header>
</body>
CSS
body{
font-family: 'Ubuntu', sans-serif;
}
*{
padding: 0;margin: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}
nav{
background: rgb(54, 56, 56);height: 5rem;width: 100%;
}
ul{
display: flex;align-items: center;justify-content:right;
}
li{
margin: 1rem2rem;background: rgb(3, 216, 84);padding: 0.75rem1rem;border-radius: 20px;box-sizing: border-box;transition-property: all;transition-duration: 0.3s;transition-delay: 0.2s;
}
li:hover{
background: rgb(54, 56, 56);color: rgb(3, 216, 84);border: 1px solid rgb(3, 216, 84);
}
lia{
color: white;text-transform: uppercase;
}
label.logo{
display: flex;color: white;font-size: 2rem;margin: 1rem2rem;padding: 03rem;font-weight: bold;
}
CSS border ekleyince sayfa düzeni bozuluyor
8
●69
- 21-01-2022, 20:41:11
- 21-01-2022, 20:50:33Hocam ben butonun üzerine hover yapınca oranı bozuluyor elementin. Birine hover yapınca o element geriye kalan diğer elementleride doğal yoldan oynatıyor. Benim tek istediğim olduğu yerde kalması. Border 1px bile ekleyince böyle yapıyor, neden bilmiyorumDarkBy adlı üyeden alıntı: mesajı görüntüle
- 21-01-2022, 21:02:52Border normal css ine Border ekleyip rengini transparent yapıp hover olunca Border-color değiştirebilirsiniz.EmreOzdemir adlı üyeden alıntı: mesajı görüntüleEmreOzdemir bunu beğendi.1 kişi bunu beğendi.
- 21-01-2022, 21:07:07Hocam çok teşekkürler güzel ve pratik bir çözüm. Peki bunun neden böyle olduğunu açıklayabilir misiniz ? Çoğu tutorial da falan bunun özellikle böyle yapıldığını görmedim ama yine de onlarda normal bir şekilde her şey olduğu yerde kalıyorMisafir adlı üyeden alıntı: mesajı görüntüle
- 21-01-2022, 21:14:07sorununuzu anladım hocam şöyle anlatayım :hover belirttiğiniz classın üstüne gelindiğinde yapılacak css düzenlemesidir. Siz :hover olarak border verdiğiniz için sadece üzerine geldiğinde border ekliyor. Siz bunu :hover yerine direk li ye verirseniz bu bozulma olmayacaktır.EmreOzdemir adlı üyeden alıntı: mesajı görüntüle
- 21-01-2022, 21:15:07Teşekkürler hocam 2 farklı çözümüm var artık bunun içinDarkBy adlı üyeden alıntı: mesajı görüntüle
